Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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;
}
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.
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;
}
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;
}
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!
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!
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;
}
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025