How to Customize the Apple Pay Button in Shopify

[ahmer]

Is there any way I can add a custom Apple Pay button to Shopify, allowing me to change its position or styling? Is this possible with any app or custom code?

[Ahmad31]

Yes, you can add a custom Apple Pay button to your Shopify store and control its position or styling using custom code or certain apps. Here’s how you can do this:

Using custom code allows you to have full control over the appearance and placement of the Apple Pay button. Here’s how:

1. Enable Apple Pay on Shopify:

   • Ensure Apple Pay is enabled in your payment gateway settings. Shopify Payments or a compatible payment provider is required.

2. Add the Apple Pay Button to Your Store:

   • Shopify uses the shopify-payment-button class to render the payment buttons, including Apple Pay.
   • You can insert the button into any section of your theme by adding the following Liquid code where you want the button to appear:

    

​

• Style the Button with CSS:

  • Add CSS to your theme to customize the button’s appearance and position. For example:

.shopify-payment-button__button--apple-pay {
    background-color: #000; /* Change background color */
    border-radius: 8px;    /* Rounded corners */
    padding: 12px 24px;   /* Adjust padding */
    position: relative;   /* Custom positioning */
}
​

• Some Shopify apps offer more advanced customization for payment buttons. Look for apps that allow:

  • Custom styling for checkout and buy buttons.
  • Conditional placement of buttons based on page type or user actions.

  Apps like Custom Buy Buttons or Advanced Custom Fields might help in achieving this if you’re uncomfortable with manual coding.

[ahmer]

Hi @Ahmad31 Thank you for your reply, but the button is still not showing.

[ahmer]

@Ahmad31

And brother, The app that you mentioned I checked both, but there’s nothing about the Apple Pay button. The link is below.

https://apps.shopify.com/advanced-custom-field?show_store_picker=1

[Ahmad31]

The code you’ve provided for the Apple Pay button is not fully correct, as Shopify automatically handles the rendering of Apple Pay buttons, and it does not require you to add HTML like that manually.

First, confirm that Apple Pay is enabled on your Shopify store. You need to use Shopify Payments as the payment gateway, and Apple Pay needs to be active.

Shopify will automatically render the Apple Pay button on compatible devices when a customer is on the checkout page, so you don’t need to manually code it into your theme.

However, if you want to place an Apple Pay button somewhere specific on your store (like the product or cart page), you can use Shopify’s Shopify Payments button functionality.

If you’re looking to customize its position on your store, you would need to use Shopify’s shopify-payment-button class. Here’s the correct approach for adding it:

{% if shop.enabled_payment_types contains 'apple_pay' %}
  
    
  

{% endif %}

[Ahmad31]

If the apps you checked don’t meet your needs, adding a custom Apple Pay button through custom coding might be your best option.

[ahmer]

@Ahmad31 I tried your code, but the Apple Pay button is still not showing on the product page; it only appears during checkout. On the product page, it always shows “Buy with Shop,” and sometimes it displays Apple Pay. I want the Apple Pay button to show every time on the product page.

[Ahmad31]

Shopify determines which payment methods to display using JavaScript. To specifically prioritize Apple Pay on the product page, you can attempt to customize Shopify’s payment button logic.

Add the following code to your theme file (e.g., product.liquid or product.json):

HTML:

Insert the payment button placeholder where you want it:

Javascript:

Force the Apple Pay button to appear by overriding Shopify’s default behavior:

document.addEventListener('DOMContentLoaded', function () {
    const paymentButton = document.querySelector('#apple-pay-button');

    // Check if Apple Pay is available
    if (window.ApplePaySession && ApplePaySession.canMakePayments()) {
        paymentButton.style.display = 'block'; // Show the Apple Pay button
    } else {
        paymentButton.style.display = 'none'; // Hide it if Apple Pay isn't supported
    }
});

If multiple payment methods (e.g., Shop Pay, PayPal) are enabled, Shopify will choose the one it deems most relevant. To emphasize Apple Pay, you can use CSS to style or prioritize it:

.shopify-payment-button__button {
    display: none; /* Hide all other buttons */
}

.shopify-payment-button__button--apple-pay {
    display: block !important; /* Show only the Apple Pay button */
}

[ahmer]

@Ahmad31

Thank you for your reply, brother. I did exactly what you told me, but still, nothing is showing. You can check the Apple screenshot and code below.

[ahmer]

@Ahmad31
I created a code that isn’t working. Can you debug it and identify the issue?

select a size

[Ahmad31]

Can you share me the child access of your store so that i can check this issue in detail, or make a copy of your theme and give me its access

[ahmer]

@Ahmad31

Thanks! Here is the access to the live demo theme; you can check it directly

brizofan.com

5342