Different buttons for every variant

Store Design
, ,
1

Hi,

I sell posters, each of which comes in three sizes: small, medium, and large.
Let’s say I want to show three different buttons for selecting sizes to immediately highlight the difference in size.

Can I do that?
Thanks!

Paweł J.

buttons
buttons1000×705 37.1 KB

2

Hi @PawelJonca

Welcome to the community.

You could try to target the parent of each button with this code. Add it in the theme configuration on the product page, Product information sections, and Custom CSS settings. If all of your posters come in those dimensions.

.variant-option__button-label:has([value="30x40cm"]) {
	min-height: 5rem;
    margin-top: 7rem;
}

.variant-option__button-label:has([value="50x70cm"]) {
	min-height: 8rem;
    margin-top: 4rem;
}

.variant-option__button-label:has([value="61x91cm"]) {
	 min-height: 9rem;
    margin-top: 1rem;
    min-width: 7rem;
}

Result:

scrnli_9mRUabxMyqsdOo
scrnli_9mRUabxMyqsdOo1520×849 138 KB

but you can adjust widths and height, top margin.

3

Hi @PawelJonca

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

4

hey dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like and mark it solution

.variant-option__button-label:has([value="30x40cm"]) {
	min-height: 5rem;
    margin-top: 7rem;
}

.variant-option__button-label:has([value="50x70cm"]) {
	min-height: 8rem;
    margin-top: 4rem;
}

.variant-option__button-label:has([value="61x91cm"]) {
	 min-height: 9rem;
    margin-top: 1rem;
    min-width: 7rem;
}
5

@PawelJonca can you please share this page link? you can try solution given by @Laza_Binaery or if the classes are different then we can provide css here

6

Thank you! Not exactely hat I imagined, but looks cool enough :slight_smile:

7

@PawelJonca

You want exactly as the image you provided?
Well, those can be styled with borders and padding and colors inside, and probably
change the text also from 30x40cm to small and others. But needs a slightly more work.