How can I center text and limit variations on Dawn Theme radio buttons?

Store Design
, ,

Topic summary

A user seeks help customizing radio buttons on the Dawn theme for their Shopify store, with two specific goals:

Centering button text:

  • Wants to center the text ‘matte’ and ‘clear’ on variant buttons
  • Has searched previous posts but hasn’t found working code

Limiting variants per row:

  • Needs to display exactly 7 variations per row (first row ends at ‘rose’)

A community member provided CSS solutions:

  • Use text-align: center; on the button selector to center text
  • Implement flexbox layout with display: flex; and flex-wrap: wrap; on the variant container
  • Set variant item width to calc(100% / 7) to achieve 7 items per row

The response includes code snippets but requires the user to identify and replace placeholder selectors with their actual CSS classes. The discussion remains technical and implementation-focused, with the original poster yet to confirm if the solutions work.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Screenshot 2023-05-15 154726.png
Screenshot 2023-05-15 154726.png1696×692 90.9 KB

hi! i was wondering if anyone knew how to do these two things

  • center ‘matte’ and ‘clear’ text on the buttons

  • limit 7 variations per row (first row ends at rose)

i’ve looked at previous posts, but can’t find a code that works.

thank you so much!

www.planandstick.co

2

Center ‘matte’ and ‘clear’ text on the buttons: Find the CSS selector for the buttons that contain the ‘matte’ and ‘clear’ text. It could be a class or an ID assigned to those buttons. Once you have the selector, apply the following CSS properties to center the text:

.your-button-selector {
  text-align: center;
}

  1. Replace .your-button-selector with the actual selector for your buttons.

  2. Limit 7 variations per row: To limit the variations to 7 per row, you can use CSS flexbox or grid layout. Here’s an example using flexbox:

.product-variants-container {
  display: flex;
  flex-wrap: wrap;
}

.product-variant-item {
  width: calc(100% / 7); /* Adjust the number to change the number of variations per row */
}