#1 TikTok Ads Spy Tool

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

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

shopify envy theme

Published on: January 2 2023 by pipiads

How to update your Shopify theme without losing customizations

Hey everyone.,Thomas here from Archetype Themes, here to tok to you today about upgrading,your theme to the latest version.,Now, there comes a time in every merchant's journey after they've,bought our, one of our themes after they've set it up, it's running, it's,making sales and you let it run for three months, six months a year and,eventually you'll need to upgrade.,That reason for upgrading could be one of many.,Maybe there's a new feature that's in one of our latest versions that you,wanna take advantage of; a new section.,Maybe there is an app that you're trying to integrate with that works,best with the latest version of our theme, or maybe there's a bug that,was introduced for one of many reasons that is fixed in the latest version.,One of the things that you get when you purchase one of our themes is,access to the latest versions for the entire life of that product.,Actually getting that theme installed is another process in itself.,And it will vary depending on the number of customizations that you've made and,how complex those customizations are.,We recommend that you upgrade your theme at least once a year,,especially before any big sales season like black Friday, summer Monday.,Now, when it comes to upgrading, you have three options available to,you: manually updating, the theme updater app, or hiring a professional.,So without further ado, let's get started exploring our first option,,manually updating your theme.,The process of manually updating your theme involves copying and,pasting configuration files from the old version to the new version.,In addition to these configuration files, you might also need to be copying,customizations that were done to the previous version, such as styling tweaks,done by a developer or modifications made by an app when it was installed, so that,it integrates properly with your theme.,It's really dependent on your partikular situation and the setup that you have,achieved with your previous theme.,Let's take a look at how we go about copying configuration,files from one theme to another.,So here we have our store, as you can see, we, our published theme,has expands version 2.4 installed.,And below here we have expands 3.1 installed as an unpublished theme.,Now you can see if we were to preview this new version of expands.,It doesn't look at all like our published theme.,These are the default styles that are provided with expand.,So to get started, let's go to our online code editor, edit code,,and let's start with the global configuration file settings.data.,So, what we're gonna do first is select all which is command or control,a and then copy command C control C.,Next you're gonna go back to the previous screen, where we saw both of,our themes and go to the code editor for the new version of the theme.,Scroll down to the same file settings.data.,Select all command a control, a and pace command V control control B,,and finally, we're gonna hit safe.,So let's take a look at how things look so far by hitting preview store.,So as you can see, a lot of styles have already been copied over to our theme.,Our header is the right color.,We have our logo, the fonts have been set and generally things,are already looking really good.,If you're running one of our themes that was made before summer 2021, that,is a theme that's not online store 2.0, then this might be the extent of,copying and pasting that you need to do.,That's assuming that there's no other customizations inside the theme code.,If you do have additional customizations or if you're running an online,store, 2.0 theme, stay with us.,We're gonna keep going down this rabbit hole of manually updating our theme.,So, as you can see here, our homepage is styled correctly, but,the contents aren't up to date.,We have placeholder images.,We have placeholder text, let's get the homepage content into,the new version of our theme.,So to do so we're gonna go back to our theme page.,Let's go back to our old theme and at code, and we're gonna go,into the templates folder here and look for index dot Jason.,Index is another name that is used for the homepage.,Same thing.,We're going to command a command C,Go back to the newest version of our theme.,Hit code editor.,Go to the same file.,Command a and command control V to paste in the old contents, into the new homepage,hit save, and let's take another preview.,Wow.,Look at that.,So now our homepage not only is styled the same, but the contents are there as well.,Our slideshow has been populated.,All of our other sections are looking exactly how they.,Continue the process of copying the contents of these template.,Jason files from the old theme to the new theme.,And before you know it, you should have a fully styled updated theme.,However, if you do find yourself in the situation after copying all of these,template, Jason file contents over that things aren't working as expected either,a section's not configured correctly or something that you click isn't responding.,Then it probably means that either there was a breaking change in the,configuration between the old version of the new one that doesn't match.,Which will require some tweaking or that there was a customization done,somewhere else in a theme code that you'll need to track down and copy from,the old version to the new version.,The problem with these customizations is that unless you did them yourself and,remember what it was and where you did it, they can be really hard to track down.,This is one of the biggest advantages.,That option number two for updating your theme provides,that is the theme upgrader app.,Let's take a look.,The theme data app by out of the sandbox makes upgrading your theme even easier,by transferring configuration files from one theme to the new version,,as well as theme customizations.,So those customizations that may have been hard to track down,manually are automatikally picked up by this app and transferred,to the new version of your theme.,Previously, this app only worked without the sandbox and pixel union themes,,but thanks to a recent partnership, it now works with all of archetype themes.,In addition, all archetype customers receive a 14 day free trial.,So you may as well install it on your shop and see if it can,help you with your current theme.,Upgrade.,It's worth noting that this app will not be able to help you if,you're upgrading from a legacy theme to an online store, 2.0 theme.,The difference between these two types of themes is just too big.,Even for the app to handle.,Let's take a look and see what updating a theme with a theme updater app looks like.,So what we have here is our general interface.,That's showing the registered themes, the purchase themes that we have on our store.,Here, we are going to start by upgrading this theme right next to me here.,So to update, we first go and hit the update button.,And you're about to sell a new version of impulse.,Here's the name?,It's just gonna tag it with our date and we want to preserve theme,file customizations, hit update.,There we have it.,The theme is updated.,Latest version and all of our customizations from the previous,version have been poured over.,In most cases, the theme updater app makes it easy to upgrade to,the latest version of your theme.,But what if you're upgrading from a legacy theme to an online store, 2.0 theme,,or if your theme is heavily customized?,Well, for that, we need to look at the third option, hiring a professional.,So you've tried manually updating your theme and you've tried the,theme update our app, but both options have left you with a theme.,That's not quite working like the original you've now probably arrived at the point,where you need to seek the help of a professional and a professional will,be able to specifically figure out what customizations are not transferring,,and hopefully be able to get everything over to the latest version without any.,If you find yourself in this situation, we here at archetype,typically recommend reaching

Best Converting Shopify Themes in 2021 Review

hey this is nathan from money matters,and welcome to our review of the best,converting shopify themes in 2021,you'll find the links to the products in,the description and you can use the,links to check the latest prices,and other user reviews make sure to,watch until the end of the video to know,which converting shopify theme,in 2021 is the best turbo theme best for,converting,the turbo theme is one of the best in,the market for converting part of the,reason for it making it at the top of,our list,is how fast it is when it comes to,online shopping speed,plays a major factor when it comes to,boosting your seo rating,and the turbo theme works great for you,the speed is great without harming the,design,how the turbo theme operates is that it,works like a pull for shoppers to make,sales,the navigation is intuitive and simple,the theme remains unchanged whether,you're using it on the mobile or desktop,what we liked highly customizable theme,suitable for e-commerce sites,the navigation is simple and intuitive,and works well for both desktop and,mobile,the theme loads pretty fast hence making,it ideal for boosting your seo rankings,what we did not like some may not like,the visuals,flex best customizable theme flex is one,of the most customizable shopify themes,in the market,it offers users multiple layout easy,addition of custom css,section options plus up to 13 unique,style variants,with flex you have so much control over,how your store looks,this is great as it helps to blend your,company's tastes with the theme,the flex theme is quite ideal for small,businesses where visuals really matter,as you can customize to meet your needs,freelancers developers and agencies,will find the over 13 pre-designed demo,stores in handy,this helps you eliminate the need for,starting your design from scratch,once you have the demo going you can,then customize the layout for your home,page,then add custom css to any section of,your website,what we liked one of the best shopify,customizable themes,13 pre-designed demo stores to choose,from ideal for those who do not want to,design from scratch,unleash your creative juices through,multiple custom css,what we did not like maybe confusing,choosing from all the styles,retina best for footwear jewelry and,apparel,this is a great theme for those planning,on selling certain apparel like t-shirts,footwear or jewelry the best part is how,the theme enables you to create perfect,product images,that are well positioned on the website,you can also add videos to help sell,your product better,another neat feature is their slide out,cart that comes in handy once the,customer has settled on a product,the theme is not as customizable as the,flex theme or as fast as the turbo,but it is pretty nice if you have a cool,t-shirt you want to sell online,with retina you're also able to offer a,wealth of information on the home page,like google map with contact form store,info,testimonials and logo list upgrades to,the theme now comes with an faq template,special templates and additional options,for button styles,what we liked works well for single,products like jewelry or t-shirts,you can customize it the way you want,updates to the home page allows you to,offer more information like faqs,what we did not like not as highly,customizable as the flex,narrative best for storytelling the,theme is for those who want to use a,storytelling narrative to share their,products,it comes with four styles warm earthly,cold and light,the narrative theme is ideal for those,selling single products,or smaller number of products it also,allows the user to create videos that,auto play on the home page,you can also showcase the finer details,of your product through customizable,quote slides,image blocks and so much more the theme,also allows you to create a better,browsing experience,by servicing your logo menu and cart the,moment users start to scroll that page,the narrative theme also comes with free,theme updates customizable content,sections on the home page,social media icons drop down navigation,support among others,what we liked one of the best one-pager,converter themes,narrative theme is ideal for high-end,tiknology goods that fit on the home,page,the hero video helps you get into more,details about the product,what we did not like not suitable for,multi-page stores,best for featured products if you sell,products like cosmetiks,personal care food and beverages or home,products,then you should try out the envy theme,the layout is perfect if you want to,showcase some of your best products this,prevents customers from moving about,your website aimlessly without finding,what they want,the theme works better for mobile,screens than desktops the theme comes in,four cool styles,copenhagen oslo gothenburg and stokholm,some of the theme key features include,the marketing pop-up that allows one to,share promotional messages with,customers,a multi-level menu with a drop-down,feature promotional banner that lets you,showcase your discounted products,product image zoom allows customers to,have a closer look at a product,when you select any of the themes from,shopify you also get access to seo,social media icons free theme updates,and more,what we liked ideal for selling fast,moving goods and discounted items,the layout is designed well for hero,products the layout is ideal for mobile,view,not desktop what we did not like the,layout does not look that well on your,desktop,our top pick is the turbo theme we were,impressed by how fast it loads,if you like this video please hit the,thumbs up button and subscribe to our,channel,also let us know which video you would,like to see from us next

More:Top 10 Winners to Test on Facebook ads in February 2022 (Shopify Dropshipping)

Increase Shopify Store Speed without coding Easily (For Non Developers)

in this video i'm gonna show you how to,increase the loading speed of your,shopify store without hiring any,developer and without coding just by,following simple basic stuff i have been,in shopify for over four years and over,the years i have run multiple drop,shipping stores help many people start,their online business and right now i'm,using shopify to sell my own products,for all the shopify stores i had i have,managed to have the best possible,loading speed thereby reducing bounce,rate and increasing conversion rate i,have done this without hiring anybody,and without coding the thing is that,shopify itself is built for anyone to,start their online store without coding,so in reality you don't need to do any,coding or hire a developer to increase,the speed of your shopify store,if you do some simple basic things in,the right way your shopify store will,have an amazing loading speed so i'm,gonna be sharing you four simple things,which i follow when i run a shopify,store in order to have a fast loading,speed thereby increasing conversion rate,alright guys the first thing is not,actually a tip but it is the main,concern for most people it is gt matrix,gt matrix is a website that measures how,fast your website is loading so if you,have been using zt matrix to measure the,loading speed of your website you have,been measuring it in the wrong way the,results of zd matrix are not consistent,and it bearish from day to day okay just,to give you an insight i did a test on,gt metrics for billion dollar company,like zim sock and kylie cosmetik and i'm,gonna be sharing the result with you on,the screen right now and as you see the,results are really really horrible so if,a billion dollar company gets a really,bad metrics on gd matrix you can decide,so if your website scores b it doesn't,mean it's bad the real way to measure,the loading speed of your website is,through your browser so in whatever,browser you are using there should be a,mod whether it is incognito or private,mod so what you want to do is go into,that mod and type in the domain of your,website and see how it loads the way it,loads in the incognito or the private,mode is how your actual website is,loading you can try it in different,devices in your pc in your laptop or in,your phone in your tablet and see how it,responds if you are happy with it you,are good to go what i'm trying to say is,that even if you have a website that,loads really fast and you use gt matrix,to major it may solve really bad data,and you may feel bad and feel like you,need to do something for your website,while in fact your website is perfectly,fine so that's the first thing i want to,tell you don't use zd matrix to measure,the loading speed of your website,instead use incognito mode or private,mod in your browser the second thing is,really simple it is to uninstall all the,apps which you are not using so,literally uninstall every single app in,your shopify store which you are not,using in fact the way to avoid using a,lot of apps is to use the team which,come with inbuilt apps the real problem,with shopify app is that when you,install an app it install a piece of,code into your shopify team pile and,this line of code often ends up,conflicting with your team pile thereby,reducing the loading speed of your,shopify store the problem is that for,some app even after you uninstall the,app it leaves a line of code in your,shopify store conflicting with your team,pile and it keeps reducing the loading,speed of your shopify store so as a,precaution whatever team you are using,before customizing and adding any kind,of app make sure you make a copy of the,original theme file so in case anything,goes wrong with the theme you can always,come back to the original file and do,the same thing from scratch the way i,have managed to solve this app problem,is by using the beautify so regarding,using less apps the game changer for me,was using the team the beautify my first,year in shopify i was experimenting with,a lot of free and bad team but then i,switched to the beautify and i have,never looked back the beautify in my,opinion is the best shopify team ever,right out of the bed the team lots,extremely extremely fast and the,beautify offers more customization than,any other shopify team it is much more,flexible in designing your shopify store,whether it is a home page product page,or any kind of pages and the thing which,i love about db25 are the inbuilt apps,which they call add-ons at this moment,they have more than 50 plus add-ons so,these add-ons are basically apps which,are built inside of the theme meaning,using these inbuilt apps will not slow,down the loading speed of your shopify,store it has a wide range of add-ons to,enhance the look of your shopify store,to increase your conversion rate and to,also increase your average order value,it has things like trust seals and,badges which looks really clean and,professional stiky add to cart add to,cart animation to increase conversion,rate it has things like card countdown,timer product bullet points it also has,add-ons to increase the conversion rate,by offering a lot of upsells in the,product page and the card paste so with,these add-ons you can customize your,product page and your card page to have,a much better conversion rate and to,stand out in the competition which is,really important in 2022 the beautify is,100 percent free to install so make sure,you check it out i guarantee you you,will not like it you will love it at the,time of recording this video the,beautify has 54 add-ons best speed,booster it even has an add-on,called best boot booster which will,increase the speed of your shopify store,alright guys point number three is,actually an opposite to point number two,that is to install an app the app goes,by the name best speed optimizer and i,use this app in all my shopify store,there are some apps in shopify app store,which promise you to increase the,loading speed of your shopify store but,ends up doing the opposite but this,partikular app which is free from my,experience this app is doing a really,great job to be honest this app doesn't,actually increase the loading speed of,your shopify store but it creates the,illusion that your store is loading,really fast so let me try to explain it,in a simple way when someone comes to a,landing page of a shopify store this app,actually starts loading the other pages,that is linked to the landing page so,when the visitor clicks to another base,from the landing page it loads,immediately actually the loading started,even before the visitor clicks on,anything,but when they click on the button it,gives the illusion that the base loads,almost instantly you may not understand,what i just said but this app just,improves the visitor experience by,creating the illusion that your shopify,store is loading faster alright so the,last tip i have for you is to resize,your images so when you click a photo,with your phone or your camera or you,download a stok image to be used on,your website it tends to have a really,big file size these photos will range,anywhere between 2 mb and some even more,than 5 mb this greatly reduce the,loading speed of your landing page the,way to solve this is to resize the,images without minimizing quality,to do this you can go to app store or,play store just type in emails,compression before you upload the image,in your shopify store make sure you,compress the image if the app gives you,an option of how many pixels you want,you can go for 1000 pixels max don't go,beyond that because it is really,unnecessary so normally a photo or an,image which is clicked with your phone,camera or a stok image will have pixels,of around 4000 and some even six or,seven thousand pixels,so when you resize it down just to 1000,pixels the size of the image will be,reduced to around 100 kb and some even,at the maximum 300 kv which is much,lower than what the original file was,and just by doing this it will greatly,increase the loading speed of your

More:shopify after hours

How To UPDATE Your Shopify Theme

all right everyone christian here today,i'm going to show you how to keep your,theme up to date super super important,let's get started,so shopify recently released os 2.0 and,with all of that all the themes and the,theme store have been updated to us i'd,say 99 of them have been updated uh,which means that you should definitely,update your theme right now,now,essentially now is the perfect time for,you to update your theme if you haven't,uh there are two ways in which you can,do this um first we're going to do the,old way,it's a little bit more cumbersome,since,actually maybe a few weeks ago a few,months ago they've added the ability to,do this a lot easier but i'm still going,to show you some of some of the other,ways so,shopify and other theme designers,frequently release updated versions of,their themes that they publish on the,theme store so,these updated versions usually include,bug fixes,and a lot of times some new features too,so it's important for you to keep them,up to date on a regular basis what i,would probably recommend is that you,check it,once a month or once every two months,and you just go through this process,make sure that you're,up to date with everything,and just kind of move on,again,bug fixes and new features and then just,the ability to,potentially load your website faster or,all things that you want and your,customers want as well so this is,something that i haven't seen a lot of,people uh necessarily tok about but,it's super important to add to your uh,sort of things that you should do a,maintenance maintenance wise right for,your shopify store because it doesn't,happen automatikally so step number one,is to check what theme you're actually,using so do that very simply we just go,to online store and then right here,under themes,it will show you the live theme that,you're using here at the very top so,right now we have venture and then we,have the,version 9.4.1,right here and then if you scroll down a,little bit you'll see your theme library,so these are the other themes that,you've added to your store some of them,could be team throughout,theme trials,or just some older,themes,in there so now we can see that we have,venture and that's the latest version,that we have installed right here now,step number two again this is the sort,of the old way of doing this uh it would,be to go to the theme store and actually,find your theme so we're just gonna do,that really quickly just to kind of show,you what we do in here so we're going to,look for venture,click on that,and then we're going to click on venture,as you can see like venture is not an os,2.0 site let me go back so you can see,it doesn't have the tag for the os 2.0,here so i would recommend not to keep,venture and move on to something a,little bit better but for the purpose of,this tutorial we're going to do this and,then what we want to do here is log in,and then let me grab this real quick,copy,paste,okay so now that you're logged in then,uh this depending on the actual theme,and if it's up to date right now it's up,to date because we don't have any other,um,buttons here but if it weren't up to,date it would say,update to the latest theme essentially,so let's see if we do,let's just do,dawn here,let's click on publish,just for the purpose of this exercise,um and i know i've been ignoring this,because that's the new way of doing it,so let's go back over here let's go to,all themes,um,[Music],let's go to dawn,yeah when we do that we're essentially,just adding a new theme so if you see,it's loading but it's going to be the,latest version of this partikular theme,now before we move on i just want to say,bienvenidos my name is christian pina,one of the co-founders here at bib,branding we're an e-commerce growth,agency that specializes in helping,clothing stores grow and scale,profitably online we drop new videos,every week so make sure that you hit,that subscribe button and turn on,notifications so you don't miss out,so once your,new theme has been updated here you,essentially again this is sort of like,the old-school method of dna you would,essentially have to go in here customize,it and,make it you know however you have it in,your current theme so let's say for,example we had venture and let's click,on customize for the venture theme so as,you can see like we have we have all,these sections in here they have uh,their headlines and their pictures,already set up so we would essentially,have to go in here and click on,customize,and then make all those changes right,within this this partikular,updated version of this theme and that's,how you would essentially do that now,the newest version on how to update your,theme is a lot simpler,all you have to do is,depending on if you have your current,theme right here you'll see that you'll,get this message this little green,circle and it'll say dawn version 3.0 is,available now when you click on that,uh you have two things that you can do,here uh you can just add to theme,library or you can click on view the,release,notes now,they've recently added this and it's,super super awesome because your,customizations will be automatikally,included,oh that's awesome that's amazing so that,means that all of the customizations,that we've made to this partikular theme,my live theme would automatikally,translate to this version,we can also click on the release notes,so we can actually see exactly,what updates,this new version includes now before we,move on to some of the last little,details here i do want to tok about our,sponsor triple whale now more than ever,you need to be able to see your blind,spots and opportunities in your clothing,store and that's what we found triple,well you can see the link in the,description below this will literally,put all the data points that you need to,know about your business into one place,so that every single day you can see,your gross profit net profits,opportunities um in order to grow,profitably for your business so check,that out in the description below okay,so as we were toking here these are,just the the release notes for this,partikular theme um again,this works for people who have themes,inside of the theme store when it comes,to,third-party themes that you've installed,which you can do that,you would have to contact their support,and see how they handle,updating the the themes,maybe you'll have to pay extra fees or,not but when it comes to all the themes,inside of the theme store you don't have,to pay anything extra you get,automatikally all these new updates,because you've already paid for that,partikular theme which is really really,awesome now,after you've done let's click oh let's,go ahead and do the new way here click,on that and add to the theme library and,it'll give you this notike here this is,copying your existing customizations to,the updated theme which is awesome now i,would probably recommend that you figure,out exactly when people are maybe,not as busy you know navigating your,website so,let's say like you do a live sale on,fridays at three o'clock i would not,update your theme on friday at three,o'clock um i would do it some kind of,like the after hours right because you,want to be able to ensure that all the,apps that you have connected that all,the customizations that you have in here,that everything is up to date and that,everything is working correctly so for,example if you have an app that has the,for example the product reviews right on,your product page then you want to,ensure go to customize go to your actual,store,look at the preview and see how that new,app behaves with with the new theme,i will say that,apps are still updating as the os 2.0 um,features are,out there now so,you will see maybe a little discrepancy,between these apps and then the os 2.0,uh theme so keep that into consideration,when you're updating make sure that you,check all of your apps make sure you,check all your customization and it,looks like we're done here so i'm going,to click on review theme to see ho

Add Hover Effect to Header Menu - Sense Theme Shopify

hey guys so today i wanted to show you,guys how to implement a hover drop down,menu in the sense theme in shopify so by,default on the sense theme you'll notike,we have to click these menu drop downs,and so too with these sub drop downs to,get them to drop down and so the outcome,of implementing this tutorial you'll see,is we just hover over these and they,drop down and so i'm gonna make two,videos in this series and in the first,video we're gonna cover how to get these,to drop down and also add an option in,your shopify backend for toggling them,and in the second video i'm going to,cover,now that these are hover drop downs uh,how can you make these main menu items,or sub drop down items how can you,re-add the clickable link to these,so here we are in our sites admin and,the first thing that i want you guys to,do before doing anything else is go,ahead and click this duplicate theme,button here and that's just going to,give you a sort of a save point for if,you make any mistakes during this,tutorial you'll be able to easily revert,your site back to that save point and,retry but once you've done that go ahead,and click edit code here and you'll,notike uh here's all your themes files,uh we're gonna find the header.liquid,file in your site's sections you can,either click on this folder or you can,type in header here and click on this,file,once you've navigated to that file i'm,going to go ahead and click this to make,it so we can code in full screen here,and i want you guys to navigate all the,way down to right before this schema tag,here so i'm going to leave a comment by,pressing ctrl or command and then the,slash,and that's going to give me this nicely,formatted comment and i'm going to put,add hover drop down here this is,obviously optional we're just notifying,ourselves this is where we've added the,hover drop down,if we ever want to go back and change it,now you guys are going to go and check,the pinned comment on this video and,copy the script tag which should be the,first piece of code that i've included,in there and so this script basically,just grabs all of our header items and,for each item it's going to add an event,listener,for when we both mouse over,and after we've done that we're going to,add an event listener for when we mouse,out,and on the mouse over we're going to set,this open attribute to true and we're,going to set this area expanded to true,as well,and we're going to remove those,on the mouse out,so after we've saved that,we can navigate back to our site and,refresh it,and you'll notike now that the hover,drop-downs are functioning so in the,second part of this video what we're,going to cover is how can we toggle this,and,make an option in the store,customizer so if we ever want to turn,off this functionality for testing or if,you want to go a different direction,with your site,there will be an easy check box to click,and just before we do that one thing to,note with this hover drop down is it,does rely upon how you structure your,sub menus so for instance this sub menu,works because this sub item is at the,bottom,and um you can see that when i go up,from the sub item,and off of the sub drop down it closes,and we're still on the main drop down,this,is also going to work here this made,this menu drop down number two,because the sub item is small enough,where these two items will make up the,difference when we mouse off,however this menu drop down three does,not work because when we try to navigate,down to item one from sub item two,item one isn't large enough to cover the,distance for,the,uh,sub drop down so that's just one thing,to note just be careful of how you're,structuring your menus and so now let's,focus on how we can toggle this feature,in our customizer,so i'm going to add this liquid logic,here,and i'm going to say if section dot,settings dot,hover,then we're going to do this,and anytime i have an if tag,i obviously need to close the if tag,so we're just going to do that here with,an endif and so both of these pieces of,code are in the second,portion of the pinned comment on this,video and now we need to actually create,this variable in our schema,so i'm going to put it right next to the,stiky header,but you can really put it uh wherever,but i would i would recommend putting it,here just so you to make sure you're in,the same place i'm going to go ahead and,copy paste this,but you can copy paste the,third piece of code,in the pin comment on this video,and i'm going to change this check box,is fine i'm going to change it to be,hover this id needs to be the same as,the id that you used in the liquid logic,we can default it to be true that's fine,our label um,we actually we can get rid of this info,here we don't need this,and our label,uh we're going to make this the hover,label,so we can save that,now we need to go create this hover,label now we want to find the schema,default schema file,so mine's english if you're using a,german site it'll be this d,and likewise for french or any other,language but i'm going to go ahead and,open this if it opens like this where,you can't see any code just simply,refresh the site and so now that we're,in here i'm going to search for stiky,and i'm going to go ahead and open this,up in full screen again,and i'm going to copy paste this as well,instead of enable stiky header,i'm going to just type hover,i'm going to get rid of info because we,don't need that,and i'm going to change this to be hover,now once we've saved,um i'm going to open up my online store,in the customizer so now you'll notike,when we navigate to this header element,in the customizer,there's both enable stiky header here,and enable hover here which was not,present before and so you'll notike with,this on,this hover drop down is still,functioning,but if i turn it off,it no longer functions and i have to,click on these so if you guys want these,main drop downs to be clickable and,these sub drop downs to be clickable to,navigate you to perhaps you have a,collection,uh linked here or some other link here,then go ahead and click the video that,should be popping up right about now or,if you have any problems or questions,implementing this leave a comment down,in the description and i'll see in the,next video guys

How to work with Metafields on Shopify Themes

嗨 我是 Shopify 的佈景主題 開發人員推廣者,在這段影片中 我們要學習使用中繼欄位,在 Shopify 商店的個別頁面中顯示自訂內容,中繼欄位是關於特定資源的資料,可以在相關的頁面顯示,建立自訂資料與產品 產品系列,和其他網路商店資源的連結,即可增加商家可用的核心欄位,創造出更好的個人化效果,隨著 Online Store 2.0 推出,原生系統就能支援中繼欄位 也可在 Liquid 使用,使用者可以在佈景主題程式碼,以及 Liquid 區段設定中找到,現在就來看看佈景主題開發人員 能怎麼利用中繼欄位的威力吧,先來看開發商店的網路商店管理介面中,建立中繼欄位的方式,點擊設定並進入中繼欄位,就能看到可以建立中繼欄位的不同素材,包含子類 商品系列 顧客等,現在我要為產品建立中繼欄位,可以看到我已經建立了兩個中繼欄位,這些是我剛才建立的,點擊「新增定義」並建立新的中繼欄位,我現在可以為這些中繼欄位 輸入幾個不同的屬性,在名稱欄輸入「國家/地區」,我想顯示這個產品的生產國家/地區,接著是「命名空間與關鍵字」,命名空間就是,中繼欄位隸屬的群組,你可以為不同的中繼欄位類別,建立不同的群組或命名空間,而關鍵字就是中繼欄位的名稱,輸入關鍵字即能代表,存取與中繼欄位相關值的方式,描述欄是選填欄位,這個欄位只是紀錄與參考之用,而選擇內容類型,則是發揮效用的關鍵,你可以在這裡發現許多功能強大,且可以做為中繼欄位的內容類型,例如日期與時間,可以在此設定產品自某個日期開始提供,或者特定的運送資訊,日期與時間會是很好用的中繼欄位,也可以設定產品的尺寸資訊,例如重量 體積 密度,在這種情況下非常好用,除此之外 還有 URL 和檔案,可以在此輸出自訂影像,但現在的重點是文字,因為我們要輸入的是國家/地區名稱,所以我們只會使用文字,此外還有一些驗證的選項,我已經建立了國家/地區中繼欄位,建立完成後,我要回到產品,在管理介面中,選取任一產品 點擊「編輯產品」選項,可以在頁尾看到中繼欄位區段,顯示了我們正在編輯的「國家/地區」,另外是自訂影像 可在此選擇檔案,而「國家/地區」欄位只能填入單行文字,我可以在此輸入文字,我可以輸入製造國家/地區 然後點擊「儲存」,這樣一來 就建立好與產品相關的中繼欄位,在我們學習如何透過佈景主題編輯器,存取中繼欄位之前,我想先示範中繼欄位 在佈景主題程式碼中應用的方式,這是佈景主題的「主要產品」區段,我要在此輸入剛才建立的中繼欄位定義,如你所見 我用大括號將產品中繼欄位定義標註起來,與 Liquid 物件的方式很類似,這是我們剛才建立的定義,product.metafields.myfiedls.country,並且加入 .value 讓系統回傳值,同樣地 myfields 是命名空間 country 是關鍵字,value 可以回傳值,我們再次用大括號標註這些數值,就像 Liquid 物件一樣,儲存後 回到我的商店,點擊產品頁面,可以看到中繼欄位正在顯示,與產品相關聯的中繼欄位「葡萄牙」,就是從這個中繼欄位載入 或說顯示的,這個方法用途很廣,你也可以直接在程式碼中使用中繼欄位,此外 你也可以指派中繼欄位,或者套用 liquid 篩選條件,用法就像 Liquid 物件,可以套用篩選條件,這裡有一個包含影像的中繼欄位,我要套用影像 URL,我要指派寬度 並使用 liquid 篩選條件,標記成影像標籤,儲存之後,前往包含影像中繼欄位的產品,就能看到影像顯示在頁面中,這是我剛才透過管理介面指派的影像,這個方法很好用,使用方式很廣,接著我們還要來看 自訂 liquid 區段存取的方式,首先,前往佈景主題編輯器,打開已指派「國家/地區」中繼欄位的產品頁面,加入自訂 liquid 區塊,我們已經知道可以使用大括號,透過 liquid 存取中繼欄位,也能在中繼欄位定義中 輸入值屬性,因為這也是一個自訂 liquid 區塊,所以也能加入 HTML,並在中繼欄位的周圍新增內容,這個作法可以讓顯示方式更有彈性,這是一個區塊 所以也能移動位置,儲存區塊之後 區塊就會出現在,所有相關聯的產品頁面中,這樣一來 就能在產品頁面中看到,中繼欄位呈現漂亮的內容欄位區塊,但不是所有產品,都要包含國家/地區中繼欄位,因為這個區塊已包含在範本中,所以不需「國家/地區」中繼欄位的產品 也會出現這個區塊,進而導致產品頁面出現 中繼欄位空白的區塊,為此 我們可以透過 liquid,使用 metafield.value 物件,建立一個條件 限制只在值存在時,才顯示區塊或區塊中的內容,我們能使用控制流程文字來建立條件,限制系統僅在中繼欄位存在值時 才執行動作,如果中繼欄位不是空白的,頁面才會顯示「生產國家/地區」內容,為了示範,我們要回到自訂 liquid 區塊,設定剛才所說的條件,你可以在這裡看到 如果產品中繼欄位,「myfield.country.value」不是空白,還有包含元件的段落元件,再加入條件,這個作用就是檢查,國家/地區值是否存在,如果值不是空白 就能執行其他程式碼,也就是段落,如這裡所見 在我加入程式碼後,沒有中繼欄位的產品,就不會顯示中繼欄位了,但若回到包含中繼欄位的產品,就會顯示「葡萄牙製造」,這就是透過 liquid 納入中繼欄位,建立動態內容的方式,建立佈景主題時 別忘了加入,自訂 liquid 區段與自訂 liquid 區塊,讓商家可以直接透過管理介面編輯器,編輯中繼欄位,設定類似的條件,接著我們要來看看動態資源,動態資源會以特定的輸入設定 連結中繼欄位值,也就是說 想存取中繼欄位的商家,可以省略輸入中繼欄位定義的步驟,只要從區段設定新增即可,怎麼做呢?,舉例來說 我們可以在產品頁面新增文字區塊,如你所見 文字欄位中有幾個佔位符,以及「插入動態資源」,點擊文字欄位上方的按鈕,即可顯示所有可存取的中繼欄位,例如文字類型 以及前面提過的內容類型,這裡有一個「國家/地區」中繼欄位,可以新增至此,點擊這裡 再點擊插入,就能看到文字顯示,同樣地 我們也能在此新增文字,這個功能很好用,因為這能讓商家快速地,插入不同的動態資源,在管理介面建立中繼欄位後,中繼欄位就能在商品頁面與商品系列頁面中 以動態資源的方式顯示,也能在其他商品或商品系列的 頁面區段中顯示,舉例來說 若首頁有精選商品系列區段,就能在此存取動態資源,這對商家來說非常好用,可以增加中繼欄位的應用方式,建立佈景主題時 請務必加入足夠的欄位,好讓商家同時套用動態資源,某些商店資料屬性 例如產品名稱與廠商,都已經是預設動態資源,示範一下 回到產品頁面,看看主要產品區段與不同區塊,可以在頁首看到文字區塊,這是 Dawn 佈景主題 你也可以去搜尋 Dawn,看看其中的設定,在第一個文字區塊中,能看到稅金設定和廠商動態資源,這是系統的標準預設動態資源,無須建立中繼欄位,如果你想瞭解,在佈景主題程式碼中 指派特定預設動態資源的方式,你可以前往產品.JSON,可以在此看到所有區塊的設定,而在文字區塊中 你可以看到,我們新增了 product.vendor 的 liquid 物件,新增文字設定的值後,就會看到動態資源自動出現在此,這個功能很強大,這樣就能讓商家使用,帶點自由度的標準設定,同時又能讓商家更快完成商店的設定,此外你也可以預先製作,包含動態資源的區段設定,但尚未在商家商店中定義,你可以在 Dawn 的精選產品區段中找到實例,這裡有幾個欄位,包含尚未定義的動態資源,舉例來說 在這個文字區塊中,有個輸入設定包含稱作 「產品副標」的動態資源,這個中繼欄位還沒建立,但旁邊有個標籤 顯示了建立方法,這樣一來 商家就能快速瞭解,如何新增中繼欄位,使用這個技巧時 務必記得,設定幾個選填起始區塊,確保你使用的是標準中繼欄位定義,舉例來說 這個產品的副標區塊,有一個保留的命名空間 與 descriptors.subtitle 關鍵詞,都是專為這個動態資源而保留的,這個方法也很好用 你可以透過動態資源,建立選填設定,提供商家暗示 進而鼓勵他們,完成簡單的商店顯示設定,我們在開發人員文件中 列出了標準中繼欄位定義,這能確保佈景主題,能與整個 Shopify 生態系統互相操作,並與其他能夠使用中繼欄位的應用程式相容,現在我們學會如何建立中繼欄位,如何將中繼欄位與動態資源連結,以幾種不同方式存取,並將中繼欄位預先植入佈景主題的區段設定,若要深入瞭解中繼欄位,請查看影片描述欄中的文件連結,也能查看佈景主題 Dawn,看看已套用中繼欄位的佈景主題範例,如需更多關於 Shopify 佈景主題開發資訊,記得訂閱這個頻道,以及閱讀 Shopify.dev 上的文件,你也可以加入 Shopify Devs Discord 伺服器,找到其他開發人員 並提出疑問,感謝收看