How can I change the width of the variant selector in Spark theme?

Store Design

Topic summary

Goal: adjust the product variant selector width in the Spark theme.

Requested changes:

  • Reduce the variant selector’s width to match the quantity field.
  • Optionally place variant selector and quantity side by side on desktop.

Current status:

  • Attempts to modify via themes.css (the theme’s stylesheet) did not work.
  • An image of the current layout was provided and is central to understanding the sizing/placement issue.

Next steps:

  • A helper asked for the store URL to investigate; the store preview URL and password (“Charlemagne7”) were shared for review.

Key terms:

  • Variant selector: the dropdown or control for choosing product options (e.g., size/color).
  • themes.css: the stylesheet where theme-level CSS changes are applied.

Outcome:

  • No solution or code fix posted yet. The discussion is open pending site inspection and proposed CSS/layout adjustments, potentially targeting desktop-only styling for side-by-side alignment.
Summarized with AI on February 3. AI used: gpt-5.
1

As the title says, struggling to change the width of the variant selector. Tried a couple codes I found and added them to themes.css but nothing works.

This is how it looks currently:

alexlomt_0-1670874679191.png
alexlomt_0-1670874679191.png612Ă—255 3.5 KB

I would like to:

  1. Reduce the size of the variant to be the same as the quantity

  2. Potentially have them side by side, depending how that looks (on desktop only)

1 Like
2

@alexlomt

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

https://453f42.myshopify.com/

Password is Charlemagne7