- Debut Retired theme
- Made by Shopify
- Free (retired)
- Native swatches: no
- Removed from the Theme Store in November 2022
Color swatch guide
How to add color swatches to the Debut theme.
Debut was Shopify's default free theme before Dawn, and stores that installed it can keep running it. Shopify removed it from the Theme Store in November 2022, according to a Shopify Community reply from December 11, 2022, and Shopify's help says its free vintage themes now get security fixes only. Debut's product page can't read Shopify's native swatch data, so swatches come from an app or a code edit.
Which route fits Debut?
Route 1
Shopify's native swatches.
Route 2
A swatch app.
Debut draws no swatches from Shopify's data, so an app does the whole job, and Shopify says app embeds work with any theme version. GLO Color Swatch Variant Image and Color Swatch Pug cover product and collection pages, OP Color Swatch Variant Images replaces the product-page picker, and Swatchy (Color Swatches) turns option menus into swatches.
-
Duplicate Debut first
In Online Store > Themes, open the menu beside Debut and choose Duplicate. Set up the app on the copy, preview it, and publish the copy only when the swatches look right. Your live store keeps working while you test.
-
Install the app and start its trial or free plan
Install the app from the Shopify App Store and approve the access it asks for. Every app suggested on this page had a free plan, a free listing or a free trial of 7 to 30 days when we checked on October 23, 2026, so you can test before you pay.
-
Switch on the app embed
Open the theme editor on your copy (Online Store > Themes, then Customize or Edit theme), click the App embeds icon in the left sidebar, switch on the app's embed and click Save. Shopify says app embeds work with any theme version, so this works on a vintage theme like Debut too.
-
Match each color name to a swatch
In the app's own settings, give each color name a hex value or a small image. Apps read your option values as text, so Navy on one product and Navy Blue on another need two swatches. Tidy the names first and you only set each color once.
-
Preview a product page and a collection page
Use the theme editor preview, then a phone, to check both page types in Debut. If the app adds collection-page swatches, click one on a product card and confirm the card's photo or link changes to that color.
Apps that fit Debut
| App | From | Rating | What it does |
|---|---|---|---|
| GLO Color Swatch Variant Image | $9.90/month | 4.9 (1,906 reviews) | A dedicated swatch app whose free plan already covers collection-page swatches and hiding sold-out options; image swatches start on the $9.90 Silver plan. |
| Color Swatch Pug | $6.99/month | 4.6 (55 reviews) | One $6.99 monthly plan with a 14-day trial for color and pattern swatches on collection and product pages; it isn't Built for Shopify, and its listing still links to this site, which is independent of the publisher. |
| OP Color Swatch Variant Images | $11.90/month | 5.0 (802 reviews) | Replaces your theme's text picker with color and image swatches plus stock badges; pricing follows your Shopify plan, from $11.90 a month. |
| Swatchy ‑ Color Swatches | $8.99/month | 4.6 (25 reviews) | A newer Built for Shopify app that turns option menus into color, image and size swatches; the free plan covers one product, so it's mainly a way to test. |
Prices and ratings change often; check the listing before you install. This site is not affiliated with any of these publishers.
Alternatives: Rubik Variant Images & Swatch and FB Variant Image, Color Swatch pair swatches with variant photo galleries. None of these listings names vintage themes (checked October 23, 2026), so test during the trial on a duplicate.
Route 3
Editing the theme code.
A developer can add swatches to Debut by changing how the product form prints the Color option. When your products are linked to the Color category metafield, each option value carries a swatch color or image that Liquid can read. Without that link, the usual approach maps each color name to a hex value or to a small image uploaded to Content > Files. Either way, the swatches sit on top of the theme's original option menu, and a short script keeps that menu in step so price, photo and stock still change.
| File | What it is for |
|---|---|
| templates/product.liquid | The product page template. In most vintage themes it loads a product section instead of holding the form itself; older themes keep the form here. |
| sections/product-template.liquid | Where many Shopify vintage themes print the product form and its option menus. Names vary by theme, so search the code for the file that loops over the product's options. |
| snippets/product-card-grid.liquid | The file Debut's collection grid uses for each product; the 2018 setup guide on this domain added its collection-page hook here. Add collection-page swatches in this file. |
| assets/ (the theme's main script, usually theme.js or theme.js.liquid) | The script that reacts when a shopper picks a variant. Swatch clicks have to update the original option menu so price, photo and stock follow. |
| assets/ (the main stylesheet, usually a .scss.liquid file) | Swatch size, shape and the selected state. |
| layout/theme.liquid | Only for clean-up: older manual app installs, including the 2018-era Color Swatch Pug setup, added script tags just before the closing body tag. |
Collection pages.
Debut has no product card swatch setting. An app that adds collection-page swatches is the simplest route; a developer can also add swatches to the product-card-grid snippet.
-
Use an app with collection-page swatches
GLO Color Swatch Variant Image (its free plan lists collection-page variants) and Color Swatch Pug (separate switches for collection and product pages) both add swatches under product cards through an app embed. Test on a duplicate of Debut.
-
Or add swatches to the grid snippet
A developer can print each product's colors in the product-card-grid snippet and link each swatch to that variant's URL or photo. Keep the swatches small, because a collection page repeats them for every product.
-
Test filters before relying on them
Search & Discovery's filter swatches only show in themes that support Shopify's filter value API. Add a Color filter and preview it on Debut; if the values show as plain text, the theme isn't drawing filter swatches.
Debut at a glance.
The theme's facts from the Shopify Theme Store and Shopify's own pages, checked October 23, 2026. Anything we could not confirm says so.
| Theme | Debut |
|---|---|
| Vendor | Shopify |
| Price | Free (retired) Was free in the Shopify Theme Store; no longer offered to new installs. |
| Free or paid | Free |
| Where it is sold | No longer in the Shopify Theme Store |
| Status | Retired theme Removed from the Theme Store in November 2022. |
| Online Store 2.0 | No, a vintage theme |
| Theme family | A vintage Shopify theme |
| Native color swatches | No |
| Swatch documentation | Shopify Help Center |
| Last checked | October 23, 2026 |
Swatch problems on Debut, and fixes.
-
Swatches not showing
Debut doesn't read Shopify's native swatch data, so swatches appear only through an app or a code edit. With an app, check that its embed is switched on in App embeds for the theme you're previewing, then clear your browser cache. If swatches show but sit out of line with the other options, Debut's product form layout is a known cause; the 2018 guide for Debut fixed it with one CSS rule on the product form.
-
Wrong colors
An app or custom code matches swatches to your option values by name. Check the color set for that exact name in the app, and look for stray spaces or a different spelling on the product, such as Off-white on one product and Off White on another.
-
Pattern or image swatches
Upload a small square image of the pattern in the app's settings, or in Content > Files if a developer wrote the swatch code. Name each file the way the code expects, usually after the color value.
-
Out-of-stock variants
How a sold-out color looks is decided by the variant picker in Debut, so test it: set one color to zero stock and open the product. If you'd rather hide sold-out colors completely, Color Swatch Pug and GLO Color Swatch Variant Image both list that option (checked October 23, 2026).
-
Speed
Every swatch app adds its own script, and some draw swatches only after the page has loaded, so they pop in late. Use one swatch app, not two, keep swatch images small, and turn the app's embed off on page types where you don't need it. The swatch loading speed guide covers measuring the change. If Color Swatch Pug was installed by hand years ago, look in theme.liquid for a leftover script tag that loads csp.js; the clean-up steps are in the Color Swatch Pug setup guide.
Debut swatch questions.
Can Debut use Shopify's native swatches?
Not on its own. Debut is a vintage theme, and Shopify's help says vintage themes need code edits, or a Shopify Partner, to show category-metafield swatches. You can still set up the Color metafields now; the data stays useful if you later add code or move to a current theme.
Is Debut still supported?
It's no longer in the Theme Store. A Shopify Community reply from December 11, 2022 says Debut and eight other themes were removed in November 2022. Shopify's help says its free vintage themes get security fixes only, and stores that already run Debut can keep it.
Which swatch app works with Debut?
None of the swatch apps we checked names supported themes on its listing (October 23, 2026). Apps that use an app embed can run on Debut, because Shopify says app embeds work with any theme version. Test on a duplicate during the free trial: GLO Color Swatch Variant Image has a free plan with collection-page swatches, and Color Swatch Pug has a 14-day trial.
Should I move from Debut to Dawn or Horizon?
If swatches matter to you, a current theme is the cleaner fix: Dawn and Horizon are free, get feature updates and show native swatches with no code. Moving themes means rebuilding your homepage sections and settings, so plan it like a small project and keep Debut in your theme library as a fallback.
Where did the old Color Swatch Pug guide for Debut go?
This page replaces it. The old guide, published on this domain on March 19, 2018, had you edit the Debut theme files by hand for an earlier version of the app. Today the app uses a theme app embed instead; the independent setup guide is at /csp-app-setup-guide/.
Related guides and tools.
Themes like Debut
Moving off Debut
Current free themes that read Shopify's swatch data on their own:
- Color swatches on every theme
- Debut theme profile
- Color swatch generator, for swatch images and hex values
- Image size checker, with Debut's sizes
About this page
This page replaces "CSP App setup for Debut Theme", a guide published March 19, 2018 on this domain for an earlier version of the Color Swatch Pug app. The domain changed hands in September 2026, and the old guide's manual code steps no longer apply to the app.
Sources
- Shopify Help Center: theme architecture versions and sources
- Shopify Community: thread on finding the Debut theme (reply of December 11, 2022)
- Shopify Help Center: adding color swatches using category metafields
- Shopify Theme Store: former Debut page (no longer listed)
- Wayback Machine: Debut Theme Store listing as captured October 9, 2022
- Shopify Help Center: apps in your theme (app embeds and app blocks)
- shopify.dev: the Liquid product_option_value object
- shopify.dev: the Liquid swatch object
- Shopify Help Center: Search & Discovery filters
Make the swatch files.
Turn your colors into hex values, swatch images and a printable sheet, ready for Shopify.