How can I add a CTO button to my website footer?

[rosa18]

Hello,

 I'm trying to add two buttons to my footer, but I'm not sure if I'm doing things right.. My current theme is the 'Blockshop' and my footer looks like this:

As you can see I have added three blocks: two Menus and one About&copyright, and the red rectangles show where I need to add the buttons. I need two simple button like the followings: 

Could you help me please?

Thanks in advance

[GemPages]

Hello @rosa18 

I would like to give you the recommendation to support you so kindly follow steps below:

1. Go to your Online store > Themes > Edit code
2. Open your footer.liquid file
3. Find the position that you want and paste the below code (change the button link):

<a href="link" style="border:solid 1px #000000; padding:5px;">READ FAQ</a>
<a href="link" style="border:solid 1px #000000; padding:5px;">MORE</a>

I hope the above is useful to you.
Best regards,
GemPages Support Team

[rosa18]

Hello GemPages,

and thank you very very much for your prompt response. 

My problem is that in the footer.liquid file, I can't recognise the position I'll paste the code that you provided me (thanks for that!)

The code in the footer.liquid file is the following (sorry for the format):

{%- liquid
assign newsletter_placeholder_t = 'layout.footer.newsletter_placeholder' | t
assign newsletter_button_t = 'layout.footer.newsletter_button' | t
assign navigation_t = 'layout.footer.navigation' | t
assign shopify_disclaimer_t = 'shopify.online_store.spam_detection.disclaimer_html' | t

assign block_count = section.blocks.size
assign locale_enabled = false
assign region_enabled = false

if section.settings.show-region-selector and localization.available_countries.size > 1
assign region_enabled = true
endif

if section.settings.show-locale-selector and localization.available_languages.size > 1
assign locale_enabled = true
endif

assign button_type = 'button'
assign button_contrast = settings.bg-color--footer | color_contrast: settings.bg-color--button
if button_contrast < 4.5
assign button_type = 'inverted-button'
endif

assign alt_link_hover = false
assign link_hover_color = settings.color--body | color_lighten: 19
assign link_hover_contrast = settings.bg-color--footer | color_contrast: link_hover_color
if link_hover_contrast < 4.5
assign alt_link_hover = true
endif
-%}

<footer
class="footer--root"
data-section-id="{{ section.id }}"
data-section-type="footer"
data-alt-link-hover="{{ alt_link_hover }}"
>
<div class="footer--blocks">
{% for block in section.blocks limit: block_count %}

{% case block.type %}
{% when 'about' %}
{%- liquid
assign show_social = false

if settings.social--facebook--url.size > 0 or settings.social--twitter--url.size > 0 or settings.social--tiktok--url.size > 0 or settings.social--instagram--url.size > 0 or settings.social--pinterest--url.size > 0 or settings.social--vimeo--url.size > 0 or settings.social--youtube--url.size > 0
assign show_social = true
endif

if block.settings.subscribe--show-social-icons == false
assign show_social = false
endif
-%}

<div class="footer--block" data-block-type="about" {{ block.shopify_attributes }}>
<div class="footer--block--container">
{% if block.settings.about-title != blank %}
<div class="footer--block--heading" data-item="block-heading">
{{ block.settings.about-title | escape }}
</div>
{% endif %}

<div class="footer--block--body">
{% if block.settings.text != blank %}
<div class="footer--about-text" data-item="rte-content">
{% assign current_year = 'now' | date: '%Y' %}
{{ block.settings.text | replace: '[current_year]', current_year }}
</div>
{% endif %}

{% if show_social %}
<div class="footer--social-icons">
{% render 'social-follow' %}
</div>
{% endif %}
</div>
</div>
</div>

{% when 'menu' %}
<div class="footer--block" data-block-type="menu" {{ block.shopify_attributes }}>
<div class="footer--block--container">
{% if block.settings.menu-title != blank %}
<div class="footer--block--heading" data-item="block-heading">
{{ block.settings.menu-title | escape }}
</div>
{% endif %}

<div class="footer--block--body" role="navigation" data-item="paragraph">
{% if linklists[block.settings.menu].links.size > 0 %}
{% assign footer_nav = block.settings.menu %}

<ul
class="footer--menu"
aria-label="{{ navigation_t }}"
>
{% for link in linklists[footer_nav].links %}
<li>
<a href="{{ link.url }}" title="{{ link.title }}">
{{ link.title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</div>

{% when 'subscribe' %}
<div class="footer--block" data-block-type="subscribe" {{ block.shopify_attributes }}>
<div class="footer--block--container">
<div class="footer--subscribe">

{% if block.settings.subscribe--show-newsletter or show_social %}
{% if block.settings.newsletter--heading != blank %}
<div class="footer--block--heading" data-item="block-heading">
{{ block.settings.newsletter--heading }}
</div>
{% endif %}
{% endif %}

<div class="footer--block--body">
{% if
block.settings.subscribe--show-newsletter or
settings.popup--newsletter--enabled
%}
<div
id="mailing-list-module"
{%-
if block.settings.subscribe--show-newsletter == false and
settings.popup--newsletter--enabled
-%}
style="display:none;"
{%- endif -%}
>
{% if block.settings.newsletter--info != blank %}
<div class="footer--subscribe--info" data-item="rte-content">
{{ block.settings.newsletter--info }}
</div>
{% endif %}

{% form 'customer', id: 'footer_form' %}
{% if form.errors %}
<p class="error feedback">
{% for field in form.errors %}
{{ field }} {{ form.errors.messages[field] }}
{% endfor %}
</p>
{% endif %}

<div class="footer--form-container">
<input type="hidden" name="contact[tags]" value="newsletter" />
<input
type="hidden"
name="contact[first_name]"
value="Newsletter"
/>
<input
type="hidden"
name="contact[last_name]"
value="Subscriber"
/>
<label for="footer-email" data-item="hidden-text">
{{ newsletter_placeholder_t }}
</label>
<input
class="small"
id="footer-email"
type="email"
autocomplete="email"
placeholder="{{ newsletter_placeholder_t }}"
name="contact[email]"
/>
<div class="footer--form-submit" data-item="{{ button_type }}">
<button type="submit" value="{{ newsletter_button_t }}">
{{ newsletter_button_t }}
</button>
</div>
</div>

{% if form.posted_successfully? or form.errors %}
<script>window.location.hash = '#feedback-bar--newsletter';</script>
{% endif %}

<div data-item="hidden-text">
{% comment %} remove the below line to display reCAPTCHA badge {% endcomment %}
{{ shopify_disclaimer_t }}
</div>
{% endform %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endcase %}
{% endfor %}

{% if section.blocks.size == 0 %}
{% render 'no-blocks' %}
{% endif %}
</div>

<div class="footer--sub">
{% if locale_enabled or region_enabled %}
<div class="footer--sub--block" data-type="localization">
<div class="footer--sub--container">
{% render
'localization',
locale_enabled: locale_enabled,
region_enabled: region_enabled,
id: 'footer'
%}
</div>
</div>
{% endif %}

{% assign powered_check = powered_by_link | split: '>' %}
{% if powered_check[1] != ' </a' %}
<div class="footer--sub--block" data-type="powered-by">
<div class="footer--sub--container" data-item="paragraph">
<span class="footer--sub--shopify-link">{{ powered_by_link }}</span>
</div>
</div>
{% endif %}

{% unless shop.enabled_payment_types == empty %}
{% if section.settings.show-payment-icons %}
<div class="footer--sub--block" data-type="payment-icons">
<div class="footer--sub--container">
{% render 'payment-icons' %}
</div>
</div>
{% endif %}
{% endunless %}
</div>
</footer>

{% schema %}
{
"name": "Footer",
"class": "section--footer",
"max_blocks": 3,
"settings": [
{
"type": "header",
"content": "Country/region Selector",
"info": "To add a country/region, go to your [payment settings](/admin/settings/payments)."
},
{
"type": "checkbox",
"id": "show-region-selector",
"label": "Show country/region selector",
"default": true
},
{
"type": "header",
"content": "Language Selector",
"info": "To add a language, go to your [language settings](/admin/settings/languages)."
},
{
"type": "checkbox",
"id": "show-locale-selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Payment logos"
},
{
"type": "checkbox",
"id": "show-payment-icons",
"label": "Enable",
"default": true
}
],
"blocks": [
{
"type": "about",
"name": "About and copyright",
"settings": [
{
"type": "text",
"id": "about-title",
"label": "Title",
"default": "About the store"
},
{
"type": "richtext",
"id": "text",
"label": "Description and copyright",
"default": "<p>[current_year] © Your brand name here.<br><br>A brief store summary, tagline, or vision statement.<p>",
"info": "Inserting the text '[current_year]' will automatically insert the current year."
},
{
"type": "checkbox",
"id": "subscribe--show-social-icons",
"label": "Show social icons",
"default": true
}
]
},
{
"type": "menu",
"name": "Menu",
"settings": [
{
"type": "text",
"id": "menu-title",
"label": "Title",
"default": "Quick links"
},
{
"type": "link_list",
"id": "menu",
"label": "Menu",
"default": "footer",
"info": "This menu won't show submenu items."
}
]
},
{
"type": "subscribe",
"name": "Subscribe",
"settings": [
{
"id": "newsletter--heading",
"label": "Newsletter heading",
"type": "text",
"default": "Newsletter"
},
{
"id": "newsletter--info",
"label": "Newsletter information",
"type": "richtext",
"default": "<p>Be the first to receive updates on new arrivals, special promos and sales.</p>"
},
{
"type": "checkbox",
"id": "subscribe--show-newsletter",
"label": "Show newsletter",
"default": true
}
]
}
]
}
{% endschema %}

Could you please help me by showing me where in the code of footer.liquid I should paste the code you provided me, so that the buttons appear in the following places?

Thanks in advance!

[Alighouri]

Hi,

i want to add a button on footer like track my order in orange colour background how can i do this please tell me