A user wants to reduce the width of the variant selector in the Horizon theme, as it currently takes up too much space on the product page. An image shows the selector extending wider than desired.
Solution Provided:
--variant-ch CSS variable set to 8chImplementation Steps:
Screenshots demonstrate both where to add the code and the expected visual result after applying the customization. The discussion appears resolved with a working CSS solution.
I’m using the horizon theme in that i want to customize the variant selector, it is taking more width, so I want to reduce the width of the quantity selector as marked in the attached image.
website: https://2e8c8p9ij9b0aj44-25088491610.shopifypreview.com
I understand you’d like to adjust the width of the quantity selector in the Horizon theme so it aligns better visually with your product form. This can be done by adding a small snippet of CSS.
Please add this code to Custom CSS in Theme settings.
[data-option-id="template-20217812058326__product-information-8574564860118-size"] {
--variant-ch: 8ch !important;
}
Go to Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.
[data-option-id="template-20217812058326__product-information-8574564860118-size"] {
--variant-ch: 8ch !important;
}