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

Shopify theme editor custom CSS section for variant pill styling

Elevate Your Shopify Store: From Rounded Pills to Premium Squares on the Dawn Theme

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."

Why These Small Details Make a Big Difference

In the competitive world of e-commerce, every element on your product page contributes to the overall customer experience and brand perception. Default theme elements, while functional, might not always align with your unique brand identity. Customizing subtle details like variant selectors can:

Enhance Brand Consistency: Align the look of your size options with your brand's aesthetic and other UI elements like buttons.
Improve User Experience: Clear, well-defined selection options can make the shopping process smoother and more intuitive.
Convey Premium Quality: A polished, custom look often signals attention to detail and a higher quality product or brand.

The Dawn Theme: A Canvas for Customization

Shopify's Dawn theme is celebrated for its clean design and performance, making it a popular choice for many merchants. Its modern architecture also makes it highly customizable, allowing you to inject your brand's personality without a complete overhaul. The good news is, achieving that premium square look for your product size pills is quite straightforward, combining a few theme settings with a touch of custom CSS.

Transforming Your Product Size Pills: Step-by-Step Guide

Let's dive into the practical steps to transform those rounded variant pills into sleek, square buttons, just like your "Add to cart" button.

Step 1: Initial Adjustments in Theme Settings (No Code Required)

The first part of the transformation can be done directly through your theme's customization options, requiring no code. This will get you most of the way there by removing the rounded corners and setting the border.

From your Shopify admin, go to Online Store > Themes.
On your current theme (likely Dawn), click the Customize button.
In the theme editor, click the Theme settings icon (the gear icon) in the bottom-left sidebar.
Scroll down and find the Variant pills section.
Adjust the following settings:
- Set Border thickness to 1px.
- Set Border opacity to 100%.
- Set Corner radius to 0.
Click Save in the top right corner.

This step will give your variant pills a boxed look, similar to your Add to cart button, but they might not be perfectly square or uniformly sized yet. For that, we turn to custom CSS.

Step 2: Achieving Perfect Squares with Custom CSS

To ensure every size variant sits in an equal, perfectly square box, we'll add a small snippet of CSS. This code will override some default styling and give you precise control over the dimensions.

While still in the theme editor (from Step 1), click the Theme settings icon (the gear icon) again.
Scroll down and open the Custom CSS section. This is a safe place to add custom styles without directly editing your theme's core files.
Click at the end of the existing code in the box, press Enter, and paste the following CSS code:

.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 in the top right corner.

Let's break down what this CSS does:

.product-form__input.product-form__input--pill input[type="radio"] + label: This complex selector targets the actual labels that display your variant options (like "S", "M", "L").
border: 1px solid rgb(var(--color-foreground));: Ensures a 1px solid border using your theme's primary foreground color, maintaining consistency.
border-radius: 0;: Removes any residual rounding, making the corners sharp and square.
min-width: 5rem; height: 5rem;: These are crucial for creating the square shape. 5rem sets both the minimum width and height to the same value, making the pills square. You can change 5rem to a different value (e.g., 44px or 3rem) to make the squares bigger or smaller.
padding: 0 1rem;: Adjusts the internal spacing around the text.
display: inline-flex; align-items: center; justify-content: center;: These properties ensure that your size text (e.g., "S", "M") is perfectly centered within each square pill, both horizontally and vertically.
.product-form__input.product-form__input--pill input[type="radio"] + label::before { border-radius: 0; }: This additional rule ensures that any pseudo-elements used by the theme (often for things like selected states) also have square corners.

Important Considerations and Best Practices

Always Duplicate Your Theme: Before making any code changes, even in the Custom CSS section, it's a good practice to duplicate your theme. This creates a backup you can revert to if anything goes wrong.
Test on Different Devices: After implementing the changes, check your product pages on various devices (desktop, tablet, mobile) and browsers to ensure the square pills look consistent and function correctly.
Accessibility: Ensure that the contrast between the text and background, and the border, remains clear for all users.
Future Theme Updates: While Custom CSS is generally safe, major theme updates could sometimes introduce changes that might affect your custom styles. Keep an eye on your store after updates.

When to Seek Expert Help

While this customization is relatively straightforward, not all design tweaks are. If you find yourself needing more complex design adjustments, custom feature development, or are planning a significant migration from another e-commerce platform to Shopify, don't hesitate to reach out to experts. At Shopping Cart Mover, we specialize in seamless migrations and advanced Shopify development, ensuring your store not only looks premium but also performs flawlessly.

Conclusion

Transforming your Shopify Dawn theme's product size pills from rounded to square is a simple yet impactful way to elevate your store's aesthetic. By combining the theme's built-in settings with a small amount of custom CSS, you can achieve a more refined, premium look that aligns perfectly with your brand. Take these steps to personalize your product pages and provide a more polished shopping experience for your customers. Ready to take your e-commerce presence to the next level? You can start building your dream store on Shopify today and explore endless customization possibilities!

Mastering the Dawn Theme: Transform Shopify Product Size Pills into a Premium Square Design