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

Store Design
, , , , , , ,

Topic summary

A user seeks to reposition color swatches to the left and change their shape from square to circular on their Shopify store (ryusei.co.id).

Solutions Provided:

Two developers offered CSS-based solutions:

  • Option 1: Add custom CSS to theme.liquid before the </body> tag, targeting .product-card__info fieldset with justify-content: flex-start and applying border-radius: 50% to .color-swatch elements

  • Option 2: Similar approach using custom CSS in theme settings, adjusting .product-card .product-card__info alignment and swatch border-radius

Key Technical Details:

  • Both solutions use border-radius: 50% to create circular swatches
  • Alignment changed via justify-content: flex-start or justify-items: flex-start
  • CSS targets product card info sections and color swatch elements
  • Implementation requires accessing Shopify theme code editor

The discussion remains open with no confirmation of which solution was implemented or successful.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Screenshot 2024-08-22 103744.png
Screenshot 2024-08-22 103744.png1864×808 161 KB

2

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

3

https://ryusei.co.id/

4

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

niraj_patel_0-1724298940630.png
niraj_patel_0-1724298940630.png1355×535 208 KB

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

5

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