Example

Installation

To install this plugin, add the following snippet at the bottom of your theme.liquid file just before the /body closing tag:

<div id="checkout"></div>
<link rel="stylesheet" type="text/css" href="https://js-checkout.luxgroup.eu/static/css/app.css">

How it works

This plugin is a set of scripts you easily can inject to any Shopify theme. It listens for the AddToCart form submission event, at which point it will override the default behaviour and direct the customer to a customised and optimised checkout flow by opening a modal overlay.

Requirements

The Javascript code will only override the checkout flow if the product has a valid SKU. SKUs are 3 digit numbers indicating which product should be shown in the optimised checkout flow. This SKU you will get from us.

Can I use this outside Shopify?

Technically, yes. It has no direct API connection to Shopify, so you will be able to use this plugin on any landingpage that generates a set of code similar to what Shopify does. The plugin assumes the following is present:

  • window.ShopifyAnalytics Javascript object holding information about currency, pricing and SKU
  • Form element with .product-form class

For an example, check the source code of this page.

Setting prices

The optimised checkout flow uses its own set of rules for pricing. Based on currency, country and a few other factors such as active tests. It will first and foremost see if the price set on the Shopify product page matches an available price rule in the Lux engine. If not, it will default to the best converting price. To avoid conflicting between prices on the product page and in the checkout, please get in touch.

Styling

It is possible to customise the first modal page, leaving you the possibility to override any styling regarding to the title, form and CTA button.

For reference, please check your DOM for generated HTML to see which elements you can customise as well as how to refer to them.

Note: In beta

Note that this plugin is still in beta, and that anything is subject to change. If you want to be kept updated about changes, please get in touch.