Custom Color Options Drawer Selector

Let customers choose from a large catalog of powder-coat colors and finishes on the product page. They needed to preview each option properly, and any color upcharge had to flow into the order automatically. The experience also had to be easy to manage without a developer.

• The catalog has dozens of colors and finishes. A standard variant dropdown or swatch row can't show them well, and variants would multiply with every new color.

• Customers couldn't see a color's detail images, videos or description before choosing, which risks wrong picks and support questions.

• Some colors carry a surcharge, and a standard variant picker couldn't add that charge as its own line item.

• The product options app (Bold) conflicted with the custom flow on this template.

I built a custom "Color Drawer" product block. A single call-to-action button on the product page opens a full-height drawer holding the entire color library. Customers browse a tile grid, tap a color to open a detail view with an image gallery, video and description, and confirm with one "Select color" button. The drawer closes and the page shows the chosen color. The colors live in a Shopify collection ("Elite Color Guide"), so the team adds or edits a color by editing a product, with no code changes.

• Collection-driven catalog. Each color is a product in a collection, with its swatch, gallery, video and description. Optional collection metafields group colors into categories with their own titles and images.

• Two-level browsing. A tile grid leads to a detail view with a zoomable image, a scrollable thumbnail strip (arrows, drag and scrollbar), inline video playback, and a collapsible "Read more" description.

• Fast on large catalogs. Swatches are lazy-loaded, detail images are preloaded only when a color is opened (with 2x versions for high-DPI screens), and the grid shows 36 colors at a time behind a "Load more" button.

• Automatic color surcharges. If a color has a price, the tile and select button show "+ $X". When the customer adds to cart, the matching variant is added as its own line item.

• Required-selection validation. Add to cart is blocked until required colors are chosen. The page scrolls to the missing field and shows a message.

• Resilient to variant changes. When a customer switches variants and the product form re-renders, their color choice and swatch are kept. Blocks that aren't relevant to the current variant are hidden, and their line item properties aren't submitted.

• Polished drawer behavior. Background scrolling is locked without the page shifting. The drawer has accessible dialog markup and a back button. It also works with several drawers on one page.

• Merchant-controlled design. Button, hover, selected and pulse colors, the drawer title and the display rules are all theme editor settings. The block can show always, never, or only when a chosen variant option matches.

• Conflict handling. The Bold options widget is removed on this template, so only one option flow runs.

The Color Drawer gave Elite Metalworking a way to present its full Elite Color Guide, 59 powder-coat colors and finishes, on the product page. Before this, customers had no way to see the options in context. They now browse the colors in a tile grid and open any color to see its photos, video and description. They confirm with one button, and the choice is saved with the order. Required color selections are validated before checkout, and color upcharges are added to the cart automatically as their own line item. The team adds or updates a color by editing a product in the Elite Color Guide collection. No developer is needed, and the store doesn't need a new variant for every color.