Adding a payment icons to the footer

vivame
Explorer
73 0 7

Hi, can anyone suggest the best way to display payment icons in the footer like the screenshot attached.

I currently have the standard shopify payment icons displayed at the very the bottom of the footer, but I would like them to display more prominently in the footer, taking up an entire column with the title: Checkout Securely With:

I am using turbo theme, and I could potentially upload a PNG of payment icons as a footer logo image, but I cannot add a title above it if I do that,

Can anyone suggestions as how I can get the same as in the screenshot?

Many thanks

Screen Shot 2021-05-14 at 14.30.51.png

0 Likes
HardikDavra
Shopify Partner
2328 368 1003

PLease go to Section -> footer.liquid and paste this code by finding right place.

<ul class="inline-list payment-icons site-footer__payment-icons">
              {%- for type in shop.enabled_payment_types -%}
                <li>
                  {{ type | payment_type_svg_tag: class: 'icon' }}
                </li>
              {%- endfor -%}
            </ul>

  

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
vivame
Explorer
73 0 7

Hi, thanks for the code but I don't know where to place that to make it a 'block' with a title:

Screen Shot 2021-05-14 at 16.11.19.png

 

0 Likes
HardikDavra
Shopify Partner
2328 368 1003

You need to find right place in  the code.

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
vivame
Explorer
73 0 7

Do you know where that is?

0 Likes
HardikDavra
Shopify Partner
2328 368 1003

Hello,
I am contacting you regarding to add payment icons in footer

Do you know where that is? -> Yes, I need to enter into your store for finding right position. 

Thank you.

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
LitExtension
Shopify Partner
1228 157 217

Hi @vivame

Just place this snippet to where you want to show the social icons.

<ul class="footer__payment-icons">

              {%- for type in shop.enabled_payment_types -%}

                <li>

                  {{ type | payment_type_svg_tag: class: 'icon' }}

                </li>

              {%- endfor -%}

            </ul>

Hope this helps! 

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
vivame
Explorer
73 0 7

Hi, thanks for the snippet but where would I place the code for them to display in the far right column (where the social icons are) 

As I can only find areas outside of the columns to inject the code without it displaying all messed up..

0 Likes
LitExtension
Shopify Partner
1228 157 217

Hi @vivame,

Please place this code at the end of the "theme.scss" to solve your problem.

@media only screen and (min-width: 750px) {

#shopify-section-featured-products .product {

        margin-bottom: 70px;

}

}

Hope this helps! 

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes