Size Selection Button smaller

[domo2]

Hi, 

I need my size selection buttons on the product page to be a little smaller, please.

https://f20gs996d5skh5a0-69711397132.shopifypreview.com

Thank you!

[BSSCommerce-HDL · Accepted solution]

Hi @domo2, Pls insert this code to your file css: 

variant-selects label {
    font-size: 11px !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[LuffyOnePiece · Accepted solution]

Hi @domo2 ,

Add below css to base.css file.

.product-form__input--pill input[type=radio]+label {
    padding: 0.5rem 1rem !important;
}

Let me know if you need any assistance.

Thank you

[Huptech-Web · Accepted solution]

Hello! @domo2  Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

body product-info .product-form__input--pill input[type=radio]+label {
    padding: 1rem;
    width: 4.5rem;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

[BSSCommerce-HDL · Accepted solution]

Hi @domo2, You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside tag head. You need create style tags. After you'll insert my code inside it

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @domo2, Pls try again this code: 

variant-selects label {
    margin: .7rem .2rem .2rem 0 !important;
    font-size: 14px !important;
    padding: 1rem 1.7rem !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @domo2, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside body tags. You need insert my code inside it before close body tags

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let price = document.querySelector('.product__info-wrapper .price-item');
        if (price) {
            price.textContent = price.textContent.split(',')[0];
        }
    });
</script>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @domo2, Pls insert this code to your file css: 

variant-selects label {
    font-size: 11px !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[domo2]

It worked thank you, but on the mobile version they just dont fit in 1 line. XXL is always below. So I need the padding smaller? Or how do I fit them in 1 line?

[Huptech-Web · Accepted solution]

Hello! @domo2  Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

body product-info .product-form__input--pill input[type=radio]+label {
    padding: 1rem;
    width: 4.5rem;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

[domo2]

I like the size of the button. But now the letters need to be a bit smaller, please. 

[BSSCommerce-HDL]

Hi @domo2, Pls insert this code to your file css: 

variant-selects label {
    margin: .7rem .2rem .2rem 0 !important;
    font-size: 11px !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[domo2]

Its pretty logical, but it just doesnt work.. Dont know why

[BSSCommerce-HDL · Accepted solution]

Hi @domo2, You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside tag head. You need create style tags. After you'll insert my code inside it

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[domo2]

That worked, thank you! But now they are a little too small. The size of your screenshot on the previous reply is perfect.

[BSSCommerce-HDL]

Hi @domo2, You can increase the font-size to customize it to your liking. Hope this can help you 😍

[domo2]

I literally did the same thing as before but changed the font size and now they are not in 1 line again. Even with font size 11. I'm confused. 

Edit: 

Welp I guess it was just a fault in my shopify editor. In the preview it worked. So thank you very much!

One last question do you know how I change my price from 79,00 to 79?

[BSSCommerce-HDL · Accepted solution]

Hi @domo2, Pls try again this code: 

variant-selects label {
    margin: .7rem .2rem .2rem 0 !important;
    font-size: 14px !important;
    padding: 1rem 1.7rem !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[domo2]

Thank you very much!

One last question do you know how I change my price from 79,00 to 79?

[BSSCommerce-HDL · Accepted solution]

Hi @domo2, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside body tags. You need insert my code inside it before close body tags

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let price = document.querySelector('.product__info-wrapper .price-item');
        if (price) {
            price.textContent = price.textContent.split(',')[0];
        }
    });
</script>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[domo2]

That worked, thank you! But now I also need it on the collections page. Can you help me with that, please?

[BSSCommerce-HDL · Accepted solution]

Hi @domo2, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside body tags. You need insert my code inside it before close body tags

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let collection_list = document.querySelectorAll('.collection .card__information .price-item');
        if (collection_list.length > 0) {
            collection_list.forEach((item) => {
                item.textContent = item.textContent.split(',')[0];
            })
    });
</script>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[LuffyOnePiece · Accepted solution]

Hi @domo2 ,

Add below css to base.css file.

.product-form__input--pill input[type=radio]+label {
    padding: 0.5rem 1rem !important;
}

Let me know if you need any assistance.

Thank you

[domo2]

I like the size of the buttons. But now the letters need to be smaller, please.

[Huptech-Web]

Hello! @domo2  Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

body product-info .product-form__input--pill input[type=radio]+label {
    padding: 1rem;
    width: 4.5rem;
}

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

[Darshanp712]

Hello @domo2 , Please add this CSS in assets/component-product-variant-picker.css  file

.product-form__input--pill input[type=radio]+label {
    border: var(--variant-pills-border-width) solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
    background-color: rgb(var(--color-background));
    color: rgba(var(--color-foreground));
    border-radius: var(--variant-pills-radius);
    color: rgb(var(--color-foreground));
    display: inline-block;
    margin: .7rem .5rem .2rem 0;
    padding: 0.5rem 1rem;
    font-size: 1.4rem;
    letter-spacing: .1rem;
    line-height: 1;
    text-align: center;
    transition: border var(--duration-short) ease;
    cursor: pointer;
    position: relative;
}

I make a change in the padding of it from "padding: 1rem 2rem;" to "padding: 0.5rem 1rem;"

Best Regards,
Darshan Prajapati