Variant space gap

Shopify Discussion
,
1

Hi how do i increase the gap between the two variant options so that my top choice badge can be added on top of the 2nd variant? Currently there is not enough space for it and I have to add it on the bottom of the variant. Preview: The Lowrider | Europe's Premium Body & Intimate Trimmer

image
image1127Ă—1208 121 KB

1 Like
2

Hey @JustinasR

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>
.option-value {
    margin-bottom: 20px !important;
}
</style>

RESULT:

image
image451Ă—808 52.6 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
3

Hi @JustinasR ,
Go to Online Store > Themes > Actions > Edit Code > style.css Add below code at the bottom of style.css file

body .collection-sortby-option, .option-value {
    margin-bottom: 25px;
}

image
image1478Ă—895 140 KB

4

Thanks. Based on the variant translation text there are two possible layouts for the variants, horizontal and vertical. Is it possible to implement bigger gap only for vertical alignment?

option 1 horizontal:

image
image828Ă—188 18.4 KB

Option 2 - Vertical

image
image724Ă—288 21.6 KB

5

@Moeed @oscprofessional

6

The code which I provided you is only for vertical option because I provided you “margin-bottom”, means it is only gonna apply spacing below the option.

Best,
Moeed