#1 TikTok Ads Spy Tool

A Better Way to Make TikTok Ads Dropshipping & TikTok For Business

  • Find TikTok winning products & TikTok dropshipping ads.
  • Analyze TikTok advertisers
  • Get the Latest TikTok Shop Data.
Try It Free

shopify custom templates

Published on: February 1 2023 by pipiads

Shopify 2.0 Templates Tutorial - Create Different Layouts for Product Pages & Collection Pages

all right. what's up, guys? i did a poll recently on my youtube channel where i asked what my next video topic should be, and the most voted for topic was shopify 2.0. so today i want to tok about page templates, which is a new feature of shopify 2.0 that many people aren't using yet. it's a really underrated feature and it can really be quite powerful. one of the most common questions that i get on my channel when i tok about adding a specific feature to a product page is: how can i add this to one product but not to another product, right? how can i add a feature to one product page without affecting the rest of the products on my store? and a good example of this is this tutorial, where i showed you how to add a gift message field to a product. so obviously, this is for products that have some kind of note attached to them, or maybe they have an engraving, or maybe there's something written on the shirt. whatever, it's a customizable product, right, and maybe not all your products are like this. maybe not all your products are customizable, so you want to add this on one product but not on another type of product, and that's really easy to do in shopify 2.0, you just have to use page templates. so i'm going to show you how to do that today. another good use of page templates is to make a completely different design for different product pages. so you may have some products which are like your flagship products, your main products, and you have a lot more to say about them. right you have. you want to tok about their features a lot more. so the example that i've got here is all birds. you know they've got their merino wool or or tree- actually tree fabric- sneakers and they have this product page right the top of it is a typical shopify product page, but then they've got these extra features that they want to tok about below, and we can do this now, thanks to shopify 2.0 and sections everywhere. you know how. previously you only had sections on the home page. now you have them on every page, so you can add sections underneath your main product section on your product page. but maybe you don't need that for all products. so here they've got their beanie and you know they just don't have that much to say about the beanie because the beanie is, like, not their main thing. their main thing is sneakers. so they have these two different product page templates, one for the shoes and probably the other one is just the default product template for regular products, and you know this doesn't have to be limited to just product pages either. so here they have a collection page which is like your typical shopify collection page: right you have a product grid and you have your filters on the left here. but they also have this other collection page under new arrivals. when you click on warm weather, they have collection pages with this nice image banner and look, this is for warm weather and it's really warm image. it really gives the mood. and they have this kind of image banner for every type of collection that is for a specific use, like when their shoes are for a specific scenario, for example, running. they have these people running and to me as a potential customer of all birds, you know that really appeals to me, right? so think about the psychology of a shopper here. i was actually looking for shoes for summer. i was looking for some lightweight, breathable shoes. i had heard of all birds before, so i go on their website and then when i'm looking at their website i open the nav and i see this like best for warm weather. so i click on that and immediately. it kind of confirms my expectations, right, like i'd heard that they make lightweight shoes and then i see that they actually have a collection for warm weather and that makes me a lot more confident as a shopper that this is the product that i need. and, yes, i actually did end up buying these tree runners made of eucalyptus, so it worked. beside product and collection pages, you can also do this on your regular statik pages, like your about page, your team page or whatever. so, like all birds has this um, our story page right, and they're using a big image banner with a video background. then they're using, kind of like i would say that this is a page section and, by the way, i should have mentioned this at the start, but all birds is on shopify. uh, they're one of the most successful shopify store examples. yeah, these are all pretty regular sections. i mean, this is a gif image, which is pretty cool, but you can do something like this on your store as well, using page templates and sections everywhere, which is now on shopify 2.0, by the way, if you haven't upgraded to a shopify 2.0 theme yet, i hope now you're starting to understand why you should, because it gives you so many more options in terms of the design of your website. and yeah, i think that's all the examples that i wanted to give. so now let's jump into my computer. i'm going to show you first how you can add something simple like the note field to just one product template, and then how you can do a product template with a, an additional section, like the alternating information sections that all birds is doing, and then also how you can do the same for collections and for a statik page. it's pretty much the same process for all of them. this is going to be a pretty quick tutorial. so, yeah, let's get started. okay, so let's first tok about templates. what are templates? i think that the most common use of templates is on the contact page. so if you've ever made a contact page in your shopify store using a contact form, then you've had to create the page contact right, and then, down here in the theme template, you choose contact, because every theme in shopify comes by default with a regular default page template and a contact template right, and enabling this contact template would enable the contact form on your contact page and you'd have the same with products right, so on every product page. you might have notiked already that you have this and that there's pretty much nothing there. i mean, i have one template already. you may have no templates at all, or, if you're using a more advanced theme like turbo, you might have two pre-built templates that they allow you to use- maybe three, but you never had the ability in the old shopify to create your own templates- right to create as many as you need- and so one of the biggest advantages of the new shopify 2.0 is that we can now create our own templates. we create as many templates as we need. so here i am inside the theme customizer looking at my gift product example, and i have this message field and it's currently using the default product template. so this message field is on all my products. now you might be used to navigating inside the theme customizer by simply using your navigation and using your site- as a customer would, but you should get used to using this drop down as well. so to get to the default product template, you just go to products and then default product. so i'm on the default product template. i've added this field and every product now has it, but that's not what i want. what i want is just for this gift product to have this field. so what i'm going to do is actually duplicate this template or i'm going to create a new product template on the basis of the default product template, which already has this. so let's go to products and then i'm going to click create template and i'm going to call it with gift note. right, i'm doing it in dashes like this, because if you save it with spaces, shopify will just convert it to dashes anyway. so i'm just doing that immediately. um, so let's just create the template and it might take you to a different page. this is just a preview, right? it might take you to a different product. just go back to previewing the product that you want to see this template on, just so it's less confusing to work on. so now that we're on this template, we're looking at it. this is the with gift note template, and we see that it has the gift note. that's great. now we can go back to the default product template.

Table of Contents About shopify custom templates

HOW TO MAKE CUSTOM SHOPIFY PAGE LAYOUT TEMPLATES, SECTIONS, AND THEMES | SHOPIFY 2.0 TUTORIAL 2022

welcome back graduates. so today I'm going to show you how to create custom page templates with Shopify 2.0, which is an amazing new feature that was released about a year ago, and what that basically means is, um, you have sections on the home page, and whatever sections you have on the home page, you have readily available to create beautiful landing pages on any other page. so I'm going to show you how to create, how to create a custom page template. but then I'm going to use one of us, one of the sections that, uh, We've created for you, and then show you how to set that up as well. I know there's been many requests how to use the section, the FAQ section, as a standalone page itself, so I'm going to go right into it and show you three, two, one. here we go. so you're in the back end of your Shopify store and there's a couple steps on how to do this. you're not going to get a zip file or anything, but I'm just going to show you right here. so if I click customize into my theme, I'm going to see the FAQ at the very bottom right here and it's a nice accordion drop down. and if you haven't had, if you don't have this yet. but you know you really want it. go and check the uh, the other video, the FAQ video. so going down here you have this and it is on the home page. but let's say I want to create a brand new, just specifically isolated FAQ page itself with the section here that you know you purchased or on other themes. so this doesn't just uh, this doesn't just go on our theme, this applies to any other theme. um, when you're on Shopify 2.0. so right over here I'm going to go into my theme editor, home page pages and I'm going to create a new template. so when you see the option create a new template or create templates, you'll know that you are on Shopify 2.0, just as is. so right now I only have contact. so I'm going to create a page template, I'm going to name it FAQ and this will only have the FAQ content in it, and I'm just going to do a based on the default page. now it's going to look like this, and you know it. it looks all weird and jumbled and it doesn't look like it's FAQ page. so right over here there's a preview you can preview, and I don't have a FAQ page right now, and then there's page. you can hide this and what this means is you can hide the page content right here. so I'm just going to hide this and then now I'm going to go and add the section and you have all these sections that you can add to build out beautiful landing pages. but what I'm going to do is I'm just going to start typing in F for the FAQ right over here, and then here is the default and I'm just going to save this. once you have this section, you can go and design it however you want, um with our settings. again, we do have you know options here: Max width. you can also add another section here. so I'm just going to add this and categorize it so it'll look really nice and I'm just gonna do 1200 again. so this top section I can do. let's do General and oh, General, and the bottom section here I'm going to name this. let's say this is for coffee. I'm gonna do our coffee. so, specifically, maybe the general could be shipping. you know about your business, coffee is about the coffee itself, and then you can have another one for shipping, returns policies, things like that, and I'm just gonna save it right here. so now I have this beautiful FAQ page, um and I have questions here. so when I go out of this, what I'm going to do is I'm going to go into my pages here in the back end. I'm going to go into pages and create a page. now I'm going to create this and I'm going to name this title, or I'm going to name this FAQ in the title. and then, right over here, this is where you assign your new custom page template. so this is after, or you can do this before. so I'm going to just assign this to FAQ, the new one I just created. I'm going to click save and take Shopify a little bit to um update, because it does take a little bit for Shopify to update. but here is the new page and it doesn't have any of the other content except strictly the FAQ. now, when you want to assign this to the navigation here, just going to reload this in the theme editor. when you want to assign this in the navigation, you'll go back into your back end and go and click on navigation and let's say, I want to put this in the main menu, even though sometimes it's most of the time it's in the footer- I will do add menu and you can start typing in pages and FAQ, and we'll take Shopify a little bit, but it takes a little bit online store. we're gonna click preview and it hasn't updated yet. has not updated yet. perfect. now we have the feq in the navigation right here. when I click on it. it's going to be. it's going to drive me to the new FAQ template that I just created. now this can work for any, you know, any theme. the same logic here, but this is the same. this is the way to create the content page now. but you go into the theme editor, you create the and you name the title that you want build out the landing page, and then you go create the page and then you assign it to the template and then you assign it to the navigation afterwards. uh, so let's say, for example, I'm going to go into here and, um, I want to create another page. and let's say I want to create a page, but it's going to be new landing, and the thing is, if I already have an FAQ page and I have already the content in there, um, and I, I know for myself it's going to have an FAQ section. you can do it based on the FAQ. you can do it based on whatever previous templates you have. so this means that all my content for the FAQs are going to be there, so everything's there. then I can go and add a new section, so I don't have to continue re-writing in content as well. so let's say I want to add a, a testimonial slider, and I'm just going to do that. right above here, I'm going to click save and then I'm also going to add a let's see agency. what else does do? we have and and Don have um image Banner. so I'm just going to do an image Banner and then I have a testimonials, then I have a, you know FAQ. but that's essentially how the custom page template works. if you do need help, reach out to hello ecomgraduatescom and we'll be sure to help you. hope this video did help. please like, comment and subscribe, as it does help the YouTube algorithm and we can. we can create more videos, how-to videos like this to help you. thank you.

Shopify Tutorial for Beginners 2022 (FULL Store Setup Guide)

in this shopify tutorial, i'm going to take you through, step by step, how to build a professional shopify store from start to finish. we're going to cover every single step, from signing up to shopify to launching your finished store, ready to sell your products. that includes choosing a theme, customizing your store website, adding products to your store and also important things like setting up your legal pages, your payment providers and your shipping information. i'm also not going to waste your time rambling about things that aren't important and then try to sell you a drop shipping course for 9.97. this video will simply help you getting your shopify store up and running as efficiently as possible, while also learning how to use shopify. so let's get started. so the first step is to go to medicsmediacom forward slash shopify or simply click on the link down below in the video description. this will get you a 14 day free trial for shopify. so do that now and we'll go from there. great. so once we're here, we can simply type in our email address right here and then click on start free trial, and then we also gonna have to set a password for our new shopify account, and down here you can also see the current url of your new shopify store now. you can change that if you want to, but eventually you're going to want to get your own branded domain, something like medicswatchescom anyway, so i wouldn't worry about that too much. and then you can click on create your store. now they want to ask us a couple of questions about our business, which we can actually simply skip right here, and then they ask us for our name and business address, which is actually required in order for us to create a new shopify account. so fill that out right here and then click on enter my store. awesome, so that will take us inside of the shopify dashboard, which is what you're gonna learn how to use in this video. however, we're not gonna cover every single thing here in the shopify dashboard, because a lot of it is self-explanatory and i think the best way to learn everything is to actually start building out your store and then learning by doing learning the features when you actually need them. so i want to dive right into the fun stuff and start building out our store. alright, so the first step is to go ahead and choose a theme for our new online store. so we're going to go to online store here on the left side, then we're going to go to themes, and then we can see that the current theme that is already installed on our online store is the dawn theme. this is the default theme that comes with every new shopify store. now, choosing a theme, you want to make sure that the theme already is kind of the design that you're looking for, the structure of the of the website that you're looking for. so you have a minimal amount of work you have to do until you are ready to launch your store. so what you can do is you can go to actions, click on preview and then you can see how this current theme is actually built up, and then you can decide on if this is actually the right theme for you or if you want to choose a different theme. now, if you want to choose a different theme, you have a couple of different options. so here, when we scroll down, we can see that there are some free themes that we can use that come with the shopify plan, or it can also go to the shopify theme store right here and then also check out paid themes, which you're gonna have to pay for. so what you can do right now is to go through some of these options. i would recommend to first click on explore free themes right here and see if any theme here really fits your brand, your, your kind of store or the products that you want to sell. so eventually, all we have to do then is to add our products, add our branding and add all of our content, and then our store will be ready to go. what i'm gonna do in this video is simply choose one of the free themes right here. so i'm gonna click on explore free themes and i'm actually going to go for the brooklyn theme right here, so i'm going to click on the brooklyn theme. they also have a couple of different styles for each theme, so you can click on different styles and decide on which one you like the most. i'm gonna simply stik to the classic style right here and then i'm gonna click on add to theme library here on the bottom, and then, once the theme has been added, we can see it right here, and in order to actually change from the default theme to the new one we have just added, we need to go to actions right here and then click on publish, then again confirm right here, and now our theme will change to the new theme that we have just added and now we want to start building out our store. so we're going to scroll up again and then we're going to right click on customize and click on add link in a new tab. this way, we still have our shopify dashboard open in the background and we can work on our shopify store in the shopify editor right here at the same time. so now we are in the editor of shopify, which we can use to build out our online store website. so i'm going to give you a quick overview over how this works and then we're going to start to build out our website. so here on the top you can switch from different pages. so right now we are on the home page. you can also switch to your product pages, to your collection pages, blog pages and so on. but most of the work we're gonna do here on the home page and you're gonna see that all the other pages- like product pages, checkout pages- they're already built up for you, so there's not much design that we have to do on these pages. then you can also change from desktop view to mobile view or full screen view. so eventually you want to make sure that your store looks very good on mobile as well, because a lot of the traffic nowadays online comes actually from mobile phones. but however, we're going to build out everything here on the desktop view. then the site is built up in different sections, so it always starts with a header section here on the top and then on all the way in the bottom there's the footer section where you're going to have a couple of links and your legal pages and so on, and in between the header and the footer there are the sections which you can decide what you want to put in here. so by default we have a slideshow section here on the top where you can feature your store or your products, and we also have a menu here on the top which is part of the header. then we have another section, the rich text section. right here we have collection list, we have feature collection and so on. these are all sections that you can add manually and also remove. so, for example, if you want to remove the which, the rich text section, we could simply click on it and then we can click on remove section right here on the bottom. now, depending on what screen size you have, this menu might also display here on the right side for you, but for me it's here on the left side- then you can click on remove section right here and, just like this, this section is now gone from our website. you can also add new sections by clicking on add section here on the bottom left, and then you can decide on what kind of section you want to add. so let's say, we want to add this rich text section. again, we can simply click on which text section, then it will add it here on the bottom and now we can also drag it to another position. so we can drag it here up to maybe below the slideshow, and there we go. we have this section now on our home page again. so let's actually start building, and the way we're going to do it is we're going to simply go from top to bottom and we're going to start with the header. so we're going to click on the header here on the left side and the first thing we're going to do is to add our logo to our store. so i'm going to click on select image right here and then we're going to choose the logo that i have prepared for this specific store. so i'm going to click on upload an image and then i'm going to choose this image right here, which is:

More:A New Way To Dropship

The Best Shopify Themes for Your Online Store in 2022

in today's video, i'm going to show you how you can make one of the best online stores out there with ecommerce themes that are a designed to be fast and also high converting. so shopify has rolled out five new free themes and 65 updated paid themes that work with online store 2.0 features- literally so exciting. so i'm going to take you guys through some incredible shopify themes so that you guys can decide which one is right for your business in 2022.. each one of these offers industry leading performance and deep customization. but can we just get a little sneak peek here? okay, let's look at some of these amazing themes. so, first of all, look at this one- this one's called context, and i just feel like it would be perfect for someone who is starting like a clothing store but maybe wants a bit more of an editorial vibe. and then this one over here. look at this one- this one's called loft, and i feel like it would be so good for anyone selling home goods. so that's just a little preview, but definitely stik around till the end of this video, because i'm going to go through a ton of themes and just discuss the specifics on who they're good for and how they can work for you and your business. [Music]. okay, guys, so what exactly is a theme? so, if you think about it, themes are kind of like the skeleton of your online store. it's just going to define what your store is going to look like. so, for example, in this theme over here, this has one main image for the banner, but if you look at this one, it's going to allow you to put two images for the banner, and a theme is also going to define some of the functionality of your store. so, for example, when i click the cart on this theme, it pops up as a sidebar and then when i click the cart on this theme, it's just going to take up the whole page. so, if you guys don't already know, when you create your online store with shopify, you can choose between either free themes or premium themes, and it's really nice because there are more and more free themes that are being released recently. so there's tons of options there. and then, as of now, there's also 60 paid themes and you can find a theme that works really easily for yourself because you can narrow it down by industry price and then just basically find the design that you're after. okay, i know you guys are wondering: are shopify themes better than other themes out there? and i just want to say really quickly, just want to say this from the jump: shopify themes are amazing. they're amazing. first of all, if you are not tik savvy, shopify themes were going to be perfect for you because all of the features that you need already come built into your theme. you're probably never going to need to hire developer because 99, if not 100, of what you need already comes built into your theme. but but if you are a perfectionist like me and let's say, you do want to do like a little tweaks and like edit, you can edit your store without touching any code. so let's just look at my screen here for one sec, because i actually do think this is really important. so if we look here, you can see that i can easily edit these sections and these blocks to look exactly how i want and i can add apps, and i can add apps through app blocks. like there's so much flexibility here. obviously, hiring a developer can get really expensive really quickly, so this is a really good option if you are just starting. maybe you're trying to save a bit of money. and another thing that i really like about shopify themes is that you can get set up in literally less than 24 hours, like that is not an exaggeration. it is so fast. you could get set up between zoo meetings. you can get set up while your bagel is toasting. you can get set up before your roommate is done with the shower. okay, i don't know, probably not that fast, but one thing is for sure: you can definitely get set up before the pandemic is over. that's a little food for that. so this could be your sign to get going. so it is really quick to get set up. but it's also really good at getting your vision into the real world. you know when you have like an idea in your head and then you're like, okay, like i know what i want this to look like. i have this idea in my head and then you put it out into the universe and it's just like not really what you were hoping it would look like. i feel like that's definitely happened to me before. but i feel like with shopify themes, you can. you can get your branding and your vision out into the real world because you just have so much control over styling, over everything. and have you ever been on a website on your phone? and it's just like not as good as it would be on desktop. but with shopify, since themes are responsive, i feel like that just pretty much guarantees that your store is going to look dope, whether it's on the phone, whether it's on the desktop, wherever. we've all gotten to be very impatient creatures and, let's be real, no one really has the time to wait for even like four seconds for a page to load. but with the online store 2.0, let me tell you the speed and performance. it's good, as long as we don't overdo it with the heavy videos and like heavy images and that kind of thing. these themes are going to be so fast, guys. not nearly enough people pay attention to this, but shopify's themes are going to be highly accessible by design, and i think this is really important to me because everyone has different abilities, like, for example: some people might not be able to read small type, maybe they're just unable to see, maybe they're color blind. some people are unable to use a mouse to click on products to purchase, so they're going to rely on a keyboard alone to navigate the web. and with any shopify free theme that you choose, or paid theme, you can be sure that it's meeting the latest accessibility standards baked in by default. shopify actually requires the people who are making these themes to make sure that users can navigate through an entire theme with only a keyboard and a screen reader. i love it. i'm here for the inclusivity. last thing that i really like about the new online store 2.0 themes is that you are fully covered when it comes to support. like, if you decide to get any free shopify theme today, you would get an hour of free design time and in those sessions, the support advisors just have tons of ideas on how you can get more sales. and if you got a paid theme, you can chat with someone who can give you ideas on how to get sales too. so, literally, support in every direction. all right, guys, this is the age-old question: should you go for a free theme? should you go for a paid theme? all right, here's the t. so i feel like if you are just starting out, if you're just getting your feet wet, a free theme is a good option, because there's going to be light, they're going to be flexible and if you're looking to have the ability to tweak, the ability to get your theme super on brand, you can definitely do that with a- a free theme you can get so granular to the point where, like, you can choose whether your buttons are going to have rounded corners or sharp edges. you know what i'm saying. so i do love a free theme, but nothing hits like a good paid theme. this is just my opinion. i find that with premium themes is just such a breath of fresh air because you have so much more control. you can get really granular with your settings and your designs in a way that's just not as possible to that level with free themes. for example, you can add animations, you can have product details pop up on hover, you can even change the spacing between letters, and those are just to name a few. and i think i mean these themes aren't just made by random people. they're literally made by shopify's theme store partners, who have been building themes for over a decade. developing good themes for you is their entire business, so they always want to ensure that their themes are on point, that they're giving you incredible customer support. so, yeah, there's just nothing like a good premium theme. so if you are new, a free theme is going to be great, but if

More:47 Listings and 1 Sale in the first 72 Hours of Drop Shipping on eBay

Customize your Shopify Theme FAST | How to Design Shopify Store 2021

let's be honest, your store design matters, and if you have a really ugly site, people are just going to leave and they're not going to purchase from you. so in this video, i'm going to show you exactly how to customize your shopify store design. as soon as someone comes to your site, they only have about seven seconds before they decide if they want to look longer on your site or leave. so those seven seconds really matter and design matters when it comes to that. you want to make sure that your site is eye-catching and it really speaks to your ideal customer. so how do you do this? you really need to pick out your shopify theme and make sure that it works based on what kind of imagery you have. if you have a lot of really great big images, then pick a theme that's going to highlight those. but if you don't have a lot of great product shots, then you want to make sure that you pick a theme that's not going to be heavily reliant on that. once you've chosen your shopify theme, then it's time to customize it, and this is where it's important to create different assets, choose your fonts and colors to make sure that it's appealing for your ideal customer. so this is super important, but a lot of times people kind of overlook the design step. so i'm going to show you really quickly how to actually customize your design in the back end of shopify for both your home page, collection page and product page. so to get here, you're going to click on online store and then you'll see themes there from the list. so now that we are on the themes page, you can see your live theme here. this is what your customers are actually seeing whenever they come to your site, as well as your online store speed. we've done another video on how to speed up your site, so i will link that in the description below and in the info cards above as well. and you can also see the theme library so you can upload your theme if you've purchased it somewhere else, or you can explore the different theme options available. so, for example, if you click on explore free themes, you'll actually see a pop-up of all of the different free themes that are available here. the one problem with this is, if you click into it, you can't really see how the site overall looks, as well as how it looks on mobile. you can just kind of see the different styling aspects. so what i do recommend that you do is actually visit the theme store. so if we just click on this here, you can see the full theme store, and this is both free and paid themes. so what i like to do whenever i'm trying to decide on a theme for a shopify store is i'll actually go to all themes up here at the top and then you can see the sidebar here of sorting options so you can actually sort through and you can see. you know, based on you just want to see themes that are just for single products. so if you click on that, then it shows you just that product or specifications on the right hand side so you can better narrow down what kind of theme that it is that you are looking for. so if we unclick this, let's just go ahead and go with a free theme and we can click on free here and now we can see all of the different free themes. that, again, we did see in that pop-up already. but the difference is now we can actually click on the theme, we can again see the different styles that it includes as well as we can view the demo. so if we click on this here, we can now actually view the demo of the theme, see exactly how it looks, as well as a really important feature, which is seeing how it looks on mobile. so if we click on this mobile phone device, we can then see how it looks on mobile devices. so we also just posted a video about how important it is for mobile devices and stylizing your site. so i'll also link that below if you want to get a little bit more information on how to make sure that your site is really performing well on mobile devices. so if you decided that you wanted to go with this theme, you would just hit add theme here. let's go back to our shopify store backend and we're just going to go ahead and use the default brooklyn theme that we already have set up. so you have a couple options. you can click on actions. you can rename the theme, duplicate it so that that way you have a copy of the original. you can also download the theme file and edit the code. so this would be if you knew exactly. you know specific things that you could edit in. or if you were a developer, you could go in and edit the code. you just want to be careful here because you don't want to make any changes that you're not going to be able to fix, and then it's going to edit your site and you're going to have issues. you can also change the languages of how things appear on your site, so this would be more tiknical terminology. so you can go in and do these different options. but what we're going to be doing in this video is we're going to be customizing this theme. so i'm just going to go ahead and click customize here and now we can see here we've got some default things added in on the left hand side that we can customize as well, as this is the default setting. so we're going to start going through and doing these different options. i do want to mention real quickly that this is just a test site that i'm using for this video. so all of the images and products that i'm using are from a company called rifle paper company. if you like any of the products or images that are featured here, definitely go check out their site at riflepapercodecom. so back to our site here. let's just start off first with the header area. so you can see, here this header area is going to be default and standard throughout our entire site and that's right here, with the logo that we will change out, as well as our navigation. also, if we scroll down to the bottom, you can see here there is a footer area that's going to be the same throughout our site as well, and then all of these areas in between are specific to this home page design. so we'll go ahead and do the header and the footer first, and then we can come back to the home page design. so let's click on header and then we can see all of the options that are specific to this header. so first off, we can add in an image here so we can hit select image, and i've already got a few added in. but you could just click upload and upload that from your computer as well. but i'm just going to add our logo in, click on it and hit select. we can then see that we can change the width of this so we can make it bigger if we wanted, or we could make it smaller. all the themes are going to have different options based on the theme that you choose, so you're not going to see exactly what i'm seeing in terms of the options here, so you'll just want to go in and play around a little bit. we can also change the color for links and icons and have a transparent header. so right now we have- this is our big slideshow image and we have our logo and stuff laying on top of it. if we didn't want to do that and we wanted it to be a white bar behind it or another color, we could just click on this here and now we can see that's a little bit more prominent. so let's go ahead and leave it like that. if you were going to have your logo over the homepage slideshow, this theme does have additional options, like you can add a white version of your logo or change the header, links and icons, just to make sure that it shows up a little bit more. we can also see here we have different types for navigation. if we wanted it to how we wanted the navigation to display, we will just keep that as it is. we can also see we could change the menu out, so we just have one menu for the main menu area here, but we could go in if you had multiple different types of menus and you could change that out. and there is a secondary sidebar menu which would, i'm guessing, show on mobile devices. so we'll just keep that at the footer menu for now. and lastly, we have different things here for the announcement bar. so that's this up here at the top, so we can choose to only show this on the home page. change out the text.

Shopify Debut Theme Customization | Debut Theme Design Tutorial

all right, guys. so in this video i'm going to be showing you how you can go ahead and customize your debut theme within shopify. so debut theme is the theme that all shopify stores start out with by default when you go ahead and start a shopify store and if you haven't already opened your shopify store yet, you can start your 14 day free trial by clicking the first link in the description. so i figured i'd make this video because debut theme is one of the most commonly used themes, because it's the one that all stores start out with, and the view theme actually looks really good. so right here we can see that this is what debut theme looks like when it's first installed, with absolutely nothing filled out. so we can see that we have where our logo should be. we have a big header right here with some text. we have an image here, we have three images with text. below here we have a uh empty collection and we have another um header type image. right here, another wallpaper image. we have some testimonials and we have three images down here. and then we have the footer. so right now we have a nice little template, but it's blank. so if you're looking to go ahead and fill out your um store using debut theme. the first thing you're going to want to make sure you have is a few key things. so i'm going to bring up a notepad and just make sure, because before you go ahead and start the design process, you're going to need a couple things. so the first one is going to be a logo. so i assume you already have a logo at this point if you're ready to start your store design. but if not, then make sure you get a logo first, because everything else is going to be based around the logo. and then we're going to have a color scheme selected and normally this color scheme is going to be derived from colors from your logo and typically you're going to use one to two colors to base your entire store around. and, like i said, these colors will be derived from the logo. and the next thing we're going to need is a couple wallpaper photos so we can see. we're going to need some photos to go ahead and put back here in this header. we need some photos to put back here and this header as well. so if you have any large photos related to your business, go ahead and upload them to your computer or put them all in one folder so we can go ahead and use them as backgrounds here, and, if you don't, you can use different sites such as pixabay to find free stok images that you can go ahead and use. so let's just type in something like fishing, so if you had a store related to fishing, you could go ahead and just look for different stok photos here. or maybe you have something related to yoga or fitness. you can type in a lot of different niches, depending on what your store is based around, and you can use some of these wallpapers to go ahead and put back here. now, obviously, i do think it's better if you have your own custom photos, but uh, you know, not everyone's gonna have that starting out. so if you don't, you can go ahead and use pixabay to get some related photos so we can see that, based on the template here, we're gonna need at least one and two bigger photos, and then we're going to need about five smaller photos to go ahead and put in here, in here and down here. now, one thing to keep in mind is we don't have to go ahead and utilize every one of these sections, and i'm going to show you how you can add and delete sections. but you just want to go into the design process with all of these different things in place already, because it's going to make things a lot easier. so make sure you have a logo, select your color scheme based on the logo, have a couple of wallpaper photos, have about five, you know. maybe, maybe in five to ten smaller photos, they can be in your product, they could be something related to your business. but just make sure you have five to ten smaller photos and then make sure you just have, like, business details, so like slogans, taglines, selling points, uh, just different type of details that we can use to go ahead and fill out this uh page with. so, that said, i'm gonna go ahead and get started with customizing this. so, in order to customize the theme, all we have to do is come over here to online store themes and then click customize. now i already have, um, all of the stuff that i'm going to put in to the design, all the details that i'm going to put into design, prepared ahead of time, which is, like i said, what i would recommend you do as well, because getting all of this is pretty much the first half of the work done. it's just getting what you're going to fill in the store with, and then, once you have this, it's literally just about filling in and then customizing different sections and getting rid of certain sections. so where we pretty much start things off is with the header. so if we open up header right here, the first thing we need to do is upload our logo, which we can do right here by selecting an image. so all we have to do is click upload and i'm going to go ahead and upload a logo right here and i'm going to go ahead and click select and then we can go ahead and customize our logo width right here. so i'm going to go ahead and make it big and we can choose whether we want this centered or to the left, and i'm going to keep it to the left right here. and the next thing we can do is change the menu we have here. we're going to just keep this as the main menu and then we can come down here to announcement bar, and a lot of the time you'll just go ahead and show an announcement mark so we can kind of put an announcement up here. so this is where you can put something that's relevant to your business, whether that's, you know, like a discount, you're running a promotion, you're running free shipping or just any type of details really that have to do with your business. so in this case- uh, the example design i'm going to be going for is a local cookie business, so i'll go ahead and put something like this and then down here we can go ahead and paste a link if we want this to link to anything. so if you are promoting, like a specific sale, then you could have this link to a specific sale. in this case, i'm going to go ahead and not link to anything. and this is where the second part- right here, the color scheme- is going to come into play. so we want to make sure that our store looks fluid and looks like it kind of blends together. we want to make sure that it actually looks good. so in order to do that, we need to have a set color scheme. we can't just have random colors wherever we want so we can see how if our logo is brown, then we probably want to stik to this type of color scheme. we wouldn't want to come down here and make this any color like this, because that just doesn't fit in at all. so what we want to do is find the exact color from our logo. take one of the colors from our logo and there's one of two ways you can do that. one is with a photo editor like photoshop, which i'm going to do right here. i'm going to just use the color picker and in this case, the most prominent color in the logo is this darker brown. so i'm going to use that and then i'm going to take this six digit code right here and use this to match the exact color. now, if you don't have photoshop or photo editor, you can just go on google and search up hex color finder and actually, if i go really quick, if we go to hex color, if we go, actually i believe it's hex color finder. uh, yeah, it's this site right here. so, html- color codesinfo. you can come here, you can upload, uh, your logo like this, and then you can just click and you get the same exact color code right there and we're going to be using this code for the rest of our designs. we're going to go ahead and put in that color and now the brown goes ahead and matches our logo right here. and as far as the text for what's going to go up here, normally you're just going to decide what looks better on the background color between white or black. so if we go to black, i personally think that white looks better, so i'm going to go back to white. and now we're done.

How To Design A CUSTOM Shopify Store THAT SELLS!

Hey friends, Andrew here, hope you're well. In today's video, I'm going to show you one of my favorite Shopify apps to completely customize and transform your store in only about 10 to 15 minutes from scratch. so, without wasting time, let's jump straight onto my laptop here and i'll show you, step by step, how to build a beautifully custom shopify store with this no code page builder app- incredibly important considering that your store represents your brand and your vision. and, by the way, i'll be giving away this exact store i've built in this video to a subscriber. more details at the end of this video. so, to build out a custom shopify store today, the very first thing you want to do is go on to the shopify app store. actual first step is to get shopify, if you haven't yet already. and if you haven't yet already, i'll drop a link to an extended free trial down below if you want to follow along with this video. now, once you have your shopify store, go on to the app store and then this is where we're going to get a crucial tool, and this app is going to allow us to build and design a shopify store without all the custom coding, and it's called gem pages right here, so gem pages. they're known as this no code page builder on shopify, and it's really useful in building a high converting store without code. it's essentially a drag and drop builder that myself and the team have used to design custom shopify sales pages, and the plan of attack today is to create a custom one product store simply by using the gem pages drag and drop tools right here. i've spent some time before this video creating the brand and all the assets like product renders, brand name and whatnot. i'm calling it to charge because we all need to charge our devices. that's terrible. i know i have all the assets to go in my folder right here, as you can see, and so what we're going to do now is build out our page with gem pages using all the files that i've created here. so head on to the dashboard and then click create new. from here is click more types and you can see that you're able to create a bunch of different pages based on what you want to go for: so a landing page, a home page, a product page, etc. and so let's just click, for example, home page. so there's a whole bunch of home page templates here. there's also a whole bunch of landing pages. the theory here is: i'm going to build a one product store, so i'm going to use a landing page only, and i found the one that i want to use, and it's bluetooth headphones. you can click preview to preview the template first, or you can just click start editing. so i'm going to click start editing. i'm going to give the the page name a name, and then click header and footer. i want this off only because we're creating a one product store and we don't want a header and footer at the bottom. really quickly though, you can use a completely blank canvas, but if you want to get up and running really fast, like in 15 minutes, then it's good to use a foundation such as a template. on the left hand panel you have all your tools and drag and drop widgets. you can see that literally anything can be customized. you can literally drag and drop and select an image, new images. you can go through the widgets here and literally customize every single component of the page, unlike the typical shopify builder. now i'm going to continue building what i've built off this video. so, after spending about 15 to 20 minutes on this page, here is exactly what i've come up with so far. there are still a few things i want to add to this page to clean it all up. so let's do it together while i walk you through the design process and the thinking behind it. the beauty of gem pages is you're able to drag and drop absolutely anything in. so let's say, i want to add a logo, so what i'm going to do is drag and drop the image tile, then click images and click replace image. then i'll find the transparent logo that i have, and then we're going to slightly resize it because it's probably going to be too big. so we're going to resize this. i'll go with 20, and so now we have a logo up there, so we're just going to leave it as it is the copy that i have up here. the fastest portable charger, you know, just assuming it probably is, and then we have this really cool animated cta button here, something that you typically don't see or get the option to add in shopify, but with gem pages we're able to do that, and we also have a countdown timer. these are all widgets that we can drag and drop into this page here, also have this really cool sort of uh animated counter that comes up, and then, of course, we have the product itself. i'm also going to change the button color here. so, going down to bottom color under background color, what we're going to do is change it to this font color. here you want to take the hex code, this little hashtag code. here i'm going to click copy, scroll back down to the background color, drop the hex code into here and it should update automatikally. and there we go. it's looking much nicer already. here is the product itself and of course we have that same cta button here, and so we can easily remove some of these images. we can remove some of these logos as well. if you click icon list, you can see the items here. you know, for example, i don't want the authentik product over here. i don't really know what that means. so over here i'm gonna click the rubbish bin icon, delete this and if i really wanted to, the. we've got this nice purple theme going on here. i'm going to add some purple into the background here. so by doing clicking the background box here, click design, going down to background, we can again use that hex code right, and then bring down that transparency just slightly, just like so, and that is looking much nicer. i also have a bunch of usps here unique selling points as little boxes. we have a carousel with images here. the tik specifications are drop down boxes. essentially all of these elements, including even this comparison box here, is all added just through widgets. there are so many powerful widgets here that we can use, including even crazier things. so let's say, for example, share buttons. we can add element here where we can get people to literally share all of this and share this page on their socials. and we also have other crazy elements, like we've got video pop-ups, we have video integrations, countdown timers. like we said, i believe there's a before and after module here. so this before and after module is super powerful for those who have a product that demonstrates a before and after. if you did not have gem pages, something like this to implement would take a lot of time. it would take a lot of coding as well. you can start to see just how easy it is to change all of this up. so, yeah, this is what i've come up with, and this is so much more custom than what's available on the shopify template pages, unless you want to hire, you know, a developer, a shopify liquid coder, to build out something for you separately. and i've done this in literally 15 to 20 minutes and it's a whole bunch of fun too. it's also pre-optimized for a whole bunch of different platforms, such as mobile and tablet, etc. you want to go through each device and make sure that it's correctly optimized for each device. here we want to change out the font color, we want to reposition the buttons, etc. so we want to build for desktop and mobile. so we've gone from essentially. this don't get me wrong. it looks great as it is already, but we very quickly freshened it up and integrated into a single home page, a single page a1 product store, and we also have this really neat looking unique selling point section here where we call out all the features and the benefits and we have text specifications. you know advanced drop down boxes- here we have comparison boxes. here we have

Recommended

TikTok Ads Cost Other Article

Other Latest Article