Hello Everyone!
I am using the Savor theme on my Shopify store. I want to create a footer section similar to the one shown in this image. Specifically, I would like to add currency and language selectors above the ‘Terms of Service’ text. Additionally, I want to place the social media icons on the right side of the footer. Please help me. Thanks.
Store: https://svelteclothes.myshopify.com/
password: Admin
Savor(Horizon) is very flexible, but to add a country/language selector one needs to borrow code from the theme header section.
Here is the configuration:
And here is the code for “Custom liquid” block:
{% assign show_country = true %}
{% assign show_language = true %}
{% assign show_flag = true %}
{% # set the above to match your setup %}
<dropdown-localization-component
class="dropdown-localization "
>
<button
type="button"
class="button dropdown-localization__button localization-selector header-actions__action"
aria-expanded="false"
aria-controls="dropdown-localization-results"
ref="button"
on:click="/toggleSelector"
>
{% if show_country %}
{% if show_flag %}
{% liquid
assign background_brightness = section.settings.color_scheme.settings.background | color_brightness
if background_brightness < 64
assign shadow_size = 4
else
assign shadow_size = 2
endif
%}
<span
class="icon-flag"
style="
background-image: url({{- localization.country | image_url: width: 32 }});
--size-shadow: 4px;
--color-shadow: rgb(var(--color-foreground-rgb) / var(--opacity-30-60));
"
></span>
{% endif %}
<span
class="currency-code"
data-testid="localization-currency-code"
>
{{- localization.country.currency.iso_code -}}
</span>
{% endif %}
<span
class="visually-hidden"
data-testid="localization-visually-hidden"
>
{{- 'accessibility.localization_region_and_language' | t -}}
</span>
{%- if show_country and show_language -%}
<span>/</span>
{%- endif -%}
{%- if show_language -%}
<span>
{{ localization.language.iso_code | upcase }}
</span>
{%- endif -%}
<span class="svg-wrapper icon-caret">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</button>
<div
class="localization-wrapper"
hidden
ref="panel"
>
{% render 'localization-form',
show_country: show_country,
show_language: show_language,
localization_style: 'dropdown',
form_style: form_style,
form_id: section.id
%}
</div>
</dropdown-localization-component>
<style>
@media (max-width:480px){
footer dropdown-localization-component {
--width: calc(100svw - var(--page-margin) * 2) !important;
}
}
footer dropdown-localization-component .localization-wrapper {
bottom: 100%;
top:auto;
}
</style>
I don’t want to add a separate section for this. Because when I add a background image for the footer, the image shows two different ways. In mobile mode, I want to keep the currency and social icons on one line. In mobile mode, the social icons are showing on the bottom line.
I want to keep it exactly like this image.
Nothing prevents you from adding a Group block to the Footer section and then add Custom liquid and Social icons to that Group.
Then section background image would “cover” this area too.
And then unchecking the “Vertical on mobile” checkbox…
Try doing things in “edit theme” – it’s your number one tool to control the looks of your store. And with block-based architecture in Horizon it allows you much more flexibility…
Really you are great. I don’t want to show the flag.
In my code above:
Set that to false 
