How do I set up Image Swatches?
An image swatch replaces a plain text filter value with a small image — a brand logo instead of a vendor name, a pattern instead of a fabric label. Customers recognise the image faster than they read
An image swatch replaces a plain text filter value with a small image — a brand logo instead of a vendor name, a pattern instead of a fabric label. Customers recognise the image faster than they read the word, which makes scanning the filter effortless.
Before you start
This feature renders inside the Sledge product filter on your storefront, so make sure of the following first:
- Sledge Core is enabled on your theme. Sledge Core is the app embed that loads Sledge on your storefront — without it, nothing Sledge does reaches your customers. You enable it during onboarding (Enable in theme), or any time via Online Store → Themes → Customize → App embeds → Sledge Core.
- The Collections page surface is turned on. Open Sledge → Tools → Product Filter and check the Collections page switch at the top — this is what puts the Sledge filter on your collection pages.
- A Filter Group shows the filter you want to decorate. Image swatches decorate an existing filter item — the source you pick below must match the Source of that filter item in your Filter Group (for example a “Brand” item with source Vendor). If they don’t match, the filter keeps showing plain text.
Open Image Swatch
Go to Sledge → Tools → Product Filter, and under Features click Image Swatch.
The Image Swatch page
Image source
The select at the top decides where your values come from. In the example it’s set to Vendor, so every brand in the store gets a row. You can also map values from product options, metafields, collections, tags, product types, and more — the same source list as Color Swatch. Remember: this source must match the source of the filter item in your Filter Group.
The mapping table — one row per value
- Label — the raw value from your source (each vendor name above), with a preview of its swatch. Sortable via the arrows in the header.
- Image — the picture customers will see. Click Upload image to pick a file (square images work best); once set, the thumbnail shows next to a Remove link.
- Action → Clear — empties the row’s image so you can start over. To delete rows entirely, select them with the checkboxes and use the Delete bulk action.
There is no Save button on this page — every change is saved as soon as you make it.
Add an image manually
Values from your source appear automatically, but you can also click Add image for a value that doesn’t exist yet. Type the Label and click Add, then upload its image from the table row. Import image next to it uploads mappings in bulk.
Result
On your collection pages, the vendor filter now renders as logo chips — customers click a logo to filter by that brand:
Not showing up? Give the change a minute to sync, then reload the collection page. Also confirm that Sledge Core and the Collections page switch are enabled as described above.
Related
Last updated on
How do I set up Color Swatches?
A color swatch turns a plain text colour value — “Sage”, “Butter Yellow” — into a colour chip customers can scan at a glance in the filter sidebar. Instead of reading a list of colour names, customers
Merchandising
Merchandising in Sledge — 16 guides covering setup and day-to-day use.