Footer Adjustments

[CreatorTim]

Hi guys, I need help with some footer adjustments.

1. I’d like to move the entire top section (the columns and newsletter) to the right, and on the far left, I want to place the store logo.

2. I’d like to make the text slightly more prominent. Specifically:

   • The section headings (“Store” and “Legal”) should be in uppercase and more bold.
   • The links under these headings should have a subtle emphasis.

Here’s how it currently looks on my store:

Here’s how I’d like it to look:

My store URL: https://1049xn-ya.myshopify.com/

Here’s the reference store for the desired style: https://tomnoske.store/

Thanks for any help,
Tim

[AnneLuo]

Hi, @CreatorTim

I can help you with it. But it needs to add some custom code. If you need my help, please let me know.

[DaisyVo]

Hi @CreatorTim

For the logo, you can add an image block in this section and then upload your logo image to display it.

Here is the code to make it bold and capital

.footer__blocks-wrapper.grid> .footer-block.grid__item.footer-block--menu > h2.footer-block__heading.inline-richtext {
    font-weight: bold !important;
    text-transform: uppercase !important;
}

Please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.
   Here is the result:
   
   

I hope this helps

Best,

Daisy

[CreatorTim]

Hey, thanks for the feedback! I’ve applied your suggestions, and it looks better. However, I’d still like to make a few adjustments. I’d like to move the entire footer (the columns and the newsletter) more to the right to make it wider. Right now, it looks a bit odd, being too far to the left with nothing on the right.

This is how it looks now:

And this is how I’d like it to look:

My store URL: https://1049xn-ya.myshopify.com/

Here’s the reference store for the desired style: https://tomnoske.store/

Thanks for your help.
Tim

[DaisyVo]

HI @CreatorTim

You can try 3 options here to see which one suites your need

Option 1:

.footer__content-top.page-width {
    justify-content: end;
}

Option 2:

.footer__content-top.page-width {
    justify-content: center;
}

Option 3:

@media screen and (min-width: 768px){
.footer__content-top.page-width .footer-block--newsletter {
    width: 25%;
}
.footer__content-top.page-width .footer__blocks-wrapper.grid {
    width: 65% !important;
}
}

Please give it a try and let me know if it works, add it in the same positon as the previous code

Best,

Daisy

[CreatorTim]

Hi, thank you! The third option works great!

I just have a few final adjustments I’d like to make:

1. Move the bottom section higher, like in the picture:

   

2. Make the headings (STORE, LEGAL, NEWSLETTER) bold.

3. Set the text under the “Store” and “Legal” columns to the same size as the text that says “Stay up to date with the new collections, products, and exclusive offers.” And slightly emphasize it—don’t make it bold, just a little more noticeable, maybe by simply making it white.

Thank you so much, I really appreciate your help!
Tim

[DaisyVo]

Hi @CreatorTim

To ensure that other users can find appropriate answers when searching for similar questions on the community, I will address your requests within your original goal. If this resolves your issue, I will be grateful if you mark our answer as the solution.

If you have another question, feel free to create a new thread and tag me. I’ll take a look and do my best to assist.

Best,

Daisy

[CreatorTim]

Okay, I created a new thread, please check it out here: https://community.shopify.com/c/shopify-design/footer-adjustments/td-p/2887913