Shopify themes, liquid, logos, and UX
Hello, I need help with the related products section on Turbo Portland theme, I don't want to show dynamic related products, it's showing products from other collections, I want to show only products from the same collection. Here is the code that I have currently:
{% if section.settings.show_product_recommendations %}
<div class="product-recommendations-container">
{% comment %} Check whether product has any tags for custom related products {% endcomment %}
{% for tag in product.tags %}
{% if tag contains 'meta-related-collection-' %}
{% assign related_collection_handle = tag | remove: 'meta-related-collection-' %}
{% endif %}
{% endfor %}
{% comment %} Max amount of products visible {% endcomment %}
{% assign limit = section.settings.recommended_products_limit %}
{% comment %} Amount of product per row {% endcomment %}
{% assign products_per_row = section.settings.products_per_row %}
{% assign skip_product = product %}
{% if related_collection_handle != blank %}
{% comment %} Show products based on merchant-added tags prepended with 'meta-related-collection-' {% endcomment %}
{% assign collection_size = collections[related_collection_handle].all_products_count %}
{% if collection_size > 0 %}
{% assign custom_collection = collections[related_collection_handle] %}
{% assign products = custom_collection.products %}
{% endif %}
{% if custom_collection and collection_size > 0 %}
{% assign show_custom_collection = true %}
{% endif %}
{% else %}
{% comment %} Shopify generated dynamic recommendations, falling back to default related products (based on parent collection) {% endcomment %}
{% assign dynamic_collection = recommendations %}
{% assign products = recommendations.products %}
{% assign show_dynamic_collection = true %}
{% endif %}
{% comment %} HTML markup {% endcomment %}
{% capture product_collections_markup %}
<div class="recommended-products__title {% unless section.settings.product_recommendations_style == 'slider' %}sixteen columns{% endunless %}" data-recommended-product-count="{% if show_dynamic_collection == true %}{{ recommendations.products_count }}{% else %}{{ collection_size }}{% endif %}">
<h4 class="title center">{{ section.settings.product_recommendations_heading }}</h4>
<div class="feature_divider"></div>
</div>
<div class="clear"></div>
{% if section.settings.product_recommendations_style == 'slider' %}
{% comment %} Recommended Products Slider {% endcomment %}
<div class="recommended-products--slider js-recommended-products-slider">
{% include 'product-slider', limit:limit, per_slide:products_per_row %}
</div>
{% else %}
{% comment %} Recommended Products Grid {% endcomment %}
<div class="container recommended-products--grid">
<div class="sixteen columns equal-columns--outside-trim">
{% include 'product-loop' %}
</div>
</div>
{% endif %}
{% endcapture %}
{% if show_custom_collection %}
<div class="meta-related-recommended-collection" data-enabled="{{ section.settings.show_product_recommendations }}">
{{ product_collections_markup }}
</div>
{% elsif show_dynamic_collection %}
<div class="product-recommendations" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-enabled="{{ section.settings.show_product_recommendations }}">
{{ product_collections_markup }}
</div>
{% endif %}
</div>
{% endif %}
{% schema %}
{
"name": "Recommended products",
"class": "recommended-products-section",
"settings": [
{
"type": "header",
"content": "Product recommendations"
},
{
"type":"paragraph",
"content": "The settings configured in this section will remain consistent across all product templates. If using the product.details template, adding the Recommended Products content block is also required. [Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360034424013)"
},
{
"type": "checkbox",
"id": "show_product_recommendations",
"label": "Show dynamic recommendations",
"info": "Dynamic recommendations change and improve with time. [Learn more](https://help.shopify.com/en/themes/development/recommended-products)",
"default": true
},
{
"type": "radio",
"id": "product_recommendations_style",
"label": "Layout",
"default": "grid",
"options": [
{
"value": "slider",
"label": "Slider"
},
{
"value": "grid",
"label": "Grid"
}
]
},
{
"type": "text",
"id": "product_recommendations_heading",
"label": "Heading",
"default": "You may also like"
},
{
"type": "range",
"id": "products_per_row",
"label": "Products per row",
"min": 2,
"max": 5,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "recommended_products_limit",
"label": "Limit products",
"min": 2,
"max": 10,
"step": 1,
"default": 4
}
]
}
{% endschema %}
I hope someone can help me fix it, I have been trying for days.
It is not working properly. I can't see the recommended products. I have attached the Screenshot
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