How to use Groopie

Redesign Shopify’s default variant picker

Variant Redesign restyles a product’s native Shopify options — Color, Size, Denominations, and so on — without grouping separate products. You choose a display type per option: keep the theme default, switch to a dropdown or custom buttons, or show variant images.

1. Open Variant Redesign and select a product

In Shopify Admin, go to Apps → GROOPIE → Variant Redesign. Choose the product whose picker you want to restyle. The editor opens with a live product-page preview on the left and option settings on the right.

2. Choose an option type

Click the option you want to change (for example Denominations or Size). Under Choose option type, pick how that option should appear on the storefront:

• Shopify default — keep your theme’s own selector for this option
• Dropdown — compact list
• Custom buttons — text buttons for each value
• Variant images — thumbnail swatches for each value (the usual choice for colors and styles)

You can restyle one option and leave others on Shopify default. The screenshot below shows setting up variant images for an option.

3. Click the upload icon on a value

After you switch to Variant images, the preview shows a swatch for each value. Values without a picture show an upload icon (a square with a plus). Click that icon to assign an image.

4. Choose an image

The Select a product image popup opens. You can:

• Click an image in the group gallery — photos already used on this product or group
• Click Upload image, then Upload from device
• Click Upload image, then Choose from Shopify Files

Repeat for each value that needs a picture. You can still adjust alignment, the option-name label, and label color in the right-hand panel before you save.

5. Save changes

Click Save changes. Groopie asks how to apply the new style:

• Current product only — update this product’s picker and leave other products unchanged
• All products with these options — find every product that uses the same option names (for example Fabric, Size) and apply the new style to them as well

Choose an option, then click Apply style. Use current product only if you are testing; use all products when the same options should look the same across the catalog.

Same product, different colors

Create one product per color (each with its own images and inventory). Put them in one Groopie group with option name Color. Use color or image swatches. This is the most common combined-listing setup on Basic, Grow, and Advanced plans.

Size + color (multi-level)

Groopie supports single and multi-level swatches. Keep size as a normal variant on each product (S / M / L), and use the product group for color across products — or structure both levels in the app if your catalog is split that way. Preview on mobile so both option rows stay clear.

Auto-group from titles or tags

If your products already share a naming pattern or tags (for example color-navy), use Groopie’s auto-create groups from titles or tags to build groups faster, then review and adjust swatch styles before publishing.

Frequently Bought Together

Separately from combined listings, create Perfectly Paired (FBT) groups to suggest complementary products on the product page and lift average order value.

Swatch click event (Google Analytics, Klaviyo & custom tools)

GROOPIE fires a custom JavaScript event whenever a shopper clicks a swatch on your storefront. You can listen for it and send the data to Google Analytics, Google Tag Manager, Klaviyo, or any other tracking tool.

• This works on Free and Grow.
• The in-app Analytics dashboard (destinations, colors, locations) is available on Grow only.

Event name

groopie:swatch_clicked

Where it fires

• Product page swatches (single-line and multi-option groups)
• Collection, search, and home embeds (product cards), when GROOPIE swatches are enabled

The event is dispatched asynchronously so it does not block navigation.

How to listen

Add this to your theme (or run it via Google Tag Manager):

window.addEventListener('groopie:swatch_clicked', function (e) {
  console.log('Swatch clicked:', e.detail);
});

Event detail properties

Example: Google Analytics (gtag)

window.addEventListener('groopie:swatch_clicked', function (e) {
  if (window.gtag) {
    gtag('event', 'swatch_click', {
      product_id: e.detail.productId,
      product_name: e.detail.productTitle,
      product_handle: e.detail.productHandle,
      option_value: e.detail.optionValue,
      swatch_type: e.detail.swatchType,
      context: e.detail.context
    });
  }
});

Example: Klaviyo

window.addEventListener('groopie:swatch_clicked', function (e) {
  if (window.klaviyo) {
    klaviyo.track('Swatch Clicked', {
      ProductID: e.detail.productId,
      ProductName: e.detail.productTitle,
      ProductHandle: e.detail.productHandle,
      ProductURL: e.detail.productUrl,
      OptionValue: e.detail.optionValue,
      SwatchType: e.detail.swatchType,
      Context: e.detail.context
    });
  }
});

After this is live, “Swatch Clicked” (or your chosen event name) can appear in Klaviyo metrics and be used in flows or segments. GROOPIE does not sync to Klaviyo automatically — this snippet is the bridge.

Example: custom endpoint

window.addEventListener('groopie:swatch_clicked', function (e) {
  fetch('/apps/your-tracker', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      event: 'swatch_click',
      data: e.detail
    }),
    keepalive: true
  });
});

Debugging

1. Open a storefront product or collection page that shows GROOPIE swatches.
2. Open the browser console.
3. Paste:

   window.addEventListener('groopie:swatch_clicked', function (e) {
     console.log('groopie:swatch_clicked', e.detail);
   });

4. Click a swatch — you should see the event payload.

If nothing logs: confirm GROOPIE swatches are visible on that page, hard-refresh, and make sure your listener script loads on that template.

Groopie Analytics (Grow)

Want click insights without custom code? Grow includes the Groopie Analytics dashboard (top destinations, colors, and locations). The public event still fires on Grow if you also use GA, Klaviyo, or GTM.

FAQ

Do I need Grow for the JavaScript event?

No. The event is available on Free and Grow.

Will this slow down my storefront?

No. The event is dispatched asynchronously after the click and does not add network requests by itself. Only your own GA/Klaviyo/custom listener may send data.

Does this replace Shopify’s Combined Listings analytics?

No. This is GROOPIE’s own storefront event for your tools and (on Grow) the Groopie Analytics dashboard.