Hello, community,
as the subject says, I’d appreciate your help with changing all color swatches by default in a circle shape with text under the swatches or to be shown just on hover over the swatches.
store: kidikko.myshopify.com
password: papadujko
Thank you in advance for your time and help.
hello @hitrec
I see your site having right-clicked security can you please remove this security and which pages do you want to show swatches in a circle on your home page or the product page?
sure. 
I want circle swatches on the whole website. On product pages, home page, collection pages.
f you want to make them circles you can add this CSS rule:
.ColorSwatch {
border-radius: 50%;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
@kamala-dulal this is not working.
@Kinjaldavra please let me know if you’ve managed to find the solution. Thank you
in theme.scss.liquid,
Search for swatch
And adjust around
@kamala-dulal term “swatch” doesn’t exist in theme.scss.liquid
then look for
pg__option__values flex w100
hello @hitrec
please Go to Online Store->Theme->Edit code then go to style.css ->paste the below code at the bottom of the file.
.template-index .swatch__item{
border-radius:50%
}
@Kinjaldavra I tried to add it to assets-styles.scss.liquid, but nothing change. there are also assets named:
styles-collection-page.scss.liquid
styles-remain-pages.scss.liquid
styles-rtl.scss.liquid
Would it work if I add it in any of these above-mentioned?
@Kinjaldavra thank you for your time and for solving this for me.