Adding payment icons to your Shopify store not only enhances its visual appeal but also builds customer trust by showcasing the accepted payment methods. Here's a simple guide to help you add payment icons to your store using the Dawn theme.
Step-by-Step Guide:
Step 1: Access the Theme Editor
- From your Shopify admin, go to Online Store > Themes.
- Find the Dawn theme, then click on Actions > Edit code.
Step 2: Add the Payment Icons Code
In the left-hand sidebar, find and click on footer.liquid under the Sections directory, or you can use the Custom Liquid block in the theme editor.
Add the following code to display payment icons:
<style>
.methods-of-payment img { padding: 0.2em; }
.lt-ie9 .methods-of-payment, .ie8 .methods-of-payment, .oldie .methods-of-payment { display: none; }
</style>
<span class="methods-of-payment">
<img src="{{ 'master' | payment_type_img_url }}" height="35" alt="master" />
<img src="{{ 'visa' | payment_type_img_url }}" height="35" alt="visa" />
<img src="{{ 'paypal' | payment_type_img_url }}" height="35" alt="paypal" />
<img src="{{ 'apple_pay' | payment_type_img_url }}" height="35" alt="apple pay" />
<img src="https://cdn.shopify.com/s/files/1/0274/7570/5933/files/shop_pay.png?v=1653785929" alt="" class="TFQQB" height="40">
</span>
.methods-of-payment img { padding: 0.2em; }
.lt-ie9 .methods-of-payment, .ie8 .methods-of-payment, .oldie .methods-of-payment { display: none; }
</style>
<span class="methods-of-payment">
<img src="{{ 'master' | payment_type_img_url }}" height="35" alt="master" />
<img src="{{ 'visa' | payment_type_img_url }}" height="35" alt="visa" />
<img src="{{ 'paypal' | payment_type_img_url }}" height="35" alt="paypal" />
<img src="{{ 'apple_pay' | payment_type_img_url }}" height="35" alt="apple pay" />
<img src="https://cdn.shopify.com/s/files/1/0274/7570/5933/files/shop_pay.png?v=1653785929" alt="" class="TFQQB" height="40">
</span>
{% assign enabled_payment_types = 'visa,master,klarna,swish,apple_pay,discover,american_express' | remove: ' ' | split: ',' %} {% for type in enabled_payment_types %} <img src="{{ type | payment_type_img_url }}" height="35" alt="{{ type }}" /> {% endfor %}
Step 3: Save Your Changes
- After adding the code, click Save at the top right corner.
Step 4: Check Your Store
- Navigate to your store's footer or the section where you added the payment icons to ensure they are displayed correctly.
Additional Resources
By following these steps, you can easily add and customize payment icons on your Shopify store, providing a seamless and professional shopping experience for your customers.
