Variant button expand/decrease effect

[JustinasR]

Hi can you guys help me understand whats hapenning with the variant button expand/decrease effect depending on which button is selected. This effect is causing my top choice badge to position incorrectly there is either extra gap or overlay depending on the variant button effect state. Preview: The Lowrider | Europe's Premium Body & Intimate Trimmer

Overlay:

Extra gap:

[Moeed]

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>
.samita_productLabel-content.__content--85635 {
    align-items: flex-end !important;
    margin-top: -105px !important;
}
</style>

RESULT:

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

Best,
Moeed

[tim_1]

Because selected/unselected values have different border and padding.

I’d try to force border and padding to stay the same size like:

.product-options > .option .option-value {
  border-width: 1px !important;
  padding:  1px !important;
}

.samita_productLabel-content.__content--85635 {
  margin-top: -104px !important;
  z-index: unset !important;
}

[ProtoMan44]

hi @JustinasR,
It looks like others have already helped resolve your issue. However, I noticed that when zooming in on the webpage, the badge position becomes misaligned.

To fix this, you may need to place the image within the variant button HTML so it stays properly aligned.

[JustinasR]

Thanks that helped! However with below code only for 2 specific products (Grand bundle & Superior bundle) for some reason in mobile version only the button keeps moving back up based on selection. This is weird because no other products are doing this but only 2:

Preview: The Grand Bundle | Europe's Premium Grooming For Men

  .option-value.option-selected {
    margin-bottom: 24px;
  }
  .value.option-selected {
    padding: 1px;
  }

[PaulNewton]

It’s just not that greatly made so you’ll keep having these issues because the .samita-container is in a different part of the hierarchy and not actually part of the elements for the option or it’s label.

There’s also using adjusting things like box-sizing: border-box;

Though really you just should try to move it to being a CSS background ::before pseudo element on the label.
Or as part of a flexbox in the options container but you’d likely have to go up the chain a bit adjusting sizes or making other parts flexbox as well.

[tim_1]

I’d agree with what’s said above – this is absolutely unsustainable way of doing it.
Browser width, zoom level, font size – every change will potentially break your design.

Like this:

It needs to be done differently.

[JustinasR]

So what is your proposed way of doing it the right way then?

[tim_1]

It’s hard to tell without seeing the whole picture.
The labels seem to be output by an app, but based on what?
Again, hard to tell without seeing the app config.

Ideally, the labels should be part of or next to variant picker buttons, or have some identifying property to link labels to variant selectors…

[JustinasR]

Yes the label comes from a 3rd party app. For e.g. desktop version english language they are positioned using selector .product-options .option-value.option-value-rounded:nth-of-type(1) and then moved into position using margin setting.

The Lowrider | Europe's Premium Body & Intimate Trimmer