Placing ad frames on your site

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

  1. Create a Product Grid Frame
  2. Generate the code snippet for your ad frame
  3. Add the script tag to the <head> section of all of your pages that will contain an ad frame
  4. Add the ad frame's code snippet to your page.
  5. Set the configurable parameters for your ad frame in the code snippet (see below).

Controlling order within a frame

The products in an ad frame are displayed at random from the set of products you've selected in your product grid frame.


Configuring an ad frame

The code snippet for an ad 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.adframe.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-ad-frame' data-id='188' data-page='{PRODUCT GRID FRAME URL}' ></div>

In the example above, there will be one frame created on the page of type ad with ID 188. Clicking on any of the displayed products will open the URL specified in that data-page attribute and automatically open the product detail modal.

Configuration

Required Attributes

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

Attribute Description
data-id This is set to the ID of the product frame you want used for the ad frame. The frame ID can be found on the Publisher Dashboard and is associated with each frame.
data-page This is the URL of the page where your product grid frame is displayed.


Optional Attributes

There are few optional parameters you can specify with an ad frame that controls how a frame looks and works. If any of these attributes are not specified the default value will be used.

Attribute Possible values Default
data-ad-title This text will be displayed as the ad title. CSS can be used to show plain text or a link to the product frame page specified in data-page. The product frame name this ad frame is linked to will be displayed.
data-ad-sub-title This text will be displayed as the ad sub-title. Nothing will be displayed.
data-hide-title 0 : Show frame title
1 : Hides frame title. This overrides the data-ad-title attribute.
0
data-product-count The number of products you want to displayed
Note:
The default CSS accomodates 3 products. Please adjust the CSS if this number is changed.
3
data-click-target _blank : Opens the linked document in a new window or tab
_self : Opens the linked document in the same frame as it was clicked (this is default)
_parent : Opens the linked document in the parent frame
_top : Opens the linked document in the full body of the window
HTML framename : Opens the linked document in a named HTML frame
_blank
data-tracking The text provided in this attribute will appear as a parameter when user is redirected to the product frame. No default.