Solved

"Show dynamic recommendations" option doesn't show in Debut theme to add product recommendations

SneakyPete
Tourist
6 0 1

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?

SneakyPete_0-1622129899274.png

 

Accepted Solution (1)
hash777
Shopify Partner
168 9 23

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

View solution in original post

Replies 10 (10)

hash777
Shopify Partner
168 9 23

@SneakyPete  Hi there, yes i think so that you are missing something.

1.PNG

Please go to online store > Actions > edit code > sections> check if you have this file under section 

2.PNG

SneakyPete
Tourist
6 0 1

Thanks, @hash777 ! I do not have that section -- how can I add it?

SneakyPete_0-1623861642487.png

 

hash777
Shopify Partner
168 9 23

@SneakyPete  first pls make sure that you are having debut theme

SneakyPete
Tourist
6 0 1

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 !

SneakyPete_0-1623869815669.png

 

hash777
Shopify Partner
168 9 23

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
Tourist
6 0 1

@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_0-1623883665885.png

 

hash777
Shopify Partner
168 9 23

@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

SneakyPete
Tourist
6 0 1

@hash777 thanks a million!

hash777
Shopify Partner
168 9 23

@SneakyPete  Thanks a lot, You are welcome !

I hope you are satisfied.

tracyw7b
Visitor
1 0 0

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?