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:

1. Add the following code snippet to your product-card-grid.liquid or corresponding file

   1. Log into your Shopify admin and select Online Store

   2. Select Edit code on your theme

   3. Open the Snippets folder and open product-card-grid.liquid or corresponding file

   4. Paste the following code snippet at the bottom of the file and save:

   5. liquid

      <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>
      

   6. Add additional Bread script using Theme Blocks(2.0 Shopify Theme required) or through code snippets

      1. Log into your Shopify admin and select Online Store
      2. Follow the steps below depending on your integration method

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:

1. 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>

2. 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}`;