Skip to main content
Cross-Sell Products

Display synced Cross-Sell Products on your Shopify product page.

Updated over a week ago

Cross-Sell Products are a great way to increase revenue and average order value. Use the following Liquid code snippet on your Shopify theme’s product template to display Cross-Sell Products synced via Partbot.

{%- assign cross_sell_type = cross_sell_type | default: 'required' -%}
{%- assign variant = product.selected_or_first_available_variant -%}
{%- if variant.metafields.partbot.cross_sell_products -%}
{%- assign cross_sell_products = variant.metafields.partbot.cross_sell_products.value -%}
{% if cross_sell_type != 'all' %}
{%- assign cross_sell_products = cross_sell_products.products | where: 'relationship_type', cross_sell_type -%}
{% else %}
{%- assign cross_sell_products = cross_sell_products.products -%}
{% endif %}

{%- if cross_sell_products.size > 0 -%}
<div class="mt-6 mb-3">
You might want {{ cross_sell_products.size | pluralize: 'this', 'these' }}!
</div>
<div class="relative overflow-x-scroll w-full">
<div class="partbot-cross-sell-products-container">
{% for item in cross_sell_products %}
{%- assign csp = all_products[item.shopify_product.handle] -%}
{% if csp.id != blank %}
<div class="partbot-cross-sell-product">
<div class="relative">
<a href="{{csp.url}}">
<img src="{{csp.featured_image | img_url: '200x200' }}" alt="{{csp.featured_image.alt}}">
</a>
{%- if item.relationship_type == 'required' -%}
<div class="bg-red-600 inline-block whitespace-nowrap rounded-[2px] text-gray-100 text-[10px] leading-4 px-2 py-0.5 absolute -top-1 -left-1">
Recommended
</div>
{%- endif -%}
<div class="partbot-cross-sell-product-title text-xs">
{{ csp.title | truncate: 60, '...' }}
</div>
</div>
<div>
<div class="text-xs mt-2 font-medium">
{% if csp.price_varies %}
From: {{ csp.price | money }}
{% else %}
{{ csp.price | money }}
{% endif %}
</div>
{% comment %} add to cart button {% endcomment %}
{%- if csp.available -%}
<form action="/cart/add" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="{{csp.variants[0].id}}">
<input type="hidden" name="quantity" value="1">
<button
type="submit"
data-btn-addtocart
class="partbot-add-to-cart-button"
>
Add to cart
</button>
</form>
{%- else -%}
<div class="partbot-add-to-cart-button">
Sold out
</div>
{%- endif -%}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{%- endif -%}
{%- endif -%}

We’ve added some opinionated TailwindCSS styles to the above code, but you should customise and style to match your website theme and specific needs. All Shopify product fields are accessible via csp.

Did this answer your question?