Cross-Sell Products

{% 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 -%}