How do I center my Collections List when I cannot fill the row on Empire theme?

Store Design
, ,
1

Here’s what I have currently. I have a max of 5 per row. But if I do not have 5 collections, I would like the all to be centered.

Center.PNG
Center.PNG1380×599 28.8 KB

Webpage: https://nextpointbearing.myshopify.com/pages/bearings

Password: steelpancakes

2

Hi @NPB_Marketing ,

You can center the collection items by following the instructions below.

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the theme.css file
  3. At very end of the code, add the code below
@media only screen and (min-width 751px) {
li.collection__item.pxu-lia-block.pxu-lia-block--play {
    max-width: 214px;
}

ul.home-section--content.collection-list__content.collection--image-crop-original.no-cta {
    display: flex;
}
}

Result here:

made4Uo_1-1682457656680.png
made4Uo_1-1682457656680.png1557×929 20.9 KB

3

Unfortunately, nothing has changed. Here’s where I placed the code.

Code.PNG
Code.PNG1258×868 50.5 KB

4

Hi @NPB_Marketing

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

If you want it become 2 collection and center, please use this code

PageFlyRichard_0-1682471632272.png
PageFlyRichard_0-1682471632272.png1920×969 51.5 KB

Or two small collection but center, then you can use this

PageFlyRichard_1-1682471790456.png
PageFlyRichard_1-1682471790456.png1354×969 60.8 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

5

This worked! Thank you! Does this code also apply to 3 and 4 collections? The max width is 5.

Edit: YES! It works for any number. Thank you so much for your help!

6

Thanks @NPB_Marketing my friend, glad to hear that it’s work for you.

Let me know if you need further help