Variant Picker

Store Design
, , , ,

Topic summary

Goal: Adjust the Shopify Craft theme so the product variant picker is a true rectangle (no rounded corners) and enable color swatches for the color option.

Context: A product page link was shared for reference.

Guidance provided:

  • Rounded corners: Edit theme.liquid and insert custom code just before the tag to remove border radius. (The responder described where to add code but did not include the actual CSS/markup in the message.)
  • Color swatches: The Craft theme does not support swatches out of the box; implementing them requires custom development (theme code changes).

Definitions:

  • Variant picker: The UI control that lets customers select product options (e.g., size, color).
  • Swatches: Clickable color samples representing color variants.

Outcome and status:

  • The original poster expressed thanks, suggesting the border-radius guidance was helpful.
  • Enabling color swatches remains unresolved within the thread and would require custom coding beyond default theme settings.

Next steps:

  • Add the necessary CSS/HTML to remove border radius.
  • Plan custom development to implement color swatches in Craft.
Summarized with AI on January 1. AI used: gpt-5.
1

So the theme for the website I have chosen is Craft. I want my variant picker to be a proper rectangle and not a rounded rectangle. I have tried setting the border radius to 0px but it still shows a rounded rectangle. Also how would I enable swatches for my colour variant. Could someone please help me.

Website link : https://sitharr.myshopify.com/products/tee-shirt

2

Hi @Jordhen

Follow these Steps to remove rounded corner:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

For the color swatch, we will have to make changes to the theme code. This will require custom development as the craft theme doesnot support swatch by default.

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

1 Like
3

Thank you so much