Issue: On a product page using the Flex theme, the color variant options had excessive left spacing, causing the fifth option to wrap to a new line. The goal was to fit more color options on a single line by reducing spacing.
Context: The requester shared the product URL and screenshots illustrating the layout problem. The discussion focused on adjusting the display of variant swatches.
Solution: Guidance was provided to add custom code in theme.liquid (Online Store → Theme → Edit code) before the tag to adjust spacing/layout. A result screenshot showed more options fitting on one line. Note: The exact code snippet was not visible in the transcript.
Outcome: The requester confirmed the change worked perfectly.
Status: Resolved.
Notes: Images were central to understanding the spacing issue and the successful layout change.
good morning i would like the resize this place
on the left of our type of color we have a lot of space and the option after 4 goes down to another
line, i would like to change the space so i will have more colors in the same line it is possible?
i use flex theme
Hi, @Olaf5
Can you please share the page URL so that I can assist you?
there is the link
im sorry i clicked “accepted solution” but of course i failed
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag
Result:
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
thank you it works perfectly
