How to Make GP Product Options Swatches Match Your Dawn Theme (Custom CSS Guide)

Shopify's Dawn theme is the reference standard for Online Store 2.0. Known for its minimalist layouts, sharp borders, and high-contrast styling, Dawn provides a clean canvas for modern e-commerce. When you install GP Product Options, the app is built to integrate with standard Shopify themes automatically. However, customizing the CSS can make the app look like a native part of your theme.

To achieve a seamless look, you can write custom CSS rules specifically targeting GP Product Options elements. The app provides a dedicated Custom CSS panel within its settings, allowing you to override styling without modifying the theme's core files. Here is a guide to styling your swatches to match the Dawn theme.

---

Understanding Dawn's Design System

Dawn's visual identity relies on specific design rules:

1. Typography: Large, bold headings coupled with clean, lightweight body fonts (typically Assistant or system sans-serif).
2. Borders: Thin, high-contrast borders (usually 1px solid black or dark gray) for active fields, and light gray for inactive fields.
3. Focus States: High-visibility outline focus rings for keyboard navigation.
4. Spacing: Generous padding and sharp grids to create structured layouts.

To make GP Product Options swatches blend in, you want to replace default pill styling and shadow effects with Dawn's flat, structured style.

---

Core CSS Selectors in GP Product Options

To write effective overrides, you must target the correct CSS classes. The app uses stable class prefixes to prevent theme conflicts.

Selector Group	CSS Class Name	Purpose
Swatch Container	.gp-swatch-container	Wraps the entire swatch list grid
Individual Swatch	.gp-swatch-item	Targets each color/image option box
Active Swatch	.gp-swatch-item.gp-active	Targets the currently selected option
Swatch Hover State	.gp-swatch-item:hover	Controls styling when a cursor hovers
Option Label	.gp-option-label	Targets the title text of the options section

---

Custom CSS Snippets for Dawn Theme Integration

Copy and paste these snippets into the Custom CSS area in your GP Product Options dashboard to align your swatches with Dawn's style.

1. Matching Dawn's Active Border Style

Dawn uses a 2px solid black border for active states, often offset by a white inner ring.

/* Style the standard swatch item to match Dawn's flat look */
.gp-swatch-item {
  border: 1px solid rgba(var(--color-foreground), 0.08);
  box-shadow: none !important;
  transition: border 0.1s ease-in-out;
}

/* Set hover border behavior */
.gp-swatch-item:hover {
  border: 1px solid rgba(var(--color-foreground), 0.7) !important;
}

/* Active swatch state showing Dawn's dark selection ring */
.gp-swatch-item.gp-active {
  border: 2px solid rgba(var(--color-foreground), 1.0) !important;
  outline: 1px solid transparent;
  outline-offset: 1px;
}

2. Matching Typography and Font Weights

Ensure the option titles match Dawn's precise heading styles.

/* Format the product option titles */
.gp-option-label {
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: rgb(var(--color-foreground));
  margin-bottom: 0.8rem;
}

3. Creating Flat Button Swatches

If you are using button-style text options, you can make them match Dawn's outline button design.

/* Style flat text buttons */
.gp-button-item {
  border: 1px solid rgba(var(--color-foreground), 0.1);
  background-color: transparent;
  border-radius: 0px !important; /* Dawn uses sharp corners */
  padding: 1rem 2rem;
  font-size: 1.3rem;
  color: rgb(var(--color-foreground));
}

/* Active text button state */
.gp-button-item.gp-active {
  border: 2px solid rgba(var(--color-foreground), 1.0) !important;
  background-color: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}

---

How to Apply Custom CSS Safely

GP Product Options allows you to apply CSS globally or to individual option sets. Applying styles through the app is safer than modifying your theme's base.css file because the styles remain intact when you update your theme.

1. Navigate to the GP Product Options app dashboard.
2. Click Settings in the bottom left-hand corner for global styles, or edit a specific Option Set.
3. Locate the Custom CSS input area.
4. Paste the styling snippets into the code editor.
5. Click Save Changes.
6. Open your storefront in an incognito window to verify the styles. If changes do not appear immediately, clear your browser cache to load the updated stylesheets.