Move size options to the left inline

Store Design
, , , , ,

Topic summary

A user seeks to move size option buttons to align left with other product information on their collection page, specifically on mobile view. An image shows the current centered layout that needs adjustment.

Two solutions were provided:

  1. CSS injection approach: Add custom CSS to the theme.liquid file before the closing </body> tag to left-align the size swatches on mobile screens.

  2. Direct file editing approach:

    • Modify the collection template file (ets-fs-best-selling-products, line 4281) to change margin-left from 0px to 5px for mobile screens
    • Edit the usf.css file (line 636) to change justify-content from center to flex-start in the .usf-swatchs ul selector

Both solutions target mobile screens (max-width: 767px) and involve adjusting flexbox alignment properties. The discussion remains open with no confirmation from the original poster about which solution was implemented or whether the issue was resolved.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

16DF0203-7544-43D5-95C5-CE5467DEB506.jpeg
16DF0203-7544-43D5-95C5-CE5467DEB506.jpeg1170×2532 166 KB

Hi,

I need help to move the size options in line with the rest of product info. My site is https://luxurymrkt.com/collections/ets-fs-best-selling-products

45243870-04A1-41E6-9F86-7E66B2629657.jpeg
45243870-04A1-41E6-9F86-7E66B2629657.jpeg1170×2532 157 KB

2

Hello @Luxurymrkt ,

I understand you are looking to provide the left alignment on the mobile screen as mentioned in your screenshot.

Please add the below code at the bottom of the theme.liquid file before tag and save.

Output -:

Anshul_arora_0-1719916754630.png
Anshul_arora_0-1719916754630.png790×778 102 KB

I hope the code helps you.

Thank you.

3

Hello @Luxurymrkt

Go to online store ---------> themes --------------> actions ------> edit code-------> search—> Collections-----> ets-fs-best-selling-products ----> line number 4281
search this code

@media screen and (max-width: 767px) {
.usf-swatchs ul {
margin-left: opx !important;
}
}

and replace with this code

@media screen and (max-width: 767px) {
.usf-swatchs ul {
margin-left: 5px !important;
}
}

Go to online store ---------> themes --------------> actions ------> edit code-------> search—> assets -----> usf.css -----> line number 336
saerch this code

.usf-swatchs ul {
text-align: center;
padding: 3px;
list-style: none;
flex-wrap: wrap;
display: flex;
align-items: center;
width: fit-content;
margin: auto;
justify-content: center;
}

and replace with this code

.usf-swatchs ul {
text-align: center;
padding: 3px;
list-style: none;
flex-wrap: wrap;
display: flex;
align-items: center;
width: fit-content;
margin: auto;
justify-content: flex-start;
}

and the result will be

13.png
13.png425×832 108 KB

let me know if this was helpful.