How to add on extra payment gateway icon

Areen
Excursionist
27 0 17

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!

Replies 12 (12)

Hilary
Shopify Staff (Retired)
551 79 131

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.

Areen
Excursionist
27 0 17

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!

KetanKumar
Shopify Partner
36839 3635 11972

@Areen 

if just static icon 

https://ui-elements-generator.myshopify.com/pages/methods-of-payment

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Areen
Excursionist
27 0 17

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!

KetanKumar
Shopify Partner
36839 3635 11972

@Areen 

thanks for update please provide bank icon image and let me know where do you need so i will check and update code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Areen
Excursionist
27 0 17

@KetanKumar 

 

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!

 

 

bank transfer icon.png

Areen
Excursionist
27 0 17

@KetanKumar 

 

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!

 

Secure with Stripe payments.png

KetanKumar
Shopify Partner
36839 3635 11972

@Areen 

thanks but i can't see your store url can you please share us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Areen
Excursionist
27 0 17

My store URL is www.superculturekombucha.com

 

Thank you

KetanKumar
Shopify Partner
36839 3635 11972

@Areen 

can you please share footer code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Areen
Excursionist
27 0 17

{%- 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">
&copy; {{ '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 %}

 

@KetanKumar 

 

Is this the footer code you want?

KetanKumar
Shopify Partner
36839 3635 11972

@Areen 

yes please sent your payment icon image url  or  cdn file url 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing