Table of Content

There are number of Shopify online stores that utilizes App to fulfill requirement as the App that is installed does not have full UI control in which lots of problems occurs when any functionality is not required and installed or some time that UI change is extra which cases damage on UI which and we do not have anything which can hide that.

Issue Details: Here we will teach you some of the essentials things by taking Whislist APP as example. The tips you can use in you development and optimize the App and make the client happy.

Warning: Just to inform you prior that expert shopify developer’s can only use these methods as it may break down your online store.

Before moving ahead we always recommend you to take following actions:

• Take backup of your current theme
• Duplicate theme
• Do changes in duplicate theme only
• Test changes after doing changes

Now, here some of the FAQ that will try to explain in details so, that any unknow mistake can be avoided.

If you know you can skip this part else you can go through the same:

How to take backup of Shopify Store ?

Step 1: Login to Shopify

Step 2: Click on Sales Channels and then Online Store

Step 3: Let’s assume you have installed “Dawn” theme and you have to take backup of same

Step 4: Click on the three dots (…) you will get small popup that will show you option to download theme file.

Please note once you hit Download theme file and email will be sent to owner email in which you will get download link.

Step 5: Download link on your Email

Cheers you are done! We hope that your confusion is now sorted.  

How to Duplicate Themes in Shopify Store ?

If you have followed above step it will be now easy for you to duplicate your theme

So, now once you click on Duplicate it will start duplication and below the heading Theme library you can see it will say Copy of Dawn ( Copy of Your Current Theme Name appears )

It was easy right ?

How to do changes and preview them ?

Let’s say you want add a text “HELLO” so, for that what you have to do is Edit code of your current theme.

Once you click on Edit Code it open a Editor and there you have to open file theme.liquid which is actually the base file or we can say master file or index file of your theme.

Now, will add the following code that will add the “HELLO” text on home page as we are doing changes in theme.liquid

Line No. 269 ( Remember this is default theme and we did not done any change in the same )

<h1 style="background:yellow;color:black;text-align:center">HELLO</h1>

Hit on Preview Store right corner and you see your changes will get replicated on frontend and see how it looks:

This is again very easy.

As the article is very long so, please move on to next articles in which we are continuing

click here to view the next article…read more.

The post [👉]How to Customize frontend of Shopify App first appeared on PurchaseTheme.