How To Add Payment Icons [Shopify – Product Page]

Hello Shopify store owners! Hope you are doing great and making lots of sales on your store. Today, we have another tutorial for you on how to add stylish payment icons above or below the Buy Now button. This is super simple, and you won’t need any developer to do this!

Why Add Payment Icons?

Adding payment icons to your product page helps build customer trust by showing available payment methods. This can boost conversion rates and provide a seamless user experience.

---

Steps to Add Payment Icons in Shopify

Step 1: Install the Latest Dawn Theme

To ensure the code works with the latest Shopify updates, we will use the Dawn theme.

1. Go to Online Store in your Shopify admin.
2. Scroll down to find themes and click Add Theme.
3. Install Dawn 15.2.0 (or the latest version).
4. Once installed, click Publish to activate the theme.

Now, refresh your product page to see the default layout before making changes.

---

Step 2: Open the Theme Editor

1. In Shopify Admin, go to Online Store > Themes.
2. Click Customize on your active theme.
3. In the theme editor, click on the Dropdown and select Products > Default Product.
4. If you have multiple product page templates, choose the one where you want to add the icons.

---

Step 3: Add a Custom Liquid Block

1. Click on the Add Block (+) button.
2. Select Custom Liquid.
3. Click on the newly added Custom Liquid block.

---

Step 4: Add the Payment Icons Code

Copy Code

<style>
.icon-list-custom{max-width: 50rem;}
.icon-list-custom {
    display: flex;flex-wrap: wrap;
    list-style: none;justify-content: center;
    margin: 0;  gap:8px;
    padding: 0;margin-top: -1rem;} </style>
<ul class=”icon-list-custom” role=”list”>
{% assign enabled_payment_types = ‘visa,master,apple_pay,paypal,google_pay’ | remove: ‘ ‘ | split: ‘,’ %}
{% for type in enabled_payment_types %}
    <li>{{ type | payment_type_svg_tag: class: ‘icon-svg’ }} </li>
  {%- endfor -%}
</ul>

You will need to add a short snippet of Liquid code to display the payment icons.

1. Copy the payment icons code
2. Paste the code into the Custom Liquid block.
3. Scroll down to see the payment icons appearing on your product page.

---

Step 5: Adjust Icon Position

1. Drag and drop the Custom Liquid block to position it below the Buy Now button.
2. Refresh the page to see the updated layout.

---

Step 6: Customize the Icons

By default, the following payment icons will appear:

• Visa
• MasterCard
• PayPal
• Apple Pay
• Google Pay

If you want to add or remove payment icons:

1. Click on the Custom Liquid block.
2. Look for this section in the code: {"Visa", "MasterCard", "ApplePay", "PayPal", "GooglePay"}
3. To add an icon, insert its name inside the brackets, separated by a comma. Example: {"Visa", "MasterCard", "ApplePay", "PayPal", "GooglePay", "UnionPay"}
4. To remove an icon, simply delete its name from the list.
5. Save the changes and refresh the product page.

---

Bonus: Boost Your Store Sales with Big Bulk Discount App

Before we wrap up, we highly recommend using the Big Bulk Discount app to increase your store sales by 3-4x! This app allows you to offer:

• Volume discounts
• Tiered pricing

The app is only $1.99/month, and it comes with a 14-day free trial. If you don’t see an increase in sales, you can uninstall it without any charges.

Try Big Bulk Discount for Free (link in the description).

---

Conclusion

That’s it! You’ve successfully added stylish payment icons to your Shopify store. If you have any questions or tutorial requests, drop a comment below, and we’ll create a video for you. Don’t forget to subscribe to our YouTube channel for more Shopify tutorials!

Until next time, happy selling! 🚀