Shopify themes, liquid, logos, and UX
I'm following these steps from the Shopify help center, but I don't see an option for Step 5: "Click the Product recommendations section."
As you can see, I went to "Customize > Product Pages" but I don't see an option to click the "Product recommendations section". Am I missing something?
Solved! Go to the solution
This is an accepted solution.
@SneakyPete Hi there pls follow this to add product recommendation section.
Step 1: Create a product-recommendations.liquid section
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Sections directory, click Add a new section.
Name the new section product-recommendations and click Create section.
Replace all of the content with the code below: and save
{% assign heading = 'You may also like' %}
{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations">
{% if recommendations.performed %}
{% if recommendations.products_count > 0 %}
<div class="section-header text-center">
<h2>{{ heading }}</h2>
</div>
<ul class="grid grid--uniform grid--view-items">
{% for product in recommendations.products %}
<li class="grid__item small--one-half medium-up--one-quarter">
{% include 'product-card-grid', max_height: 250 %}
</li>
{% endfor %}
</ul>
{% endif %}
{% else %}
<div class="product-recommendations__loading-dots">
<div class="product-recommendations__loading-dot"></div>
<div class="product-recommendations__loading-dot"></div>
<div class="product-recommendations__loading-dot"></div>
</div>
{% endif %}
</div>
Step 2: Include the section in your product.liquid template
In the Templates directory, open the product.liquid file.
Add the following code at the bottom of the file and save
{% section 'product-recommendations' %}
Step 3: Edit your theme.js file
In the Assets directory, open the theme.js file.
Find this line of code:
sections.register('hero-section', theme.HeroSection);
Below that line, add this code:
sections.register('product-recommendations', theme.ProductRecommendations);
Add the following code at the bottom of the file and save
theme.ProductRecommendations = (function() {
function ProductRecommendations(container) {
var $container = (this.$container = $(container));
var baseUrl = $container.data('baseUrl');
var productId = $container.data('productId');
var limit = $container.data('limit');
var productRecommendationsUrlAndContainerClass = baseUrl + '?section_id=product-recommendations&limit=' + limit +
'&product_id=' +productId +
' .product-recommendations';
$container.parent().load(productRecommendationsUrlAndContainerClass);
}
return ProductRecommendations;
})();
THE END.
If helpful then please Like and Accept Solution.
THANKS
@SneakyPete Hi there, yes i think so that you are missing something.
Please go to online store > Actions > edit code > sections> check if you have this file under section
Confirming I do have the Debut theme, though I've modified it slightly.
I suspect that the theme got updated since I first installed it to include that section. Is there a way for me to add just that section?
I don't want to update the theme completely because it will overwrite some of the customization I've done.
Appreciate your help, @hash777 !
This is an accepted solution.
@SneakyPete Hi there pls follow this to add product recommendation section.
Step 1: Create a product-recommendations.liquid section
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Sections directory, click Add a new section.
Name the new section product-recommendations and click Create section.
Replace all of the content with the code below: and save
{% assign heading = 'You may also like' %}
{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations">
{% if recommendations.performed %}
{% if recommendations.products_count > 0 %}
<div class="section-header text-center">
<h2>{{ heading }}</h2>
</div>
<ul class="grid grid--uniform grid--view-items">
{% for product in recommendations.products %}
<li class="grid__item small--one-half medium-up--one-quarter">
{% include 'product-card-grid', max_height: 250 %}
</li>
{% endfor %}
</ul>
{% endif %}
{% else %}
<div class="product-recommendations__loading-dots">
<div class="product-recommendations__loading-dot"></div>
<div class="product-recommendations__loading-dot"></div>
<div class="product-recommendations__loading-dot"></div>
</div>
{% endif %}
</div>
Step 2: Include the section in your product.liquid template
In the Templates directory, open the product.liquid file.
Add the following code at the bottom of the file and save
{% section 'product-recommendations' %}
Step 3: Edit your theme.js file
In the Assets directory, open the theme.js file.
Find this line of code:
sections.register('hero-section', theme.HeroSection);
Below that line, add this code:
sections.register('product-recommendations', theme.ProductRecommendations);
Add the following code at the bottom of the file and save
theme.ProductRecommendations = (function() {
function ProductRecommendations(container) {
var $container = (this.$container = $(container));
var baseUrl = $container.data('baseUrl');
var productId = $container.data('productId');
var limit = $container.data('limit');
var productRecommendationsUrlAndContainerClass = baseUrl + '?section_id=product-recommendations&limit=' + limit +
'&product_id=' +productId +
' .product-recommendations';
$container.parent().load(productRecommendationsUrlAndContainerClass);
}
return ProductRecommendations;
})();
THE END.
If helpful then please Like and Accept Solution.
THANKS
@hash777 -- awesome thank you! Step 3 didn't work for me -- sections.register('hero-section', theme.HeroSection); -- doesn't appear in my theme.js file (in screenshot, no results are found when I ctrl + F for anything involving "hero-section"). Is there somewhere else I can add the recommended snippet?
sections.register('product-recommendations', theme.ProductRecommendations);
@SneakyPete Insert the code under any section register line of code
sections.register('product-recommendations', theme.ProductRecommendations);
and do let me know, if it worked.
If helpful then please Like and Accept Solution.
THANKS
Where are these recommended products pulling from? Is it all of my products or can I choose the items that appear in this section? Do I have to tag the items or add them to a collection?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024