Collection configuration

You can configure your shortform collection in any form you want.

Default

<div id="shoplive-shortform"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform");
</script>

Options

<div id="shoplive-shortform"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform", {
    template: "GRID1",                      // "GRID1" | "GRID2" | "HORIZONTAL"
    sku: ["SKU1", "SKU2"],                  // (optional) array of one or more sku identifiers
    brands: ["BRAND_IDENTIFIER1","BRAND_IDENTIFIER2"],      // (optional) array of one or more brand identifiers
    tags: ["TAG1", "TAG2", "TAG3"],         // (optional) array of one or more tags.
    shuffle: false,                         // (optional) random order, true | false
    shortformCollectionId: "SHORTFORM_GROUP_ID",            // (optional) groupId of a specific shorform group
    sortProperty: "viewCount",              // (optional) "likeCount" | "viewCount" | "commentCount" | "shareCount" | "bookmarkCount"
    sortDirection: "desc"                   // (optional) "asc" | "desc"
  });
</script>

SKU

You can configure a collection of associated Shortforms using single or multiple SKU values.

<div id="shoplive-shortform"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform", { 
    skus: ["SKU1", "SKU2"] 
  });
</script>

Tag

You can configure Shortform collections using tags set for each content.

Single tag

You can configure a collection using a single tag.

<div id="shoplive-shortform"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform", { 
    tags: ["TAG"] 
  });
</script>

Multiple tags

You can configure collections using search criteria that include multiple tags. You can set up to a maximum of 5 tags, and they operate in OR mode.

<div id="shoplive-shortform"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform", { 
    tags: ["TAG1", "TAG2", "TAG3", "TAG4", "TAG5"] 
  });
</script>

When configuring a shortform collection with multiple tags, you can add the tagSearchOperator="AND" option to configure them as a condition that includes all of the tags (AND condition).

<div id="shoplive-shortform"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform", { 
    tags: ["TAG1", "TAG2"],
    tagSearchOperator: "AND"
  });
</script>

Brand

You can create brand-specific collections using the 'identifier' of the brand set for each content.

Single brand

You can configure a collection using a single brand identifier.

<div id="shoplive-shortform"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform", { 
    brands: ["BRAND_IDENTIFIER"] 
  });
</script>

Multiple brands

To configure a collection that includes multiple brands, include brand identifiers in an array. The maximum number of brands is limited to 5.

<div id="shoplive-shortform"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform", { 
    brands: ["BRAND_IDENTIFIER1", "BRAND_IDENTIFIER2"] 
  });
</script>

Constructing with Parameter Combinations

You can configure collections by combining multiple parameters.

<div id="shoplive-shortform"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform", { 
    skus: ["SKU1", "SKU2"],
    tags: ["TAG"],
    brands: ["BRAND_IDENTIFIER1"] 
  });
</script>

Metrics

You can create a collection of which shortform videos are sorted by the key performance metrics.

• sortProperty(metrics):  createdAt, updatedAt, likeCount, viewCount, commentCount, shareCount, bookmarkCount

  • If sortProperty is not specified, the default sorting order in Admin will be applied.

• sortDirection(order): asc, desc

<div id="shoplive-shortform"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform", {
    sortProperty: "viewCount",        // (optional) "createdAt" | "updatedAt" | "likeCount" | "viewCount" | "commentCount" | "shareCount" | "bookmarkCount"
    sortDirection: "desc"             // (optional) "asc" | "desc"
  });
</script>

Random order

Default shuffle

The order of a shortform collection can be configured to be displayed randomly.

<div id="shoplive-shortform"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform", { 
    shuffle: true 
  });
</script>

Tags or brand shuffle

It can be used in conjunction with list configuration by tag or brand.

<div id="shoplive-shortform"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform", { 
    brands: ["BRAND_IDENTIFIER1", "BRAND_IDENTIFIER2"],
    tags: ["TAG1", "TAG2"],
    shuffle: true
  });
</script>

Shortform random playback policy

If you click on a shortform from a list that is randomly generated, the order of the shortforms in the feed will also be randomly generated.

Disabling auto play

Turn off the feature that automatically plays the shortform videos in the collection when they are displayed on the screen.

<div id="shoplive-shortform"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform", { 
    disablePreviewVideoPlay: true 
  });
</script>