Using metafields to customize your Shopify product pages
hey everyone it's Laura here with,fluorescent and today I'm going to walk,you through how to use metafields and,dynamic sources to make your product,pages smarter for your customers before,we dive in it's important to mention,that this functionality is only,available on Shopify stores using an os2,version theme to find out what version,your theme is and for instructions on,updating check out the link in the video,description below,let's get started with the basics what,is a meta field and how are they,different from Dynamic sources,well meta fields are extra data fields,built into Shopify that allow you to,store additional information for,products collections orders blogs and,Pages these fields can then be used to,display unique content on your site they,are accessed through your Shopify admin,and you don't need to edit the code,files to use them,an example of where meta fields are,useful is if a merchant who sells skin,care products wants to display their,ingredients or allergy information or a,merchant who sells Furniture wants to,display item Dimensions or shipping,details,because this information might be,different for each product meta Fields,allow you to display this unique data,for each individual product without,having to use multiple product templates,Dynamic sources on the other hand are,accessed in your theme editor and these,are what links the data you've stored as,a meta field to sections within your,theme pretty handy right,it might feel overwhelming at first but,I'm going to walk you through just how,easy it is to start using this feature,for our tutorial I'm going to show you,how we've used meta fields in our,stiletto demo shop to display materials,information in an accordion on the,product page the first step is to write,the metafield options in your Shopify,admin to do this we'll navigate to,settings and then meta fields and for,our example we'll click on products from,there let's click on ADD definition and,start building our new meta field,we'll add a name to the meta field but,describes what it will be used for in,our example this is where we'll describe,the Fabrics used so we'll name our meta,field materials,adding a description is optional and is,simply a description of the meta field,to help you input the correct values it,will appear in the Shopify admin but,will not be visible to customers,next we'll click on select content type,button and select text,and for this example we'll select,multi-line text click save and repeat,the process for as many meta Fields as,you want to use on your product page,you'll see here that we've already got,this meta field created so we're ready,to move on to our next step adding the,values into your product meta Fields,when you navigate to your products,listing you'll now see that metafield,sections are available at the bottom of,each page you'll see in our stiletto,example we've already populated these,values for our materials field go ahead,and fill those in for each of your,products and th
Let's move on to the first section of Stiletto theme shopify
5 Shopify Themes We Are Currently Loving For Clothing Stores
5 Shopify Themes We Are Currently Loving For Clothing Stores
All everyone Christian here.,And today,,I want to share with you,the latest themes to use.,If you are a clothing store,and you want to actually,stand out,,also stick around,to the end,for my personal,favorite theme right now,,So after the OWS 2.0 release,,there have been,a lot of new themes showing up,or popping up on the Shopify,theme store.,And the theme developers,are getting better,and better,when it comes,to making them more distinct,and just adding subtle features,and things to make them,look really good,and different from each other.,Because before I would say,,like a lot of these themes,have some,some of the same elements,and some of the same things,,but I feel like now,we're starting to,see a little bit more,wide gamut,of different themes out there,,and that's what we want,to talk about today.,Some of the top five,right now that we're loving,and you should check out,if you are a clothing store,or not a clothing store.,Really,,you want to check out,some really cool,themes right now.,So the first thing that we have,is Stockholm,by code supply code.,A couple of highlights here.,It's a very clean, minimalist,,has some subtle animations,and some unique sections.,Now, I do want to show you,this real quick.,So I'm going to click,on The View Demo Store.,By the way, it's $280,and then a lot of these themes,,like I've mentioned in the past,,they have different theme styles,and all the styles they're for,really is,just to kind of show you,a different look,and feel,of the site of the theme,before you actually,install it on on your store.,But a couple of things here.,These are the,,the unique sections,that I was talking about,the section right here,which just categorizes,your collection,so that Top's sales,,new arrivals and bags,and this kind of,store animations,and it just looks really cool,and nice,really cool,to just kind of navigate,through a section like this.,And they're using it.,And this particular style,on the very top,as is kind of like the hero,probably wouldn't recommend,something like this,for the hero.,But if you want to use a section,further down on your,on your home page,,I would definitely do,something like that.,This is another,sort of animation,that I was talking about,,just like this talk on,just rotating here,on this corner.,It just it just adds,an extra flair, right, to the,to the actual store.,And like I said,,when you hover over certain,things like the products,,you get this subtle,animation with the name,and then a little zoom,right there.,So just subtle things that,make this,theme just really pop for me.,And look at this.,Like when you hover over,the categories, bags, hat tops,,you actually get a picture,in the background,that moves with your cursor.,I've seen that being done,in other websites.,I've never seen it,done here on Shopify.,So that's actually really,,really cool.,We have a review section,popular and look at this,also subtle animation.,When I'm scrolling,,you get some sort,of parallax effect,with the images,that ar
After seeing the first section, I believe you have a general understanding of Stiletto theme shopify
Continue the next second section about Stiletto theme shopify
How to set up mega menus in your Shopify theme
How to set up mega menus in your Shopify theme
hey everyone it's Laura here with,fluorescent and today I'm going to show,you how to optimize your Shopify site,for conversions by using a mega menu to,make your products quick and easy to,find,a mega menu replaces your standard drop,down menu and allows you to display,multiple columns as well as images to,organize your collections and products,in an intuitive way,this means less clicks for your visitors,to find the products they're looking for,and increases your chances of turning,that visit into a lifelong customer,let's first take a look at a couple of,examples are stiletto organic demo shop,is a great example of how a health and,beauty brand can use a mega menu to,organize their product collections,similarly our Chic demo beautifully,showcases a large inventory of products,in a way that is clear and easy to,navigate,now that we know what a mega menu is,let's walk through the steps of getting,one set up in your fluorescent theme,we'll use our Chic demo shop for this,tutorial,the first thing we'll do is set up your,nested menu list in the back end of your,Shopify store from your admin click on,online store and then click on,navigation,then we'll click on our main menu which,is what we use on our home page for our,top level navigation,the first menu we'll look at is our,clothing drop down,for this menu we'll simply add our,second tier Options under clothing so,for example shop all Basics tops and so,on,the second type we'll build uses three,tiers of nested navigation,Footwear is our top level tier and under,this we'll add the second level tiers,shot by type and shot by color then,we'll add our third level Options under,each of those if at any time your menu,options are showing under the wrong tier,simply use the handle icon to drag and,drop them into the correct level,now that we've got those set up in the,admin let's take a look at how to link,them all together in your theme first,things first let's hop over to your,theme editor by going to online store,themes and then clicking on customize,open up your header section,and click the add Mega nav button,first we'll set up the clothing menu so,we'll choose the full width Mega menu,block,then enter the exact name of the top,level Link in our example clothing in,the drop down Parent Link Field,you'll see the menu change from a,regular drop down to your mega menu just,like that,use the column count to display your,menu list in one two three or four,columns this is helpful if you've got a,longer list of items to display so they,can appear horizontally across your page,instead of running vertically,you've also got the option to display a,featured image promo text and a call to,action button within the mega menu to do,this make sure that the show promo is,enabled now just add in your images and,any promotional content you want to,include and click save and there you go,your first mega menu is all set up,now we'll set up our Footwear Mega menu,so we'll follow the same steps before,except we'll choose the
After seeing the second section, I believe you have a general understanding of Stiletto theme shopify
Continue the next third section about Stiletto theme shopify
How to manually update your Shopify theme
How to manually update your Shopify theme
hey everyone it's Mitch here with,fluorescent and today I'm going to walk,you through how to manually update your,theme to take advantage of new features,and Bug fixes it's important to note,that this tutorial is for updating OS,2.0 versions of our themes only if,you're currently using a vintage theme,or are unsure how to check whether or,not your current theme music shopify's,theme OS 2.0 please check out the link,in the description before following this,tutorial,now I know that updating your Shopify,theme can seem like an overwhelming task,if you've never done it before but I'm,going to show you step by step how you,can do this yourself quickly and easily,let's get started,the first thing that you'll need to do,is add the latest copy of your theme to,your Shopify admin as long as you,originally purchased the theme from,shopify's theme store you can log in,there to get the latest version for free,simply navigate to the themes listing,page on the store and select add latest,theme version,this will add an unpublished copy of the,newest version of your theme to your,Shopify admin,we'll include direct links for each of,our theme listing pages in the video,description,now you can open your admin and navigate,to online store and then themes to view,and edit all of your Shop's available,themes at this point you should already,see the latest copy of your theme added,to the unpublished list,and in the next few steps I'm going to,show you how to copy your current theme,version settings and template files over,to the new version that you've just,added from the theme store,to start the update we'll open up both,code editors for both themes in separate,windows so that we can view them side by,side,to open the code editor for each theme,click on the actions menu which looks,like three dots next to the theme and,then select edit code,in the first window open the theme,editor of your old theme and in the,second window open the code editor for,your new theme,let's start by finding and opening the,files that we need to transfer from the,old theme to the new one,what we're going to do in this next step,is copy over any of the page templates,that have previously been customized in,the theme along with any settings that,we've previously selected in our old,version to the new version so the only,files that will need to be concerned,about with this step are those in the,templates folder and those in the config,folder,when I open up the templates folder,inside my code editor you can see that,some files have dots next to them those,are the template files that have been,edited or added to in my current copy of,the theme,in My Demo shop for example you'll see,that both the blogged Json file and the,index.json file have dots next to them,this indicates that I've made changes to,these templates in the published copy of,the theme,and we'll need to copy these files over,to the new theme in order to make sure,that my blog page and my home page look,the same as they do now afte
After seeing the third section, I believe you have a general understanding of Stiletto theme shopify
Continue the next fourth section about Stiletto theme shopify
How To Add Back To Top Button On Shopify - 2022 Easy Tutorial
How To Add Back To Top Button On Shopify - 2022 Easy Tutorial
okay maybe you have a very long page on,your shopify store and people keep,scrolling down but you want a little,button that says hey bring me back to,the top in order to avoid your clients,to scroll all the way back up in this,video i'm going to show you exactly how,to do that so let's jump in right now,we're here in our shopify store and,we're going to go to online store themes,the end result is going to look,something like this right here okay so,this is the theme we'll be working on uh,we're gonna click action because we're,not going to be working on that theme,we're gonna do a duplicate of it i see,this in every video but every video i,get comments saying hey i messed up my,team because i didn't do a duplicate if,you do duplicate and you make a mistake,in the code,you can simply remove that duplicate if,you do not do a duplicate and you make a,mistake in the code you are screwed and,it's going to cost you hundreds of,dollars so make the duplicate,all right great once the duplicate is,made we're going to go to actions and,we're going to click on edit code right,here on the left we're going to go to,snippets snippets are little pieces of,code you keep reusing kind of that,change of you know card icon we did in a,previous video there,pretty useful okay you're going to add a,new snippet right here you're going to,paste it you're going to call it back to,the top do it exactly like that make,sure there's no space here,exactly like that and you create the,snippets by the way throughout this,video i'm going to be pasting and,copying a whole bunch of code into it,you don't have to pause the screen and,retype the code at the end of the video,i'll tell you exactly where you can go,and get the code and copy paste it so,okay you don't have to go look or pause,the screen for it just wait until the,end of the video all right now that you,have this new snippet called back to the,top we're gonna paste a whole bunch of,code in there right here we're doing,control,paste,there we go and you should have about 77,lines of code that ends with forward,slash script and let's start with,comments,again i'll tell you at the end of the,video where you can get this right now,you're going to click save,because we're saving it,and then we're going to go right here to,the left to the layout folder at the,very top and we're going to click,theme.liquid,and we're going to go to the very bottom,and we're going to be looking for the,closing body tag which is this one this,is what the closing body tag looks like,forward slash body so we're going to go,right before that right here and we're,going to type enter a couple of times,spacings don't matter in code so you can,type enter as much as you want and then,we're gonna paste the final piece of,code here,render back to the top this is basically,saying hey show the back to the top,snippet code that we just created show,all that code right here,so we're going to save that,and we're going to see what it looks,like,online store,right co
After seeing the fourth section, I believe you have a general understanding of Stiletto theme shopify
Continue the next fifth section about Stiletto theme shopify
Shopify Basics | Dawn Theme | Multilanguage Store [EP 1]
Shopify Basics | Dawn Theme | Multilanguage Store [EP 1]
hello guys my name is michael myers i'm,21 years old i'm a full-time shopify,developer in this video you'll see the,basics of shopify store,like how to open a store if you don't,have it,how to,open the partner account if you don't,have it,how to customize your team how to,change settings of your store and stuff,like that also,i,show you how to change language on your,store if you don't have a shapify,account you need to go to shopify.com,and click the start free trial button,and view these fields and click on,create your store if you want to work,with shopify as a developer you have to,go to shopify.com partners and click on,join now and view all these views i'm,already have a shopify partner's account,now here's my store's first store is,mike he's about,development and i'm just enable the,shopify market's preview feature here,and the second story is also development,if you're a developer you don't have a,paid plan if you want to open a shopify,store you will have a plan okay this is,my store,if you want to go to your admin panel,just write,admin slash admin in the search bar and,you will see that admin panel is opened,so here you have setup guide and some,guides and tips from shopify for you,okay go to online store and here is the,themes that you have in this store you,if you don't have any themes here you,can explore free themes and,visit them stores that and services and,another themes for you go to actions and,here you have preview rename jk download,theme file and edit code also you can,edit languages if you have a,multi-language feature on your store if,you are not familiar with shopify you,can go to customize and here is a team,editor that you can just rearrange,blocks and section and move sections,away or move sections,i don't know just just move sections and,here you can add some block for example,yeah button and you can just change the,white ball in it it's high or click on,me so it is the section in the section,you can see blocks in blocks you can see,the contents of the block,yeah this is a header it will be the,same on other pages too and here's the,theme settings of your store or of your,header the global theme settings is here,that you can see the colors primary,colors accent color and just secondary,colors and stuff like that here's,typography and layout buttons where,mpu's inputs cards media drop downs,drawers badges and a whole bunch of,settings here so also you can change the,currency format here but about the,currency we will talk later you need to,understand that after you open your,shopify store go to settings and here,the storage details that you can fill,this basic information about the store,name we go name of company your store,industry and your address contact,information store currency in standard,and formats and just plan as i said,development stores don't have plan and,billing and just users and permissions,is important thing here,you can add stuff here if you have,members or,people who work with you,or,freelance fre
After seeing the fifth section, I believe you have a general understanding of Stiletto theme shopify
Continue the next sixth section about Stiletto theme shopify
HOW TO ADD INSTAGRAM FEED IN YOUR SHOPIFY THEME 2022
HOW TO ADD INSTAGRAM FEED IN YOUR SHOPIFY THEME 2022
welcome back graduates to another video,so today i'm going to teach you how to,add an instagram feed so far we've,already taught you how to add this uh,beautiful parallax feature that supports,both video from youtube vimeo as well as,images and it also you know has a lot of,different options overlay options,animations go watch the video here,you'll see a video here a link here to,go and see that video if you haven't,seen it already and we also taught you,how to add an faq to your uh your dawn,theme and this now these two sections,work on all themes a lot of tutorials we,teach you are that that we're going to,be teaching you uh work on all themes,there's going to be some things that,will not work on all themes but we'll,always let you know but today we're,going to be focusing on this instagram,feature where you have you can display,your images the likes the comments so,it's gonna be a good good tutorial and,you also have this little area here,where you can follow and you know add a,little uh kind of a message so anyways,let's get right to it as always we have,i have the files ready for you i'm going,to show you how to do this step by step,by step so please follow along if you,have any issues please comment below and,i will try to get to all of you out you,know as soon as possible it's always you,know difficult to comment back to all,those comments,all right i'm rambling already so as,always we start off in our dashboard,under home you're going to want to click,on online store you'll automatically,select themes and you want to go to the,theme that you want to edit and this is,the theme that we want to edit so i'm,going to edit code in a new tab and then,i'm also going to have the customizer in,a new tab ready to rock and roll,all right so,here we are let me close out all these,we don't need these open at all,and this is a customized i'm going to,show you that does not have an instagram,feed shopify you take forever to load i,don't know why,we have gigabit internet and this thing,still crawls,i don't know comment below do you guys,have trouble loading your uh your online,editor,i don't know if i'm the only one,so add section and you'll see that there,is no,instagram we got the faq from the last,video as well as the parallax image,video uh media content section i need to,come up with a better name for that all,right so what we want to do is we want,to go to sections,and we're going to call this,eg hyphen instagram,hyphen,feed,hit enter now you're going to want to,get your text editor or code editor out,like i always advise you you should,probably get a code editor like vs code,or sublime but notepad will work for,this so you want to get your file you,see this file right here and just drag,it over,and you want to do is,copy this text,paste it in and then smack save like you,should be smacking the subscribe button,please seriously it helps all right that,is there and,i'm gonna tell you all you gotta do is,smash this refresh button just like he,smashes
After seeing the sixth section, I believe you have a general understanding of Stiletto theme shopify
Continue the next seventh section about Stiletto theme shopify
How to show variants as separate products on the collection page on Shopify
How to show variants as separate products on the collection page on Shopify
hi and thanks for watching so what I'm,kind of going through here is how to try,to follow of these tutorials to show off,the colors of a products as separate on,a collection page on Shopify this has,been very highly commented on on my blog,so I figured I'd make a video to show,people how it works so the initial thing,you're going to do and is I'm gonna copy,everything above insert for loop so,let's take this and I'm gonna go in so,this is you're gonna look for your for,your the for loop of your products so in,this in this theme there's almost every,theme there's always a collection,template so what I'm going to do is I'm,gonna take this for loop of the question,and I'm gonna modify it and I'm going to,add everything from here above the,product because you can see so this is a,for loop of products I'm just going to,delete the else statement because I know,that's gonna throw me off because all,that does is tell it what to do if,there's no products in there and then,here you can see include include product,guard and that is what shows on the page,so you have everything organized here so,unless colas contains color and now I'm,gonna go in and I'm going to take cat,I'm gonna capture everything below this,I'm gonna ignore the last for loop,because it's already there and I'm going,to paste it so let me start by saving,this and I'm gonna go left here and it's,working is accordingly so now one,product you can see for variants but,obviously no other products are showing,so what I'm gonna do is I'm gonna write,everything after here I'm gonna add an,else statement I'm going to copy my,product card grid and I put this here,and I'm gonna say okay here I include,this in another one of my guides so it,could is the top if product up variant,size is greater than one I don't put,that right here so what you're saying is,if there's more than one variant do the,color sorting if there's not then just,show the regular one that's not working,so let me take a look and see what,because I didn't close this alright just,gonna take a look and all the products,are here and the ones showing its,variance this is exactly what we want so,now this is the product card grid we,don't want to touch this but we need to,modify it so what I've done is I've made,a new one called product card grid,variant so I'm saving this,so what I've done here is I've gone in,and I've found everything that's related,to the product so this includes the,image so starting with the image so,assign this are the preview image I,removed everything that was here and,it's now varying image here I'm just,going to go through start all over so,let's copy the credit card grid paste it,in,so preview image instead of product dot,featured media preview I'm interests,ignore that and change it to variant,image and that should update the very,image everywhere on the site or on this,product because it calls it right there,as preview image now continue down,perfect perfect,and then here's the product title so,what I'm gonna
After seeing the seventh section, I believe you have a general understanding of Stiletto theme shopify
Continue the next eighth section about Stiletto theme shopify
Shopify Tutorial: How to Turn Your Image Banner into a VIDEO Banner
Shopify Tutorial: How to Turn Your Image Banner into a VIDEO Banner
i'm going to show you how to turn your,photo hero banner into a video hero,banner this works for any shopify 2.0,theme no special coding skills are,required anyone can do this,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 i'm,going to show you how to do this for,shopify's free theme dawn but you can do,the same thing for any 2.0 theme i've,tried this on shopify's newest themed,taste and since as well so i'm confident,this will work with any 2.0 theme you,try but if you do end up running into,any issues and need some help you can,visit our website and fill out a store,tweaks request and we can help you out,all right so the first thing we are,going to do is duplicate your existing,theme i'm not suggesting this because i,think it's going to mess up your store,but rather so you can work on this,without it interfering with your live,store,to do this click actions,duplicate,once your theme has successfully,duplicated click on actions,edit code,now if you're tensing up and thinking,you should click off at this point,because you don't want to mess around,with the code don't worry this is a,simple copy and paste code you don't,need to do anything further,now scroll down to sections,and click add new section,name it video dash background,then click create section,you're going to have some auto-generated,code in here so just highlight and erase,all that and instead we're going to,paste in the video code for the video,code a huge thank you to ecomexperts.io,for sharing the original code i altered,some of the code in order for it to work,with 2.0 themes there was a spacing,issue with the original code and i also,switched up the look but if you're using,an older non-2.0 shopify theme such as,debut their original code will likely,work for you,i'm going to put their website in the,description box below but for,simplicity's sake rather than directing,you to their website to copy the code,and then walking you through all the,edits i just created a text document,with the updated code which you can,download from our private facebook group,so when you have the code just copy the,contents and then paste it into your,file here,and click save,now let's check to see if our section,has been added so click on online store,and click customize,then scroll down to the bottom,click add section,and you should see video background go,ahead and click on that,now i'm going to drag this right up to,the top because i want it to be my hero,banner,if you click on video slide you can see,all of your options here,the first thing we're going to do is add,our video now if you don't have a video,i highly recommend going to pexels.com,to find one it's my favorite website for,free high quality photos and videos type,in anything that would work for what you,sell so if you have a pet store you,might type in dog or if you sel
After seeing the eighth section, I believe you have a general understanding of Stiletto theme shopify
Continue the next ninth section about Stiletto theme shopify
6 Steps How To Show Only Selected Variant Images in Product Page - NO APP or EXTERNAL LIBRARY
6 Steps How To Show Only Selected Variant Images in Product Page - NO APP or EXTERNAL LIBRARY
hi everyone in this tutorial we're going,to do six steps how to show only,selected via images in our product page,no app or external library needed and it,works with dawn 2.0 to dawn 5.0 or even,on other shopify 2.0 free teams so this,is what we're adding here,so i have multiple bikes,it has two variant options and when we,go to view fall details,to go to our product page it should show,all the images at first load,but when the user click on this variant,option it should only show 45 cm and sky,blue corresponding images so i assigned,a media alt,that would correspond to the variant,option so for this image in here i have,the 45 cm,and i have sky blue in here,and when we change it to other brian it,should still work,and see the 54 cm and 45 should still,gonna work,so everything should work,so when we right click in here and click,inspect,and click this button right here to show,a device or mobile view,and then we're gonna reload,okay so right now i have 23 images and,when we go click on this one it should,correspond to how many um images you,have so i have,five,uh form of that color and it should work,still,and it can change it to the size and,also the swiping still gonna work in,here,okay and that is for without hiding the,thumbnails if we change the team editor,settings if you go to your admin store,just click customize and it should open,your team editor but i already have it,open here and this one is the homepage,let's go to the products,and then default product,so there is a lot of options that,shopify offers click the product,information and you should see more,options in here so in the desktop layout,you can change it to thumbnails or,carousel so let's try the thumbnails,and i'm gonna change this product let me,go to the other product,so let's go on this one,so this is for the thumbnails and it,should work the same um,you're still gonna,have this corresponding images,and um there's also another option which,is the thumbnail carousel,if we load we should have all the images,we should have the corresponding when,someone click on the variant so when we,go to red the,slider should still work,and also there's a desktop media size so,this is medium and there's a small,so everything should still work in here,and when we go to buttons it should work,so this one i have five right so if i,have four there should be no slider,buttons when it's like less than the,maximum numbers of images,we tried the medium so we're gonna go to,large it should still work so large have,like five images in here,so if we go to my multi-color,i mean this one is going to show all the,images right so let's go to,54 and yes there should be no slider,buttons because it's total five,and on my multi color i only have four,images so there should be no slider the,same with the blue black and scablo only,have five but red has multiple so,it should the slider should still work,and there's a mobile layout that you can,choose as well you can show thumbnails,on mobile so when we go to,
Congratulation! You bave finally finished reading Stiletto theme shopify and believe you bave enougb understending Stiletto theme shopify