Moving brand information to the Left with the Logo

Store Design
,

Topic summary

A user seeks help aligning their brand logo and information to the left side of the footer instead of center on their Shopify store (codexdeal.com).

Initial Solution:

  • Custom CSS code provided to left-align the footer logo and brand information
  • Solution successfully implemented

Additional Requests:

  • Bold fonts: CSS added to make header and footer menu text bold (font-weight: 600)
  • Social media duplication issue: When adding social profiles, icons appear duplicated and newsletter subscription bar becomes misaligned on both desktop and mobile views

Current Status:

  • Latest CSS fix partially resolved the problem by removing duplicate Facebook icon
  • Newsletter alignment and remaining display issues on mobile persist
  • User confirmed adding new CSS after existing code but problem not fully resolved

The discussion involves iterative CSS customizations with code snippets and screenshots demonstrating the layout issues.

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

Hello

i just want my brand information and logo to be moved to the Left side instead of the Middle in footer area

thank you

2025-04-02_0-56-05.jpg
2025-04-02_0-56-05.jpg966Ă—424 65.7 KB

3 Likes
2

Hi @Khalid10 .

Can you please share the website URL? If it’s password-protected, a password would be needed, too. It would be much easier to debug.

3

Hi @Khalid10 ,

Please send the website link, I will check it for you

4

Hello
Its codexdeal.com

5

Hi @Khalid10 ,

I checked and can’t find the logo info in the footer, did you hide it?

6

Hello

apologies for my late Response

Yes it was Hidden , now it’s visible kindly check it

thank you

7

Here’s how to achieve that:

  1. Navigate to Sales Channels → Online Store → “Customize” button → Theme settings (Gear icon on the left sidebar) → Custom CSS
  2. Add the following code:
.footer-block:only-child:last-child {
	margin: unset !important;
}

.footer-block:only-child .footer-block__brand-info {
	text-align: left !important;
}

.footer-block:only-child>.footer-block__brand-info>.footer-block__image-wrapper {
	margin-left: unset !important;
	margin-right: unset !important;
}
  1. Save (right top corner)
  2. Hard refresh the storefront

If done correctly, the result should be like this:

Screenshot_3.png
Screenshot_3.png1245Ă—800 243 KB

1 Like
8

its worked

thank you much appreciated

9

can you tell me how to Turn the font in the header and footer in BOLD

thanks

10

Hi @Khalid10 ,

Please add code CSS:

.list-menu__item {
    font-weight: 600;
}
1 Like
11

worked fine for the header and chance to make it work for the footer ?

Much appreciated

12

Hi @Khalid10 ,

Please add code:

.policies.list-unstyled {
    font-weight: 600;
}
1 Like
13

when i try to add a social

nnnnnnnnn.jpg
nnnnnnnnn.jpg1347Ă—569 112 KB

media profile i see its been duplicated and the newsletter subscription bar is displaced from the middle

14

Thats who it looks in mobile view

Screenshot_2025-04-04-10-16-33-602_com.android.chrome.jpg
Screenshot_2025-04-04-10-16-33-602_com.android.chrome.jpg1080Ă—2400 198 KB

15

Hi @Khalid10 ,

Please add code:

.footer-block__brand-info .footer__list-social.list-social {
    display: none;
}
@media screen and (min-width: 750px) {
.footer-block--newsletter {
    flex-direction: column-reverse;
    width: 100%;
}
.footer-block__newsletter {
    text-align: center;
    width: 100%;
}
.footer-block__newsletter .footer__newsletter {
    justify-content: center;
    align-items: center;
    margin: auto;
}
.footer-block__newsletter+.footer__list-social {
    width: 100%;
    justify-content: center;
}
}
16

should i add the code after the previous codes ?

.footer-block:only-child:last-child {
  margin: unset !important;
}
.footer-block:only-child .footer-block__brand-info {
  text-align: left !important;
}
.footer-block:only-child
  > .footer-block__brand-info
  > .footer-block__image-wrapper {
  margin-left: unset !important;
  margin-right: unset !important;
}
.list-menu__item {
  font-weight: 600;
}
.policies.list-unstyled {
  font-weight: 600;
}

i tried to add the new code after the previous code but still the same

17

only the duplicated facebook icon gone