Level Up Your Dawn Theme: Crafting Premium Square Product Size Pills

Hey there, fellow store owners! As someone who spends a lot of time diving into the Shopify community forums, I often see recurring themes (pun intended!) around making your store truly stand out. One common request? Giving those product variant options, especially size or color "pills," a more refined, premium feel. It's all about the details, right?

Recently, a great discussion popped up, initiated by @paulverseckas, who was looking to make his Dawn theme “a bit more premium looking.” Specifically, he wanted his product size pills to be square, with a white border and the sizing text neatly inside, mimicking the sharp look of the “Add to cart” button. This is a fantastic goal, as visual consistency across your product page elements really elevates the user experience and brand perception for any Shopify store owner.

It didn’t take long for the community to jump in with some solid advice, offering both no-code and low-code solutions to achieve this polished look. Let's break down how you can implement this on your own Dawn theme store.

First Steps: The No-Code Tweak for a Boxed Look

Before diving into any code, it’s worth noting that you can get a good chunk of the way there using Dawn’s built-in theme settings. @vividusdesigns wisely pointed this out, and @Ecom_swift_LLC echoed the sentiment. This method gives your variant pills a “boxed” appearance, matching your Add to cart button’s border and sharp corners.

Here’s how to do it:

1. From your Shopify admin, go to Online Store > Themes.
2. Click on the Customize button for your current Dawn theme.
3. In the theme editor, click the Theme settings icon (it looks like a gear) on the left sidebar.
4. Scroll down and open the Variant pills section.
5. Set Border thickness to 1px.
6. Set Border opacity to 100%.
7. Set Corner radius to 0.
8. Click Save.

This will give your pills sharp corners and a visible border, aligning them visually with your cart button. However, for perfectly uniform squares, we need to bring in a little custom CSS.

Achieving Perfect Squares with Custom CSS

While the theme settings get you close, to ensure every size variant pill sits in an equal square, regardless of the text length inside, custom CSS is your best friend. This is where @Ploqo provided an incredibly detailed walkthrough, complete with helpful images, showing the transformation from rounded pills to crisp squares.

Take a look at the “Before” and “After” pictures from the thread; it’s quite a difference!

Before: Round Pills

After: Square Pills

Here are the combined steps to make your variant pills perfectly square:

1. Go to Online Store > Themes in your Shopify admin.
2. On your current theme, click the … (three dots) button, then select Edit code. (Alternatively, you can click Customize and access Custom CSS through Theme settings, but Edit code gives you more control if needed later.)
   
3. In the theme editor, click Theme settings (the gear icon on the left).
4. Scroll down and open Custom CSS.
5. Paste the following code into the Custom CSS box. If there&rsquos existing code, just add this underneath it:

.product-form__input.product-form__input--pill input[type="radio"] + label {
  border: 1px solid rgb(var(--color-foreground));
  border-radius: 0;
  min-width: 5rem;
  height: 5rem;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-form__input.product-form__input--pill input[type="radio"] + label::before {
  border-radius: 0;
}

6. Click Save.

A Note on Sizing and Customization

In the CSS code above, you’ll notice min-width: 5rem; and height: 5rem;. These values are what make the pills square. @Ploqo used 5rem in his example, while @vividusdesigns suggested 44px. You can absolutely play around with these values to find what looks best for your store’s aesthetic. Just change both min-width and height to the same value to maintain the square shape.

A quick tip from @Ecom_swift_LLC: “Once it’s live, check the square size in the inspector and tweak it if your theme version names the class differently.” This is excellent advice! Browser developer tools (right-click > Inspect) are your best friend for fine-tuning CSS and ensuring compatibility, especially if you’re running an older or newer version of the Dawn theme.

It’s great to see that even with these changes, the default functionality for selected sizes (filling with your text color) and sold-out sizes (keeping the strike-through) remains intact, as @vividusdesigns confirmed. This means you get the premium look without sacrificing essential usability.

So, there you have it! A simple yet effective way to give your Dawn theme’s product size pills that sharp, premium, square look that @paulverseckas was after. It just goes to show how a little bit of custom CSS, combined with smart use of theme settings and invaluable community insights, can make a big difference in refining your store’s design. Don’t be afraid to experiment with those rem or px values to find the perfect fit for your brand!