I Want to change shape of color swatches to circles

MichaiStaten
New Member
2 0 0

I have a custom built store that I am redesigning and I have a product with color swatches that are squares. I would like for them to be circles.

 

here is a link to the product page https://www.gazingbeauty.com/collections/all/products/beauty-bee-32932

 

I also went into assets> theme.scss.liquid and this is the code i found for the swatches

 

Color swatch
* ----------------------------------------------------------------------------
*/

.ColorSwatch {
position: relative;
display: inline-block;
height: 30px;
width: 30px;
vertical-align: top;
cursor: pointer;
background-size: cover;

&::after {
content: '';
position: absolute;
width: calc(100% + 6px);
height: calc(100% + 6px);
top: -3px;
left: -3px;
}

&:hover::after {
border: 1px solid $border-color;
}
}

.ColorSwatch--small {
width: 16px;
height: 16px;
}

.ColorSwatch--large {
width: 36px;
height: 36px;
}

.ColorSwatch--white {
outline: 1px solid $border-color;
outline-offset: -1px;
}

.ColorSwatch.is-active::after,
.ColorSwatch__Radio:checked + .ColorSwatch::after {
border: 1px solid currentColor !important;
}

.ColorSwatch__Radio {
display: none;
}

.Collapsible .ColorSwatchList {
padding-top: 4px;
padding-bottom: 10px;
}

.Collapsible--autoExpand .ColorSwatchList {
padding-top: 8px;
padding-bottom: 12px;
}

/**
* ----------------------------------------------------------------------------
* Size swatch
* ----------------------------------------------------------------------------
*/

.SizeSwatch {
display: inline-block;
text-align: center;
min-width: 36px;
padding: 6px 10px;
border: 1px solid $border-color;
color: $text-color-light;
cursor: pointer;
}

.SizeSwatch__Radio {
display: none;
}

.SizeSwatch.is-active::after,
.SizeSwatch__Radio:checked + .SizeSwatch {
border-color: $text-color;
color: $text-color;
}

 

 

Im not too sure if that helps figure it out?

0 Likes
JoesIdeas
Shopify Expert
1310 118 342

If you want to make them circles you can add this CSS rule:

.ColorSwatch {
  border-radius: 50%;
}

Add that to a custom CSS file that loads after your theme file. If you don't have a custom CSS file setup yet, here's how you do that: https://speedboostr.com/how-to-safely-edit-your-shopify-theme.

 

That guide will also show you how to inspect elements, so you can edit in real-time in the browser to see what CSS you need to change.

Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfillment + more automations).
More apps: Theme Scientist (A/B testing), Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).
MichaiStaten
New Member
2 0 0

I made the cusom file but I dont have a styles.scss.css file to add the custom file under

0 Likes
Aayush1
Tourist
3 0 1

It helped me in Prestige theme. Thanks a lot.

vari1
New Member
1 0 1

you r brilliant!!