PRODUCT RECOMENDATION SECTION IN SHOPIFY

 

------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------

READ MORE:

https://youtu.be/nCzEWfL4j_U

0)CREATE SOME SAME TAG PRODUCTS IN SHOPIFY LIKE Women etc

1) ADD TAG INTO COLLECTION

2)MAKE SURE PRODUCT COLLECTION TITLE AND PRODUCT TAG SAME

3) ADD SECTION LINK CODE IN TEMPLATE > PRODUCT LIQUID FILE

4) ADD BELOW SECTION LINK CODE IN TEMPLATE > PRODUCT LIQUID FILE

{% section 'product-recommendations' %}

------------------------------------------------------------------------------------------------------------------

ADD NEW SECTION product-recommendations.liquid

COPY AND PASTE BELOW CODE

SCHEMA JSON ID AND HTML ID SHOULD SAME

WE CAN VENDOR NAME SHOW OR HIDE PART WRITE IN THIS WAY

{

"type": "checkbox",

"id": "show_vendor",

"default":true,

"label": {

"en": "Show vendor"

}

}

------------------------------------------------------------------------------------------------------------------

<!-- https://shopify.github.io/liquid-code-examples/example/product-recommendations -->
<div class="page-width" data-section-type="product-recommendations"
data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" 
data-section-id="{{ section.id }}">
{%- if section.settings.show_product_recommendations -%}
{%- if recommendations.performed -%}
{%- if recommendations.products_count > 0 -%}
<div class="product-recommendations__inner">
{%- if section.settings.heading != blank -%}
<div class="section-header text-center">
<hr>
<h2>{{section.settings.heading | escape }}</h2>
</div>
{%- endif -%}
<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, 
product: product, show_vendor: section.settings.show_vendor %}
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
{%- else  -%}
{%- endif -%}
{%- endif -%}
</div>
{% schema %}
{
"name": {
"en": "Product Recommendations"
},
"settings": [
{
"type": "checkbox",
"id": "show_product_recommendations",
"label": {
"en": "Show dynamic recommendations"
},
"info": {
"en": "Dynamic recommendations change and improve with time. [Learn more](https://help.shopify.com/en/themes/development/recommended-products)"
},
"default": true
},
{
"type": "text",
"id": "heading",
"label": {
"en": "Heading"
},
"default": {
"en": "You may also like"
}
},
{
"type": "checkbox",
"id": "show_vendor",
"label": {
"en": "Show vendor"
},
"default": false
}
]
}
{% endschema %}
{% javascript %}
theme.ProductRecommendations = (function() {
function ProductRecommendations(container) {
this.$container = $(container);
var baseUrl = this.$container.data('baseUrl');
var productId = this.$container.data('productId');
var recommendationsSectionUrl =
baseUrl +
'?section_id=product-recommendations&product_id=' +
productId +
'&limit=4';
$.get(recommendationsSectionUrl).then(
function(section) {
var recommendationsMarkup = $(section).html();
if (recommendationsMarkup.trim() !== '') {
this.$container.html(recommendationsMarkup);
}
}.bind(this)
);
}
return ProductRecommendations;
})();
$(document).ready(function() {
var sections = new theme.Sections();
sections.register('product-recommendations', theme.ProductRecommendations);
});
{% endjavascript %}

------------------------------------------------------------------------------------------------------------------