Align Footer Content to Center using Debutify

Shopify Discussion
,

Topic summary

A Shopify store owner using the Debutify theme needed help centering footer content, including text and logo elements.

Initial Problem:

  • Standard community solutions weren’t working for the Debutify theme
  • Footer content remained left-aligned

Solution Process:

  1. First CSS snippet targeted general footer content using .footer__content classes
  2. A more general fallback approach successfully centered the text but left the logo misaligned
  3. Additional CSS specifically targeting footer images resolved the remaining alignment issue

Final Working Code:

footer img, .footer img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Resolution:
The issue was fully resolved by adding custom CSS to the theme’s stylesheet (theme.css or base.css). The solution required targeting both text content and images separately due to Debutify’s specific structural layout. All footer elements are now properly centered.

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

Hi there. Can somebody please help me with a solution for aligning the footer content to the center? I am using Debutify theme, and I searched the community and tried other solutions for the problem, but none of them worked for me. It might be because of the theme I am using. My website is https://skullutopia.com

IMG_8844.jpg
IMG_8844.jpg1179Ă—2556 215 KB

1 Like
2

Hello @Yosemite98

To center the footer content in the Debutify theme, you’ll need to add some custom CSS. Debutify often uses utility classes and specific structural layouts, so the standard solutions may not always work.

Fix: Center Align Footer Content in Debutify
Follow these steps:

  1. Login to your Shopify admin panel.

  2. Go to Online Store > Themes.

  3. Click “Actions” > “Edit code” on the Debutify theme.

  4. Open the file: Assets/theme.css or Assets/base.css (the main stylesheet, depending on your Debutify version).

  5. Scroll to the bottom and add the following code:

/* Center footer content */
.footer__content {
  text-align: center;
}

.footer__content .footer__item {
  margin: 0 auto;
  display: block;
}

If your footer uses different class names (Debutify updates structure often), here’s a more general fallback:

footer, .footer {
  text-align: center !important;
}

footer * {
  margin-left: auto !important;
  margin-right: auto !important;
}
  1. Save the file and refresh your site.

you may also need to inspect your footer layout (Sections/footer.liquid) to ensure it isn’t using a grid or flex layout that overrides center alignment. If needed, I can guide you through adjusting that too.

Thank you :blush:

3

Hey @goldi07 , thanks for your reply. It partially worked, the text is aligned to center, just the logo/picture is not. I had to use the 2nd solution for more general fallback, the 1st one didn’t work.

IMG_8798.jpg
IMG_8798.jpg1290Ă—2796 240 KB

1 Like
4

Thanks for the update! Since the logo/image is still not centered, it likely needs specific targeting with CSS.

Let’s add one more snippet that targets images in the footer section and ensures they are centered regardless of container styling.

Add This CSS to Fix Logo Alignment:
In your theme CSS file (theme.css or base.css), add this below the existing code:

/* Center images in footer */
footer img,
.footer img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

This will:

. Make any img element in the footer act like a block (not inline).

. Automatically center it horizontally with margin: auto.

Once you save and refresh, the image/logo in that section should align with the rest of the centered text.

Thank you :blush:

5

That’s awesome @goldi07 it worked. Everything’s aligned now. Appreciate all your help.

1 Like
6

M glad that worked happy to help . if you need any help plz let me know

if you think i was helpful could you buy me a coffee ??

Thank you :blush: