BACK

how to change live theme on shopify

"How to edit your Shopify theme without breaking live site" - Shopify Tutorial hey shopify users tod

Sunrise Integration

Updated on Feb 12,2023

"How to edit your Shopify theme without breaking live site" - Shopify Tutorial

The above is a brief introduction to how to change live theme on shopify

Let's move on to the first section of how to change live theme on shopify

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

"How to edit your Shopify theme without breaking live site" - Shopify Tutorial

hey shopify users today i'm going to,show you how to make changes to your,theme,preview those changes and then take them,live let's get started,so here's a test product i've put in,here called cool jeans uh let's give it,a preview see what it looks like,okay cool jeans looks great all right,but ah not as great as it could i think,i want to move this sail down under the,next line so let's just look at the code,and see how we can manipulate it to make,that change,here we are in our shopify,administration panel and we're going to,jump straight into it by coming down to,online store,and we want to duplicate this theme the,reason we want to duplicate this theme,is because we don't want our customers,to see the changes that we're going to,be making until we're absolutely sure,that they're ready to be looked at,so down here actions and duplicate,so the theme we want to edit is not the,current theme but it's in the theme,library,i'm going to select this actions tab,and i want to choose edit code,on the left here what we can see,is all the files associated with our,theme and what we want to edit is the,snippets,today the snippet we particularly want,to edit is called,product price dot liquid,okay so now we're navigating down here,to these price badges,and let's see what happens when we,manipulate these i'm going to grab this,whole block,i'm going to copy it i'm going to move,it under this div here,and paste it and what i think will,happen is it's just going to duplicate,exactly what we see here and that is,going to be,the,sale,and the sold out badges,right first now we're going to save it,and just see what happens let's see what,has changed,i'm going to show you how to preview,these changes,we can click the actions button and,bring up a preview,and this will give us a specific preview,of the test store that we're working on,not the live store,so that's important here,i can come back to my page,knowing that i'm looking at my preview,theme this is not the live theme it's,very different,reload and some success okay we have the,sale price here and we have the sale,price there so technically we have a,duplicate,now,this is bad if this was the live site,but this is just our testing site so we,can do whatever we want here we can get,it right and then make it live so,let's just move this along and get it,right and i think we can do that just by,removing this block of code and leaving,this one,so coming back to our code,i'm going to look at this span here,talking about being the sale,i'm gonna grab that and,i'm going to delete it,now i also have this sold out badge that,is duplicated here and here so i,definitely don't want them in the same,space either so,um today i'm going to take the sold out,from away from down here,okay i'm going to save this and let's,preview it again,i can see here the asset is saved,going to my test store,reloading and,great this is exactly what i was looking,for i'm happy with this so i'm going to,now,make it live,okay so now we want to take this live,i'm going to come back,and let's come back to online store,and it's really simple here we just need,to come down to the theme we've been,working on,select the actions and,publish,it's going to give you some options here,do you want to are you sure today we are,sure yes publish please,and there we see you can see the,theme we were working on has been moved,to the current theme and the theme that,was previously the current theme has,been moved down into the theme library,so if we want to make sure this is what,we want we can come here to this eyeball,view your store,it's going to open up a new tab we're,going to browse to the product,okay great,and we've shown you how to duplicate,your theme we've shown you how to make,changes in a way that your customer,can't see what you're doing until it's,ready to be seen and then we've shown,you how to take those changes live so,your customers can see the updates,it's an important process to understand,for shopify development because when you,do more complex changes you don't want,the site to break for the user you just,want the site to always work but in that,same sense you want to iterate you want,to make it better you want to improve,the experience so this is the method we,use to do that,you

Congratulation! You bave finally finished reading how to change live theme on shopify and believe you bave enougb understending how to change live theme on shopify

Come on and read the rest of the article!

Browse More Content