How can I redesign swatches (color and size) in the code?

Solved

How can I redesign swatches (color and size) in the code?

mattks
Excursionist
21 0 4

I would like to give my swatches an update in the code. Both swatches for color and size are displayed from the theme's original settings ( a 2.0 theme)

I want to make the color swatches smaller, but keep the shape.

I want to change the size swatches, maybe make them circular or change the background/border color

 

www.rebellivn.myshopify.com

Accepted Solutions (2)

SomeUsernameHe
Shopify Partner
519 58 112

This is an accepted solution.

For the color option, you can use and adjust the following css to fit your needs:

.swatches .opt-label, .single-variant [data-swatch] {
    width: 26px;
    height: 26px;
}


and for the size swatches, you can use this css: 

.opt-label {
    margin: 8px 8px 0 0;
    padding: 0;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee

View solution in original post

Anshul_arora
Navigator
453 129 104

This is an accepted solution.

Hello @mattks ,

I understand you are looking to make changes in your color or size swatches.

You can implement this change by adding small code in your store' theme.liquid file.


1. Go to Online store -> Themes -> Click on Three dots(Action) -> Edit code

2. Now, Search for the theme.liquid file and open it.

3. Next, add the below mentioned code at the bottom of the file before </body> tag.


<style>

.swatches .opt-label{

width: 30px;
height: 30px;

}

.opt-label{

border: 1px solid red;
border-radius: 50%;

}

</style>

[Please feel free to change the color and height, width pixels as per your requirements.]

4. Save changes.

Output will like this -> https://prnt.sc/C7DClgGxE8BY

I hope the solution helps you.

Kindly let me know if you have any query.

Thank you.

 

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 7 (7)

SomeUsernameHe
Shopify Partner
519 58 112

This is an accepted solution.

For the color option, you can use and adjust the following css to fit your needs:

.swatches .opt-label, .single-variant [data-swatch] {
    width: 26px;
    height: 26px;
}


and for the size swatches, you can use this css: 

.opt-label {
    margin: 8px 8px 0 0;
    padding: 0;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee

SomeUsernameHe
Shopify Partner
519 58 112

For your sizing options you can use and adjust the following css as needed:

label[for*="main-size-opt"] {
    padding: 0;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: purple;
    border-color: green !important;
}


and for your color options you can use and adjust the following css:

.swatches .opt-label, .single-variant [data-swatch] {
    width: 26px;
    height: 26px;
}
Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee

websensepro
Shopify Partner
1854 215 262

Hi, @mattks.

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

product-recommendations.block {
    display: none;
}

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

SomeUsernameHe
Shopify Partner
519 58 112

for some reason its giving me issues posting it so I have to take a screenshot of the code. You can adjust the css as needed!

04aa6f54b05b34bdc3de8eff203f31a8 (1).png

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
websensepro
Shopify Partner
1854 215 262

websensepro_0-1704441813103.png

 

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

SomeUsernameHe
Shopify Partner
519 58 112

Hmmm for some reason my reply keeps disappearing or not posting. 

But you can use the following css to achieve your desired outcome. I would adjust the code as needed!

.swatches .opt-label, .single-variant [data-swatch] {
    width: 26px;
    height: 26px;
}

label[for*="main-size-opt"] {
    padding: 0;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: purple;
    border-color: green !important;
}
Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee

Anshul_arora
Navigator
453 129 104

This is an accepted solution.

Hello @mattks ,

I understand you are looking to make changes in your color or size swatches.

You can implement this change by adding small code in your store' theme.liquid file.


1. Go to Online store -> Themes -> Click on Three dots(Action) -> Edit code

2. Now, Search for the theme.liquid file and open it.

3. Next, add the below mentioned code at the bottom of the file before </body> tag.


<style>

.swatches .opt-label{

width: 30px;
height: 30px;

}

.opt-label{

border: 1px solid red;
border-radius: 50%;

}

</style>

[Please feel free to change the color and height, width pixels as per your requirements.]

4. Save changes.

Output will like this -> https://prnt.sc/C7DClgGxE8BY

I hope the solution helps you.

Kindly let me know if you have any query.

Thank you.

 

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here