Examples → Click to Reveal & CTAs

Instructions

Require the widget script

 <script src="//widget.stylitics.com/v2/widget.js"></script> 

Set configuration options and initialize the widget once your target div is on the page.

(Note: the border in the above example is on the target div, just to show where it is. It is not rendered by the widget)

var opts = {
  api: {
    total: 3,
    item_number: '389998022',
  },
  display: {
    cols: 3,

    //Styles the cta: "border" (default), "underline", "plain"
    ctaThemeClass: "underline",

    //Positions the cta relative to collage: "bottom" (default), "top", "center"
    ctaPosition: "bottom",

    //cta shop button text defaults to "Shop this look".
    ctaText: "SHOP NOW",

    //cta "back to look" button text defaults to "Back to look".
    ctaBackToLookText: "BACK TO LOOK",

    //Shop Item cta button text. Defaults to "Shop"
    itemCtaText: "SHOP THIS",

    //Item info layout. "rows" (default), "columns"
    //itemInfoLayout: "columns",

    //Legacy clickToReveal. This will render old cta instead of new ones. Defaults to false.
    //clickToReveal: true,
  },
}

//constructor args:  client name, id of target div, config options
var styliticsWidget1 = new StyliticsWidget("demo", "target1", opts)

styliticsWidget1.load()
//when used at end of body tag.  Use library of your choice to
//ensure widget loads after target div exists on page