Centering Featured products and the header for publisher theme

Store Design
, ,

Topic summary

A user seeks help centering featured products and the “11/24” header on their Shopify store using the Publisher theme, as both elements currently align to the left.

Solutions Provided:

Three community members offered CSS-based fixes:

  • Solution 1: Add custom CSS via theme.liquid file above the </body> tag to center the collection title and product grid
  • Solution 2: Use Shopify’s Customize interface → Theme Settings → Custom CSS to apply centering styles for .collection__title and .product-grid
  • Solution 3: Edit base.css directly, adding CSS rules to center both the collection title wrapper and featured collection slider

Outcome:

The original poster confirmed one of the solutions worked successfully. All approaches target the same elements (collection title and product layout) using text-align: center and justify-content: center properties, differing only in implementation method (theme file vs. custom CSS panel vs. base stylesheet).

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

I am trying to center the two products I have on my site but they are to the left right now. Alongside the title that is labeled 11/24. I am using the publisher theme and can’t find a solution to this.

This is my site https://agrnyc.com/ and the password is “greatpassword”

1 Like
2

Hey @AuGeR

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1730703936787.png
Moeed_0-1730703936787.png1886×889 107 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hi @AuGeR

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

ul.grid.product-grid {
    justify-content: center !important;
}
.collection__title h2.title.inline-richtext.h1 {
   text-align: center !important;
}

image (13).png
image (13).png1638×803 279 KB

Please let me know if it works. Thank you!

Best,

Daisy - Avada Support Team.

4

Hello @AuGeR

Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.collection__title.title-wrapper.title-wrapper--no-top-margin.page-width {
text-align: center !important;
}
#Slider-template--23666771558699__featured-collection {
justify-content: center;
}

result

57.png
57.png703×785 137 KB

If this was helpful, hit the like button and accept the solution.
Thanks

5

Thanks this worked flawlessly

6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.