Changing Variant Picker Style - Prestige Theme

Store Design
, , , , ,

Topic summary

A user wants to modify the variant picker styling on their product page in the Prestige theme to match the appearance of the Showcase theme. Currently, the variants display with bordered boxes, but the desired style shows text with an underline indicator for the selected option.

Solution Provided:
Multiple community members offered CSS-based solutions. The accepted solution involves:

  • Navigating to the theme’s CSS file (base.css, style.css, or theme.css)
  • Adding CSS code to remove borders from variant labels
  • Applying an underline style to selected variants using border-bottom or text-decoration

Status: Resolved. The user confirmed the solution works perfectly. Alternative approaches were also suggested, including adding CSS through the theme’s Custom CSS section or directly in the theme.liquid file.

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

Hi @Streccent

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
label.block-swatch {
    border: none;
}

:checked+.block-swatch  span, .block-swatch.is-selected span {
   border-bottom: 2px solid black;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like