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

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

Replies 2 (2)

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 regarding any help.
4 0 2

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