Solved

How to add a text block at bottom of Shopify footer on Debut theme

TScan07
Excursionist
27 0 4

I'm looking to add text below my footer and above the payment icons that would span the entire page. I know that this would be in Sections>Footer.liquid but I don't know where to add it and where to edit the code. Can somebody please help?

Accepted Solution (1)

Olivia
Shopify Staff
1678 144 294

This is an accepted solution.

Hey, @TScan07!

Olivia here from the Shopify team. I'd be glad to help you out with this, so let's dive in.

Steps:

  1. Head to Admin > Online Store > Themes > Customize > Edit code
  2. Open Sections > footer.liquid template
  3. Scroll until you find the following line of code, on or around line 234 depending on your theme version:
    {%- assign socials = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo" | split: ' ' -%}​
  4. Insert your desired text after this code ends, being careful not to break it. Make sure to add <p> before your text, and </p> at the end of your text to close the code. It should look like this:
    {%- assign socials = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo" | split: ' ' -%}
    <center><p> Add your desired text </p>
      <div class="page-width">​

    Tip: Using the <center> tags will also help keep your text centered. 

    It will look like this:
    02-34-myrcn-tdqky
  5. Remember to replace the placeholder text with what you want to display and hit save

That should work, but let me know if you have other questions around this.

 

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 27 (27)

Olivia
Shopify Staff
1678 144 294

This is an accepted solution.

Hey, @TScan07!

Olivia here from the Shopify team. I'd be glad to help you out with this, so let's dive in.

Steps:

  1. Head to Admin > Online Store > Themes > Customize > Edit code
  2. Open Sections > footer.liquid template
  3. Scroll until you find the following line of code, on or around line 234 depending on your theme version:
    {%- assign socials = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo" | split: ' ' -%}​
  4. Insert your desired text after this code ends, being careful not to break it. Make sure to add <p> before your text, and </p> at the end of your text to close the code. It should look like this:
    {%- assign socials = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo" | split: ' ' -%}
    <center><p> Add your desired text </p>
      <div class="page-width">​

    Tip: Using the <center> tags will also help keep your text centered. 

    It will look like this:
    02-34-myrcn-tdqky
  5. Remember to replace the placeholder text with what you want to display and hit save

That should work, but let me know if you have other questions around this.

 

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

TScan07
Excursionist
27 0 4

Thank you SO much! That did work! Is there a way to have it span less of the page instead of the full width? My text is quite long.

TScan07
Excursionist
27 0 4

I also need to translate it since my site is bilingual.

Olivia
Shopify Staff
1678 144 294

Thanks for your reply, @TScan07.

You can definitely split the text up onto separate lines, or break up the text with line breaks using the code <br>.

If you're using an app to translate text on your webpage, that should translate this area too, or you can hardcode translated text (same as the english text) as well.

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

aart2000
Excursionist
26 0 6

This was a little helpful, but I'm using Supply Theme and don't see the exact code you are referring to. Where do I add a short line for Supply?

Olivia
Shopify Staff
1678 144 294

Hi, @aart2000!

 

Thanks for reaching out. The code for Debut is much different than Supply, so I would recommend placing your desired text on or around line 194 depending on your theme version. Just be sure not to break any existing blocks of line code.

 

Let me know if that helps,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Olivia
Shopify Staff
1678 144 294

Just following up again, @aart2000!

 

Please let me know if the suggested alternative worked for you.

 

I look forward to your reply,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

aart2000
Excursionist
26 0 6

Yes, thank you. I worked perfectly.

Olivia
Shopify Staff
1678 144 294

I'm so glad to hear that, @aart2000!

 

I appreciate you following up and sharing that for our future readers.

 

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Snow_Wolf
Explorer
57 0 14

Hi @Olivia your solution worked perfectly for me. The only thing is that the footer is tall enough as is, so I would prefer to have the text inserted on the same line as the media icons rather than below. Any help would be much appreciated!

Screenshot 2022-10-04 222923.png

Olivia
Shopify Staff
1678 144 294

Thanks for getting in touch, @Snow_Wolf!

 

Can you clarify which theme and version you are currently using?

 

Thank you,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Snow_Wolf
Explorer
57 0 14

Hello @Olivia I really appreciate you following-up on this. I am using the Refresh theme ( "theme_version": "1.0.0"). Store URL is www.eoleaf.com (PW: GreenerHealth).

 

Olivia
Shopify Staff
1678 144 294

Thank you for getting back to me, @Snow_Wolf.

 

The code in this tutorial is specifically designed for Debut, though it may still be applicable to some of our other vintage themes. The difference with our newer themes, such as Refresh, is that it is built for the Online Store 2.0.

 

This makes the code vary largely, as other considerations need to be made. In this case I recommend opening a new thread with your question for exposure and feedback from our community members and code experts.

 

Please let me know if you have other questions about this.

 

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

anism86
Tourist
3 0 1

That's awesome. Thanks Olivia. How do I change make the desired text a heading? I would like to have a consistent look.

Olivia
Shopify Staff
1678 144 294

I'm so glad I could help, @anism86!

 

To change the desired text to a heading, simply use the heading tags before and after the text like so:

<h1> insert text here </h1>

 

If you need a different heading style, then make sure to adjust the 1 in the code above to the correct heading style number. 

 

I trust that helps,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

carabrooke
Visitor
1 0 0

What about with theme craft?

 

Olivia
Shopify Staff
1678 144 294

Hi, @carabrooke!

 

Thank you for reaching out.

 

The theme Craft is also one of the newer Online Store 2.0 themes, which is why the code advice in this tutorial will not apply. Please open a new thread with your question to get code advice and feedback from our experts.

 

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

zoolab
Visitor
1 0 0

Hi Olivia, 
I was wondering if it's possible to do the same with Dawn Theme? Thanks in advance 🙂

Olivia
Shopify Staff
1678 144 294

Hi, @zoolab!

 

Thanks so much for reaching out. Ah, Dawn is a beautiful theme and certainly one of my favorites. It also falls under the Online Store 2.0 themes umbrella, it is in fact the first one we introduced with the new design, so this code tutorial will not apply.

 

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

liquiduniverse
Tourist
3 0 1

hi Olivia, 

 

What if I want to add text in Sense theme? the code is different and I don't know where to add the code. Thanks

Olivia
Shopify Staff
1678 144 294

Hi, @liquiduniverse!

 

As per the Sense theme documentation it is also an Online Store 2.0 theme so this code tutorial does not apply.

 

Please feel free to open a new forum post with your question for code advice.

 

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

theindimums
New Member
4 0 0

hi Olivia,

I went through your code suggestions in the previous post. We wish to add SEO keywords in our footer. Can we do it in this fashion with the codes you have shared? if yes, we would like to reduce the font size and provide some margins on the side, how to get that?

additionally, are there better ways to add seo keywords in the footer?

 

Olivia
Shopify Staff
1678 144 294

Hi, @theindimums.

 

Within Shopify there's four different ways to add keywords to improve Search Engine Optimization. These areas include:

  • page titles
  • meta descriptions
  • ALT tags
  • a page’s body content

The way to add keywords to each of these areas will be different and are thoroughly described in this help manual. This is different than adding them into your footer, however, will also be much more effective and personalized throughout your site for Google and other search engines to crawl.

 

Let me know if that helps,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

jakegrieveson
Explorer
123 0 16

Hey i am on the dawn theme, is there any way to make the footer text smaller?

Olivia
Shopify Staff
1678 144 294

Thanks for joining our thread. @jakegrieveson!

 

Dawn is one of our newer themes built for the Online Store 2.0. As this thread is regarding code changes on the vintage Debut theme the same instructions will not apply.

 

Please open a new thread with your question for visibility from our community members and I trust they will be able to guide you in the right direction.


Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

mattwaller9
Tourist
6 0 4

Hi Olivia! I am having this issue, I tried to implement your fix, however I can't find the first line of code you mention? I am using the theme called 'Dawn'.

Olivia
Shopify Staff
1678 144 294

Thanks for reaching out, @mattwaller9!

 

Just in case you missed it, my latest comment in this thread mentions that these theme instructions do not apply to newer Online Store 2.0 themes such as Dawn. As such, you can certainly start a new thread with your question for visibility across the board.

 

Furthermore I have updated the original solution to make it easier for our readers to see that.

 

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog