Solved

How To Add A Text Block At Bottom Of Shopify Footer On Sense Theme

Tomerp900
Shopify Partner
11 0 4

I want to add an FDA disclaimer at the bottom of my footer, here is an example of how I want it to look like: 

Tomerp900_0-1691265862413.png

Can somebody please help?

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
5127 1223 1497

This is an accepted solution.

Can you try this one for mobile. Paste it on the section-footer.css. 

.footer__content-bottom.scroll-trigger.animate--slide-in {
    margin-top: 10%;
}
@media only screen and (max-width: 796px) {
.footer__content-bottom.scroll-trigger.animate--slide-in {
    margin-top: 30%;
}
.footer-block__details-content.footer-block-image.center {
    margin-bottom: 0px;
}

.footer-block.grid__item.scroll-trigger.animate--slide-in {
    margin: 0px;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    margin-bottom: 0px;
}
}

@media only screen and (max-width: 534px){
.footer__content-bottom.scroll-trigger.animate--slide-in {
    margin-top: 60%;
}
ul.footer-block__details-content.list-unstyled {
    margin-block: auto;
}
}

I hope it help. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 13 (13)

Made4uo-Ribe
Shopify Partner
5127 1223 1497

Hi @Tomerp900 ,

Yes we can add like that, Would you mind to share your Store URL website? with password if its protected. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Tomerp900
Shopify Partner
11 0 4

My website is: https://gummyglows.com/

Password: riatsugummy

Thank you for your help, please let me know if you have any idea how to solve it 🙂

Made4uo-Ribe
Shopify Partner
5127 1223 1497

Thank you for the information. Try thi one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.

 

.footer__content-top.page-width:after {
    content: "Disclaimer: Where I'll position myself?"
}

 

  • Result:
  • Ribe_Dagandara_0-1691399860372.png

    I hope it help.

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Tomerp900
Shopify Partner
11 0 4

Thank you very much, it worked!

Do you know how can I make the text smaller and add a white border around the text like this example:

Discliamer.png


Made4uo-Ribe
Shopify Partner
5127 1223 1497

Yes, Im just waiting for you to reply so we can add more design. 

.footer__content-top.page-width:after {
    content: "\2020These statements have not been evaluated by the Food and Drug Administration. This product is not intended to diagnose, treat, cure or prevent any disease. The views and nutritional advice expressed by GummyGlows are not intended for the purpose of providing medical advice. Please always consult your health care provider if you are taking any medications or have any medical conditions. Individual results may vary.";
    position: absolute;
    font-size: 12px;
    border: 1px solid white;
    padding: 10px;
    margin-right: 10%;
}
.footer__content-top.page-width {
    margin-bottom: 10%;
}

Result:

Ribe_Dagandara_0-1691409712293.png

Youll put this one in the mobile also? This will go down on the mobile screen. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Tomerp900
Shopify Partner
11 0 4

WOW! it's perfect, thank you so much!

It looks perfect on desktop but as you said it doesn't work on mobile
Do you know how we can fix it on mobile?

Made4uo-Ribe
Shopify Partner
5127 1223 1497

This is an accepted solution.

Can you try this one for mobile. Paste it on the section-footer.css. 

.footer__content-bottom.scroll-trigger.animate--slide-in {
    margin-top: 10%;
}
@media only screen and (max-width: 796px) {
.footer__content-bottom.scroll-trigger.animate--slide-in {
    margin-top: 30%;
}
.footer-block__details-content.footer-block-image.center {
    margin-bottom: 0px;
}

.footer-block.grid__item.scroll-trigger.animate--slide-in {
    margin: 0px;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    margin-bottom: 0px;
}
}

@media only screen and (max-width: 534px){
.footer__content-bottom.scroll-trigger.animate--slide-in {
    margin-top: 60%;
}
ul.footer-block__details-content.list-unstyled {
    margin-block: auto;
}
}

I hope it help. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Tomerp900
Shopify Partner
11 0 4

Thank you very much for your help, you are the best, it's perfect! 🙂

craveablesocial
Shopify Partner
2 0 1

This was super helpful! Exactly what i needed as well. I used the code provided and it worked, however, I'm having issues with adding a space between the disclaimer and the newsletter signup. Any suggestions?

Screenshot 2024-01-09 at 09.35.03.png

Made4uo-Ribe
Shopify Partner
5127 1223 1497

Add padding below the newsletter email input or above the disclaimer. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


craveablesocial
Shopify Partner
2 0 1

Thanks! it worked. 🙂

pawankumar
Shopify Partner
408 39 70

Hi @Tomerp900 
I hope you are doing well.
You can add a section by clicking "Add section" in footer from shopify customizer and you can set that section above or below the footer
See attached screenshot:

 
 

sense-theme-footer-section.png
Please check
If you need more customized one or need in between block or section than you will require some knowledege of editing liquid files.
Thanks!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan
Tomerp900
Shopify Partner
11 0 4

Yes, Im well aware that I can add a section, the problem is that it doesn't look like I want it to look, you can check the example I sent, I want the disclaimer to be in the footer not below or above the footer