In order to add a dynamic shopping bag link on your site there are two steps:

  1. Add the script tag to the <head> section of all of your pages that will contain a product frame or shopping bag
  2. Put the shopping bag link on your page wherever you want your users to see the shopping bag link (for example, in the top navigation).

In the <head> section of your page(s)

Add the script tag to the <head> section of all of your pages that will contain a product frame or shopping bag. Replace {API TOKEN} with your api token.

<script type="text/javascript" id='lux-shop-loader' src='//api.shoppable.com/assets/js/shop.js?token={API TOKEN}'></script>

In the <body> of your page

Add the div tag to the <body> section of your page where you want the frame to appear.

<a href="#" class="lux-cart-frame" data-checkout="https://my.site.com/checkout/" data-style="modal">SHOPPING BAG</a> <span class="lux-cart-label">&nbsp;</span>
  • You must set the data-checkout attribute to be the location of the checkout page on your site
  • The data-style attribute determines what method to use when displaying the Shopping Bag.
    • data-style="modal" has the Shopping Bag appear via an overlay effect with static backdrop.
    • data-style="popover" has the Shopping Bag appears overlayed but with no static backdrop.
  • The <a> tag is the link that will trigger to shopping bag popover to appear.
    • The text within the tag, shown below as 'SHOPPING BAG' can be set to anything you want.
    • The CSS class lux-cart-frame can be used to apply styles to this link.
  • The <span> tag will be used by the Shoppable platform to display the current number of items within the shopping bag.
    • The CSS class lux-cart-label can be used to apply styles to this text.

Shopping bag frame data attributes

Attribute Default Allowed Values Description
data-checkout

REQUIRED

No default Any valid URL Full URL of the checkout page on your site
data-style

REQUIRED

No default modal The attribute `data-style="modal"` has the Shopping Bag appear via an overlay effect with static backdrop.
data-show-powered-by

OPTIONAL

false 1 or true (boolean) Toggles the displaying of the "Powered by 72Lux" logo on the shopping bag modal. We recommend you always enable this, but the default is to not show it for backwards compatibility reasons.
data-show-privacy-policy-link

OPTIONAL

false 1 or true (boolean) Toggles the displaying of the link to 72Lux's privacy policy on the shopping bag modal. We recommend you always enable this, but the default is to not show it for backwards compatibility reasons.
data-empty-message

OPTIONAL

No Any string (HTML friendly) Gives control over what an empty shopping cart will display to a visitor.

Shoppable | Shoppable til you Droppable

Styling the Shopping bag frame

The shopping bag frame operates as a popover control whenever a user clicks the shopping bag link on your page. It will display all of the products that are in the user's shopping bag. You can control the styling for the shopping bag frame by using CSS on your site. The HTML for the shopping bag frame is loaded directly into the main DOM of your site so you are free to apply any CSS styles to any of the components in the frame.

Example Shopping Bag

Example Shopping Bag


Example CSS

You can look at an example of the shopping bag CSS code we use for our demo site by taking a look at our shopping bag CSS. You can make a local copy of the file and make edits for your site.

The shopping cart CSS file now contains responsive styles to provide a better mobile experience.

Note: To take full advantage of the responsive cart, any parent or wrapper elements relating to the layout of the page must also compensate for displays of varying width.