How can I set up a cart upsell on the Dawn theme without an app?

Store Design
1

Do you have any suggestions on how to create a cart upsell on the dawn theme without a app. Preferably one that can use the frequently bough together collection.

2 Likes
2

Hello @Simon_A ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Sections → cart-template.liquid file or something name similar to this

Within the cart items section, add the following code where you want the upsell to appear:

{% if collection_handle == 'frequently-bought-together' %}
  
{% else %}
  
  
    ### Frequently Bought Together:
    {% for product in collections['frequently-bought-together'].products %}
      
      
        
          
          #### {{ product.title }}
          

{{ product.price | money }}

        
      

    {% endfor %}
  

{% endif %}

Save and test

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

3

Hi @irene-vintage thank you but there’s no cart-template.liquid on dawn theme

4

Hey my friend,

Jan here from Coding with Jan :slightly_smiling_face:

I just uploaded a step by step tutorial on how to do this on Dawn 15.2 (most recent version right now.)

Shopify Upsell Offer in Cart Without an App (Shopify Coding Tutorial)
https://www.youtube.com/watch?v=ZW9zcoxrezA

Hope that’s useful.

Cheers

5

Hi @Simon_A ,

We have provided the flow how you can achieve the same, let me know if it works for you.

6

You can add a cart upsell to Dawn without an app by using a custom section or block inside your cart template.

The basic idea is:

  1. Create a new section (e.g. upsell-product.liquid).
  2. Use a product reference setting so you can choose which product to show.
  3. Include it in your cart page or drawer by adding {% section 'upsell-product' %}.

If you don’t want to build it from scratch, there’s a free pre-built section that does exactly this — it shows a chosen product below the cart items with an “Add to cart” button.

Here’s an example: Upsell Product Section

It’s a lightweight section (no app required) and works well with the Dawn layout.

7

Hi @Simon_A

Yes — here’s how you can create a cart upsell in the Shopify Dawn theme without using any app, especially if you want to use your “Frequently Bought Together” collection.

Step-by-Step Guide

  1. Create a Collection
  • First, create a collection in Shopify called “frequently-bought-together” (or any name you prefer).
  • Add the products you want to recommend there.
  1. Find Where to Add the Code
  • Go to Online Store → Themes → Edit Code.
  • Open either sections/cart-drawer.liquid (if you use a cart drawer) or templates/cart.liquid (for a full cart page).
  1. Add the Upsell Code
    Paste the following Liquid code where you want the upsell section to appear (usually below cart items):
{% comment %} Upsell section start {% endcomment %}
<div class="cart-upsell">
  <h3>Frequently Bought Together</h3>
  {% for product in collections['frequently-bought-together'].products %}
    {% unless cart.items contains product %}
      <div class="upsell-item">
        <a href="{{ product.url }}">
          <img src="{{ product.featured_image | image_url: width: 300 }}" alt="{{ product.title }}">
          <p>{{ product.title }}</p>
          <p>{{ product.price | money }}</p>
        </a>
        <button class="button upsell-add" data-product-id="{{ product.id }}">Add to cart</button>
      </div>
    {% endunless %}
  {% endfor %}
</div>
{% comment %} Upsell section end {% endcomment %}

This displays products from your “Frequently Bought Together” collection that are not already in the cart.
4. Add Optional JavaScript (for AJAX Add to Cart)
If you want customers to add products without reloading the page, you can use AJAX.
I can provide that JS snippet too if needed.
5. Style with CSS
Add some simple styling in your base.css or theme.css:

.cart-upsell {
  margin-top: 2rem;
}
.upsell-item {
  display: inline-block;
  margin-right: 1rem;
  text-align: center;
}
.upsell-item img {
  width: 100px;
  height: auto;
  border-radius: 5px;
}
.upsell-add {
  margin-top: 0.5rem;
  background: #000;
  color: #fff;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
}
1 Like