Shopify Dawn Theme: Custom Square Product Size Pills Guide

Hey there, fellow store owners! As someone who spends a lot of time digging through the Shopify community forums, I often see common questions pop up that really highlight the little details that can make a big difference in your store's look and feel. One such discussion recently caught my eye, and it's all about how to take your popular Dawn theme to the next level by tweaking those product size selection "pills."

We all know the Dawn theme is fantastic for its flexibility and modern aesthetic right out of the box. But sometimes, those default rounded variant options just don't quite match the crisp, premium vibe you're going for. That's exactly what paulverseckas was grappling with in a recent thread titled "Dawn theme, product size pills." He was looking for a solution to make his Dawn theme "a bit more premium looking," specifically wanting his product size pills to be square, with a white border, and the sizing text neatly inside, much like his "Add to cart button." He even shared an image to illustrate his vision:

It's a fantastic goal, and thankfully, the community quickly jumped in with some really helpful, actionable advice. Let's break down how you can achieve this polished look for your own store.

First Step: Quick Visual Tweaks in Theme Settings

One of the best things about the Dawn theme is how much you can customize without touching a single line of code. As vividusdesigns pointed out in the thread, you can get "most of the way there" by just adjusting some settings directly in the theme editor. This is always my recommended starting point for any visual tweak.

Here's how to do it:

Go to your Shopify admin and navigate to Online Store > Themes.
On your current Dawn theme, click Customize. This will open the theme editor.
In the theme editor, look for the Theme settings icon (it's usually a gear icon on the left sidebar).
Scroll down until you find the Variant pills section.
Adjust these settings:
- Set Border thickness to 1px.
- Set Border opacity to 100%.
- Set Corner radius to 0.
Click Save in the top right corner.

This simple change should give your variant pills that desired boxed look, making them align much better with the styling of your "Add to cart" button. You'll notice the selected size still fills with your theme's text color, and sold-out sizes will retain their helpful strikethrough, which is great for user experience.

Diving Deeper: Achieving Perfect Squares with Custom CSS

While the theme settings get you most of the way, what if you want every size pill to be a perfectly uniform square, regardless of the text length inside? This is where a little custom CSS comes into play. Both Ploqo and vividusdesigns offered up some excellent CSS snippets to achieve this. Ploqo even provided some fantastic before-and-after visuals and a detailed walkthrough, which is incredibly helpful!

Here's a look at what that transformation can look like:

Before:

After:

Implementing the Custom CSS:

Go to your Shopify admin and navigate to Online Store > Themes.
Click Edit theme on your current theme. (This opens the theme editor, as shown in Ploqo's example:
)
Click the Theme settings icon (the gear icon on the left sidebar).
Scroll down and open the Custom CSS section.
Click at the end of the box, press Enter, and paste this code under anything already there:

.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;
}

Click Save.

Ploqo tested this on a Dawn 16.0.0 store, so it's a solid starting point. Notice the min-width: 5rem; and height: 5rem;? This is what makes your pills perfectly square. You can adjust the 5rem value to make the squares bigger or smaller to perfectly fit your design aesthetic. Vividusdesigns suggested 44px, which is another great option if you prefer pixel-based sizing.

A quick tip from Ecom_swift_LLC: after it's live, "check the square size in the inspector and tweak it if your theme version names the class differently." This is sound advice! Sometimes theme updates or slight variations can mean the class names change, but the general structure of the CSS provided should hold up well. Remember, if you're ever making more extensive code changes, it's always a good practice to duplicate your theme first!

Why These Small Details Matter

It's easy to overlook these seemingly minor design elements, but consistent styling across your product page — from your "Add to cart" button to your variant selectors — really contributes to a professional, trustworthy, and premium brand image. When everything feels cohesive, it creates a smoother, more enjoyable shopping experience for your customers.

So, if you're running a Shopify store on the Dawn theme and want to give it that extra touch of polish, these simple tweaks can make a world of difference. It's always inspiring to see the community come together to share these kinds of practical solutions, empowering store owners like you to create truly unique and engaging online shops. Happy customizing!

Elevate Your Shopify Dawn Theme: Mastering Square Product Size Pills for a Premium Look