Center products collection section in page

Shopify Discussion

Topic summary

A user working with the Effortless Shopify theme needs help centering a featured collection section displaying 3 products. The layout appears fine on mobile but aligns left on desktop, creating excessive white space on wider screens.

Attempted Solutions:

  • Adjusting CSS width properties (.collection_slide { width: 33.333%; })
  • This approach broke mobile responsiveness and wouldn’t scale well for future collections with more products

Root Cause Identified:
The slider function allocates space for 4 products, causing the centering issue when only 3 are displayed.

Proposed Fix:
Modifying the slider function settings to match the actual product count, though this requires collaborator account access to implement properly.

Status: The original poster confirmed the issue is now resolved (“works great now”), though the specific solution that worked wasn’t detailed. An additional CSS-based centering approach using media queries was suggested later but appears unnecessary given the resolution.

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

Hi,

I am setting up my store using Effortless theme, and in my home I’m using the featured collection section to display the onle 3 products I currently have. On mobile it showes fine but in desktop it’s alligned to the left and if the screen is set wide enough it doesn’t look good with too much empty space to the right asshown in the following image:

luiszadel_1-1695067145605.png
luiszadel_1-1695067145605.png1355×546 143 KB

I want to center it in the screen. I tried some solutions provided on other threads regarding other themes but haven’t been able to make it to work.

You can find the page here; https://mmpluss.com/

Appreciate any help.

2

Hi @luis-zadel

This will be in your theme settings.

You can choose how much products need to be display here.

3

Hello @luis-zadel ,

As I understand you are looking to display your product in the center of the screen.

Please try this solution -:

You have to increase the size of the respective product Div class.

.collection_slide {
width: 33.333%;
}

You can find & change the above mentioned code in base.css/style.css/theme.css file

Kindly review the output when I temporarily change the code → https://prnt.sc/Zbri-bxC5azd

I hope this helps.

Please let me know if you are facing any issue or need assistance in changing the code.

Thank you.

4

Thank you for your response @Anshul_arora , but it’s not quite what I’m looking for. For one it messes the reactive behaviour on mobile devices, and for a future collections I will be addin probably won’t be the best approach I think.

If there could be another way to just center the collection contents irrespective of the number of items in the collection would be the preffered approach.

5

Hello @luis-zadel ,

Thank you for your message.

The previous share solution does not go with your mobile devices because of the slider function applied in this section.

In your slider function, the space is allotted for 4 products because of this extra space appearing on the screen.

We can display the products in the center of the screen by making changes in the slider function and for this I need to check the complete code of the store.

Please provide me with the collaborator account access, so I can check and provide you with an appropriate solution.

Thank you.

1 Like
6

Hi @laddisahsi , I can’t find that particular setting on theme settings. Can you point me to where to look? Thanks

7

Thanks so much, works great now.

8

Hi there,

To center it on desktop view, you can try adding custom CSS to adjust the alignment. Here’s a snippet you can use:

@media only screen and (min-width: 769px) {
  .index-section {
    text-align: center;
  }
}

You can add this CSS code to your theme customization settings. If your theme doesn’t have a built-in custom CSS option, blue prism certification you might need to access your theme files and add it there. Remember to backup your theme before making any changes.

Additionally, ensure that you clear your browser cache or use private browsing to see the immediate effect of the changes.

I hope this helps!