Liquid, JavaScript, themes, sales channels
I'm using Minimal theme and have a couple products that have 2 or 3 variants. I'd like to display the variant selectors onto one row/line instead of one line per variant.
Anyone have experience adjusting the code on the product template or theme css on how I can do that?
Thank you in advance.
Hi @altCookinghub,
Please follow the steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file: https://i.imgur.com/7tm96JA.png
.product-single .selector-wrapper label{
display: inline-block;
margin-right: 10px;
}
.product-single .selector-wrapper .single-option-selector{
display: inline-block;
}
Thank you for your suggestion but it doesn't appear to work.
This is what I got after adding the code into theme.css.liquid.
What did I do wrong or miss? Thank you so much in advance for your time.
Hi @altCookinghub,
You want to show like this: https://i.imgur.com/zmHyoaL.png or https://i.imgur.com/sW8uXQy.png
I will help you make it. Because the instructions above are for: https://i.imgur.com/zmHyoaL.png
Thank you for the explanation. I was able to get the result that you provided.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024