Add to cart button on Complementary products

Store Design
, , ,
1

I want to add an add to cart button to my complementary products in my Ride theme.

2

Hi @cleankits

Yes. In the Ride theme if by “complementary products” you mean the Complementary products / Product recommendations section on the product page, you can add an Add to cart button to each recommended product.

I can guide you through the exact Liquid changes. The cleanest approach is usually:

  1. Find the complementary-products section/snippet.

  2. Identify the product card used for each recommended product.

  3. Add a small form using the product’s **

  4. first available variant.

  5. Submit it with Shopify’s /cart/add endpoint.

  6. Optionally make it AJAX so the product is added without leaving the product page.

If you want, send me the code of your complementary-products section/snippet (or upload the relevant Ride theme file), and I’ll tell you exactly where to add the Add to Cart button and give you the ready-to-paste code.

3

You should not need custom Liquid for this on Ride. Complementary products is a block on the product information section. In the theme editor, open the product template, click Complementary products, and turn on Enable quick add button.

If the complementary item has variants, the button shows Choose options instead of Add to cart. The products themselves are picked in Search & Discovery.

4

Yes, you can add an Add to Cart button to the complementary products in the Ride theme. You’ll need to modify the product card/section and submit the selected variant to Shopify’s cart endpoint. If you share the relevant Liquid code, I can point out the exact change.

5

find the product.liquid or product recommendation theme file

insert this code

{%- form 'product', block_product -%}<button type="submit" class="button complementary-atc-btn" {% if block_product.selected_or_first_available_variant.available == false %}disabled{% endif %}>{% if block_product.selected_or_first_available_variant.available %}Add to cart{% else %}Sold out{% endif %}{%- endform -%}

you will also need to add this js

document.addEventListener('submit', function (e) {
const form = e.target.closest('product-form form');
if (!form || !form.closest('.complementary-products, [data-complementary]')) return;
e.preventDefault();

const formData = new FormData(form);
fetch('/cart/add.js', {
method: 'POST',
body: formData,
headers: { 'Accept': 'application/json' }
})
.then((res) => res.json())
.then((data) => {
if (data.status) {
alert(data.description || 'Could not add to cart');
return;
}
document.dispatchEvent(new CustomEvent('cart:refresh'));
})
.catch((err) => console.error(err));
});

Recommended method is that in customizer you will definately find an option to add
cart button

share store url, so that will be able to help you

6

I enabled quick add but there is no change at all

8

Hey! A few things worth checking since toggling ‘quick add’ alone sometimes doesn’t visually change anything :

  1. Make sure you clicked Save in the theme editor and then checked your live/published site (not just the editor preview) - sometimes changes don’t show up until you save and refresh.
  2. The complementary products block usually comes from Shopify’s Search & Discovery app (added as an app block on your product page), and it has its own separate “show quick add” toggle inside that block’s settings - this is different from any general quick-add setting in your theme. Double check you toggled it on that specific block.
  3. If your products have multiple variants (size/color etc.), the button might show “Select options” instead of a direct “Add to cart” - that’s expected behavior, not a bug.

If none of that helps, try a hard refresh (Ctrl+Shift+R) in case it’s just a caching issue.

9

Hi @cleankits, following up on the quick add toggle not doing anything, that’s usually not a bug, it just means the block has nothing to show yet.

Two things worth checking before touching any code:

  1. Have you actually picked complementary products for this specific product? That’s separate from the theme editor. Go to Products, open this product, click the … (More actions) menu, then Edit product recommendations, and scroll to Complementary products. If that list is empty, the block on the storefront has nothing to display no matter what you toggle in the customizer.
  2. After turning on quick add, did you click Save in the theme editor, and are you checking the published live store rather than just the preview? Sometimes it looks unchanged simply because of caching or an unsaved draft.

If you’ve already got products picked there and it’s still not showing the button, let me know, and we can look at whether this specific Ride theme version even has that setting. Some older versions don’t, in which case it needs a small code fix instead.

10

Tim from Sonder Sites in Melbourne.

The Ride quick-add toggle only paints a button if Search and Discovery already has complementary products assigned on that exact product. Theme editor settings will not invent the list. Open the product, More actions, Edit product recommendations, and check Complementary products. If that list is empty, the block has nothing to attach a button to.

If products are assigned and the button still does not show after a save and a hard refresh on the published theme, you are likely on a Ride version where that setting does not exist, or the complementary block is the Search and Discovery app block rather than the theme block. Those are two different toggles.

Do not paste a custom form into the section until those two checks fail. A hand-rolled /cart/add form on complementary cards often fights Ride’s existing product form and you end up with the wrong variant in the cart.

If you share the Ride version number and a product URL that already has complementary items assigned, I can tell you which of those two cases you are in. Happy to help.