Transforming Shopify's FREE Theme Craft into a DARK Tech Theme
in today's video we are going to turn,shopify's free theme craft into a dark,tech theme this is a really simple,transformation that anyone can do i'm,going to walk you through each of my,settings and i have also created a free,cheat sheet for you which you can,download for free through our private,facebook group,before we get into the video if you like,videos about winning products drop,shipping shopify themes apps and,tutorials do us a favor and hit that,subscribe button and turn notifications,on now let's get into the video alright,so first things first let's take a quick,look at what craft looks like before,now let's get into transforming this,theme,alright so first things first you will,need to install craft so from your,shopify dashboard click online store,scroll to where you can see free themes,and click explore free themes,from there select craft,and add the theme to your library,i'm going to walk you through all my,settings in this video and i will be,popping up the settings on the side like,this for easy viewing and as i mentioned,i've also created a cheat sheet,containing all the settings on one page,which i've posted in our private,facebook group,okay with the theme installed click,customize and let's get started,first we're going to work on colors so,click theme settings,colors and follow along with me,once you get to accent one gradient if,you click on the circle you will be,presented with several presets to choose,from,the one i use for this design is this,one right here,by now you will have entered all of your,colors so you can now select them from,here to speed up the process,all right let's save our work and let's,move on to the next section,the next section we are working on is,the checkout which you can find at the,bottom here,from the drop down at the top select,checkout so you can see your changes,where it says form fields we are going,to switch it from light to transparent,save your work and we are going to move,on to typography,from the drop down select home page,then select typography,we are going to use the font pop-ins so,go ahead and start typing that in and,when it appears you can go ahead and,click on it,and then we're going to change this from,regular to bold,we are going to change the body text to,poppins as well,and then select medium,the last thing to do here is to change,the heading font size scale up to 125,percent,save your work and we are finished here,now it's time to move on to the home,page settings,when it comes to the sections you can,really add or remove whatever you'd like,in order to best suit your store but,there are a few settings that i've,changed on the homepage that i'm going,to show you the first thing is the logo,click on header,upload your logo,change the desktop position to middle,left,and then change the size to 160 px,as for the sections you can set these up,however you want do what works best for,your products and what you sell i filled,most of the default sections in i,removed the blog pos
Let's move on to the first section of rad theme shopify
Best Shopify Theme for Large Stores & Wholesale Capabilities
Best Shopify Theme for Large Stores & Wholesale Capabilities
so in this video I am super excited to,share with you a brand new Shopify theme,that is really dedicated to stores with,a large amount of products or stores,that are doing wholesale options as well,as retail options on their Shopify store,so stay tuned and we're going to check,out this new a theme hi if you're new,here my name is Elle McCann and I have,been a Shopify expert for over 6 years,now so I get this question a lot of what,to do if your store has a huge amount of,products and it's kind of confusing in,terms of just organizing and also it's a,good user experience or how do you do,wholesale when you are using Shopify a,lot of these options aren't really built,into Shopify and while they can handle a,huge amount of collections and products,actually putting into your Shopify store,know all the themes actually really work,with that and it can get really,confusing for your customers and just,not a good user experience which of,course could hurt your conversion rate,so one of my favorite Shopify theme,developers is pixel union and they just,released a brand new theme called,superstore as well as an app that goes,along with it as well called wholesale,club so we're gonna hop into my screen,now and I'm going to show you both the,theme and the app that work great,together,so let's check it out so this is the,pixel union website and you can just go,to pixel Union dotnet or click the link,in the description below to view the,site they have a lot of different,Shopify themes so if we click in themes,here at the top you can see a list of,all of them and as we scroll down this,page you can see all of the different,themes that they have available there,really so many different styles so many,different types of stores for example,this one is great for one product or,doing like a Kickstarter launch and they,have a lot of different styles how you,want your site to look but I real,wanted to highlight their new theme,which is this superstore theme so if we,click you superstorm but what's great,about it is it is really built out for,large catalog stores as well as,wholesale stores so they have a couple,apps as well and those apps one of the,big ones is for wholesale so that app,actually ties in seamlessly to this,theme so they have two different styles,if you see here they have a fashion one,and a tech of course you can make it be,whatever you want so if we hit to view,this demo we can then see it here so,again as you're looking at this you can,see just how much it's catered to very,large catalog stores so so many people,have asked about you know how do you,manage a store that has a thousand,products and make it to where it's still,a very user friendly experience and,people can get in to the products that,they are wanting to view and you're not,overwhelming them and so I think this,store design does a really great job of,breaking it out to where it's still,really nicely designed and there's,really cool functionality like Twitter,feeds and of course it is very m
After seeing the first section, I believe you have a general understanding of rad theme shopify
Continue the next second section about rad theme shopify
Shopify Navigation Tutorial ( Mega Menus/Multi Level Menus/Dropdown Menus/Header Menu and more...)
Shopify Navigation Tutorial ( Mega Menus/Multi Level Menus/Dropdown Menus/Header Menu and more...)
76 percent of online consumers said that,what they care about the most in a,website design is how easy it is for,them to find what they are searching for,yes 76 and this tells you how much it is,important to make sure that when people,land on your store they can easily and,smoothly move around and they can easily,explore what you offer and get to know,your brand more and this honestly can,never be done without a very clear and,organized navigation menu,hi there I am jihab and on this YouTube,channel I share with you videos related,to e-commerce entrepreneurship and more,and in today's video I'm going to show,you how to set up your Shopify,navigation menus in the best way,possible but quickly and before jumping,to my PC I want to tell you some things,that you need to keep in mind while,organizing your navigation manuals my,first tip for you is to always put your,customers in mind put yourself in your,customers shoes and ask yourself what,would make sense for your customers what,would they be searching for let's say,for example you sell it jewelries so,most of probably your customers will,want to find your products based on the,product type so you need to have a Rings,collection a bracelets collection maybe,a watch collection in this case you need,to link to all of these collections,within your navigation menu but not only,that let's say I'm shopping online for,Rings there might be a specific kind of,rings that I'm interested in so maybe I,want to buy a wedding ring maybe I want,to buy an engage engagement ring or,maybe I want to buy an everyday ring in,this case you need to have the,subcollections within your navigation,menu as well and in order to do that you,need to create a multi-level navigation,menu and I'm going to show you exactly,how to do that when you move to my,screen my second tip for you is the,following when you are naming your menu,navigation tabs always use names that,make sense to your customers so let's,say for example you want to link to your,wedding rings collection simply use,these same exact words to name your tab,this will not only help your customers,to find what they are searching for and,understand what you are selling but it,will also help your store for SEO,purposes my third tip for you is the,following when you are creating or maybe,redesigning your navigation menu always,keep your tabs condensed don't exceed,seven tabs for your navigation menu and,I'm talking about the first level tabs,and I'm going to tell you why our brains,usually can't hold more than seven,things or seven ideas at the same time,on the short term so if you don't want,your customers to get frustrated and,leave just keep it simple and keep your,tabs to seven or maybe even less to five,my final tip for you and it is actually,a sacred tip always make sure that your,manual looks good on mobile so now we,are going to move to my screen to start,setting up your Shopify navigation menus,are you ready let's start so here I am,inside of the Shopify dashboard
After seeing the second section, I believe you have a general understanding of rad theme shopify
Continue the next third section about rad theme shopify
Shopify Theme Developer Road Map
Shopify Theme Developer Road Map
all right guys it's your boy joe back at,it again codingphase.com,your boys backing out and did it again,one more time this time around we're,gonna be doing a road map,to shopify theme development okay she,want me to lock it down but i told her,to pass the key,how can uh roadmap to shopify theme,development,what do you need html css okay,why do you need html css basically,you're gonna,need to be able to convert a,website from a design and then build it,into a website a real web page,html css is the key for that okay this,is how you set up your,uh language right your markup language,and you set up,html you set up your structure then from,there you use css,to give it the stylings given the colors,give it a spacing,right align things that's what you need,html css,at the same time you need to learn how,to write clean and reusable code,for those of you guys that don't know,right now shopify has,uh this new way of creating things where,you can create a section and think of,sections as components that you can go,and place them,anywhere throughout the website it could,be a component,or a section that you could put on the,homepage but that same section you could,put it on the about page that same,section you can reuse it,and put it on the product page that same,section you can go and,reuse it and put it on i don't know the,collections page,okay so that's something that you want,to keep in mind,writing code that's clean and being able,to be reused,is the key right i recommend you,learning something like bem,right um i'll give you guys an example,let me see if i,pull this up for you guys right here,okay so this is me,writing uh basically the the static,files for,a theme that i'm building right now,coventi,and basically this is my my structure of,how to do things right,i'm using nextgs to generate the static,files,but basically this is what i'm doing,right i have my section right,i'm using the section tag from there we,have uh the name,of that component or that section and,then from there i have,the version of that section right,because sometimes you might create,three to three to four different type of,versions out of,uh one section like different variations,of it,right for example you might have,something like this see if i share this,with you guys,right here okay uh you might have,something like this where,uh this is like a hero section but this,hero has the text and the content in the,middle,another hero section might have the,content on the left,and the right like this right so this is,the same,section or the same component you could,think of it like that,but the only difference is this,different variations,so this is the structure that i use now,of course i'm using,also a bootstrap for the grid system,and that's it i don't use bootstrap for,any type of stylings beyond,the grid system this is just to provide,uh,a way for me to create uh you know,responsive websites,easily right super fast and at the same,time if somebody buys this theme,99 of the time r
After seeing the third section, I believe you have a general understanding of rad theme shopify
Continue the next fourth section about rad theme shopify
How to use SCSS with Shopify CLI for Themes
How to use SCSS with Shopify CLI for Themes
earlier in march this year i published a,video describing how to use sas with,themekit following shopify's,announcement that they were deprecating,sas from shopify themes,then in july 2021 shopify announced that,the cli had been extended to work with,themes and now became the new,recommended tool for local theme,development soon enough you guys started,to ask the question how do you create a,sas workflow with the new shopify cli,for themes,so in this video i'm going to show you,how we can apply a similar build process,as we did with themekit but this time,with the shopify cli let's get started,in this video we're going to skip the,theory surrounding shopify cli and gulp,js as we have covered them in previous,videos so if you want to know more about,shopify cli i have a standalone video on,that and if you want to learn more about,gulp which is the tool we use to compile,our scss in this video and in the,previous video on themekit then you can,check out the video on using scss with,themekit where i go more in depth with,gulp,because we're just basically copying the,same process but with a different build,tool so we're going from theme kit to,shopify cli i'm not going to spend too,much talking about the same thing we,talked about in that video in this video,we're just going to jump straight in,and install shopify cli install our node,dependencies including gulp i'm going to,copy across the gulp file and then i,will demonstrate to you live how we can,use scss,inside of shopify cli and then of course,push those changes to our theme library,so as you can see on my screen i've got,my code editor in the background here,which is visual studio code,whoops accidentally clicked on something,just expanding it there,and then in the other tab i've got my,terminal application here,so the first thing i'm going to do is,navigate to the folder in which i want,to create my theme folder so it's going,to be,my skill share folder inside my code,folder,and then inside here i will first verify,that i have shopify cli installed so,make sure you do that if you don't have,that already you can check if you have,shopify cli installed by just running,shopify version and if you get a version,number back then you clearly have,shopify cli installed,all right i'll clear that and now what,i'm going to do is log into my shopify,store so i'm going to run the command,shopify login,followed by dash dash store and then the,url the my shopify url,of,my shop which is chris testing,christtestingshop.myshopify.com,now it's going to open up a new tab in,my browser and i just need to select the,account,that i,have as a staff account on my chris,testing shop which is this one,then it will say authenticated,successfully you may now close this page,so now i'm going to swap back to my,terminal application here and as you can,see it says logged into,christtestingshop.myshop,as staff,which is very important you can't log in,as a collaborator through your partner's,account it has to be a staff membe
After seeing the fourth section, I believe you have a general understanding of rad theme shopify
Continue the next fifth section about rad theme shopify
How to customize the Verticle mega menu for Chromium Shopify Theme
How to customize the Verticle mega menu for Chromium Shopify Theme
hi,today i will guide you how to modify the,vertical menu on your shopify store,so first of all you need to log into,your shopify admin and go to the only,store,to start to customize the store,click on customize,to get to the store settings like this,but first you,need to show about the main menu that,you want to display on the store like,this,so uh,click on the hidden,and sort until you get to the vertical,menu settings here you can change the,menu,you want,like this,then click select,or,you can edit the menu,from the red one here click on it and,you remove to the search what i mean on,the navigation,to edit that menu okay this you can edit,or delete,each menu item or you can make the two,or three levels,for,a menu item like,i want to make the,two level for,the top five so,i,i hold the top six here,and get it under,top five here say it to level and clicks,out,so after editing,you turn back to the store settings and,see the changes okay see,top five,have a,more level,type six here,okay,so after you choose the main menu for,your store so then,i go to the next step of the process,that you i can add the contain,to the vertical menu,click on the the arrow next to,its title,here,don't mind,all of this because these data settings,they contain for item menu okay until,you see the ad lock here,there are six blocks for you to add a,contain,but actually there we just have five,days five days,to add the content for each menu item,the trigger navigation is just like um,activating the function of each menu,item,to for to,include the content,of it,like i will make an example for you to,um,understand easter so if you want to add,the menu list to type one first you need,to add a chicken vacation,and activate the function for it to con,include the menu list okay,you you need to,enter the exact name of the menu item,like tap one here,and back so then you want to add menu,click on add block and click on the menu,list here,and then you can add the menu for the,top one,click on the select you can modify the,read,or,you can change the block title like,tab one one one,click sub,okay now we see,the change it okay you see this is uh,the main list,of type one or you can add an image for,example for tap one,you click on the image,and select the image to display,okay,click excel,okay now you see the image tap one,and um,when you complete adding content to step,one and you want to add the content for,top three for example,so,youtube is added to quantification first,and enter the exact name of chat three,to activate its function and again add,block and add,like multiple products for top three,support one,select it and select part two,like this,okay,well remember to lick this out,so that it will,successfully add to the menu item you,see,set three you have the product and you,just continue to add the container,we have five contained to add to each,menu item,okay remember to,place the contain under the trigger,navigation,you want to add,for example if you want to move this,conte
After seeing the fifth section, I believe you have a general understanding of rad theme shopify
Continue the next sixth section about rad theme shopify
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 stock 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 stock 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 us
After seeing the sixth section, I believe you have a general understanding of rad theme shopify
Continue the next seventh section about rad theme shopify
Exploring the advanced features of the Pursuit Shopify theme
Exploring the advanced features of the Pursuit Shopify theme
hi everyone this is tim from,milehighthemes.com,and in this video we're just going to,show you some of the advanced features,of the pursuit theme and how to set them,up,the first option we're going to talk,about is the linked product options,and what this option does is it will,hide any unavailable groupings of,variants from your product pages,so instead of just showing a line,through where or an unavailable button,on the product page for a variant that,isn't available it will actually update,the variants as you select them and get,rid of any unavailable options,so let me briefly briefly show you how,that works,first of all to set this up we're going,to go to any product page,and click on the product heading here to,edit the settings and i'm going to,see that there's this enabled linked,options feature,so to show you how this works i'm going,to switch to a different product here,that i have set up,now you can see that this product is a,typical polo shirt that comes in small,medium large and extra large sizes and,in three different colors,so i've got this shirt open in my admin,area and you can see that yes indeed it,does come in all of those sizes and,colors,but in this scenario,i want to make it so maybe we're out of,stock on the black one or it just,doesn't come in that option anymore,in extra large so i'm going to go ahead,and delete,these two variants extra large red and,extra large black,so i'll select those two,and then i will choose delete,variance and i will save that,and that's done,so now if i go ahead and refresh this,product,take a look at the options,if i choose,extra large and black i now have this,unavailable button,and the white one is still available and,the red one is not available,so that's the default behavior of the,theme if a product is on if a variant is,unavailable,so now if we go over here to the,settings and i turn on this enable,linked option feature,and save,now as i switch the different sizes here,you'll watch as this color options,change,when i choose extra large,only the white option now appears,so the linked options feature will hide,any unavailable variants from your store,and update the color choices in real,time in this particular instance,now i'm going to talk about the pick and,option feature that the theme comes with,this is pretty self-explanatory but it,basically requires your customers to,choose a combination of variants before,they can add it to the cart if you turn,on this feature,then,no options will be selected by default,the customer will not be able to click,the add to cart button,and they must choose their options first,so let me just show you briefly how that,works,right now if i refresh this page,you'll see that the first size variant,small,the first color black are chosen by,default,if i choose this enable pick an option,feature,you'll see that now no options are,enabled by default,and the cart button has changed to say,pick an option,so now the customer must select that,before they can proceed y
After seeing the seventh section, I believe you have a general understanding of rad theme shopify
Continue the next eighth section about rad theme shopify
Shopify CSS Intro - How to Overwrite Theme Colors and Fonts When You Really Need To
Shopify CSS Intro - How to Overwrite Theme Colors and Fonts When You Really Need To
what is up guys today you're going to,learn a few techniques to completely,overwrite the styling that is set by,your theme,and be able to go beyond what the theme,settings allow you to change,because as you probably know things like,colors and fonts they're under here,under theme settings and they're set,globally across your entire site right,so you set a few primary colors like,your brand colors you set your secondary,colors and then like all the buttons and,stuff they automatically get these,colors applied to them right so these,buttons this is like the primary this is,a secondary and you don't have specific,control over which button is what color,but what if for example you want to make,this specific this add to cart button,pink or maybe you want to change the,heading size of your product title or,this vendor or maybe you want to change,the heading size in your footer anything,anything across your site if you want to,change something specifically this video,is going to show you how you can kind of,surgically go in and change that,specific thing without affecting other,things because that's kind of the issue,right you're going to love this video,because it's going to give you a lot of,control,a lot of very fine control over your,design,however,with great power comes great,responsibility,and,it's going to be very easy to also break,your theme right not completely break,your theme but,you know effect more than what you,intended to affect right so you want to,make one button pink,and you end up making like all your,buttons pink across your store which is,not what you want probably so i'm gonna,teach you a few ways that you can like,really carefully go in and make those,changes the examples i'm going to show,you are focused on colors and fonts just,because these are the most common,things that people want to do and the,most simple things to to do to teach you,but really if you do have some more,advanced knowledge of css then,you have no limitations really and you,can use the concepts that i teach here,and combine that with your css knowledge,to just change anything you want across,your store so anyway with all that said,let's jump into my computer and get,started okay so the first thing you want,to do is look at the page that you want,to be editing and have that open in a,tab on your browser,and the second thing you want to do is,go to online store themes and then under,actions click edit code to enter the,code editor we're looking for,theme.liquid you can search it but it's,actually right here theme.liquid this is,the main file that contains your entire,store all the other like section files,templates they're kind of like being,included inside of theme.liquid in this,file there's always a css file which is,usually called base.css,right um but it might be called,global.css anyway it's your main like,your core css file in dawn and in all,the free shopify 2.0 themes it'll be,called base.css but yeah you want to,find the main css file for your theme,c
After seeing the eighth section, I believe you have a general understanding of rad theme shopify
Continue the next ninth section about rad theme shopify
HOW TO CUSTOMIZE SIMPLE SHOPIFY THEME
HOW TO CUSTOMIZE SIMPLE SHOPIFY THEME
hey guys,happiness here welcome back to my,channel and in today's tutorial i am,going to be showing you guys how to,customize a simple shopify theme from,shopify so let's go on our left hand,side and click online store,and after clicking that let's click,themes and it will take us straight on,our theme page as you can see currently,our current theme is john theme and,basically we want to start customizing,a simple shopify theme so i have a video,that i showed exactly how to customize i,don't theme from scratch i'll show you,on that video i'm showing you step by,step on how to customize adonai so if,you are interested make sure to go and,check that out i will link it up i will,link up that video somewhere up here,so on this tutorial i'm going to show,you how to customize freedom let's,scroll all the way down on the freezing,sections so we can go and look for free,themes so let's click explore free,themes,and this page will take us straight,where all the free themes in shopify,store are available as you can see there,is a dawn theme there is brooklyn theme,and other many other themes so i have,another tutorial with,brooklyn theme so if you want to check,it out how to customize a broken theme,you can watch the video as well,let's so let's click simple theme,because this is the theme that we are,going to customize and this thing comes,in three styles there is a light there,is also a toy which you can,create your toys so,and also there is a beauty a beauty,theme and this if you have like a beauty,shop so i'm just gonna use the light,theme style and then let's click add to,themes and this will take us back to the,shopify,page and it's gonna load here it's gonna,take a little bit of time,so,after it finished loading click actions,here,now we just added a simple theme now,let's add this let's click action,and then click,publish so we can publish this theme as,our current name because so far our,current theme is down and now we just,changed our name to simple them so this,is how you can add,a theme to your shopify store so now,let's go ahead and click action so we,can preview so click action and then,preview,and this is how the simple themes is,actually looks like this is like a,homepage here,and you can see there are featured,collections and there are,some of the products and if you scroll,down you'll find more products,and on the left hand side you will find,there is a home and catalog,as well as contact sections,and down here these are the links you,can put your links about us shipping,policy,your refund policy etc,and then here there are payments icon so,your customer can see what kind of,payments method are you offering in your,stores okay now let's go back to our,shopify page,and now let's go and start customizing,uh,the click customize,click customize and this is our page,this is where we can add a header slide,bar,and stuff like that so on our header,section here this is where we're going,to add our logo by,clicking select image here and then once
Congratulation! You bave finally finished reading rad theme shopify and believe you bave enougb understending rad theme shopify