shopify editor
Published on: January 28 2023 by pipiads
Table of Contents About shopify editor
- Shopify Debut Theme Customization | Debut Theme Design Tutorial
- How to customize your Shopify store || Shopify Help Center
- How to use the bulk editor and actions || Shopify Help Center
- Shopify Tutorial - How to Edits Products in Bulk using a CSV file
- Shopify Tutorial for Beginners 2022 (FULL Store Setup Guide)
- Customize your Shopify Theme FAST | How to Design Shopify Store 2021
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 customize your Shopify store || Shopify Help Center
Looking to upgrade the look of your online store? Great news: Shopify’s released a new set of free themes and an improved theme editor. We’re going to break down the Online store 2.0 theme editor and see how you can use it to create a fully customized look. Hey everyone, Nadeem here from Shopify. Online store 2.0 allows you make creative changes to your store without touching any code. There are six free Online store 2.0 Themes available on the Shopify theme store at the moment. These include Dawn… Craft… Crave… Taste… Studio… and Sense. Vintage themes like “Brooklyn” won’t have the features we tok about. Consider upgrading to a 2.0 theme for full access to these options. To find your “Theme editor” from your Admin, click “Online store”. Your “Current Theme” is what customers see when visiting your store. Click “Customize” beside the theme you want to edit to open the “Theme editor”. Let’s dive into 2.0!. 2.0 themes are made up of three parts: Templates, Sections and Blocks. Templates are the pages in your theme editor that you can customize to give your shop a consistent look and feel. To access these templates, open the drop down menu and click each option to load that template in the editor. You can create new “Alternate” templates for Products, Collections, Pages, Blogs and Blog posts. This lets you modify specific content on a template, like hiding the price on one product, without changing all products at the same time. To begin, select the template you want to edit in the menu, Click “create template”. Name it and click “Create Template”. Edit the content you want to adjust in the new template, like hiding the product’s price. Now click save. Now find the content you edited in your admin. You'll then need to assign the new alternate template that you made to the content you edited. For more information on applying new templates, check out the links below. “Templates” contain “Sections”. Some sections are specific to the template you’re viewing, while others can be added to most pages. Sections give you flexibility and control over your shop’s ideal aesthetik. All themes include “Statik” sections like the “Header” and “Footer” on every page of your store. You can’t move or delete these sections, but you can edit them. You can add sections to your template by clicking “Add Section”. Now you can choose from sections like Blog posts, Collection lists and more. Sections come with their own options that you can access by clicking the section name. These options can change the look of your section, including the height, width, position and more. Using the 6 dot icon, you can move “Sections” to place them where you want On my “Homepage”, I’ll move the “Image with text” section below the “Rich text” section that mentions my sale. To do this, I’ll grab the section by clicking the 6 dot icon and drag it below. Now my image is where I want it. Most “Sections” are made up of “Blocks” that have their own options and represent the content of each section. You can use blocks to add text, images, links, buttons and more. “Blocks” within sections can also be moved. I’ll move the “Shop now” button in the “Image with text” section above the text that mentions my leggings. I’ll do this by opening the “Images with text” section, clicking and dragging the “Button block” above the text block. You can add “Blocks” to make further customizations. I want to add another “Button” to my sales information. I’ll do this by clicking the “Rich text” section that has my sale information and then the “plus” symbol to add a “Button block”. Now I have a new button where I want it and can edit it further. by clicking the “Block” I created, I can change the button's name and create a link to redirect customers to places in my store. You can hide “Sections” and “Blocks” by holding the cursor over each option and clicking the eye icon To delete a “Block” or a “Section”. click on it to open it’s settings and click “Remove Section”. Theme settings are where you can put your artistik stamp on your shop. To access these options, click “Theme Settings” in the bottom left corner. You’ll see familiar customization options from vintage Shopify themes like Colors, Typography, Social Media and Checkout. With Online store 2.0, you now have access to even more options. If you want to play with the width of your shop, head over to “Layout”. Customize your call to action buttons like “Shop now” and “add to cart” through the “Buttons” option. Want your variants to stand out? Change the thickness and Opacity in “Variant Pills”, Your customers matter most. Customize areas that require customer input, like the quantity selector, by using the “Inputs” setting. Product blog and collection cards are areas in sections that display multiple items. You can edit the shape, style, color and more. under the “Cards” setting, You can even adjust the borders and shadows around your content in ”Content Containers”. These same settings can be adjusted under options like “Media”, which is the visual component of your shop, like your images, “Drop downs and popups”, like your add to cart pop-up, And “Drawers”, such as a collapsible navigation menu. Under “Badges”, you can adjust the position, shape and color of any sale or sold-out badges that appear in your store. “Search Behavior” lets you enable product suggestions and their related options. Finally, let’s tok dollars. Under “Currency Format”, you’re able to show currency codes for your product cart and checkout prices. After making customizations, don’t forget to “Save” your changes. Now you know how to take the style and feel of your shop to the next level using the Online Store 2.0 themes. For more information on everything shown in this video, visit helpshopifycom.
More:Facebook Analytics Reports
How to use the bulk editor and actions || Shopify Help Center
You can speed up your work in the Shopify admin by using the bulk editor and bulk actions. These tools save you time and make your workflow simpler, So you can spend less time on everyday tasks and more time building your business. Bulk actions are available on many pages like “Orders”, “Products” and “Customers”. Check out the link below for a full list of pages and their bulk actions. You can use bulk actions to do things like tag a set of new products or print packing slips for all your unfulfilled orders. To access bulk actions, click the page that you want to perform a task on. In this example, I’m opening the “Products” page. First, you need to select the items that you want to apply the bulk action to. There’s four ways to select items. To select items one at a time, click the checkbox next to each item that you want to select. For a range of items, click to select an item, Then hold the shift key and click another item. This selects the first and last items you clicked and all items in between. To select all items on a page, click the checkbox in the header at the top of the list. And if you’d like to select every item listed on all the pages, click the checkbox in the header at the top of the list. Then, on the right-hand side, click “Select all 50+ products in your store”. After you select all the items that you want to work on, choose a bulk action to perform. Click “More actions” From the drop-down menu, click the action of your choice. You can also scroll for more actions. I want to add new tags to my products, so I click “Add tags”. Next, make the changes that you want. If you selected all items on all pages, then you might need to wait for the bulk action to complete before making any more changes. You can use these same steps on collections, customers inventory, blog posts, online store pages and many more areas of the Shopify admin. The “Products” page has another tool to speed up your work, called the bulk editor. The bulk editor works like a spreadsheet where you can edit your products quickly. To open the bulk editor, select the items that you want to edit and click “Edit products”. The bulk editor displays the products that you selected in a table format. Each row in the table is a product or variant. Each column in the table is a product property. You can choose which product properties are displayed in the table by adding and removing fields After you add a product property, you can edit the information in it. The current fields are listed at the top of the table. In this example, “SKU”, “Price” and “Compare at price” are the fields available to edit. To add another property, click “Add fields”. You’ll see a list of properties appear. If you don’t see the property you’re looking for, scroll down to see more. Click a property to add it to the table for editing. In this example, I’m adding the product “Weight” property. If you want to add multiple properties, then repeat these steps. To remove a property, click the “X” next to it. When you’re done adding all the properties that you want to edit, click cells in the table to type new data or edit existing data. There’s lots of shortcuts that you can use to quickly edit fields in the bulk editor. Here’s an example: To select multiple cells with your keyboard, click a cell to select it. Next hold the shift key and press the up or down arrow keys to select multiple cells in the column. Then enter the value or text that you want to fill the cell. In this example, I’m replacing the weight of four product variants. For the full list of shortcuts, check out the link below. When you’re done making edits, click “Save” to keep all of the product changes you made using the bulk editor. Now you know how to save time using the bulk editor and actions. If you have any questions, visit helpshopifycom for more help artikles today.
More:Ultimativer METRO Marktplatz Guide - Was ist beim Verkauf zu beachten?
Shopify Tutorial - How to Edits Products in Bulk using a CSV file
hello and welcome to the tutorial. my name is Ryan. today I'm going to go over how I add tags to my Shopify store items quickly and efficiently. and, just so you know, I am just getting started with Shopify. I am a SEO, WordPress developer and and moving into e-commerce, so I'm just like learning how to make you know this whole process more efficient and get my store to look how, how I wanted to look and stuff like that, and I am delegating tasks to professionals and stuff like that. but something that I think I kind of need to do myself is the categorisation of the products, because to me it's going to be a very important thing. my store, omus, has 10,000 products in it, so I need people to be able to find what they need and, as you can kind of see, like right here, like a lot of this stuff is very similar and I mean these should probably be variants instead. but I had 10,000- you know, just under 10,000 products on an excel sheet that I uploaded in here from the get-go and I was not gonna take the time to do all this. so you know, maybe in the future this is something I do, something I outsource to a VA. but let's get to the the video. today we're going over how to add tags quickly and efficiently. yes, you know, Shopify has its built in bulk product editor and stuff like that. I think it's very slow, personally, but maybe I'm not using it correctly, I don't know. but this, this is the way I would go about doing this, and I think this will be very useful to a lot of people, especially if you need to edit items in bulk and you just have a lot of stuff to do. so hopefully this helps. so we, what you're gonna want to do is get your all products on your Shopify dashboard and stuff export your products. so then you have your excel sheet in the correct manner. you know in the correct form that that you need it because it just came out of Shopify. so what's real important is these tags up here need to be exactly right. when I uploaded this the first time, I typed a couple of them in and I had a spell err and that that field didn't go in right. so it is an issue, but it's just. I'm gonna give you a couple handful of tips here for excel. I'm not be stat excel in any way, shape or form, but I am halfway decent at it. so if I wanted to just grab all these and make them like full-size, I just I held down control there to add these to my selection there, but boom, I got them all and then I'll just pick one and double click and now all the the cell contents are visible in here. so that's a little trick if you didn't know about that, not necessarily needed for this tutorial. I'm actually gonna make this smaller because we're gonna be looking at the tags and then I'm gonna use, like, the title here as a reference to add some tags to these and stuff like that. so to get started, what I recommend is, you know, click on your your cell here and make a new column, so we'll insert a column. we'll go to the other side, we'll insert a column, wham-bam, and we are well on our way. so here is our list of tags. we have some products mixed up and stuff like that. Excel has all kinds of stores and stuff like that and ability to find and find and replace and everything, so you can go about it like that if you needed to. but for this tutorial we are looking at, we want to add some tags. so I'm looking at this title like: what tags can we add. so a lot of these are foam, some of them are paper, so the tags paper cartridge. so these are all what pulled in from you know, the document I got from my supplier. so I don't like how they're all- caps and stuff like this, but I'm working on cleaning these things up over time. so what we're gonna do here is, say, I want to add foam and pre-filter as additional terms for this one. right, because foam and pretty filters that make make sense for tags. so I'm gonna actually start off with a comma, because what you want to do is have all of your tags in a string like this. so just to keep everything uniform, for now, to keep them caps- I'm not actually gonna upload this- but pre-filter. so I put it: comma first, foam, comma, pre-filter, because what we're gonna do is merge this cell and this cell and get everything all in one. so over here, what you don't want to do is equal, sign this cell, the cell with the original tags, ampersand, click on your next cell, enter when, bam, there we go. so that is exactly how we need to upload it into Shopify. well, it looks like it, but this is actually a formula still. so we have to make this not a formula, but we're not. we're not to that point yet. let me get this back mess of my thing up, okay, so just understand, this is still a formula. so this, this would not work right now because we're gonna delete these columns to re-upload this back into shopify. so this is not going to work as is. but I do want to continue and show you what else I'm going to do here. so I'm going to take this one and what else does this apply to? so right here, it applies to this one, so I'll paste it in that one. so I ctrl-c, ctrl-v, right there. so this one can take foam and we'll say: come, nospace comma air filter. okay, so common air filter. so we'll take that and we'll run that down through. these will get that. you guys, like I, do them one by one. whatever from air filter from air filter. okay, so these actually get it to foam air filter. okay, so this one looks like paper. I don't know what this is doing here. it's annoying me, but this one's a paper filter, so we don't want foam on that one. so we're gonna skip that one and we're gonna skip all these and come down to foam air filters, so that'll get foam air filter from air filter filter. blow this one down here actually gets foam pre-filter. so I'll grab that and paste that in and this is gonna be, we'll just say, air filter. I need to get my comma. I need to get my comma for the correct nomenclature. so air filter, boom boom, boom, boom, boom, boom. okay, good enough, I'm a control. see that. I want it to run down all these cells right here, control V. so, depending on what isn't in a Cell, it's doing, it goes straight across. so it's taking this cell, this cell and this cell, for all of them, for each line item. so each one has whatever you put in here. so, like I said, these are still formulas in Excel, so that's not gonna work for what we're trying to do here. so what we need to do is control. see this come here because we're gonna replace these. to get them back in our tags column. I'm going to right click and I'm going to paste right here as values. now, notike the difference. this is a formula. I want to do that. get out of here. okay. so this is a formula on this one and now this is value. so these are just the values up here. so you see the difference, formula values. so that's really the main thing you need to know- will delete that, will delete this and now you're just left with your tags and all your new additions. so you will save this as a CSV, come back to your Shopify store and then you'll import that CSV and then shop. I will let you know if there any errors in your file and stuff like that and of course you can double check it. let me show you one right here: nine three. so this is product nine six, three, five. so if we go to the store here, we're on product nine six, three, five and then here are the tags that came in. so pullies, Paul's starter cups, wsr, we come back to here and there are those tags in that field. so that's just to show you that this works just like I said it would. if for some reason that and is not working for you, this right here also does the same thing. come cat or contact con cat, look con cat, and then it's gonna be a bracket like that. is that what it is, con cat? there we go and then you follow this right here. so you go say you want to put this one and then you use a comma, because that had a comma right here in the description, so comma and this one, and then you're gonna close off your parenthesis, closed off parenthesis, so it just combined those two cells. the reason there is space in between is because there is literally space in between. right here there's spaces like somebody hit the space bar right here and a whole bunch of times for no reason.
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:
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.