Greenleaze provides a custom shopify app so you can easily integrate GreenLeaze into your shopify store. The integration is done in 3 steps:

Install the custom app GreenLeaze on your shopify store;
Customize your store theme to display the greenleaze button;
Listen for events from Greenleaze to redirect the customer.

Install the custom app GreenLeaze on your Shopify store

Start by creating a Shopify application (here) on your GreenLeaze dashboard.

💡 To find your shop Shopify url go to yourdomain.com/admin it will redirect you on https://admin.shopify.com/store/shop-slug, your shopify domain is shop-slug.myshopify.com

Once the app is created GreenLeaze must approve it, it can take up to 24h, do not hesitate to contact us to speed up the process.

When ready, a big green button "download" will be available on your GreenLeaze dashboard, click it to install the app.

Customizing your store theme

To enable full customization, the app works by modifying the code's theme of your shop.

We recommand displaying the GreenLeaze widget on the product page and the cart page, the widget will allow your customers to choose the duration of the rental and see the monthly price.

In all cases you need to add the greenleaze-script.js file to your store in assets/greenleaze-script.js. You will find on the following

Download all assets

Durations will be automatically fetched from the Shopify App. You may edit the var monthValues = [1, 12, 24, 36]; to improve loading speed.

Display the GreenLeaze widget on the product page

Create a new snippet greenleaze-product.liquid, it will hold a button GreenLeaze.

The following code must be customized to fit your store design. For simplicity, all style are in the file. We do recommend to write your overrides in separate files.

In the file, the button if display thanks to the following code:

<div class="btn w-full btn--status greenleaze-button greenleaze-button-product button btn--primary" data-price="{{product.price}}" data-variant-id={{ product.selected_or_first_available_variant.id }}>
        Louer
    </div>

In updates, classes may change except greenleaze-button and greenleaze-button-product

You may need to edit the data-price attribute to correctly get the price of the product for your store. To change the price after render you must edit the data-price attribute then rerender the widget by doing one of the following:

Call the event greenleazePriceActualize on window;
Call the function addModalAndButtonPrice;
Remove and add the button again.

You may also edit the script in the file to listen for custom events to call the addModalAndButtonPrice function with a specific price.

Then, import the snippet where you want to render the button :

{% render 'greenleaze-product' %}

Display the GreenLeaze widget on the cart page

Create a new snippet greenleaze-cart.liquid, it will hold a GreenLeaze button and modal to display the prices of each product in the cart. The following code must be customized to fit your store design.

You may need to edit the same values as for the product widget. By default the modal gets the price from Shopify cart. You may edit the script to get the price from a custom source.

Import the snippet in your cart template main-cart.liquid or file where you want to display the widget

{% render 'greenleaze-cart' %}

Call rerender when the cart is updated

You can call the event greenleazePriceActualize on window when the cart is updated so the price is correctly displayed or you can edit the script to listen for the change event and call the addModalAndButtonPriceCartfunction. You may add a delay to avoid calling the rerender before the cart is updated.

window.addEventListener("change", function (event) {
  setTimeout(() => addModalAndButtonPriceCart(), 1500);
});

Display the GreenLeaze price on the collection page

On collection page we strongly recommend using the product metafield product.metafields.greenleaze.minimal_price

App specific settings

Use Shopify discount codes

GreenLeaze Shopify's module enable the use of a discount code webhook. Only codes of type DiscountPercentage and DiscountAmount available for all customers. All complexity is ignored.

Discount code webhook is available at https://apps.greenleaze.com/shopify/webhooks/validate-discount-code?shop=example.myshopify.com

Add analytics

By default the shopify tracking Id is sent to Greenleaze. You can also add custom tracking data to the by adding a trackingData Object to the payload of the sendCartAndRedirect function in greenleaze-script.js. You can edit the tracking Id sent to Greenleaze but you must pass one as it is used to identify the customer between your store and Greenleaze. We strongly recommend using cookies and pass the cookies to the javascript.

This payload will be sent in all requests to your sGTM configured in Greenleaze Dashboard.

Disable products

You are able to disable a product from Greenleaze so your customer are not able to rent it. To do so set the product metafield "Désactiver Greenleaze" to "true"

Make a product not deletable

When arriving on Greenleaze Payment interface the user is able to delete products from the order. If you need a particular product not to be deletable you may set the metafield "Produit non suppresible" to "true" on your product admin page.