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

[Ryusei]

[niraj_patel · Accepted solution]

Hello @Ryusei 

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 </body> on theme.liquid
<style>
   .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;
  }
</style>

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

[Henry_dev]

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

[Ryusei]

https://ryusei.co.id/ 

[Henry_dev · Accepted solution]

Hi @Ryusei  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 

[niraj_patel · Accepted solution]

Hello @Ryusei 

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 </body> on theme.liquid
<style>
   .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;
  }
</style>

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