Can I rearrange color swatches into two rows on my product page?

JhordanMSUITE
Shopify Partner
134 2 42

Is it possible to move two color swatches. I have 4 and instead of having them horizontal in a row, I'd like for two to be on top, and two on bottom. Hopefully I can squeeze a title above the second row of swatches. Here is the example below.

 

Screen Shot 2022-11-09 at 7.36.48 AM.png

Here is my product

 

Screen Shot 2022-11-08 at 10.45.25 PM.png

 

https://shop.eluwastudio.com/products/misoli-wreath

Replies 2 (2)

ExpertRookie
Shopify Partner
1518 249 315

hi @JhordanMSUITE 

 

Add this code at the bottom of Theme > Edit code > assets > base.css file

@media screen and (min-width: 767px) {
	.product__form-block--options-inline .swatch {
     width: 12%;
	}
}

Try it and let me know

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
ModifiedSix
Tourist
4 0 2

Hey I was wondering if youre available for custom coding? Id like this same effect but with 6 rows