Remove Add-On Product with Main Product

Compatibility: All Shopify 2.0 FREE Themes

We like to sell add-on products, but the add-on product becomes unnecessary without the main product. Let make our website user friendly and lessen the confusion of our customers. Add the code below to remove the add-on product once the main product is remove from cart. 

Selling a Product X together with a Product Y is easy but challenging to remove together. The code below will remove the Add-on Product (Product Y) once the Main Product (Product X) is remove. 

 What you are buying:

  • Remove Add-On Product when Main product is remove from cart
  • Code works for any of Cart type
  • Updates the Cart icon
  • Use Ajax code, which update without refreshing the browser

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. Go to Admin store > Online Store > Themes > Actions > Edit code.

2. This varies on what cart type you are using.  Your theme might not have Cart Drawers if you have the older version. Skip to Cart page and Pop Up notification. 

For Cart Drawer users:
a. Open the cart-drawer.liquid under the Snippet Folder. Then find the code below
 <cart-drawer-items {% if cart == empty %}class=" is-empty"{% endif %} 
For Cart Page or Pop up Notification users:
a. Open the main-cart-tems.liquid under the Section folder. Then find the code below
<cart-items class="page-width{% if cart == empty %} is-empty{% else %} section-{{ }}-padding{% endif %}"
Make sure to click SAVE.

4. Open the Asset folder, and find the cart.js and look for the code below.



5. Above the said code, place the code below.


 6. Next, still at the same file, look for the code below



7. Before the said code, place the code below. Then click SAVE.



8. Open the Config folder, then the settings_schema.json. Scroll all the way down, and paste the code below before the closing square bracket ( ] ). Make sure to click SAVE.



9. Open the Theme editor, and look for the the Tandem Product in the Theme settings. Assign the Main Product, and the Add on Product.


That's it (",)

Back to blog

Leave a comment