Contents x
    Shortform Collection Integration
      • Print
      Contents

      Shortform Collection Integration

        • Print
        Article summary

        This guide introduces how to integrate Shortform Collection

        [Step 1] Initialization

        Here are examples of how you can initialize the Shoplive Shortform without user authentication, simple authentication, and JWT token authentication

        Install with desired auth type of initialization code in common layout (head area, etc.)

        Detail information can be found in User Authentication.

        Access Key

        Access key and secret key can be obtained from Shoplive representative.

        <script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });</script>

<!-- OR -->

//Simple auth
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>
  cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserObject({userId: "USER_ID", userName: "USER_NAME"});
</script>

<!-- OR -->

//JWT auth
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>
  cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserJWT("USER_JWT");
</script>

        [Step 2] Rendering Shortform Collection with the desired template

        Enter the code below where you want to display the Shortform list. The template field indicates which layout you want to use for Shortform list.

        <div id="shoplive-shortform"></div>
<script defer >
  cloud.shoplive.setShortformCollection("shoplive-shortform", {template: "GRID1 | GRID2 | HORIZONTAL"} );
</script>

        ▶︎ Introduction to Shortform Collection

        Shortform lists can be displayed in the 3 formats below. You can also specify whether to use the "VIEW MORE" button and the maximum number of rows.

        • Grid1 - Vertical Scroll Layout (Large content)

        • Grid2 - Vertical Scroll Layout (Small content)

        • Horizontal - Horizontal Scroll Layout

        Grid1 - Vertical Scroll Layout (Large content)

        Insert below code.

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

        Grid2 - Vertical Scroll Layout (Small content)

        Insert below code

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

        Horizontal - Horizontal Scroll Layout

        Insert below code

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

        UI Configuration

        rows and hasMoreButton options are available only for Grid1 and Grid2

        Parameter

        Function

        Description

        default

        rows

        Max rows

        Sets the default number of rows that apply to the vertical scroll layout.

        2 (max:4)

        hasMoreButton

        Whether showing the ‘View More’ button

        Indicates whether to display the "View more" button. If not displayed, additional rows are automatically loaded when the bottom of the list is reached.

        true

        <div id="shoplive-shortform-2"></div>
<script defer >
  cloud.shoplive.setShortformCollection("shoplive-shortform-2", {template: "GRID2" ,hasMoreButton:true, rows:4} );
</script>

        What's Next