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

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

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

7

Hi @JustinasR .

Cannot directly edit theme code. The TOP CHOICE badge likely uses absolute positioning with a negative top value, causing overlap due to insufficient vertical spacing between variant options. Increase the margin-top or margin bottom on the variant option elements like from 8px to 20 to 24px, to create space for the badge. Look for classes like variant picker option or product form input in your theme’s CSS. Sharing the CSS or theme name would allow for a precise solution.