Products recommendations on cart page

ElenaShvets · ‎02-14-2022

Hi!
I want to display a recommended item on the cart page based on the items in the cart. For example, if I have leggings in my shopping cart, I want to show t-shirts. I created a collection for these products and I can display them the task is how to make a check for displaying a recommended product.

AvadaCommerce · ‎02-14-2022

Hi @ElenaShvets

Thank you for reaching out here.

You could consider using some third-party apps below to set up a recommended item on the cart page easily:

Please mark it as a SOLUTION if you find this answer is helpful.

banned

View solution in original post

AvadaCommerce · ‎02-14-2022

Hi @ElenaShvets

Thank you for reaching out here.

You could consider using some third-party apps below to set up a recommended item on the cart page easily:

Please mark it as a SOLUTION if you find this answer is helpful.

banned

Sulaman_Hassan · ‎08-08-2023

@ElenaShvets @Sensei @AvadaCommerce
i want to show customize product recmondetion i have a file product-recommendations
in which the code is

{%- liquid
assign recommend_products = true

if recommendations.products and recommendations.products_count > 0
assign related_collection = recommendations
endif

for tag in product.tags
if tag contains '_related'
assign include_collection_handle = tag | split: '_' | last
assign include_collection = collections[include_collection_handle]
if include_collection != empty and include_collection.products_count > 0
assign related_collection = include_collection
assign recommend_products = false
break
endif
endif
endfor

assign number_of_products = section.settings.related_count
assign per_row = number_of_products
assign number_of_products_to_fetch = number_of_products | plus: 1
case per_row
when 1
assign grid_item_width = ''
when 2
assign grid_item_width = 'medium-up--one-half'
when 3
assign grid_item_width = 'small--one-half medium-up--one-third'
when 4
assign grid_item_width = 'small--one-half medium-up--one-quarter'
when 5
assign grid_item_width = 'small--one-half medium-up--one-fifth'
when 6
assign grid_item_width = 'small--one-half medium-up--one-sixth'
endcase
-%}

{%- if section.settings.show_product_recommendations -%}
<div
id="Recommendations-{{ product.id }}"
data-section-id="{{ product.id }}"
data-section-type="product-recommendations"
data-enable="{{ recommend_products }}"
data-product-id="{{ product.id }}"
data-url="{{ routes.product_recommendations_url }}"
data-limit="{{ number_of_products_to_fetch }}">

<div
data-section-id="{{ product.id }}"
data-subsection
data-section-type="collection-template"
class="index-section">
<div class="page-width">
<header class="section-header">
<h3 class="section-header__title">
{{ section.settings.product_recommendations_heading }}
</h3>
</header>
</div>

<div class="page-width page-width--flush-small">
<div class="grid-overflow-wrapper">
{%- if recommend_products -%}
<div class="product-recommendations-placeholder">
{% comment %}
This content is visually hidden and replaced when recommended
products show up
{% endcomment %}
<div class="grid grid--uniform visually-invisible" aria-hidden="true">
{%- render 'product-grid-item', product: product, grid_item_width: grid_item_width -%}
</div>
</div>
{%- endif -%}
{%- if related_collection.products_count > 1 -%}
<div class="product-recommendations">
<div class="grid grid--uniform" data-aos="overflow__animation">
{%- liquid
assign current_product = product
assign current_product_found = false
assign related_count = 0
-%}
{%- for product in related_collection.products limit: number_of_products_to_fetch -%}
{%- if product.handle == current_product.handle -%}
{%- assign current_product_found = true -%}
{%- else -%}
{%- assign related_count = related_count | plus: 1 -%}
{%- unless related_count > number_of_products -%}
{%- if forloop.last and current_product_found -%}
{%- render 'product-grid-item', product: product, grid_item_width: grid_item_width -%}
{%- else -%}
{%- render 'product-grid-item', product: product, grid_item_width: grid_item_width -%}
{%- endif -%}
{%- endunless -%}
{%- endif -%}
{%- endfor -%}
</div>

{%- if settings.quick_shop_enable -%}
{%- for product in related_collection.products limit: number_of_products_to_fetch -%}
{%- if product.handle != current_product.handle -%}
{%- render 'quick-shop-modal', product: product -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
</div>
</div>
{%- endif -%}

{% schema %}
{
"name": "Product recommendations",
"settings": [
{
"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": "text",
"id": "product_recommendations_heading",
"label": "Heading",
"default": "You may also like"
},
{
"type": "range",
"id": "related_count",
"label": "Number of related products",
"default": 5,
"min": 2,
"max": 6,
"step": 1
}
]
}
{% endschema %}

and the cart.liquid i have call this file but its shwoing onlt heading not products this above file is working fine in Product page but not showing product on cart page

{%- render 'breadcrumbs' -%}

<div class="grid">
<div class="grid__item">
{% if cart.item_count > 0 %}
<header class="section-header">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
<div class="rte text-spacing">
<p>{{ 'cart.general.continue_browsing_html' | t: url: routes.all_products_collection_url }}</p>
</div>
</header>

<div class="cart__row small--hide">
<div class="grid grid--full">
<div class="grid__item medium-up--two-fifths medium-up--push-three-fifths">
<div class="grid grid--full">
<div class="grid__item one-third small--half text-right">
{{ 'cart.label.price' | t }}
</div>
<div class="grid__item one-third small--half text-center">
{{ 'cart.label.quantity' | t }}
</div>
<div class="grid__item one-third small--half text-right">
{{ 'cart.label.total' | t }}
</div>
</div>
</div>
</div>
</div>

{% for item in cart.items %}
{% comment %}
Infinite Options by ShopPad - Hide add-on product if parent product is in cart
{% endcomment %}
{% assign io_show_line_item_property = true %}

{% if item.properties._io_parent_order_group %}
{% for io_cart_item in cart.items %}
{% if io_cart_item.properties._io_order_group == item.properties._io_parent_order_group %}
{% assign io_show_line_item_property = false %}
{% endif %}
{% endfor %}
{% endif %}
<div {% if io_show_line_item_property != true %} style="display:none" {% endif %}class="cart__row">
<div class="grid grid--full cart__row--table-large">

<div class="grid__item one-quarter">
<a href="{{ item.url }}" class="cart__image">
{%- assign img_url = item | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540]"
data-aspectratio="{{ item.aspect_ratio }}"
data-sizes="auto"
alt="{{ item.title | escape }}">
</a>
</div>

<div class="grid__item three-quarters">
<a href="{{ item.url }}" class="h4 cart__product-name">
{{ item.product.title }}
<span class='booster-cart-item-success-notes' data-key='{{item.key}}'></span><span class='booster-cart-item-upsell-notes' data-key='{{item.key}}'></span>
</a>
{%- unless item.product.has_only_default_variant -%}
<div class="cart__variant-meta">
{{ item.variant.title }}
</div>
{%- endunless -%}

<div class="cart__product-meta {% if item.selling_plan_allocation == empty %}hide {% endif %}">
{{ item.selling_plan_allocation.selling_plan.name }}
</div>

{%- assign property_size = item.properties | size -%}
{% if property_size > 0 %}
{% for p in item.properties %}
{%- assign first_character_in_key = p.first | truncate: 1, '' -%}
{% unless p.last == blank or first_character_in_key == '_' %}
<div class="cart__product-meta">
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
</div>
{% endunless %}
{% endfor %}
{% endif %}

<p>
<a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity=0" class="btn btn--secondary btn--small small--hide">
{{ 'cart.general.remove' | t }}
</a>
<a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity=0" class="btn btn--small medium-up--hide">
<small>{{ 'cart.general.remove' | t }}</small>
</a>
</p>
</div>

</div>
</div>

<div class="grid__item one-third medium-up--text-right">
<label class="medium-up--hide">
{{ 'cart.label.price' | t }}
</label>
{% if item.original_price != item.final_price %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<small class="cart__price cart__price--strikethrough">{{ item.original_price | money }}</small>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="cart__price cart__discount">{{ item.final_price | money }}</span>
{% else %}
<span class="cart__price">{{ item.original_price | money }}</span>
{% endif %}

{%- if item.line_level_discount_allocations != blank -%}
{%- for discount_allocation in item.line_level_discount_allocations -%}
<small class="cart__discount">{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})</small>
{%- endfor -%}
{%- endif -%}

{%- if item.unit_price_measurement -%}
{%- capture unit_price_base_unit -%}
<span class="unit-price-base">
{%- if item.unit_price_measurement -%}
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{ item.unit_price_measurement.reference_value }}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}

<div class="product__unit-price">{{ item.unit_price | money }}/{{ unit_price_base_unit }}</div>
{%- endif -%}
</div>

<div class="grid__item one-third text-center">
<label for="cart_updates_{{ item.key }}" class="medium-up--hide">{{ 'cart.label.quantity' | t }}</label>
<input type="number" name="updates[]" id="cart_updates_{{ item.key }}" class="cart__product-qty" value="{{ item.quantity }}" min="0" data-id="{{ item.key }}">
</div>

<div class="grid__item one-third text-right">
<label class="medium-up--hide">
{{ 'cart.label.total' | t }}
</label>
{% if item.original_line_price != item.final_line_price %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<small class="cart__price cart__price--strikethrough">{{ item.original_line_price | money }}</small>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="cart__price cart__discount">{{ item.final_line_price | money }}</span>
{% else %}
<span class="cart__price"><span class='booster-cart-item-line-price' data-key='{{item.key}}'>{{ item.original_line_price | money }}</span></span>
{% endif %}
</div>
</div>
</div>

</div>
</div>
{% endfor %}

<div class="cart__row">
<div class="grid">
{% if settings.cart_notes_enable %}
<div class="grid__item medium-up--one-half">
<label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full cart-notes" id="CartSpecialInstructions">{{ cart.note }}</textarea>
</div>
{% endif %}
<div class="grid__item medium-up--one-half text-center medium-up--text-right{% unless settings.cart_notes_enable %} medium-up--push-one-half{% endunless %}">
{% if cart.cart_level_discount_applications != blank %}
<div class="grid grid--full cart__row--table">
<div class="grid__item one-half">
<p class="h4">{{ 'cart.general.discounts' | t }}</p>
</div>
<div class="grid__item one-half">
{% for cart_discount in cart.cart_level_discount_applications %}
<p class="h4 cart__discount">
{{ cart_discount.title }} (-{{ cart_discount.total_allocated_amount | money }})
</p>
{% endfor %}
</div>
</div>
{% endif %}
<div class="grid grid--full cart__row--table">
<div class="grid__item one-half">
<p class="h4">{{ 'cart.general.subtotal' | t }}</p>
</div>
<div class="grid__item one-half">
<p class="h4"><span class="wh-original-cart-total"><span class='wh-original-price'>{{ cart.total_price | money }}</span></span><span class="wh-cart-total"></span><div class="additional-notes"><span class="wh-minimums-note"></span><span class="wh-extra-note"></span></div></p>
</div>
</div>
<small>
{{ 'cart.general.shipping_at_checkout' | t }}<br />
</small>
{% if settings.cart_terms_conditions_enable %}
<p class="ajaxcart__note ajaxcart__note--terms">
<input type="checkbox" id="CartPageAgree" />
<label for="CartPageAgree">
{% if settings.cart_terms_conditions_link != blank %}
{{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_link }}
{% else %}
{{ 'cart.general.terms' | t }}
{% endif %}
</label>
</p>
{% endif %}

<div class="cart__checkout-wrapper">

<button type="submit" name="checkout" id="checkout" {% if settings.cart_terms_conditions_enable %} data-terms="CartPageAgree"{% endif %} class="btn cart__checkout btn_checkout_hiden">
{{ 'cart.general.checkout' | t }}
</button>

<button type="button" name="empty_checkout" id="empty_checkout" class="btn cart__checkout_empty " onclick="checkCaptcha()">
{{ 'cart.general.checkout' | t }}
</button>
<button type="submit" name="update" class="btn btn--secondary cart__update">
{{ 'cart.general.update' | t }}
</button>
<div class="g-recaptcha" id="reCaptcha" data-sitekey="6LcFjUAmAAAAAGvSTZcecNetsgPxow744gy_pzwv" data-callback="captchaCallback" data-expired-callback="handleCaptchaExpired">

</div>
<div class ="captcha_error">
<p> Please Fill Capchta</p>
</div>
{% if additional_checkout_buttons and settings.cart_additional_buttons %}
<div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
</div>
</div>
</div>

</div>

</form>

{% else %}
<header class="section-header section-header--404">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
<div class="rte text-spacing">
<p>{{ 'cart.general.empty' | t }}</p>
<p>{{ 'cart.general.continue_browsing_html' | t: url: routes.all_products_collection_url }}</p>
</div>
</header>
{% endif %}
</div>
</div>
</div>

{% section 'product-recommendations' %}

Sensei · ‎03-14-2022

Hey,

You could try out personalized product recommendation apps like WISER.

It is an AI-based product recommendation app that understands what your customer is looking for and then recommends products that are hard to resist.

When a visitor adds a product to the cart, it means the intent of their purchase is higher. No matter what the product is, the moment you recommend something to them at this stage, they are sure to check it out. And that’s exactly what the app does, but with a personalized touch - so that what you recommend is highly relevant to the buyer.

You can now easily recommend T-shirts along with the leggings on the cart page with WISER.
Let me know if that helps? 🙂

Products recommendations on cart page

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links