Solved

How can I modify the footer on my Dawn theme website?

HELDERWRLD
Explorer
105 0 6

Hello, 
I would like to know if anyone can help me to change the footer of my website to be like the example bellow.

My website: https://diversusoficialsite.myshopify.com/

Example: https://yelirworld.com

Screenshot 2024-03-14 at 6.47.37 AM.png
They use the same theme as mine, Dawn. I would like to change the footer for mobile and desktop.

Thank you in advance.

Accepted Solutions (2)

ThePrimeWeb
Shopify Partner
1771 498 365

This is an accepted solution.

Hey @HELDERWRLD,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
@media only screen and (min-width: 990px) {
    .footer__content-top.page-width {
        display: grid !important;
        grid-template-columns: auto auto !important;
    }
    
    .footer-block--newsletter.scroll-trigger.animate--slide-in {
        flex-direction: column !important;
    }
    
    .footer-block__newsletter:not(:only-child) {
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    .footer-block__details-content>li {
        border-bottom: 1px solid #eee !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710404078873.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

ThePrimeWeb
Shopify Partner
1771 498 365

This is an accepted solution.

copy all this code from the new code

IMG_3194.jpeg


and add it after the } in the old code as shown below

 

IMG_3195.jpeg

 

if it doesn’t work, please paste a screenshot of how you pasted it.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 20 (20)

sahilsharma9515
Shopify Partner
839 100 150

Hi @HELDERWRLD I have looked out the reference site and found they are using custom theme not the dawn theme.

To achieve the same footer you need to add the custom code, as it will not just be done with CSS, you need to change the theme code and may need to add some liquid or html code as well along with CSS.

 

No- one here will be able to provide you the exact code without looking into the theme file code, but if you need base code then I can provide you, and if you need exact code then I need to look into the code files.

 

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


HELDERWRLD
Explorer
105 0 6

Hello @sahilsharma9515,

Yes, please. Anything that can help me improve the footer of my website. Can you provide it for me and help me implement?

Thank you!

ThePrimeWeb
Shopify Partner
1771 498 365

This is an accepted solution.

Hey @HELDERWRLD,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
@media only screen and (min-width: 990px) {
    .footer__content-top.page-width {
        display: grid !important;
        grid-template-columns: auto auto !important;
    }
    
    .footer-block--newsletter.scroll-trigger.animate--slide-in {
        flex-direction: column !important;
    }
    
    .footer-block__newsletter:not(:only-child) {
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    .footer-block__details-content>li {
        border-bottom: 1px solid #eee !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710404078873.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
HELDERWRLD
Explorer
105 0 6

Hello @ThePrimeWeb ,

Thank you so much, it looks good on the desktop. Can you also help to do the same for mobile? Like bellow


And also, how can i change the size of the letters of the content like "Company", etc?

IMG_2092.PNG

ThePrimeWeb
Shopify Partner
1771 498 365

Hey @HELDERWRLD,

 

Just follow the same steps above. 

 

I left a comment above the place where you can change font size to tell you where exactly it's changing. Change the 14px value to whatever you want individually for all of them. (The comments start with /* and end with */

<style>
@media only screen and (max-width: 989px) {
    footer .footer-block.grid__item {
        margin-bottom: 20px !important;
        margin-top: 0px !important;
    }
    
    footer ul.footer-block__details-content.list-unstyled {
        margin-bottom: 0;
    }
    
    footer h2.footer-block__heading.inline-richtext {
        margin-bottom: 5px;
    }
    
    
    footer .footer-block__details-content .list-menu__item--link {
        padding-top: 10px !important;
        padding-bottom: 5px !important;
        border-bottom: 1px solid #eee
    }
    
    /* Links under the bold titles*/
    footer .footer-block__details-content .list-menu__item--link {
        font-size: 14px !important;
    }
    
    /* The bold titles (Company, etc)*/
    footer h2.footer-block__heading.inline-richtext strong {
        font-size: 14px !important;
    }
    
    /* The Sign up for pre-access thing (Newsletter) */
    footer h2.footer-block__heading.inline-richtext {
        font-size: 14px !important;
    }
    
    /* Country/region and language titles*/
    footer .caption-large.text-body {
        font-size: 14px !important;
    }    
}

</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
HELDERWRLD
Explorer
105 0 6

I have to add this code or the code is already there and i just have to change it?

If i have to add, should i remove the other and add this one or add this one bellow the other one?

 

 

ThePrimeWeb
Shopify Partner
1771 498 365

Don't need to remove the other one, the other one is for desktop, this one is for mobile. 

 

Just paste it below the <head> tag as you did before, don't need to worry about the other one.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
HELDERWRLD
Explorer
105 0 6

I tried and it didn't work.

Also can't changethe size on Desktop.

 

IMG_2094.PNG

ThePrimeWeb
Shopify Partner
1771 498 365

Can you screenshot and show me how you pasted the code?

 

Also is this a draft theme? The code I gave you was tested on the live theme. I cannot guarantee it working on your draft. If you need me to look at the draft then send me a preview link for it. Thanks

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
HELDERWRLD
Explorer
105 0 6

Screenshot 2024-03-14 at 9.44.36 AM.pngScreenshot 2024-03-14 at 9.44.50 AM.png

ThePrimeWeb
Shopify Partner
1771 498 365

You shouldn’t have 2 </style> tags here. Remove one
IMG_3192.jpeg

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
HELDERWRLD
Explorer
105 0 6

I already removed, but it still doesn't workScreenshot 2024-03-14 at 9.56.30 AM.pngScreenshot 2024-03-14 at 9.56.43 AM.png

ThePrimeWeb
Shopify Partner
1771 498 365

Are you working on a different theme or the live one?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
HELDERWRLD
Explorer
105 0 6

The live one

ThePrimeWeb
Shopify Partner
1771 498 365

The changes are already there,

 

see the lines below each link and all. The code added all that. Please check incognito in case your browser cached the old site

IMG_3193.jpeg

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
HELDERWRLD
Explorer
105 0 6

Yes, i saw it now, sorry!

But i can't change the size on the desktop?

ThePrimeWeb
Shopify Partner
1771 498 365

This is an accepted solution.

copy all this code from the new code

IMG_3194.jpeg


and add it after the } in the old code as shown below

 

IMG_3195.jpeg

 

if it doesn’t work, please paste a screenshot of how you pasted it.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
HELDERWRLD
Explorer
105 0 6

Thank you so much @ThePrimeWeb, it worked really well.

Sorry for asking so much, but can you help in a few more things i would like to fix?

ThePrimeWeb
Shopify Partner
1771 498 365

My contact is in the signature below

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
HELDERWRLD
Explorer
105 0 6

Hello @ThePrimeWeb 
It's something small.

I would like to know how can i change the Hamburger Menu on Mobile and Desktop so when people are opening the categories, it just goes bellow and they can still see the rest of it, like the example bellow.

Screenshot 2024-03-07 at 8.33.41 PM.png