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

Store Design
, , ,
1

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

2

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;
}
1 Like
3

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;
}
4

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!

5

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
04aa6f54b05b34bdc3de8eff203f31a8 (1).png1156×421 16.9 KB

6

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;
}
7

websensepro_0-1704441813103.png
websensepro_0-1704441813103.png937×533 29 KB

8

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 tag.

.swatches .opt-label{ width: 30px; height: 30px; } .opt-label{ border: 1px solid red; border-radius: 50%; }

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

  1. 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.

1 Like