Debut Theme Questions

Highlighted
Tourist
6 0 2

1. Is there a way to change the links in the footer to show in a column verses across in a line?

2. Is there a way to add an option in the header bar for "search", "Account" and "Cart"?

3. Is there a way to add social media icons/links in the footer

 

Thanks!

Stacey

0 Likes
Highlighted
Shopify Partner
61 5 13

Hi Stacey,

 

Welcome to the Shopify Community Forums!

I hope this helps:

1. In your Theme, select Edit Code. Then from the list on the left hand side, find the "Sections" section and there will be a file called "footer.liquid". In that file, use the Find tool bar, (Cmd-F if you are on a Mac) and search for "{% if inline_list %}list--inline{% endif %}" when you find it, just remove that bit of code. Your links will now always show up in a column.

2. On my Debut, there is a Search and Cart link already there, they are the magnifying glass and shopping bag, are you looking for something else?

3. The links to your socials will show up once you've set your liks in the Theme settings. Go to "Customise Theme" and at the top of the left hand bar there is an option called "Theme Settings". Go to the Social Media option and add in the links to your socials. When you save the Theme you'll have the links in the Footer!

Good luck!

Was this helpful? Press like!
Did it fix the problem? Mark it as the solution for others!
Buy me a beer? Well, sure!
0 Likes
Highlighted
Tourist
6 0 2
Thank you! I see the account and cart icons now! The social media icons
also show at the very bottom, I had missed those. Do you know if there is a
way to add them in the footer in the empty space between the links and
newsletters?


[image: image.png]
1 Like
Highlighted
Shopify Partner
61 5 13

Hi Stacey,

Yes there is. Follow these steps and you'll end up looking something like the image below. A couple of things to keep in mind, if you use this method you won't be able to use the 'text' function in any other part of your footer, but if this is the look you want then thats probably not a big deal. Also, the more icons you have the list may not automatically wrap around, so it might look weird if you have too many social links.

BStubbs_0-1599625931051.png

1. Go to your theme and select Customise.

2. From the sidebar on the left, scroll to the bottom and click Footer

3. Again scroll to the bottom and find the bit titled Content, at the bottom there is a button called Add Content. Click it and select "Text".

4. Drag that new text box up so that it sits between the Quick links and Newsletter. Now change the title of the new Text to be blank. Don't worry about any text in that box. Dont forget to click Save at the top right.

5. Bottom left again, click Theme Actions > Edit Code.

6. Find the Footer.Liquid file, it will be under Sections.

7. On line 234 of this file, or near to it, there should be a tag that says:

{%- assign socials = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo" | split: ' ' -%}

You want to copy that line and paste it up near the first <div> tag.

8. Next, use the search function to find 'block.settings.text'. There should be two entries for it. Go to the first one in the file. 

9. Immediately below that first reference, there will be a <div>, replace that with the following code:

 

<ul class="list--inline site-footer__social-icons social-icons site-footer__icon-list">
                  {%- for social in socials -%}
                    {%- assign social_link = social | prepend: 'social_' | append: '_link' | downcase -%}
                    {%- assign icon_link = social | prepend: 'icon-' | downcase -%}
                    {%- if settings[social_link] != blank -%}
                <li class="social-icons__item">
                  <a class="social-icons__link" href="{{ settings[social_link] | escape }}" aria-describedby="a11y-external-message">
                    {%- include icon_link -%}
                    <span class="icon__fallback-text">{{ social }}</span>
                  </a>
                </li>
              {%- endif -%}
            {%- endfor -%}

            {%- if request.page_type == 'blog' or request.page_type == 'article' -%}
              <li>
                <a class="social-icons__link" href="{{ shop.url }}{{ blog.url }}.atom">
                  {% include 'icon-rss' %}
                  <span class="icon__fallback-text">RSS</span>
                </a>
              </li>
            {%- endif -%}
          </ul>

 

10. Save the file.

11. Ok, you should now be good to go, if you want to remove the icons from the very bottom of the page, follow the next two steps.

12. Search for 'if social_icons' and idenitify the IF and corresponding ENDIF statements.

13. Select all the code between the IF and ENDIF and delete. Save the file and then the Social media icons will appear next to the links, and not at the bottom of the page.

Was this helpful? Press like!
Did it fix the problem? Mark it as the solution for others!
Buy me a beer? Well, sure!
0 Likes