Laybuy x Shopify

​

# Guide

​

​

# Installation

​

​ To add the Laybuy Price Breakdown Shopify App to your store, entire your Shopify Site URL (your-store.myshopify.com) and push "Install". ​

# Adding Laybuy Price Breakdown Assets to your Theme

​

# Select the theme you want to add the assets on

​

WARNING

We recommend you make a copy of the theme you want to install Laybuy on and make the changes and test before publishing.

​ To Duplicate your Theme

  1. From the Shopify Admin Panel, click "Online Store" in the side bar.
  2. Find the theme you would like to install Laybuy on and click the "Actions" menu next to that theme.
  3. Select "Duplicate" from the list.
  4. Rename the copied theme clearly so you know the correct theme to install Laybuy on (eg "Main Theme - With Laybuy") ​ Duplicate A Theme ​ To Install Laybuy to your Theme
  5. Ensure your store isn't password protected (If it is, you will need to temporarily disable the password by navigating to Online Store > Preferences > Store Password)
  6. From the Shopify Admin Panel, open the "Apps" tab and locate/open the "Laybuy" App
  7. From the Laybuy App Dashboard, click "Install to a new theme"
  8. Select the theme you would like to Install and press the "Install" button. ​ Install To Theme ​

# Add the Laybuy Price Breakdown to your Product Page

​ To install the Laybuy Price Breakdown to your product page, follow the steps below.

​

  1. From the Shopify Admin Panel, open the "Apps" tab and locate/open the "Laybuy" App
  2. Select "Setup" and click "Product Page" in the app navigation to open up the "Product Configuration" page
  3. Add a product to preview by clicking "Select Product", select the product of your choice and click "Add"
  4. Once a product has been selected, click "Preview" under "Step 2"
  5. Close any popups or apps that might cover the screen (eg newsletter popup or other prompts)
  6. Once you can see the product page clearly, click Interactive Mode: On in the top left to disable Interactive Mode, and allow you to select the location of the price breakdown
  7. Hover over the product price and click the element. It will update the CSS Selector field.
  8. Click Save.
  9. The screen will re-load showing the new placement of the Laybuy Price Breakdown. If this is correct, click Close to complete the setup or make additional changes to the breakdown's appearance.
  10. Once you've made any additional updates, click Preview your theme, to open the theme preview in a new window to check your changes. ​

# Developer's Notes.

​

CSS Selector

The Laybuy App is looking for the DOM via the CSS Selector to inject the Laybuy Price Breakdown around the element.

​

Price Breakdown Positioning

  • Inside the Element = The Laybuy Price Breakdown will be inserted inside the target element.
  • Before the Element = The Laybuy Price Breakdown will be inserted before the target element.
  • After the Element = The Laybuy Price Breakdown will be inserted after the target element.

​

Observe Selector

If you have products with different priced variants and the Laybuy Price breakdown needs to update as a customer selects a different variant, use the Observe Selector to select the price. This will ensure when that price is changed (eg a different variant is selected), the Price Breakdown is updated accordingly.

​

# Cart Page

​ To install the Laybuy Price Breakdown to your cart page, follow the steps below. ​ ​

  1. From the Shopify Admin Panel, open the "Apps" tab and locate/open the "Laybuy" App
  2. Select "Setup" and click "Cart Page" in the app navigation to open up the "Cart Configuration" page
  3. Add a product to preview in the cart by clicking "Select Product", select the product of your choice and click "Add"
  4. Once a product has been selected, click "Preview" under "Step 2"
  5. Close any popups or apps that might cover the screen (eg newsletter popup or other prompts)
  6. Once you can see the product page clearly, click Interactive Mode: On in the top left to disable Interactive Mode, and allow you to select the location of the price breakdown
  7. Hover over the subtotal price on the cart page and click the price element. It will update the CSS Selector field.
  8. Click Save.
  9. The screen will re-load showing the new placement of the Laybuy Price Breakdown. If this is correct, click Close to complete the setup or make additional changes to the breakdown's appearance.
  10. Once you've made any additional updates, click Preview your theme, to open the theme preview in a new window to check your changes. ​

# Developer's Notes.

​

CSS Selector

The Laybuy App is looking for the DOM via the CSS Selector to inject the Laybuy Price Breakdown around the element.

​

Price Breakdown Positioning

  • Inside the Element = The Laybuy Price Breakdown will be inserted inside the target element.
  • Before the Element = The Laybuy Price Breakdown will be inserted before the target element.
  • After the Element = The Laybuy Price Breakdown will be inserted after the target element.

​

Observe Selector

If your cart page uses AJAX (eg customers can update quantities/remove products from your cart without a page refresh) then Laybuy Price Breakdown needs to update once the customer makes those changes to their cart. Use the Observe Selector to select the cart subtotal price. This will ensure when that price is changed (eg a customer increases the cart quantity to 2), the Price Breakdown is updated accordingly.

​

# Collection Page

​ To install the Laybuy Price Breakdown to your collection page, follow the steps below. ​

  1. From the Shopify Admin Panel, open the "Apps" tab and locate/open the "Laybuy" App
  2. Select "Setup" and click "Collection Page" in the app navigation to open up the "Collection Configuration" page
  3. Add a collection to preview in the cart by clicking "Select Collection", select the collection of your choice and click "Add"
  4. Once a collection has been selected, click "Preview" under "Step 2"
  5. Close any popups or apps that might cover the screen (eg newsletter popup or other prompts)
  6. Once you can see the product page clearly, click Interactive Mode: On in the top left to disable Interactive Mode, and allow you to select the location of the price breakdown
  7. Hover over a product price on the collection page and click the price element. It will update the CSS Selector field.
  8. Click Save.
  9. The screen will re-load showing the new placement of the Laybuy Price Breakdown. If this is correct, click Close to complete the setup or make additional changes to the breakdown's appearance.
  10. Once you've made any additional updates, click Preview your theme, to open the theme preview in a new window to check your changes. ​

# Developer's Notes.

​

CSS Selector

As there is more than one price in a collection page, the CSS selector must be used to help the Laybuy app find the individual product price.

​

Price Breakdown Positioning

  • Inside the Element = The Laybuy Price Breakdown will be inserted inside the target element.
  • Before the Element = The Laybuy Price Breakdown will be inserted before the target element.
  • After the Element = The Laybuy Price Breakdown will be inserted after the target element.

​

Observe Selector

If your collection page uses an app to render (eg a filtering app), you will need to select the entire product grid using the Observe Selector. This will ensure that when a customer navigates to the next page, or applies a filter, the price breakdown is updated for each product.

​

# Adding Laybuy to Checkout

​ Follow the below process:

  1. From the Shopify Admin Panel, open the "Setttings" tab and locate/open the "Payment Providers" tab.
  2. Click into the "Alternative Payments" Section
  3. Select "Laybuy"
  4. Click Edit and enter your unique Merchant ID & API Key provided by the Laybuy Onboarding Team.
  5. Untick the Test Mode option to ensure you're able to accept payments from your customers using Laybuy.
  6. Click Save
  7. Add a product to your cart, and go to the checkout to test Laybuy is showing. Click Place Order to ensure you're successfully redirected to the Laybuy Payment Gateway. ​

# Support

​ If you need any assistance with adding Laybuy or the Laybuy Price Breakdown to your Shopify Store, please add shopify@laybuy.com as a staff member with full access to your Shopify account & we will do this for you!