Advanced Shopify Features
Add Bread Buttons to Category Pages
Follow the steps below to add a Bread placement under each of your products on your category pages:
-
Add the following code snippet to your product-card-grid.liquid or corresponding file
-
Log into your Shopify admin and select Online Store
-
Select Edit code on your theme
-
Open the Snippets folder and open product-card-grid.liquid or corresponding file
-
Paste the following code snippet at the bottom of the file and save:
-
<div data-price="{{ product.price }}" data-sku="{{ product.selected_or_first_available_variant.sku }}" id="bread-{{ product.id }}" class="bread-as-low-as-container"></div>
-
Add additional Bread script using Theme Blocks(2.0 Shopify Theme required) or through code snippets
- Log into your Shopify admin and select Online Store
- Follow the steps below depending on your integration method
-
Integration Method | Steps |
---|---|
Theme Integraiton(2.0 Shopify Themes only) | 1. Open the Bread Pay Messaging app 2. Copy the Bread Shop ID from the top of the app 3. Navigate back to the Themes page in the Online Store 4. Select Customize top open the theme editor 5. Navigate to the collection page where you want to add the Bread placements 6. Select Add block and select the BreadPay As Low As app 7. Paste the Bread Shop ID into the field and save the theme |
Liquid Integration | 1. Select Edit code on your theme 2. Select the Snippets folder and click Add new snippet 3. Enter a name for the new snippet(e.g., “bread-catalog-placements.liquid”) and select Create snippet 4. Open the newly created snippet file 5. Copy and paste the contents of the bread-catalog-placements.liquid 6. Insert your Integration Key in the variable on line 9. Your Integration Key can be provided upon request from your Integration Manager, Relationship Manager or found in the merchant portal7. Note: if this integration is for your production environment, you will need to update the SDK script on line 1 to: 8. <script defer src="https://connect.breadpayments.com/sdk.js"></script> 9. Open the Sections folder or Search for the page collections-template.liquid 10. Navigate to the bottom of the file prior to the schema section and below the endpaginate field 11. paste the following code snippet - {% include 'catalog-placements' %} 12. Save your file |
Display Calculated “as low as” Amount
In some cases, you may want to display the calculated “as low as” language on category pages or a banner on your website. For these situations, follow the instructions below to generate the as low as amount and required disclosure.
Compliance Review Required
Given that Bread Pay is a highly-regulated financial product, any location with As Low As pricing must also include relevant disclosures.
Additionally, you must send financing-related assets to your Bread Pay point of contact for compliance review.
Implementation Instructions:
- Adding Bread as low as liquid template to your theme
a. Log into your Shopify admin and select Online Store
b. Select Edit code on your theme
c. Select the Snippets folder and Add a new snippet
d. Enter a name for the new snippet – for example “bread-as-low-as” – and select Create snippet
e. Open the newly created snippet file
f. Copy and paste the contents of the bread-as-low-as.liquid script below. Note: the code snippet below is for Bread's Preview environment. Instructions for updating to Production code are found below
g. Insert your Merchant ID in the variable on line 2. Your merchant ID can be provided upon request from your Integration Manager or Relationship Manager
h. Insert your Program ID in the variable on line 3. Your Program ID can be provided upon request from your Integration Manager or Relationship Manager
i. Click Save
<script>
var merchantId = "INSERT PREVIEW MERCHANT ID";
var programId = "INSERT PREVIEW PROGRAM ID";
var endpoint = `https://api-preview.platform.breadpayments.com/api/experience/servicing/as-low-as?merchantId=${merchantId}&amount={{product.price}}&programId=${programId}`;
fetch(endpoint)
.then(response => response.json())
.then(data => {
const el = document.getElementById({{product.id}});
el.innerHTML = 'As low as ' + data.asLowAs.paymentAmountText["en-us"] + ' / Month <span id="financing-disclosure">*</span>';
})
.catch(error => {
console.error(error);
});
</script>
- Add the 'As Low As' Snippet to collections-template.liquid or equivalent file
a. While still in your development theme, open the Layout folder and select collection-template.liquid (or desired location)
b. Within collection-template.liquid or similar file, add the snippet of code shown below inside the loop for the products in the collection.products. See the code snippet of the collection-template.liquid below for details on where to place the two lines of code
c. If you used a different file name for your snippet in Step 1, replace “bread-as-low-as” with the name of your snippet
{% include 'bread-as-low-as' %}
<div id="{{ product.id }}">{{ product.id }}</div>
Shopify Theme Structure
Identifying the correct liquid template in which to add the as low as snippet will be completely dependent on how your Shopify store theme is organized. Each theme is different which means the right liquid file could be found anywhere including within Templates, Sections, or Snippets.
Below is an example of the Code on a Collections page template. Your theme template may look similar.
<div class="page-width" id="Collection">
{% if section.settings.layout == 'grid' %}
{% case section.settings.grid %}
{% when 2 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when 3 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when 4 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}
<ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
{% for product in collection.products %}
<li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
{% include 'product-card-grid',
max_height: max_height,
product: product,
show_vendor: section.settings.show_vendor
%}
{% include 'bread-as-low-as' %}
<div id="{{ product.id }}">{{ product.id }}</div>
</li>
Update Preview API URL and Keys with PROD API URL and Keys
After testing the steps above, replace your Merchant ID, Program ID, and Endpoint with your PROD keys and the PROD Endpoint.
var merchantId = "INSERT PROD MERCHANT ID";
var programId = "INSERT PROD PROGRAM ID";
var endpoint = `https://api.platform.breadpayments.com/api/experience/servicing/as-low-as?merchantId=${merchantId}&amount={{product.price}}&programId=${programId}`;
Updated 4 months ago