how do I change the position of the color swatch to the left and change the shape to a circle?

[Ryusei_1]

[Henry_dev]

Hi @Ryusei_1 Please share your store URL. I will check and help.

[Ryusei_1]

https://ryusei.co.id/

[niraj_patel]

Hello @Ryusei_1

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.product-card__info fieldset.h-stack.wrap.justify-center.gap-1 { justify-content: flex-start !important; width: 100% !important; } label.color-swatch.border { border-radius: 50% !important; } :checked+.color-swatch{ border-radius: 50% !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Henry_dev]

Hi @Ryusei_1 You can use this custom css code:

.product-card .product-card__info {
justify-items: flex-start;
}
.product-card .product-card__info > fieldset.h-stack {
justify-content: flex-start;
}
.product-card .product-card__info .color-swatch {
border-radius: 50%;
}

you can add this code to: theme settings → custom CSS