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 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
Thanks, @hash777 ! I do not have that section – how can I add it?
@SneakyPete first pls make sure that you are having debut theme
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 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 %}
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
@hash777 thanks a million!
@SneakyPete Thanks a lot, You are welcome !
I hope you are satisfied.
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?
