Aligning variant picker dropdown boxes to the right

Store Design
, , ,

Topic summary

A user seeks to align variant picker dropdown boxes to the right side of their product page in the Dawn theme. They’ve already managed to move the dropdown labels but need help repositioning the actual dropdown elements.

Solution Provided:
Another user offers a CSS solution targeting the variant-selects element:

  • Uses flexbox properties (display: flex, flex-wrap: wrap, justify-content: flex-end)
  • Should be added via Admin dashboard → Online Store → Themes → Customize → Settings → Custom CSS box
  • If the code doesn’t work initially, add !important before each semicolon

Outcome:
The CSS solution successfully resolved the alignment issue. The discussion is marked as resolved.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m looking to move the variant picker drop down boxes to the right hand side of the product page. So far I’ve worked out how to move the headers to the boxes to the right of the box, but that’s it. Can anyone suggest a solution. I’m using the Dawn theme, I’m no expert with the coding side of the process but I can work by way around (usually lol).

Thanks in advance for any help.

Screenshot 2025-03-16 171825.png
Screenshot 2025-03-16 171825.png3661×1565 291 KB

2

Hello, please provide the link to your store so we can inspect it and propose some solutions.

3

sure thing, its www.rhiannonstalons.co.uk

4

Ok, try this and tell me if it’s the desired look:

variant-selects {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
5

Where should I enter the code?

6

Sorry for omitting that.

  1. In your Admin dashboard go to Online Store → Themes
  2. Click on the Customize button for your theme
  3. Go to Settings ; on the left panel there’s a gear icon
  4. Paste in the Custom CSS box

If it doesn’t work add !important before each line that ends with ‘;’

7

Sorry for omitting that:

  1. On your Admin dashboard go to Online Store → Themes
  2. Click the Customize button for your theme
  3. Go to Settings ; there’s a gear icon on the left panel
  4. Paste the code in the Custom CSS box

If it doesn’t work add !important right before the semi-colon ‘;’ of each line that has it. Hope this is clear enough.

8

That worked great, thanks.

1 Like