Upsell Products in Cart with Dawn Theme or Shopify 2.0 Free themes

Upsell Products in Cart with Dawn Theme or Shopify 2.0 Free themes

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Dawn version 0 to latest version, and Shopify 2.0 FREE themes

Increase sells, and upsell your product collections and show them in the cart. No need refreshing the page to add see them inside your cart. 

See demo store here for Dawn version 5 and below. See the demo with the cart drawer here

NOTE: For user friendly purposes, the collection will only show 5 products. In my opinion, customer more focus on the following products if you give them limited options, which not so overwhelming.

See You may also like (UPSELL) section in the image below

You may also like upsell

What you are buying:

  • Add collection of product you want to recommend in cart page
  • Easy access add to cart button

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.

To start:

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Snippet folder, create a snippet, and name it upsell-products
3. Open the newly created file and paste the code below

<style>
upsell-container {
display: none
}

{% if settings.cart_type == "drawer" %}
upsell-container.upsell-cart-drawer {
display: flex
}
{% else %}
.upsell-page {
display: flex;
}
{% endif %}}

.drawer {
visibility: hidden;
}

#CartDrawer {
display: flex;
}

.drawer.active .upsell-drawer__inner {
transform: translate(0);
}
.upsell-container {
position: relative;
display: flex;
flex-direction: column;
display: flex;
overflow: auto;
height: 100%;
width: 100%;
}

.upsell-drawer__inner {
background: #fff;
padding: 1rem;
width: 20rem;
overflow: auto;
transform: translate(400%);
transition: transform var(--duration-default) ease;
}

.upsell-drawer__inner h2 {
margin-top: 0.6rem;
text-align: center;
}

.upsell-drawer__inner .upsell-product--container {
flex-direction: column;
}

.upsell-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
margin-bottom: 3rem;
width: 100%;
}

.cartItem-link {
text-decoration: none;
}

.productImageWrapper {
width: 100%;
padding: 0 2rem 1rem;
}

.upsell-container .product__media-icon, .upsell-container .product__media-toggle {
display: none
}

.upsell-product--container {
display: flex;
gap: 5rem;
}

.upsell-product--price {
font-size: 2rem;
font-weight: bold;
}

button.upsell-btn.button {
padding: 0;
min-height: 3rem;
}

.upsell-drawer__inner.upsell-container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 50%);
}

.upsell-drawer__inner.upsell-container::-webkit-scrollbar {
width: 5px;
}

.upsell-drawer__inner.upsell-container::-webkit-scrollbar-track {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
}

@media screen and (max-width: 749px) {
.cart-drawer .drawer__inner {
width: 30rem;
}

.upsell-drawer__inner {
width: 15rem;
}
}
</style>
<upsell-container class="{% if section_name %}upsell-page{% else %} upsell-cart-drawer {% endif %}">
<div class="upsell-{{ settings.cart_type }}__inner upsell-container {% unless settings.cart_type == "drawer" %} page-width {% endunless %}">
<h2 class="">{{ settings.upsell_title }}</h2>
<div class="upsell-product--container">
{%- for product in settings.upsell_collection.products limit: 5 -%}
<div class="upsell-item">
{%- assign img_url = product.selected_or_first_available_variant.featured_media | img_url -%}
<a href="{{ product.url }}" class="productImageWrapper">
{%- if product.selected_or_first_available_variant.featured_media != null -%}
{%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
{%- assign media_position = 1 -%}
{% render 'product-thumbnail', media: featured_media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: false %}
{% else %}
{%- assign media = product.media | first -%}
{%- liquid
assign media_position = media_position | default: 0 | plus: 1
assign lazy_load = false
if media_position > 1
assign lazy_load = true
endif
render 'product-thumbnail', media: media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: lazy_load
-%}
{%- endif -%}
</a>
<a href="{{ product.url }}" class="cartItem-link">
<span class="cart-item__name h4 break">{{ product.title }}</span>
</a>
<span class="upsell-product--price">{{ product.price | money }}</span>
<cart-add-button data-upsell="{{ product.selected_or_first_available_variant.id }}">
<button class="upsell-btn button" {%- unless product.selected_or_first_available_variant.available -%}disabled{% endunless %}>
<span data-add-to-cart-text="" data-default-text="Add to cart">
{%- if product.selected_or_first_available_variant.available -%}
ADD TO CART
{%- else -%}
SOLD OUT
{%- endif -%}
</span>
</button>
</cart-add-button>
</div>
{% endfor %}
</div>
</div>
</upsell-container>

4. Find the Asset folder and open the global.js.

5. Paste the code below at the very bottom of the file.

class UpsellContainer extends HTMLElement {
constructor() {
super();

this.addToCarts = this.querySelectorAll('cart-add-button');
this.addToCarts.forEach(btn =>{
btn.addEventListener('click', this.renderUpsell.bind(this))
})
}

renderUpsell (evt) {
evt.preventDefault();

let formData = {
'items': [{
'id': `${evt.currentTarget.dataset.upsell}`,
'quantity': 1
}]
};

fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
return response.json();
})
.then(response =>{
const cartItems = document.querySelector('cart-items') || document.querySelector('cart-drawer-items');
cartItems.updateQuantity(1, 1);
})
}
}

customElements.define('upsell-container', UpsellContainer);

 

6.. Next, we need to add the Cart Upsell settings. Go to the Config folder and open the settings_schema.json.

7. Before the last "]", paste the code below

,{
"name": "Cart upsell",
"settings": [
{
"type": "text",
"id": "upsell_title",
"label": "Upsell title",
"default": "You may also like"
},
{
"type": "collection",
"label": "Upsell product collection",
"id": "upsell_collection",
"info": "Only maximum of 5 products to show"
}
]
}

 

8. Skip this step if you have Dawn version 5 and below, since the version does not have a cart drawer. We need to add the Snippets to the cart-drawer. Go to the Snippet folder, and open the cart-drawer.liquid. Find the   <div id="CartDrawer-Overlay"class="cart-drawer__overlay"></div>. After the code, paste the code below. 

{% render "upsell-products", section_name: section.id %}

 

See image below for placement.

Upsell product in cart-drawer

 

9. We need to add the upsell to the main-cart-items.liquid file under the Section folder. Find the closing tag </cart-items>, then add the code below.  

{% render "upsell-products", section_name: section.id %}

 

See image below for code placement.

Upsell product in main-cart-items

 

10. Make sure to SAVE all files. All you need to do is to customize the Theme Settings. Look for Cart Upsell, when you click the Theme Settings.

Copied!
Back to blog

Leave a comment