Custom Components

When CSS is not enough — when your theme's product card is structurally different from Sledge's, not just styled differently — you can replace the markup entirely.

A Custom Component is a Liquid template you provide. Sledge renders it instead of its own markup, into the light DOM, so your theme's stylesheet applies to it normally.

Defining one

Add a script tag with the type text/x-liquid and a slot naming the part you are replacing:

<script type="text/x-liquid" slot="product-card">
  <div class="card card--product">
    <a href="{{ product.url }}" class="card__link">
      <img src="{{ product.image }}" alt="{{ product.title }}" loading="lazy">
      <h3 class="card__title">{{ product.title }}</h3>
      <span class="card__price">{{ product.price }}</span>
    </a>
  </div>
</script>

Because this renders into the light DOM, the classes above are styled by your theme's own CSS with no extra work. That is the whole point — you stop reimplementing your card in Sledge's stylesheet and start reusing the one you already have.

Where to put it

Add the script tag to the template where the widget appears, or to your theme layout if you want it everywhere. It needs to exist in the page before the widget renders.

Why prefer this over CSS

Replacing markup is more durable than overriding it:

If you find yourself writing a long stylesheet to reshape a card, a Custom Component is almost certainly less work and will age better.

Keeping behavior

You are replacing presentation, not behavior. Sledge still handles data, wishlist state, add-to-cart, analytics and re-rendering — it just renders through your template.

Your template runs on every render, including re-renders, so it does not need to guard against being called more than once.

When you still need CSS

Custom Components replace a widget's markup, not the widget element itself. Layout of the element in your page — width, alignment, margins — is still document-level styling. See Styling.