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.
, { "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