Debut theme desktop only - centering 'powered by shopify' and centering social media icons.

Shopify Discussion

Topic summary

A user seeks to center the ‘Powered by Shopify’ text and social media icons in the Debut theme for desktop view only.

Solutions Provided:

Three community members offered CSS-based fixes:

  • Solution 1: Insert CSS code in theme.liquid file above the </head> tag
  • Solution 2: Add CSS to the end of theme.scss.css file targeting footer grid items and icon lists
  • Solution 3: Add media query CSS to theme.scss.css for screens 750px+ wide, centering footer alignment and social icons

Outcome:

The user confirmed one solution worked successfully and marked it as resolved. All solutions involve accessing Shopify Admin → Online Store → Themes → Edit Code and adding custom CSS.

Follow-up:

The user asked about addressing a separate issue with desktop photos being incorrectly cropped and inconsistently sized, requesting guidance on making images properly sized and consistent. A responder invited them to provide details about this new settings issue.

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

For debut theme desktop only, I am trying to center ‘powered by shopify’ and center social media icons.

Thank you!

1 Like
2

Hi @Bonimoto ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1723098907482.png
BSSCommerceHDL_0-1723098907482.png844×452 16.2 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.scss.css.
Step 3. Add this code to the end of file

#shopify-section-footer > footer .grid__item.small--one-whole,
#shopify-section-footer > footer .site-footer__icon-list {
   text-align: center!important;
}

Result:

BSSCommerceB2B_0-1723099057825.png
BSSCommerceB2B_0-1723099057825.png1106×998 21.2 KB

If it helps you, please like and mark it as the solution.

Best Regards

4

Hello @Bonimoto
Go to online store ---------> themes --------------> actions ------> edit code------->theme.scss.css
add this code at the end of the file.

@media only screen and (min-width: 750px) {
.site-footer__social-icons {
padding-top: 7.5px;
text-align: center !important;
}
}
@media only screen and (min-width: 750px) {
.site-footer-item-align-right {
text-align: center !important;
}
}

result

3.png
3.png837×429 13.6 KB

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

5

This code worked! Thank you. Can I reply here for another setting issue I have? It involves the photos on the website. The desktop photos get cropped for some reason and I would like the photos to be correctly sized and consistent.

6

Thanks for accepting the solution.
Please hit the like button also.

Yes sure, please you can provide the other seetings issue details here.

1 Like