Settings

All app settings: the storefront on/off switch, card click behavior, hover preloading, and custom CSS.

Open Settings in the app navigation. Changes apply after Save (a save bar guards unsaved edits) and sync to your storefront in the background.

All settings live on one page — changes apply after Save.

General

Enable Combined Listings on your storefront

The master switch. Turning it off immediately hides every option widget storefront-wide — on product pages, cards, and quick view — without touching your groups or products. Turn it back on and everything reappears as before.

Default: on.

Turning this off and saving asks you to confirm first — Hide Combined Listings on your storefront? — since shoppers will see plain product pages until you turn it back on. Your groups and products aren't affected.

Use this as a kill switch during theme work or troubleshooting: it's instant and fully reversible.

When clicking options on product card

What happens when a shopper clicks a value on a collection card:

Option	Behavior
Update the price, image, and title on the card (default)	The card's price, image, and title switch in place to the selected product.
Redirect to product details page	Clicking a value navigates straight to that product's page.

Storefront experience

Preload linked product pages on hover

When a shopper hovers or focuses an option value, the linked product's page is preloaded so the subsequent navigation feels instant.

Default: on.

Turn this off if it's not needed for your store — for example, if it seems to affect your analytics numbers.

Advanced

Custom CSS

Free-form CSS injected on your storefront alongside the widgets — for fine-tuning position, spacing, or colors beyond what styles cover.

For developers only — leave it blank if you're not sure; incorrect CSS can change how things look on your storefront.

/* Add breathing room around the product-page widget */
gcl-product-widget {
  margin-block: 20px 8px;
}

/* Cap the card widget's width on wide collection cards */
gcl-card-widget {
  max-width: 220px;
}

Target the widget containers (gcl-product-widget, gcl-card-widget) as shown above. For colors, sizes, and shapes inside the widget, use the style editor instead — that's what it's for.

Not comfortable with CSS? Contact support — free CSS adjustments are part of support.