SwitchThemes Integration

EliteCart works seamlessly with all SwitchThemes. Add to cart and cart opening work perfectly out of the box. The only modification to be made is to keep the cart icon in the navigation in sync, ensuring it correctly shows whether items are in the cart or not.

Background

SwitchThemes (Baseline, Exhibit, Shapes, and Cascade) are premium Shopify themes with built-in cart icon counters. While EliteCart integrates perfectly with these themes, adding this simple script ensures the cart counter in the navigation updates instantly when customers add items through EliteCart, providing a consistent shopping experience.

Prerequisites

• Any SwitchThemes theme installed

• EliteCart installed and active

Steps

1. Identify your theme

Confirm you're using one of these SwitchThemes:

• Baseline (Editorial, Austere, Brutalist variants)

• Exhibit (Exposure, Curate, Display variants)

• Shapes (Fizz, Candy, Aura, Scratch variants)

• Cascade (Swell, Phase, Sequence variants)

2. Add the sync script

This step requires access to Custom HTML, which is limited to the Professional plan. If you’re on the Essentials plan, please reach out to our support and we will fix it for you.

1. Go to Cart Designer → Custom HTML

2. Select position: Top of cart

3. Add this code:

<script>
  window.EliteCart.onCartChange((cartData) => {
    document.dispatchEvent(
      new CustomEvent('theme:update:cart')
    );
  });
</script>

3. Save and activate

1. Click Save in Cart Designer

2. Ensure EliteCart is active in your theme

Test

1. Open your store

2. Add a product to cart via EliteCart

3. Verify the cart icon counter updates immediately

4. Remove items from cart

5. Verify counter decreases correctly

How it works

The script listens for EliteCart cart changes and dispatches the theme:update:cart event that SwitchThemes uses internally to update the navigation cart counter.

Links

• Baseline Documentation

• Exhibit Documentation

• Shapes Documentation

• Cascade Documentation