Make color swatches load fast on collection pages.

A collection page multiplies everything. A grid of 24 products with six colors each is 144 swatches. With flat hex colors that costs almost nothing; with image swatches it can mean 144 extra image files, and if each one is a full-size upload squeezed down by the browser, the page downloads far more than it shows.

Apps add a second cost: their script. Some draw swatches only after the rest of the page has loaded, which is why swatches can pop in late and push the layout around. Running two swatch apps doubles that.

A native swatch with a hex value is drawn by the theme as a colored shape, with no image to download. Save images for colors a hex value can't show: stripes, prints, wood grain, metallic finishes. Multicolor has no preset hex value in Shopify, so it always needs an image.

Swatches usually show well under 50 pixels across. Even at three times that for sharp phone screens, a square image of about 150 x 150 px covers it, and the swatch sizes theme vendors gave for their older methods agree: about 40 x 40 px for Showcase, 50 x 50 px for Icon and Flex, and 100 x 100 px for District and the Maestrooo themes such as Prestige.

• Crop to the pattern itself, not a product photo.
• Use JPG for photos of fabric or wood; PNG makes sense for flat graphics but is usually larger.
• Shopify can serve a smaller format for you: its image_url filter picks a format such as WebP or AVIF when the browser supports it, and can turn PNG into JPG.

Shopify accepts images up to 5000 x 5000 px. That limit is for product photos; a swatch never needs it.

Images you upload to Shopify are served from Shopify's CDN, and a theme can ask for any width it needs through the image_url filter. Shopify never enlarges an image beyond its original size and caps requests at 5760 px.

A well-built theme asks for a small width for swatches, so even a large upload arrives small. Trouble starts when an app or custom code points at the original file instead. To check, open a collection page, right-click a swatch and open the image in a new tab: if the address has no width value and the image is huge, that code is sending the full upload.

Browsers can wait to download an image until it's about to scroll into view. Shopify's image_tag filter turns this on automatically for images in sections further down the page, unless the theme marks an image to preload.

That suits swatch images in a long grid: rows below the fold load as the shopper scrolls. Images near the top of the page shouldn't be lazy loaded, because they're the first thing a shopper sees. If an app draws its own swatch images, check whether it lazy loads them.

Most swatch apps run through an app embed, and an embed adds its script to every page type where it's switched on.

• Turn the embed off on page types where you don't need swatches. Some apps, such as Color Swatch Pug, have separate switches for collection and product pages.
• Use one swatch app, not two.
• Remove leftover code from old manual installs. Stores that set up Color Swatch Pug by hand between 2018 and 2020 may still have a script tag for it in theme.liquid; the Color Swatch Pug setup guide lists what to look for.
• Where your theme supports native swatches, they need no app script at all.

Real visitors: Shopify's web performance reports, under Analytics > Reports, with a summary on the Online Store > Themes page, use data from real visitors over the past 30 days. They cover Largest Contentful Paint (loading), Interaction to Next Paint (responsiveness) and Cumulative Layout Shift (how much the page jumps). Swatches that pop in late usually show up as layout shift.

One page at a time: run a large collection page through PageSpeed Insights or Lighthouse a few times and note the middle result. Change one thing, such as switching an app embed off or replacing swatch images with hex colors, and run it again.

Count the files: in your browser's developer tools, open the Network panel, filter by images and reload the collection page. You'll see how many swatch files load and how big each one is.

• Hex colors for solid colors, images only for patterns.
• Swatch images square, cropped to the pattern, about 150 x 150 px or smaller.
• Swatch images requested at a small width, not as the original file.
• One swatch app at most, switched on only where you need it.
• No leftover code from apps you've removed.
• Measured before and after, on a real collection page.

This page replaces Collection Swatch Pug: speed up the loading of swatch icons on collection page, an article published on this domain on December 26, 2017, under its previous owner. The domain changed hands in September 2026. We wrote this version from scratch on October 23, 2026; it covers any swatch setup, not one app.