How can I add cross-sell on cart drawer (pitch/horizon)

Store Design
1

Hello guys!

I can’t enable this option in this theme. I’m using Focal theme right now, that has this function.

Do you know how can I add these to Pitch/Horizon theme?

focal 23
focal 23242×451 22.4 KB

focal 22
focal 22753×796 49.2 KB

1 Like
2

Hi @Leoneljr :waving_hand: not every theme can have every other themes features.
Such things are an advanced theme customization beyond the scope of the forums.

If your code savvy just transplant code from one theme to another.

If you need theme customization services then reach out to me by clicking on my profile pic on the forums for options to connect.
:speaking_head: :postbox: always include relevant context in any new communications.

3

Hey,

The requested changes requires to do the custom code in your theme file.

could you share your store url along with the collab code so that I can take a look into it and do the requested changes.

Thanks

1 Like
4

Hello,

Is it complicated? I mean, do not have money to spend on it.

5

Hi @Leoneljr

Online Store → Edit code → Snippets → Add a new snippet
Name it something like:
cart-drawer-cross-sell.liquid

Paste this inside

{% comment %}
  Cross-sell products inside cart drawer
{% endcomment %}

<div class="cart-drawer-cross-sell">
  <h3 class="cart-drawer-cross-sell__title">You may also like</h3>

  {%- assign product_recommendations = recommendations.products | default: [] -%}

  {%- if product_recommendations.size > 0 -%}
    <div class="cross-sell-grid">
      {%- for product in product_recommendations limit: 3 -%}
        <div class="cross-sell-item">
          <a href="{{ product.url }}" class="cross-sell-link">
            {{ product.featured_image | image_url: width: 200 | image_tag: class: 'cross-sell-img' }}
            <p class="cross-sell-title">{{ product.title }}</p>
            <p class="cross-sell-price">{{ product.price | money }}</p>
          </a>
        </div>
      {%- endfor -%}
    </div>
  {%- else -%}
    <p>No recommendations yet.</p>
  {%- endif -%}
</div>

<style>
.cart-drawer-cross-sell {
  padding: 1rem;
  border-top: 1px solid #ddd;
}
.cart-drawer-cross-sell__title {
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.cross-sell-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
.cross-sell-item {
  text-align: center;
}
.cross-sell-img {
  border-radius: 8px;
}
.cross-sell-title {
  font-size: 0.9rem;
  margin: 0.5rem 0 0.2rem;
}
.cross-sell-price {
  font-size: 0.85rem;
  color: #777;
}
</style>

2. Include the Snippet in Your Cart Drawer

Find your cart drawer file:
sections/cart-drawer.liquid (or similar name depending on your theme)

Then, include the snippet below the cart items list, for example right after:

</cart-items>

Add this line

{% render 'cart-drawer-cross-sell' %}

3. Enable Product Recommendations

To make the recommendations work, make sure your product recommendations API is called.

Add this above the closing </cart-drawer> tag:

{% product_recommendations %}

Shopify will automatically generate dynamic suggestions based on the products in your cart.

Best regards,
Devcoder :laptop:

1 Like
6

Hi @devcoders thanks for helping me.

In step 3, I get this error: apresentou esse erro: FileSaveError: Liquid syntax error (line 123): Unknown tag ‘product_recommendations’.

Can I help you sending full specific pages scripts from Pitch?

7

anyone can help me here?