custom shopify template
Published on: January 28 2023 by pipiads
Table of Contents About custom shopify template
- The Best Shopify Theme In 2022 (Industry experts have voted)
- The Best Shopify Themes for Your Online Store in 2022
- HOW TO MAKE CUSTOM SHOPIFY PAGE LAYOUT TEMPLATES, SECTIONS, AND THEMES | SHOPIFY 2.0 TUTORIAL 2022
- Customize your Shopify Theme FAST | How to Design Shopify Store 2021
- Shopify Debut Theme Customization | Debut Theme Design Tutorial
- Create Shopify Themes with Webflow | Udesly.com
The Best Shopify Theme In 2022 (Industry experts have voted)
which one is the best shopify theme in 2022. together with our good friends at storetasker, we wanted to find out exactly that. so over the last week, we interviewed various experts, developers, agency owners from our network and from storetasker's awesome freelancing platform link in the description- and, to our surprise, we actually found out way more than we expected. so if you listen to this, you will not only discover which one was the most upvoted theme, but you will also learn what makes a theme great from a merchant's perspective, like what to pay attention to when picking a good theme- and you will also learn what makes other developers want to use your theme, which is a very interesting angle if you want to build themes yourself and then potentially sell them on the theme store. so here's what we discovered. all right, patrick, i'm super excited that you're here today and, yeah, i actually can't believe that we didn't do this earlier. um, so would you like to introduce yourself really quick? thank you, jan, for the invite. um, yeah, my name is patrick. i'm the founder of the agency eshop guide. we are the fastest growing agency in germany- uh, 2 million in revenue, 35 people. it's crazy people and we love shopify and i'm happy to tok about the themes. that's awesome. um, okay, maybe, before we get there, would you also like to share one or two sentences about the clients that you typically work with? this is like smaller businesses, larger businesses, yeah, just, uh, yes, so we usually work with existing businesses that migrate to shopify on woocommerce, shopper or whatever, or with businesses who come traditionally from a b2b space, um, and who are dipping their toes into the d2c world and just need their first job. rarely we work with real, real startups, because that's usually for them. it doesn't make sense to work with a, with an established agency, because of the pricing. okay, that's great. and yeah, as you know, today we wanted to tok about themes, um, so you also do quite a few store setups per month, um, so the question would be: do you guys have a favorite theme? yes, um, so there are trends, uh, it's, it's actually quite, quite funny, uh, from turbo to prestige. but now our favorite theme is impulse, um, from archetype, um, the. the story behind archetype is that, uh, people who used to work for shopify actually, and, um, they really built the themes that you want them to build. they, they're just awesome and they have good support. they've, um, they're rather um fast in terms of performance, the themes: they have a lot of um features and they're usually like right on top of the tiknological curve. what's possible with the themes, however, at the moment, because you you're probably aware of that, uh, shopify 2.0 came out and with that um shopify released a new standard theme, don, which really breaks records in terms of performance and speed, and we don't see those numbers yet with the um paid themes, also not with imports, okay, so, yeah, let me just wrap this up. so, okay. so you basically have two favorite themes. let's say: impulse as a paid theme, done as a free theme. um, yeah, since we have a long friendship, you can have two votes. i mean impulse if, if you don't have coding capabilities, uh, use impulse. if you do have calling capabilities and can customize the theme a little bit, then you can use storm. okay, that's great. and yeah, my follow-up question would have been: why, in partikular? so you said, okay, dawn in terms of page speed, impulse in terms of aesthetiks, features and everything. and, yeah, because they they think about what merchants need, what developers need, um, okay, i think that's a great perspective. um, yeah, patrick, thanks so much for joining today and, yeah, we see each other very soon, i guess. thank you for the opportunity. see ya, um. all right, jay, then. thanks so much for taking the time today. um, would you like to introduce us? have a bit? yeah, my name is jay. i'm from cincinnati, ohio. i originally went to school for accounting and philosophy, uh, but got bored out of my mind with the accounting so started building websites in my free time. it's been about a decade since, so i've been building websites ever since. uh built around 500 plus shopify stores websites- not just exclusively shopify other cms's as well, actually, uh, but on 500 plus stores helped companies do about 100 million in online sales. uh, i've done a lot with the shopify ecosystem in partikular. i've been a speaker on their blog. i've been a guest speaker at amazon, so really just lived and breathed in commerce the past decade. i describe myself as a boutique agency, so i have a small team. it's me and seven other people- time, uh, so we have a small crew and we do everything from store design, development, seo, ad campaigns- uh, really just kind of ecommerce full stack. so set up landing pages, help them convert, drive more traffic to them, help them retain, uh and upsell existing customers- all that fun stuff. so okay, yeah, sounds very impressive, awesome, um and uh, okay, so this is like a full service marketing agency or not only marketing ecommerce in general? you said, um, 500 plus websites. that's awesome. um, do you usually like build custom sites from scratch or do you use any uh pre-built themes and then customize from there? yeah, good question. you know, i would say this is probably one of the single biggest questions or concerns that come up when i tok to a new client. it's like: what theme are we going to use? what theme are we going to use? my preference is to keep it pretty simple and bare bones and use the shopify native ones. so previously that was debut, now that's dawn 2.0. i like to just keep it as minimal bloat as possible and then typically, my process is to come up with a design concept for desktop and mobile, do that in like photoshop, figma, xd files, confirm that and then build off the base template of uh like. lately it's done 2.0. previously it was, you know, okay, yeah, i think that's a great choice, especially: oh, we can, we can actually tok about that. um, so why would you say, is the dawn theme or why is it great? in partikular, do you got any? do you have any preference. so why not use any premium theme? or, yeah, you could. you can just think it's because i'm apprehensive to pick other third party themes just because you want long-term congruence. so it's something that's safe and secure of like, hey, this is the built by shopify and recommended uh like de facto one that they provide. it's pretty sound infrastructure to build on top of. you definitely don't like choose a really indie theme and then have them disappear or just not compile with update. so that's a. that's part of like the framework of thinking about long-term uh viability with it. um, and then i think it just comes with a lot of minimal bloat. so it comes with all the main core features and upgrades that you would want that shopify is offering and providing, but without having a lot of extra bells and whistles that can negatively impact your speed. um, just might not be necessary. so i try to keep it very minimal where possible, uh, and just remove bloat whenever we can. okay, so, okay. so you said site speed is a concern. um, keep it as lean as possible. and long-term maintenance by the vendor or by the creator, which is shopify, namely, um, okay, that's, that's good reasons. um, would you also say john dawn is a um good general purpose theme or do you have, like, uh, different theme preferences for different niches and vertikals? um, not really, especially now. yeah, i mean, uh, just seeing, like, what websites convert. we do a decent amount of cro and things like that. like it is pretty well set up outside of the box that you don't have to do a lot of customization. uh, having the meta fields and things like that is nice as well, um, but we still it ultimately is a case-by-case basis. so i mean, we've worked with tons of different products and services all across the board and as you work through and with them, with those, uh, entrepreneurs like one-on-one get to know their business. like, we do try to provide a custom experience, and so sometimes we will modify that just to really facilitate that. but by and
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:Get Paid $375 A Day For FREE By Copying Images & Selling Them - LEGALLY
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.
More:How To BUNDLE Clothing Store Products Inside Shopify [NO APP]
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.
Create Shopify Themes with Webflow | Udesly.com
hey there, internets pixelgeek here with the udesley tutorial on how to take your webflow ecommerce project and convert it into a shopify theme using udesley's new app and chrome extension. right now, let's go to my screen and i'll show you how it's done. now, before i started recording, i went and grabbed a free webflow e-commerce template and you can get this over at webflowcom templates. now, for this conversion, you don't have to start from a template. you can also get start from a blank page, uh, and build it from the ground up, but for this demo i'm starting with a template. all right, so this template has some pre-made pages, like a home page, a products page- ooh, burgers, nice. and for the products you can see here, we got some burger waldos, mmm bacon. okay, enough enough about food, let's keep going. all right, so pretend that i'm done with the design. i'm done adding products to the webflow ecommerce. uh, now i want to start the conversion process. so first thing you need to do is use the handy dandy you desley chrome extension. just click on it once. then choose webflow to shopify. after that's done, cool, we have a config file. let's click out of that. click on the export button at the top now, if you don't have access to this feature. that probably means that you're on a free webflow account plan. so what you need to do is upgrade to a light or higher account plan and then you'll get access to this. alright, now, after that, go ahead and prepare the zip, download the zip and, yeah, we're done with webflow. so we can go ahead and move on to the next step, which is going to udezly. and so after you log into udesley, click on go to app at the top right, and we're going to choose shopify. there we go. i'm going to drag in that zip file that webflow gave me for theme configuration. i'm going to choose that config file, press open and for additional assets. i'm not gonna do anything. you don't have to do it. um, so you can just skip it. i'm gonna click convert and magic, it's a template and we can download it. and so when i download it, it's giving me two things: it's giving me the zip file which has the theme, and then an extra data file that we'll need later for the very last step, and i'll get to that soon. so let's go ahead and log into our shopify account and let's go ahead and go to customize theme. so click on customize theme. customize theme again. and i'm going to scroll down and we need to add a theme. upload zip file. and we're going to drag in that new zip file, click upload and let that run and once it's done, it's gonna start loading it into your account. so we'll need to wait for this to go through and there we go. just added, now we just need to click on the actions drop down and click publish and then publish again and there we go, our theme is published. so now we need to do one last step with this extra file that we have. so shopify has a webflow importer app inside of shopify, and so we're going to do that and we're going to log into the store, paste it. there we go, login, choose my account, come on, we can do it and finally install the app. cool, and now, with this importer, i can drag in that data file and there we go: all of our cms items, our project or our products and our e-commerce settings have all been transferred over to our shopify store. so that's it. now let's go back to my demo and view the store. all right. so here it is all right, and these are actual products. so if i click on one, let's say: where's my bacon? where's the bacon? ah, right there. click on it. this, as you can see up here, it's an actual product, hmm, with egg. wait, that's not bacon, that's ham. well, anyways, there you go, it's a real working shopify theme using webflow as your designer tool. so that's it. that's how easy it is. we've used the chrome extension to create a config file, we exported the code, we installed our theme and, lastly, we imported our products, cms and e-commerce setting data into our shopify store, and it took less than five, maybe ten minutes. that easy. so thanks again to the deadly team for creating this. um, it's really helping the no code community and if you want to start using it, go to udesleycom now and try their chrome extension for free. all right, that's it for this tutorial. see you in the next one and, as always, make the web beautiful together, see ya.