Dynamic payment buttons: Add to Pipeline 2 and Pipeline 3
Pipeline 4 includes Shopify's Dynamic Payment buttons already installed. The best way to add support for Dynamic Payment Buttons is to use Pipeline 4. If you have an earlier version of Pipeline and are not able to update to Pipeline 4. We can provide these options.
How to:
Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.
Make a duplicate before any code changes:
Quick installation
- 1
-
Choose product template type
If you have an unmodified snippets/product.liquid file - No custom code changes or app code added, you can use these one of these two files:
Option 1: Regular unmodified product.liquid
Option 2: Add to cart repositioned above product description version
Or, if you've moved the Add to Cart button above the product description, below the product title - Use this version:
- 2
-
Replace snippets/product.liquid code
Simply copy all the code from one of those linked files and replace all the code in your existing snippets/product.liquid file:
Click to open: snippets/product.liquid
Save the changes.
- 3
-
Add button style
Add the following code to the very bottom of your style.scss.liquid file:
Click to open assets/style.scss.liquid
Add the following code to the very bottom of the file, make a couple blank lines and then add on a new line:
/*================ Force an input/button to look like a text link ================*/
.text-link {
display: inline;
border: 0 none;
background: none;
padding: 0;
margin: 0;
}
.shopify-product-form{
max-width: 400px;
margin: 0 auto;
}
.shopify-payment-button .shopify-payment-button__button {
margin-top: 15px;
border-radius: $radius;
overflow: hidden;
}
.variant--soldout .shopify-payment-button,
.variant--unavailabe .shopify-payment-button{
opacity: 0;
}
.shopify-payment-button{
transition: opacity 0.4s ease-out;
}
.shopify-payment-button .shopify-payment-button__button--unbranded{
padding: 16px 20px;
font-family: $accentFontStack;
text-transform: uppercase;
background-color: $colorSplash;
font-size: 14px;
font-weight: normal;
letter-spacing: 1px;
@include prefix('user-select', 'none');
-webkit-appearance: none;
-moz-appearance: none;
&:hover:not([disabled]){
background-color: darken($colorSplash, 10%);
}
&:active,
&:focus {
background-color: darken($colorSplash, 12%);
outline: none;
}
}
.shopify-payment-button .shopify-payment-button__more-options{
&:active{
text-decoration: underline;
outline: none;
transform: translateY(1px);
}
}
/* - end - */
Save the file.
Manual installation
Use this if you have product apps installed or have made any changes to your snippets/product.liquid file. Shopify has released an article on how to manually add this feature:
https://help.shopify.com/themes/customization/store/dynamic-checkout-buttons
The article refers to product-template.liquid in the snippets folder. In Pipeline, the file you'll want to change is: product.liquid in the snippets folder:
- 1
-
Start of form change
Replace this line of code:
<form action="{{ form_action }}" method="{{form_method}}" enctype="multipart/form-data" id="{{form_id}}" data-section="{{ section.id }}" class="product-form-{{ section.id }} {{form_class}}">
Example:
With this code:
{% form 'product', product, id: "{{form_id}}", class: "product-form-{{ section.id }} {{form_class}}" %}
Example:
- 2
-
End of form change
Replace this code:
<div class="add-to-cart__wrapper">
<button type="submit" name="add" id="AddToCart-{{ section.id }}" class="btn btn--large btn--full btn--clear uppercase addToCart{% if sold_out %} disabled{% endif %}" {% if sold_out %}disabled="true"{% endif %}>
<span id="AddToCartText-{{ section.id }}">{% if sold_out %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endif %}</span>
<span class="unicode">•</span>
<span class="add-to-cart__price money"><span class="buttonPrice" id="ButtonPrice-{{ section.id }}" data-item-price="{{ current_variant.price }}">{{ current_variant.price | money }}</span></span>
</button>
</div>
</form>
</div>
Example:
With this code:
<div class="add-to-cart__wrapper">
<button type="submit" name="add" id="AddToCart-{{ section.id }}" class="btn btn--large btn--full btn--clear uppercase addToCart{% if sold_out %} disabled{% endif %}" {% if sold_out %}disabled="true"{% endif %}>
<span id="AddToCartText-{{ section.id }}">{% if sold_out %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endif %}</span>
<span class="unicode">•</span>
<span class="add-to-cart__price money"><span class="buttonPrice" id="ButtonPrice-{{ section.id }}" data-item-price="{{ current_variant.price }}">{{ current_variant.price | money }}</span></span>
</button>
<div style="margin-top:0.5rem;">{{ form | payment_button }}</div>
</div>
{% endform %}
Example:
Save the changes.
- 3
-
Add button style
Add the following code to the very bottom of your style.scss.liquid file:
Click to open assets/style.scss.liquid
Add the following code to the very bottom of the file, make a couple blank lines and then add on a new line:
/*================ Force an input/button to look like a text link ================*/
.text-link {
display: inline;
border: 0 none;
background: none;
padding: 0;
margin: 0;
}
.shopify-product-form{
max-width: 400px;
margin: 0 auto;
}
.shopify-payment-button .shopify-payment-button__button {
margin-top: 15px;
border-radius: $radius;
overflow: hidden;
}
.variant--soldout .shopify-payment-button,
.variant--unavailabe .shopify-payment-button{
opacity: 0;
}
.shopify-payment-button{
transition: opacity 0.4s ease-out;
}
.shopify-payment-button .shopify-payment-button__button--unbranded{
padding: 16px 20px;
font-family: $accentFontStack;
text-transform: uppercase;
background-color: $colorSplash;
font-size: 14px;
font-weight: normal;
letter-spacing: 1px;
@include prefix('user-select', 'none');
-webkit-appearance: none;
-moz-appearance: none;
&:hover:not([disabled]){
background-color: darken($colorSplash, 10%);
}
&:active,
&:focus {
background-color: darken($colorSplash, 12%);
outline: none;
}
}
.shopify-payment-button .shopify-payment-button__more-options{
&:active{
text-decoration: underline;
outline: none;
transform: translateY(1px);
}
}
/* - end - */
Save the file.
Need help with code changes?
We're not able to make any code customizations but we can recommend shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing.