Shopify themes, liquid, logos, and UX
Hi, how do i add on another manual payment gateway (Bank Transfer) next to the existing payment icons which i have set and currently shows as active.
Thanks!
Hi, @Areen!
Have you seen our help document on adding manual payment methods? Listed in these steps is how to add a suggested manual payment method, which includes Bank Deposit.
You'll just need to go to Settings > Payments then look for Manual payment methods > Add manual payment method.
Let us know how this goes, and if you have any questions!
To learn more visit the Shopify Help Center or the Community Blog.
Hi Hilary,
I have already added the manual payment method. What i'm looking for now is the Bank Transfer icon which i want to add to the bottom of the existing payment icons.
Thanks!
if just static icon
https://ui-elements-generator.myshopify.com/pages/methods-of-payment
Hi Ketan,
Thank you for your help. I can't seem to find the bank transfer icon in the static icon link you sent.
I'm looking for Bank Transfer icon. Thank you!
thanks for update please provide bank icon image and let me know where do you need so i will check and update code
Hi Ketan, I would need the below bank transfer icon at the bottom of the payment gateway, next to Visa icon.
Thank you for your help in due course!
Can help add on this logo (Powered by Stripe) on top of the existing 4 gateway payments at the bottom page please.
Thanks a lot!
thanks but i can't see your store url can you please share us
can you please share footer code
{%- liquid
assign show_selectors = false
assign currency_selector = false
assign locale_selector = false
if section.settings.show_currency_selector and shop.enabled_currencies.size > 1
assign currency_selector = true
endif
if section.settings.show_locale_selector and shop.enabled_locales.size > 1
assign locale_selector = true
endif
if currency_selector or locale_selector
assign show_selectors = true
endif
-%}
<footer class="site-footer" data-section-id="{{ section.id }}" data-section-type="footer-section">
<div class="page-width">
<div class="grid">
{%- assign row_width = 0 -%}
{%- for block in section.blocks -%}
{%- assign row_width = row_width | plus: block.settings.container_width -%}
{%- style -%}
@media only screen and (min-width: 769px) {
.footer__item--{{ block.id }} {
width: {{ block.settings.container_width }}%;
}
}
{%- endstyle -%}
{%- if row_width > 100 -%}
<div class="footer__clear small--hide"></div>
{%- assign row_width = row_width | minus: 100 -%}
{%- endif -%}
{%- case block.type -%}
{%- when 'logo_social' -%}
<div {{ block.shopify_attributes }} class="grid__item small--hide footer__item--{{ block.id }}">
{%- render 'footer-logo-social', block: block, first_instance: true -%}
</div>
{%- when 'custom' -%}
<div {{ block.shopify_attributes }} class="grid__item footer__item--{{ block.id }}">
{%- render 'footer-custom-text', block: block -%}
</div>
{%- when 'newsletter' -%}
<div {{ block.shopify_attributes }} class="grid__item grid-newsletter footer__item--{{ block.id }}">
{%- render 'footer-newsletter', block: block -%}
</div>
{%- when 'menu' -%}
<div {{ block.shopify_attributes }} class="grid__item footer__item--{{ block.id }}">
{%- render 'footer-menu', block: block -%}
</div>
{%- endcase -%}
{%- endfor -%}
{%- for block in section.blocks -%}
{%- if block.type == 'logo_social' -%}
<div class="grid__item medium-up--hide">
{%- render 'footer-logo-social', block: block -%}
</div>
{%- endif -%}
{%- endfor -%}
</div>
<div class="site-footer__bottom">
{%- if show_selectors -%}
{%- form 'localization', class: 'multi-selectors site-footer__bottom-block' -%}
{%- if locale_selector -%}
<div class="multi-selectors__item">
<h2 class="visually-hidden" id="LangHeading">
{{ 'general.language.dropdown_label' | t }}
</h2>
<div class="disclosure" data-disclosure-locale>
<button type="button" class="faux-select disclosure__toggle" aria-expanded="false" aria-controls="LangList" aria-describedby="LangHeading" data-disclosure-toggle>
{{ form.current_locale.endonym_name }}
</button>
<ul id="LangList" class="disclosure-list" data-disclosure-list>
{%- for locale in form.available_locales -%}
<li class="disclosure-list__item {% if locale.iso_code == form.current_locale.iso_code %}disclosure-list__item--current{% endif %}">
<a class="disclosure-list__option" href="#" lang="{{ locale.iso_code }}" {% if locale.iso_code == form.current_locale.iso_code %}aria-current="true"{% endif %} data-value="{{ locale.iso_code }}" data-disclosure-option>
{{ locale.endonym_name }}
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="locale_code" id="LocaleSelector" value="{{ form.current_locale.iso_code }}" data-disclosure-input/>
</div>
</div>
{%- endif -%}
{%- if currency_selector -%}
<div class="multi-selectors__item">
<h2 class="visually-hidden" id="CurrencyHeading">
{{ 'general.currency.dropdown_label' | t }}
</h2>
<div class="disclosure" data-disclosure-currency>
<button type="button" class="faux-select disclosure__toggle" aria-expanded="false" aria-controls="CurrencyList" aria-describedby="CurrencyHeading" data-disclosure-toggle>
{%- if section.settings.show_currency_flags -%}
<span class="currency-flag currency-flag--small" data-flag="{{ form.current_currency.iso_code }}" aria-hidden="true"></span>
{%- endif -%}
<span class="currency-options__label currency-options__label--inline">
{{ form.current_currency.iso_code }} {%- if form.current_currency.symbol -%}{{ form.current_currency.symbol }}{%- endif -%}
</span>
</button>
<ul id="CurrencyList" class="disclosure-list" data-disclosure-list>
{%- for currency in form.available_currencies -%}
<li class="disclosure-list__item {% if currency.iso_code == form.current_currency.iso_code %}disclosure-list__item--current{% endif %}">
<a class="disclosure-list__option" href="#" {% if currency.iso_code == form.current_currency.iso_code %}aria-current="true"{% endif %} data-value="{{ currency.iso_code }}" data-disclosure-option>
{%- if section.settings.show_currency_flags -%}
<span class="currency-flag currency-flag--small" data-flag="{{ currency.iso_code }}" aria-hidden="true"></span>
{%- endif -%}
<span class="currency-options__label currency-options__label--inline">
{{ currency.iso_code }} {%- if currency.symbol -%}{{ currency.symbol }}{%- endif -%}
</span>
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="currency_code" value="{{ form.current_currency.iso_code }}" data-disclosure-input>
</div>
</div>
{%- endif -%}
{%- endform -%}
{%- endif -%}
{%- if section.settings.show_payment_icons -%}
{%- unless shop.enabled_payment_types == empty -%}
<ul class="inline-list payment-icons site-footer__bottom-block{% unless section.settings.colorize_payment_icons %} payment-icons--greyscale{% endunless %} text-center">
{%- for type in shop.enabled_payment_types -%}
<li class="icon--payment">
{{ type | payment_type_svg_tag }}
</li>
{%- endfor -%}
</ul>
{%- endunless -%}
{%- endif -%}
{%- if section.settings.show_copyright -%}
<div class="footer__copyright site-footer__bottom-block text-center">
© {{ 'now' | date: '%Y' }} {{ shop.name }}
{%- if section.settings.copyright_text != blank -%}
{{ section.settings.copyright_text }}
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
</footer>
{% schema %}
{
"name": "Footer",
"max_blocks": 12,
"settings": [
{
"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": "Currency selector",
"info": "To add a currency, go to your [currency settings.](/admin/settings/payments)"
},
{
"type": "checkbox",
"id": "show_currency_selector",
"label": "Show currency selector",
"default": true
},
{
"type": "checkbox",
"id": "show_currency_flags",
"label": "Show currency flags",
"default": true
},
{
"type": "header",
"content": "Additional footer content"
},
{
"type": "checkbox",
"id": "show_payment_icons",
"label": "Show payment icons"
},
{
"type": "checkbox",
"id": "colorize_payment_icons",
"label": "Colorize payment icons",
"default": false
},
{
"type": "checkbox",
"id": "show_copyright",
"label": "Show copyright"
},
{
"type": "text",
"id": "copyright_text",
"label": "Additional copyright text"
}
],
"blocks": [
{
"type": "logo_social",
"name": "Logo and social",
"limit": 1,
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"type": "range",
"id": "desktop_logo_height",
"label": "Logo height",
"default": 50,
"min": 20,
"max": 120,
"unit": "px"
},
{
"type": "range",
"id": "container_width",
"label": "Column width",
"default": 20,
"min": 15,
"max": 95,
"unit": "%"
}
]
},
{
"type": "menu",
"name": "Menu",
"settings": [
{
"type": "checkbox",
"id": "show_footer_title",
"label": "Show title",
"default": true
},
{
"type": "link_list",
"id": "menu",
"label": "Choose a menu",
"default": "footer",
"info": "This menu won't show dropdown items"
},
{
"type": "range",
"id": "container_width",
"label": "Column width",
"default": 20,
"min": 15,
"max": 95,
"unit": "%"
}
]
},
{
"type": "newsletter",
"name": "Newsletter",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_footer_title",
"label": "Show title",
"default": true
},
{
"type": "paragraph",
"content": "Any customers who sign up will have an account created for them in Shopify. [View customers](/admin/customers)."
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Sign up and save"
},
{
"type": "richtext",
"id": "richtext",
"label": "Text",
"info": "Optional",
"default": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p>"
},
{
"type": "range",
"id": "container_width",
"label": "Column width",
"default": 20,
"min": 15,
"max": 95,
"unit": "%"
}
]
},
{
"type": "custom",
"name": "Custom text",
"settings": [
{
"type": "checkbox",
"id": "show_footer_title",
"label": "Show title",
"default": true
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Custom text"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Add your own custom text here.</p>"
},
{
"type": "range",
"id": "container_width",
"label": "Column width",
"default": 20,
"min": 15,
"max": 95,
"unit": "%"
}
]
}
],
"default": {
"settings": {},
"blocks": [
{
"type": "menu",
"settings": {}
},
{
"type": "logo_social",
"settings": {}
}
]
}
}
{% endschema %}
Is this the footer code you want?
yes please sent your payment icon image url or cdn file url
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024