How to left align variant

Technical Q&A
, ,

Topic summary

A user working with the Minimalista paid theme needs help left-aligning a product variant label (“iPhone 17 pro”) on their product page.

Solution Provided:

  • Access the theme code editor via Online Store > Edit Code
  • Locate the theme.liquid file
  • Insert custom CSS above the closing </body> tag:
<style>
.product-form__controls {
    justify-content: start !important;
}
</style>

The responder included a screenshot showing the expected result after applying this CSS modification. The solution targets the product form controls container and changes its alignment property to left-align the variant selector.

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

Hi Community,

I am using a paid theme Minimalista. I’m wondering how to left align “iPhone 17 pro”. (please see screen shot below) website: CHECKERBOARD CASE - BLACK + CREAM – S I C O R A

Thank you!

Screenshot 2025-11-13 at 7.22.35 AM
Screenshot 2025-11-13 at 7.22.35 AM1236×1086 33 KB

1 Like
2

Hey @UserDundun

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.product-form__controls {
    justify-content: start !important;
}
</style>

RESULT:

image
image762×484 18.1 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
3

Thank you Moeed! Is this code only affect this variant picker section, or the whole theme layout? I also don’t know if it is matters. I just want to make sure it will not mess up my other pages. Thank you so much!

1 Like
4

The code I provided will only affect the variant picker section, nothing else so no need to worry about.

Cheers,
Moeed

1 Like
5

To ensure there is no side-effects and no code edits you can use “Custom CSS” setting of the “Main product” section in “Customize”.

Paste Moeed’s code there without <style> ans </style>

.product-form__controls {
    justify-content: start;
}

The code will be scoped to this section only.

You’d need to do this for every product page template if you have several.

1 Like
6

Hello, @UserDundun

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / base.css file and paste the code in the bottom of the file.

.product-form__controls {
    justify-content: flex-start !important;
}

image
image1121×469 45.9 KB

Thank You!

1 Like
7

Hello, @UserDundun

If your issue has been resolved, then you should mark one as the solution.

Thank You!