Variant size

Store Design
,

Topic summary

Goal: reduce the size of product variant boxes (swatches) and further adjust text, Add to Cart button thickness, and quantity selector size via theme CSS.

Implementation steps: Online Store > Themes > Actions > Edit code > Theme.css, then append the provided CSS.

Initial change: set label.block-swatch dimensions smaller (height and width) using CSS with !important to override defaults. A screenshot demonstrates the reduced swatch size.

Follow-up change: within a desktop-only media query (@media screen and min-width: 700px), adjust:

  • label.block-swatch: height, width, and font-size to make the swatches and their text smaller.
  • button.button.button–xl.button–secondary: button height to make Add to Cart thinner.
  • .button–xl: padding to refine vertical spacing.
  • quantity-selector.quantity-selector: height and width to shrink the quantity box.

Key terms: CSS selectors (label.block-swatch controls variant swatch styling; quantity-selector targets the quantity input; .button–xl affects button sizing). Code snippets and screenshots are central to understanding the changes.

Outcome: a working CSS-based customization was provided; no further issues reported. The thread appears resolved.

Summarized with AI on December 16. AI used: gpt-5.
2

Hello @Cameronrikko
Go to online store ----> themes ----> actions ----> edit code ---->Theme.css
add this code at the end of the file and save.

label.block-swatch {
height: 30px !important;
width: 15% !important;
}

result

13.png
13.png758×318 4.13 KB

If this was helpful, hit the like button and accept the solution.
Thanks