How can I add smart payment buttons to my store?

When the page loads, based on multiple factors and the user device and configuration, either an unbranded button (Buy Now) or a branded button (eg. ApplePay; PayPal) will be visible.

If an unbranded button is shown

• No More Payment Option button will be rendered.

If a branded button is shown

• If the shop does not support gift cards or discounts, clicking on the More Payment Option button will redirect the user directly to the checkout
• If the shop support gift cards or discounts, clicking the More Payment Option will show a payment sheet.

Add a dynamic checkout button to the product page and the "Featured product" section by doing the following steps:

1. Go to Online store->Themes->Palo Alto 

2. Click "Actions"

3. Click "Edit code"

4. Search for the "Snippets" folder

5. Open the "product-form.liquid" file

6. Replace line 28 with the following block of code

{% form 'product', product, class:"product-form", id:"AddToCartForm--{{section.id}}" %}

Before

After

7. Add the following block of code to line 94

{% if section.settings.enable_payment_button %}
      {{ form | payment_button }}
{% endif %}

Before

After

8. Replace line 88 with the following block of code

<button type="submit" name="add" id="AddToCart" class="btn {% if section.settings.enable_payment_button %}smart-btn{% endif %}">

Before

After

9. Replace the last line of the file with the following block of code

{% endform %}

Before

After

10. Click "Save"

11. Search for the "Sections" folder

12. Open the "product-template.liquid" file

13. On line 188 (three lines before the end of the code), add the following block of code 

   ,
    {
      "type":"header",
      "content":"Dynamic checkout button"
    },
    {
      "type": "checkbox",
      "id": "enable_payment_button",
      "label": "Show dynamic checkout button",
      "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
      "default": false
    }

Before

After

14. Click "Save"

15. Open the "featured-product.liquid" file

16.  On line  66  (three lines before the end of the code), add the following block of code 

   ,
    {
      "type":"header",
      "content":"Dynamic checkout button"
    },
    {
      "type": "checkbox",
      "id": "enable_payment_button",
      "label": "Show dynamic checkout button",
      "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
      "default": false
    }

Before

After

17. Click "Save"

18. Search for the "Assets" folder

19. Open the "theme.scss.liquid" file

20. Paste the code from the link here to the bottom of the file

You can now enable/disable the dynamic checkout button from within the theme settings

Product page

 Go to Online store>Themes>Palo Alto>Click "Customize">Select "Product pages" from the dropdown menu>Check/Uncheck the "show dynamic checkout button" box

Featured product section

 Go to Online store>Themes>Palo Alto>Click "Customize">Sections>Featured product>Check/Uncheck the "show dynamic checkout button" box