How to stack variant options vertically on Debutify Theme

Store Design
1

b7b23451733208e5984df06b343fbe9d.png
b7b23451733208e5984df06b343fbe9d.png1862×786 118 KB

9484239c98cddfed82e786f17b7605bd.png
9484239c98cddfed82e786f17b7605bd.png1609×828 138 KB

If any way possible, can I stack my variant options on top of each other vertically rather than horizontally?

PS: Also, is it possible for me to make my description more narrow and take up less width compared to the image? (ex. 70% image 30% description)

Store link: www.revailco.com

Thanks!

1 Like
2

@Revail

can you please check your theme custom setting may be allow this!

also please share more product images url so i will set grid

3

Hey I checked my theme and it doesn’t allow any modification to it

As for product image URL, I’m not too sure as to what that is

Here’s a product page for example: https://revailco.com/products/mamba-hoodie-1?variant=41118384226470

1 Like
4

@Revail

oh sorry can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (min-width: 1025.1px) {
.grid__item.large--seven-twelfths.medium--seven-twelfths.text-center {
width: 70%;
    -webkit-flex: 0 0 70%;
    -moz-flex: 0 0 70%;
    -ms-flex: 0 0 70%;
    flex: 0 0 70%;
}
.grid__item.product-single__meta--wrapper.medium--five-twelfths.large--five-twelfths {
width: 30%;
    -webkit-flex: 0 0 30%;
    -moz-flex: 0 0 30%;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
}
}
1 Like
5

Thanks everything works! Do you happen to know how to stack the variants on top of one another?

1 Like
6

@Revail

its my pleasure to help us

1 Like