One of the greatest features of Shopify platform is its easy to use features. Most of the customization processes do not require any expert technical knowledge, and it also includes theme customization. But if you are moving up a gear, towards more advanced customization, then you would need the necessary knowledge.
Advanced customization would become a necessity at least once in the lifetime of a store. Before entering into customizing your theme, make sure that you have backups of the existing theme files so that you can revert back if needed. So, what are the steps to undertake an advanced customization of your Shopify store theme? Let us have a look:
Custom CSS
The simplest of ways to make adjustments to the theme is via CSS. This is also the least destructive method. CSS changes are best to adjust the color, font, size, spacing or placement of elements. To get started, you need to add custom CSS to the end of the styles.scss.liquid file. The steps are:
- In the Themes area of your admin panel and click on the three dots. Select Edit HTML/CSS from the drop-down that appears.
- You’ll now see Shopify theme file manager. Scroll down the toolbar until you see the Assets folder and click on it to expand it.
- Click the file styles.scss.liquid and scroll all the way to the bottom. You can add your custom CSS code here.
Customs Code and Template Modifications
Some customization would need more than changes to decide how things look. This can be made easy using the Shopify theme snippets. The steps are:
- Access the Shopify theme file manager.
- Select the Snippets folder and click Add a New Snippet.
- Enter a name for your snippet.
- Click Create snippet and you can find a blank file. You can add any HTML code in here and also the Liquid tags. Save your work.
- Next, locate the Templates folder. Locate the file that controls the page type you want to add this custom code to. For instance, if you want to add this custom code to the product pages, find product.liquid.
- Click the file you want to edit to open it. Now, find the code where the custom code should be added. Once you locate it, place your cursor there and add this include code:
- {% include ‘snippet-name’ %}. You should replace the snippet-name with the name you gave the custom code snippet.
- Click save and preview your work.
Once these steps are completed, you will need to restore your customizations. For this, you would first need to move the custom code from the end of the styles.scss.liquid file to the new theme version. Next, any snippet files required should be manually recreated and copy and paste the custom code from your old theme to the new copies. Then, update any Liquid files with references to Snippet files or other customizations.
If you are unsure whether you can take care of this all by your own, you can avail Shopify theme customization services from professional Shopify web designers. They would provide Shopify custom design and Shopify theme customization services that provide your Shopify store with the best look and feel.
