Adding Payment Icon Under 'Add to Cart' Button in Shopify Dawn Theme

Building customer trust is one of the most critical aspects of succeeding in e-commerce. A simple yet highly effective way to enhance buyer confidence is by adding payment icons under the 'Add to Cart' button in shopify dawn theme. This small visual change can significantly increase conversions by reassuring users that their preferred and secure payment methods are accepted. In this article, we’ll walk you through a clean and code-friendly method to add payment icons under the 'Add to Cart' button in shopify dawn theme — a conversion-boosting tweak you shouldn't overlook.

Also if  you are looking for a Meta Ads specialist who offers freelance services for lead generation and sales campaigns? You're in the right place. I'm currently offering free strategy sessions and discounted campaign setup for new clients. If you're satisfied with my work, we can explore a long-term partnership to scale your business together. Click Here to Contact.(alert-passed)

Step-by-Step Guide to Add Payment Icons under the 'Add to Cart' button

Duplicate your Current Theme

Step 1: Log in to your Shopify admin dashboard.

Step 2: Navigate to Online Store > Themes.

Step 3: Click the three dots on the current theme.

Step 4: Create a backup of the theme by selecting the Duplicate option.

Add Payment Icons under the 'Add to Cart' Button

Step 1: Click the “Customize” button on your active theme.

Step 2: Navigate to the Product Page and select the template where you want to display the payment icons.

Step 3: In the Product Information section, add a Custom Liquid block just below the Add to Cart button block.

Step 4: Copy the code provided below and paste it into the newly added Custom Liquid block.

Code Snippet 1

    
  <style>
.icon-list-custom {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    margin: 0;
    gap: 8px;
    padding: 0;
    margin-top: -1rem;
}

.icon-svg {
    width: 47px; /* Adjust size as needed */
    height: 47px; /* Adjust size as needed */
}
</style>
<ul class="icon-list-custom" role="list">
{% assign enabled_payment_types = 'visa,master,apple_pay,google_pay,amazon,upi' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}
    <li>{{ type | payment_type_svg_tag: class: 'icon-svg' }} </li>
{%- endfor -%}
</ul>
  

Step 5: Click “Save” to apply the changes.

Configure the Added Payment Icons

Step 1: Customize the height and width of your payment icons by adjusting the configuration settings, as shown in the attached reference image.

Step 2: Choose the specific payment icons you want to display beneath the Add to Cart button on your product page for a more tailored and relevant user experience.

You can get the names from the list below: visa, master, paypal, american_express, apple_pay, google_pay, shopify_pay, klarna, klarna_pay_later, afterpay, discover, unionpay, maestro, jcb, diners_club, sofort, ideal, facebook_pay, bitcoin, litecoin, dogecoin, dwolla, dankort, forbrugsforeningen, amazon.(alert-success)

Summary

This article provides a step-by-step guide to aligning payment icon under 'Add to Cart' button in Shopify Dawn theme — a simple yet powerful customization to boost customer trust and increase conversions. Learn how to add, configure, and display trusted payment icons directly on your product pages without using any third-party apps.

Also if  you are looking for a Meta Ads specialist who offers freelance services for lead generation and sales campaigns? You're in the right place. I'm currently offering free strategy sessions and discounted campaign setup for new clients. If you're satisfied with my work, we can explore a long-term partnership to scale your business together. Click Here to Contact.(alert-passed)