Solved

Size Selection Button smaller

domo2
Explorer
59 0 14

Hi, 

 

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

 

https://f20gs996d5skh5a0-69711397132.shopifypreview.com

 

Thank you!

Accepted Solutions (7)

BSSCommerce-HDL
Shopify Expert
710 230 241

This is an accepted solution.

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

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

Here is result: 

BSSCommerceHDL_0-1717751610329.png

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 😍

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

LuffyOnePiece
Shopify Partner
597 86 103

This is an 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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

Rishihuptech
Shopify Partner
593 105 119

This is an 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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

BSSCommerce-HDL
Shopify Expert
710 230 241

This is an 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

BSSCommerceHDL_0-1717753112733.png

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 😍

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

BSSCommerce-HDL
Shopify Expert
710 230 241

This is an 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 😍

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

BSSCommerce-HDL
Shopify Expert
710 230 241

This is an 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

BSSCommerceHDL_0-1717756798711.png

 

 

<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: 

BSSCommerceHDL_1-1717756947618.png

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 😍

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

BSSCommerce-HDL
Shopify Expert
710 230 241

This is an 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

BSSCommerceHDL_0-1717758166334.png

<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 😍

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 19 (19)

BSSCommerce-HDL
Shopify Expert
710 230 241

This is an accepted solution.

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

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

Here is result: 

BSSCommerceHDL_0-1717751610329.png

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 😍

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

domo2
Explorer
59 0 14

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?

Rishihuptech
Shopify Partner
593 105 119

This is an 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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
domo2
Explorer
59 0 14

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

BSSCommerce-HDL
Shopify Expert
710 230 241

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: 

BSSCommerceHDL_0-1717752402963.png

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 😍

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

domo2
Explorer
59 0 14

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

BSSCommerce-HDL
Shopify Expert
710 230 241

This is an 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

BSSCommerceHDL_0-1717753112733.png

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 😍

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

domo2
Explorer
59 0 14

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
Shopify Expert
710 230 241

Hi @domo2, You can increase the font-size to customize it to your liking. 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.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

domo2
Explorer
59 0 14

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
Shopify Expert
710 230 241

This is an 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 😍

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

domo2
Explorer
59 0 14

Thank you very much!

 

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

BSSCommerce-HDL
Shopify Expert
710 230 241

This is an 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

BSSCommerceHDL_0-1717756798711.png

 

 

<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: 

BSSCommerceHDL_1-1717756947618.png

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 😍

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

domo2
Explorer
59 0 14

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

BSSCommerce-HDL
Shopify Expert
710 230 241

This is an 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

BSSCommerceHDL_0-1717758166334.png

<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 😍

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

LuffyOnePiece
Shopify Partner
597 86 103

This is an 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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
domo2
Explorer
59 0 14

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

Rishihuptech
Shopify Partner
593 105 119

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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

Darshanp712
Shopify Partner
121 17 14

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

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.