Skip to main content

Shopify

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​

This step is done by GreenLeaze. Please contact us to install the custom app on your shopify store. We will need your shopify store url (example.shopify.com). We will provide you with a link to install the app on all stores of the same organization.

You will then have to configure the app with the following informations:

Customizing your store theme​

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.

Download greenleaze-script.js

Durations will be automatically fetched from the Shopify App. You may edit the var monthValues = [1, 12, 24, 36]; to set default durations in case of loading error.

Display the GreenLeaze widget on the product page​

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

Download greenleaze-product.liquid

The button if display thanks to the following code:

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

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 re-add the button.

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

  1. Import the snippet in your product template product.liquid or file where you want to display the widget
{% render 'greenleaze-product' %}

Display the GreenLeaze widget on the cart page​

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

Download greenleaze-cart.liquid

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.

  1. Import the snippet in your cart template main-cart.liquid or file where you want to display the widget
{% render 'greenleaze-cart' %}
  1. 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 addModalAndButtonPriceCart function. 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​

  1. Create a new snippet greenleaze-product-preview.liquid, it will hold the price of the product on the collection card.

Download greenleaze-product-preview.liquid

  1. Import the snippet in your theme product-card.liquid file or other template where you want to display the price, just before the product price.
{% render 'greenleaze-product-preview' with card_product as product %} <!-- card_product variable may be called differently in your theme/template -->

Integrate with your existing tools​

Retreive the orders​

Greenleaze will automatically send the order created with the shopify to your shopify store. If you want the orders created on the Greenleaze dashboard you can use the following webhooks and configure them in the Greenleaze dashboard.

  • Product webhook: https://shopify.api.greenleaze.com/webhooks/search-product?shop=example.myshopify.com (to be able to select a shopify product in the Greenleaze dashboard)
  • Order confirmed webhook: https://shopify.api.greenleaze.com/webhooks/validate-order?shop=example.myshopify.com (only select Dashboard Greenleaze as source so you don't have duplicates)

For both webhooks the secret key is the same as the value you enter on the Shopify App settings page. Use a complex key.

For details on the webhooks content see Webhooks

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://shopify.api.greenleaze.com/webhooks/validate-discount-code?shop=example.myshopify.com

The webhook secret key is the same as the value you enter on the Shopify App settings page.

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.

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.