Centering Products and Footer

Store Design
, , , , , ,

Topic summary

A user seeks help centering product images and footer text on their Shopify store. The product images appear slightly left-aligned, and footer menus/texts are not centered.

Solutions Provided:

Two support contributors offer CSS code snippets to address the issues:

  1. For product centering: Add CSS to theme.liquid or main.css/base.css targeting the product slider and grid items with justify-content: center and text-align: center

  2. For footer alignment: Apply text-align: center to footer block elements and scroll-trigger items

Complication:

One contributor notes the products appear left-aligned because there are only 3 items instead of 4 in the grid, suggesting either adding another product or using the provided CSS fix.

Current Status:

The solutions partially work, but create a new problem: footer menu texts (“About us”, “Contact us”, etc.) that were previously left-aligned are now centered, which the user doesn’t want. Additional CSS is provided to address margin issues, but the discussion remains unresolved regarding restoring the original footer menu text alignment while keeping other elements centered.

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

Hello,
I am facing the following issue. I want to center my product pictures and also my footer texts. As you can see the product pictures and the footer menus and texts are slightly to the left:

PabloPier_0-1719517589538.png
PabloPier_0-1719517589538.png1887Ă—904 60.1 KB

1 Like
2

Hello @PabloPier
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

3

Yes, here it is https://www.pablopier.com/

4

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

ul#Slider-template--22729342484803__featured_collection { justify-content: center !important; } .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in { text-align: center !important; } .collection__title.title-wrapper { text-align: center !important; }

techlyser_web_0-1719518914478.png
techlyser_web_0-1719518914478.png1349Ă—631 11.3 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

5

Hi @PabloPier

I check your store, the product already align into center. But on the product your lacking 1 product it must be 4 product so it level. So it showed look like in the left.

If you dont have plan to add you can check this code.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.contains-card--product {
    justify-content: center;
}
  • And save. For your footer text.
.footer-block.grid__item.scroll-trigger {
    text-align: center;
}
1 Like
6

All good just one thing. The footer texts inside the menus are not centered as they were before:

PabloPier_0-1719519584599.png
PabloPier_0-1719519584599.png1871Ă—717 12.1 KB

7

Still the same.

8

It worked but the texts inside the footer menus got re-centered:

PabloPier_0-1719520100986.png
PabloPier_0-1719520100986.png1875Ă—711 12 KB

9

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.footer-block__details-content>li:not(:last-child) { margin-right: unset !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
10

The texts like “About us”, “Contact us” etc. are not centered anymore like they used to be.

1 Like
11

Oh i centered it, as you requested.

Made4uoRibe_0-1719521124729.png