How to center a product in the “Featured Collection” section with the Impulse theme?

Shopify Discussion

Topic summary

A user working with Shopify’s Impulse theme encountered an alignment issue where products in the Featured Collection section appeared centered on mobile but left-aligned on desktop. They wanted to center the products without changing their size.

Initial Solution Attempt:

  • Another user suggested adding CSS to the Custom CSS field within the Featured Collection section settings
  • This approach did not resolve the issue

Working Solution:
The problem was solved by adding custom CSS to the theme’s base.css file:

[data-context="featured-collection"] .grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

Implementation steps:

  1. Navigate to Online Store → Themes → Edit code
  2. Open Assets → base.css
  3. Paste the CSS code at the bottom of the file

The user confirmed this solution successfully centered their products while maintaining their original size. The issue is now resolved.

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

Hi everyone,

I’m using the Impulse theme, and I have a question about the Featured Collection section.

In this section, I’ve created a collection that contains only one product. On mobile, the product is perfectly centered, but on desktop, it’s aligned to the left.

I’d like to center this product on desktop while keeping its current size (as shown in the attached screenshot). I don’t want the product to be resized, just centered properly in the available space.

Does anyone know how to fix this, perhaps with some CSS or another method?

Thank you in advance for your help! :blush:

Capture d’écran 2025-01-27 à 04.25.39.png
Capture d’écran 2025-01-27 à 04.25.39.png1882×1124 119 KB

1 Like
2

@Jordan221
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.

1 Like
3

@Jordan221 Please find the below steps to display the featured collection in center alignment in impulse theme. Let us know whether it is helpful for you.

  1. From admin, Go to “Online Store” → “Themes”.
  2. Click “Customize” button in the current theme.
  3. Go to the respective “Featured collection” section and click it to add the CSS.

Vinsinfo_0-1737954125171.png
Vinsinfo_0-1737954125171.png354×634 21.2 KB

  1. Search for the “Custom CSS” field at the bottom of the section and add the below CSS code like in the below attached screenshot.
.grid-overflow-wrapper .grid {
  display: flex;
  justify-content: center;
}

Vinsinfo_1-1737954145166.png
Vinsinfo_1-1737954145166.png353×582 21.8 KB

Note: The code provided above is based on impulse theme. If this doesn’t helps you, please provide your store URL to assist you on this.

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

4

hello @Jordan221

Please Provide me your Website Url.

Thanks

5

Hi @Jordan221

Could you please share the store link and entry password so we can check it further?

Looking forward to hearing from you soon. Thank you!

Best,
Daisy - Avada Support Team.

6

Hello KetanKumar,

Thank you for your response and willingness to help!

My website URL is www.alexiamorishop.com.

Let me know if you need any further details.

How can I center the two products in the screenshot below while keeping their current size?

Thanks again! :blush:

Capture d’écran 2025-01-31 à 12.35.17.png
Capture d’écran 2025-01-31 à 12.35.17.png2776×1012 131 KB

1 Like
7

Hello Vinsinfo,

Thank you for your help! I followed the steps you provided and added the CSS to the Featured Collection section, but unfortunately, it didn’t work. The products are still not centered as expected.

My website URL is www.alexiamorishop.com.

Thanks in advance! :blush:

8

Hello,

Thank you for your response!

My store link is www.alexiamorishop.com. My store is not password-protected, so you should be able to access it directly.

Please let me know if you need any further details to check the issue. I really appreciate your help!

Looking forward to your feedback.

Best regards,

9

@Jordan221 thanks for update yes please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
[data-context="featured-collection"] .grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

KetanKumar_0-1738326441753.png
KetanKumar_0-1738326441753.png1920×922 108 KB

1 Like
10

Amazing that’s work !

Thanks a lot !

1 Like
11

@Jordan221 Glad I could help

1 Like
13

Hi!

I’m trying to achieve this on Shopify’s Dwell theme and I cannot make it happen. I’ve tried different code snippets shared in posts. Could anybody help? I wish to align all featured collection grids to center when there are less products than columns set. :folded_hands: