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 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 -%} {% comment %} add styles to the outer container div, e.g. you may want to apply flexbox or grid css to display cross sell products in a grid layout {% endcomment %} <div class="partbot-cross-sell-products-container"> {% for item in cross_sell_products.products %} {%- assign csp = all_products[item.shopify_product.handle] -%} {% comment %} add styles to this product container div, e.g. you may want to apply css to display each cross sell product in a card-style layout with rounded corners and a shadow. You can also use Shopify liquid tags to modify the image size. {% endcomment %} <div class="partbot-cross-sell-product"> <a href={{csp.url}}> <img src="{{csp.featured_image | img_url: '200x200' }}" alt="{{csp.featured_image.alt}}"> </a> <div class="partbot-cross-sell-product-title">{{csp.title}}</div> </div> {% endfor %} </div> {%- endif -%}
Customise and style this output to match your website theme. All Shopify product fields are accessible on
csp
.