Shopify themes, liquid, logos, and UX
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
They use the same theme as mine, Dawn. I would like to change the footer for mobile and desktop.
Thank you in advance.
Solved! Go to the solution
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.
This is an accepted solution.
copy all this code from the new code
and add it after the } in the old code as shown below
if it doesn’t work, please paste a screenshot of how you pasted it.
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
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!
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.
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?
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>
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?
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.
I tried and it didn't work.
Also can't changethe size on Desktop.
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
You shouldn’t have 2 </style> tags here. Remove one
I already removed, but it still doesn't work
Are you working on a different theme or the live one?
The live one
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
Yes, i saw it now, sorry!
But i can't change the size on the desktop?
This is an accepted solution.
copy all this code from the new code
and add it after the } in the old code as shown below
if it doesn’t work, please paste a screenshot of how you pasted it.
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?
My contact is in the signature below
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.
Hello @ThePrimeWeb
Something happened to my footer on desktop and i don't know what, but my newsletter changed positions. Can you please help me fix it?
Website: diversusoficial.com
Pass: diversusoficial
It was like this:
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024