Centering a single product in collection

Store Design
, ,
1

Hi, I currently have only 1 product in my collection so I want that 1 product to be in the center/middle of the featured collection section, right under the “Featured Collection”. I’ve been trying to do so with custom css but couldn’t figure it out at all. I’d really appreciate your help :slightly_smiling_face:

1 Like
2

Hi @StafMeister

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media (min-width: 1024px) {
.featured-collection .lg\:col-span-4 {
        grid-column: 5 / 9;
    }
.featured-collection .lg\:grid-cols-12 {
    background: white;
}
}

And Save.

Result:

Made4uoRibe_0-1727803439020.png
Made4uoRibe_0-1727803439020.png1863×734 74.7 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

@StafMeister try to let themes worry about structure, the need to center things is a good way to burn time and create future problems wearing the designer hat.

If you do this make sure to aggressively document and note somewhere you will always see it that you have done this.

In a custom css setting for that section use the following for the desktop grid

#CollectionProductGrid .collection-list li:first-child { grid-column-start: 5; }
#CollectionProductGrid .collection-list { background-color: var(--color-scheme-background); }

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

This does NOT account for the containers background being black in order to make the pseudo borders, as this is the type of domino effects you have to start fixing when you change things.