Placing product frames on your site

In order to place a product frame on your site, you must go to the Publisher Dashboard and do the following:

  1. Search for and select some products to be included in the frame
  2. Save the frame and give it a name
  3. Generate the code snippet for your frame
  4. Add the script tag to the <head> section of all of your pages that will contain a product frame or shopping bag
  5. Add the frame's code snippet to your page.
  6. Set the configurable parameters for your frame in the code snippet (see below).

Controlling order within a frame

The order that products show up within a frame is controlled using the Publisher Dashboard. Simply drag and drop the products in to the order that you want them to appear. If you are using a single product frame, the frame will only display the first product in the left-most position.


Configuring a product frame

The code snippet for a product frame should be automatically generated for you using the Publisher Dashboard, however there are some fields that you can customize for your environment.

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.

<div class='lux-product-frame' data-frame='single' data-id='77'></div>

In the example above, there will be one frame created on the page of type single with ID 77.

Configuration

The following HTML attributes values must be customized for your frame:

Attribute Default Description
data-frame n/a This is set to the type of the frame you want to display. The frame types are: 'single', 'grid' and 'slideshow'
data-id n/a This is set to the ID of the frame you want to display. The frame ID can be found on the Publisher Dashboard and is associated with each frame.
data-tag n/a In lieu of using an ID, you can instead use a frame tag. Frame tags can be set on the Publisher Dashboard. Frame tags are a convenient way of associating a particular page, post or article in your CMS with a frame, without having to store the frame's ID in your page or CMS. For example, if your CMS has a unique page or article identifier like article-219 then you can add that as a tag on the frame that you'd like to show up on your page.
data-lookup-by-url false In lieu of using an ID or a tag you can use this parameter to associate a URL on your site with a frame. To use this feature you can add a tag to your frame on the Publisher Dashboard with your page's URL (e.g. www.example.com/test.html). If this attribute is enabled (data-lookup-by-url=true), then the Shoppable Javascript library will retrieve the frame using your page's URL as the tag. The Javascript library will ignore any query string parameters or anchor tags on the URL and simply use the host and path portions of the URL. For example, if the page's URL is www.example.com/test.html?param1=value1&param2=value2#anchor1 the tag to match that page would be www.example.com/test.html.
data-show-powered-by true This toggles the display of a Powered by 72Lux icon.


Hiding elements within a frame

In addition to using CSS to hide certain elements within a frame, it's also possible to set configuration parameters in the frame definition to hide certain elements. For example, the following definition shows how you can set configuration parameters to hide certain elements:

<div class='lux-product-frame' data-frame='single' data-id='77' data-show-brand='0' data-show-description='0'></div>

In the example above, you can see flags for hiding certain elements within the frame that all begin with show. By setting the parameter value to 0 the element will be hidden. If you set the parameter value to 1, or remove the parameter completely, the element will be displayed.

Attributes used for hiding elements within a frame

Attribute Default Description
data-show-hero true Toggles the display of the main product image
data-show-brand true Toggles the display of the brand name
data-show-title true Hides product title
data-show-retail-price true Toggles the display of the retail price
data-show-description true Toggles the display of the description
data-show-ships-from true Toggles the display of the retailer's name
data-show-social-buttons true Toggles the display of the social buttons (only available in v1.5)
data-show-more-from-brand true Toggles the display of the Show More From Brand section (only available in v1.5)
data-show-more-from-category true Toggles the display of the Show More From Category section (only available in v1.5)

*Any frames that contain the older data-hide convention will remain functioning correctly.


Modifying a frame's text

For Unavailable Products

To modify the copy present for unavailable products, there is a data-unavailable-text attribute that one can assign a custom message to. If the attribute is not present, then the default copy, "This product is currently unavailable" will be displayed.


Using social buttons (v1.5)

Twitter and Pinterest

New to Frames version 1.5 is be the ability to display Social Buttons for visitors to interact with. To control what copy shows up when a user decides to Pin or Tweet the specfic product, there is a data-social-text attribute that can contain a string.

For example:

<div class='lux-product-frame' data-version='1.5' data-frame='single' data-id='77' data-social-text="Look at what I found!"></div>

The above would result in:

'An Example Tweet with custom text'

If data-social-text is not present, the default would be the Brand Name and Product Name:

'An example tweet with default text'

Google+ and Facebook

In order to control the copy displayed when a user Likes or +1's a product, there needs to be a set of Open Graph meta tags for Facebook's and Google's crawlers to record. For more information on how to set them up: