How to modify the theme code to recommend products in Shopify
Drive 20-40% of your revenue with Avada
It is true that you would like to place your goods as much as possible in your customers’ mind so that they would acknowledge about your brand. You want to customize your theme code to suggest more items for your customers, don’t you? The tutorial will help you modify the theme code to recommend products.
Table of content
- What the theme code to recommend products is
- How to modify the theme code to recommend products in sectioned theme
- How to modify the theme code to recommend products in non-sectioned them
What the theme code to recommend products is
Theme code is the code that shows customers’ current product and other relevant items. For instance, you are opening an online fashion shop. Your customer choose a maxi dress in summer collection, then after the dress is put into a shopping cart, other items in the summer collection are also suggested for buyers.
Attention: These steps below are at advanced level and require knowledge about web design languages namely HTML, CSS, JavaScript, and Liquid. Therefore, if you encounter any difficulties, you should hire a technology expert to help you. Besides, you should know which theme you are using in order to follow the right process.
Let’s move to the next part to modify the theme code.
How to modify the theme code to recommend products in sectioned theme
-
Step 1: You access Shopify admin, click Online Store and go to Themes.
-
Step 2: Find the themes that you want to edit, then press Actions then Edit Code.
-
Step 3: Open Templates directory, click
product.liquid. -
Step 4: Find the line of the liquid code:
{% section 'product-template' %}
Then, generate a new line below the one that you find and paste this code:
{% section 'related-products' %}
- Step 5: In the Section, open Add a new section:
-
Step 6: Create a new section: first, put the name of the section
related-products. Then, tab Create section, your new file will appear in the code editor. Next, remove all of the default code in the new section file in order to empty the file. -
Step 7: Paste the code into your file name
related-products.liquidfile. Remember each pasted code is different from each other.
Boundless
Copy and paste this code hosted on GitHub in related-products.liquid file.
Debut
Copy and paste this code hosted on GitHub in related-products.liquid file.
Jumpstart
Copy and paste this code hosted on GitHub in related-products.liquid file.
Venture
Copy and paste this code hosted on GitHub in related-products.liquid file.
Other Shopify themes
Copy and paste this code hosted on GitHub in related-products.liquid file.
- Step 8: Remember to Save.
To modify the theme code to recommend products in sectioned theme for iPhone/Android (Click here)
Step 1: You access the Shopify app, click Store.
Step 2: Open Online Store in the Sales Channels section.
Step 3: Tap Manage themes.
Step 4: Find the themes that you want to edit, then press Actions then Edit Code.
Step 5: Find the line of the liquid code:
{% section 'product-template' %}
Then, generate a new line below the one that you find and paste this code:
{% section 'related-products' %}
Step 6: In the Section, open Add a new section:
Step 7: Create a new section: first, put the name of the section related-products. Then, tab Create section, your new file will appear in the code editor. Next, remove all of the default code in the new section file in order to empty the file.
Step 8: Paste the code into your file named related-products.liquid file. Remember each pasted code is different from each other.
Next, with each sectioned theme that you are using, you paste the different code (Look at the previous case and paste the code into the related-products.liquidfile).
Step 9: Save.
How to modify the theme code to recommend products in non-sectioned theme
-
Step 1: You access Shopify admin, click Online Store and go to Themes.
-
Step 2: Find the themes that you want to edit, then press Actions then Edit Code.
-
Step 3: Look at Snippets directory and click to open Add a new snippet.
-
Step 4: Create a new snippet: first, put the name of the new snippet related-products, then click to create a new file which will appear in the code editor.
-
Step 5: Paste this code hosted on GitHub into related-products.liquid file. Each file has different pasted codes so, you look at the code on step 7 of case 1, sectioned theme.
-
Step 6: Remember to click Save.
-
Step 7: Open
product.liquidin Template directory. -
Step 8: At the end of the file, paste the code below:
{% include 'related-products' %}
- Step 9: Click Save.
To modify the theme code to recommend products in non-sectioned theme iPhone/Android (Click here)
Step 1: You access the Shopify app, click Store.
Step 2: Open Online Store in the Sales Channels section.
Step 3: Tap Manage themes.
Step 4: Find the themes that you want to edit, then press Actions then Edit Code.
Step 5: Create a new snippet: first, put the name of the new snippet related-products, then click to create a new file which will appear in the code editor.
Step 6: Paste this code hosted on GitHub into related-products.liquid file.
Each file has different pasted codes so, you look at the code on step 7 of case 1, sectioned theme.
Step 7: Remember to click Save.
Step 8: Open product.liquid in Template directory.
Step 9: At the end of the file, paste the code below:
{% include 'related-products' %}
Step 10: Click Save.
Conclusion
To sum up, we hope that the tutorial will help you in making the theme code with further suggestions for your customers. Therefore, shoppers will spend much time shopping around your online store. The theme code is definitely useful in creating greater customers’ journey.
