Troubleshooting

Fixes for the most common Sledge problems — widgets not appearing, custom CSS not applying, widgets in the wrong place, and styling that does not match your theme.

Find what you're seeing below. Most of these take a minute to fix.

Work through these in order. The cause is nearly always in the first two.

Is Sledge Core enabled on the published theme?

App embeds are per-theme. Publishing or duplicating a theme does not carry them across. Open the theme editor on the published theme and confirm Sledge Core is on under App embeds.

Is the feature enabled for this surface?

A widget renders only where it is enabled. A bundle enabled for product pages will not appear on a collection page. Check the feature's per-surface settings in the Sledge dashboard, and confirm the surface you are on is the one you think.

Some widgets inject automatically; others need an app block placed where you want them. Confirm the block is on the template you are viewing.

Is there data to show?

A recommendation slider with no qualifying products, or a review widget on a product with no reviews, renders nothing by design.

The theme editor previews a template, not a real product or collection. A widget can look empty there and render correctly on the live storefront. Always confirm on a real URL before moving things.

To check an offer without publishing it, use Sledge's own preview instead — it renders the offer on the surface exactly as a shopper would see it. See Placement.

My custom CSS is not applying

Almost always one of two causes.

You are targeting the widget element. Custom CSS is applied inside widgets, so a rule targeting sledge-product-card, sledge-wishlist-badge or any other sledge-* element never matches. Those need a document-level style injected from Custom JavaScript — see Custom code.

The value is set inline. Some values are set directly on elements, and inline styles beat stylesheets. Add !important, and leave a comment saying why so a later reader knows it was necessary.

My changes disappear after interacting with the page

Sledge re-renders widgets when their data changes — filtering, paginating, changing a variant. A re-render rebuilds the widget's internals, discarding anything you injected.

Re-apply your change on every render rather than once at startup:

SledgeCC.onCard((card) => {
  // runs on first render and on every re-render
})

See Custom code.

Placement resolves in a fixed order: an explicit selector you set, then a placed block, then the default position for your theme. Check them in that order — an old selector in the dashboard will override a block you just placed.

If a widget moved or vanished after a theme update, an over-specific selector is the likely cause. See Placement.

Widgets don't match my theme

Sledge picks up your theme's colors, fonts and corner radii automatically, and is tuned for 24 themes. If yours isn't one of them, work up in this order:

Design tokens — font, primary color, radius. Usually gets close.
Component rules — match card borders, spacing and typography.
Custom Components — replace the markup with your theme's own card.

If you are writing a long stylesheet, jump to step 3. It is usually less work and it does not break when internal markup changes.

Search or filter results look wrong

Sledge keeps its own index of your catalogue rather than querying Shopify on every request, which is what makes it fast. Right after a catalogue change, the index may briefly lag.

If results stay wrong, check indexing status in the Sledge dashboard and confirm the products are eligible for the collection or query you are testing.

Something broke after I added custom code

Disable Custom JavaScript, reload, and confirm the problem disappears. If it does, re-enable and check your browser console for warnings prefixed [sledge-cc].

The most common causes are querying for Sledge elements at the top level of your script — they do not exist yet — and forgetting to re-apply changes after a re-render. Both are covered in Custom code.