Customize
Make Sledge match your store exactly — colors and fonts, your own CSS and JavaScript, or replace a widget's markup with your theme's own.
Most stores never need this page. Sledge picks up your theme's colors, fonts and corner radii on its own, and is tuned for 24 themes out of the box.
When you do want to change something, work down this list. Each step gives you more control and takes more looking after.
Design tokens
Override Sledge's CSS custom properties. Handles most visual differences with a handful of values, and never breaks. See Styling.
Custom CSS
Restyle the inside of widgets with your own rules. See Custom code.
Custom Components
Replace a widget's markup entirely with a Liquid template of your own, so it renders your theme's card. See Custom Components.
Custom JavaScript
Change behavior, react to events, or restyle host elements. See Custom code.
Stability
Two tiers apply across this whole section.
Supported — custom CSS and JavaScript, design tokens, Custom Components, document-level events, and element tag names. These will not change without a major version and a migration note.
Escape hatch — reaching into a widget's shadow root and matching internal class names. This works, and sometimes it is the only way, but internal markup can change in any release. Label it in your code so you know where to look when something breaks.
Last updated on
Placement
How Sledge decides where on the page your widgets land, how to move them, and how to run several offers at once on different surfaces.
Custom code
Add your own CSS and JavaScript to Sledge widgets. Covers where custom code runs, why CSS cannot reach host elements, and the standard patterns for doing it safely.