How to increase the size of the variant box on Studio theme?

Store Design

Topic summary

Main issue: On the Shopify Studio theme, the product variant dropdown (“variant box”) is too narrow, causing long model names to be truncated and partially obscured by the dropdown arrow. An attached screenshot is central to understanding the visual problem.

Key steps and solution:

  • A preview link to the store (maquimport.cl) was shared upon request.
  • A working fix was provided by adding CSS to base.css:
    .product .product-form__input .select { max-width: 30rem; }
  • This increases the dropdown’s width, allowing full variant names to display. The original poster confirmed the issue was resolved.

Current status:

  • The width problem is resolved.
  • A new question asks how to change the height of the dropdown variant box. No guidance was provided yet, so this follow-up remains open.
Summarized with AI on December 12. AI used: gpt-5.
1

Hi, Shopify world

I need help to edit the code of the variant box width, I need help finding the code or how to increase the size of the variant box.

My variant models’ names are getting cut, and I need them to be completely visible.

Here is an image of the issue (here the name is cut and the arrow is blocking the model name)

Captura de pantalla 2024-04-01 a las 2.13.10.png
Captura de pantalla 2024-04-01 a las 2.13.10.png2870×1032 266 KB

Thank you in advance!

2

Can you Share Site Preview Link

3

Hi Raj,

www.maquimport.cl
aoglea

4

Add This css in your edit code > base.css File

.product .product-form__input .select {
    max-width: 30rem;
}
5

Thank you Raj!
Resolved, have a great Tuesday!

6

can you help we changing the height of the dropdown variant box