> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://lai.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Integrate LAI Product Reviews with your themes

> A complete guide to show LAI widgets on your online store. 

## Step 1: Enable LAI Embed blocks 

- Please go to [Shopify admin](https://accounts.shopify.com/store-login?redirect=themes) > select **Online store** > choose **Themes** > click on **Customize**. 

![](https://laireviews.io/assets/images/theme-app-extension-1-6af67f393290b68a6dfe61b2d24aabef.png)

- Select **App embeds** > toggle on **Embed blocks** of LAI Product Reviews. 

![](https://laireviews.io/assets/images/theme-app-extension-2-8a232760d4f0be1efda746b614802eae.png)

## Step 2: Add LAI widgets

### On 2.0 themes

#### **1. Product reviews section**

- Go to the page you'd like to show LAI widgets, e.g. product pages.

- Click on **Add section** > select **Product reviews section** > drag and drop the section where you'd like to place it > Click on **Save**. 

![](https://laireviews.io/assets/images/theme-app-extension-3-e4291a894c290590d4b468a2ce3e8813.png)

#### **2. Product star ratings**

- Click on **Add block** > select **Product star ratings** > drag and drop the section where you'd like to place it > Click on **Save**. 

![](https://laireviews.io/assets/images/theme-app-extension-4-7b91e1ddf1075b45deedba967624bdc7.png)

#### **3. Advanced widgets**
  
- For more details on different layouts of this widget, please visit **[here](https://laireviews.io/docs/settings/widgets/advanced-widgets#on-shopify-theme-editor)**.

### On 1.0 themes

#### Advanced widgets on Home page only

|| This instruction is for Advanced widgets including Card carousel, Card grid, Testimonial carousel and Media gallery only. 

- **LAI advanced widgets** block is not available on Home page in 1.0 themes, please follow this guideline to show Advanced widgets on 1.0 themes:

  + **Step 1**: Select a theme where you want to show LAI widgets. Click on **Edit code**.

    ![](https://laireviews.io/assets/images/theme-app-extension-5-8d828776dc4202610eaa3c6020d50f3b.png)

  + **Step 2**: Under **Sections**, click on **Add a new section**:

    ![](https://laireviews.io/assets/images/theme-app-extension-6-3673f5938f3ff7ccebdb75ff2ed83e63.png)

  + **Step 3**:This is a .liquid section. Please name it as **LAI-advanced-widgets**

    ![](https://laireviews.io/assets/images/theme-app-extension-7-ec6de7c664bf361b8aaffc37c5d4c46a.png)

  + **Step 4**: Copy this following piece of code, paste it in the **LAI-advanced-widgets** section and replace all current code > click **Save**:

    ```
    {% assign random_number = section.id  %}<script> var sectionConfig=  (typeof sectionConfig == "undefined" || sectionConfig == null) ? {} : sectionConfig; var scmCustomData=  (typeof scmCustomData == "undefined" || scmCustomData == null) ? {} : scmCustomData;var scmCustomDataWigetAll= (typeof scmCustomDataWigetAll == "undefined" || scmCustomDataWigetAll == null) ? [] : scmCustomDataWigetAll;scmCustomDataWigetAll['{{ random_number }}'] ={"id_iframe" : "{{ random_number }}", "productId" : "", "typePage" : 'homePage',"sectionConfig" : JSON.stringify(sectionConfig),"scmCustomData" : JSON.stringify(scmCustomData),'dataProduct' : []};sectionConfig= null;scmCustomData= null;</script>
    <div class="scm-container" style="display: none;">
    <div class="lai-title">{{ section.settings.title }}</div>
    <div class="scm-reviews-importer">
        <iframe class="scm-reviews-importer-iframe" width="100%" title="Sma reviews section Home Page" data-idIframe="{{ random_number }}" data-custom-section='{{ section.settings | json | escape }}'></iframe>
    </div>
    </div>
    {% schema %}
        {
        "name": "LAI advanced widgets",
        "class": "index-section",
        "settings": [
        {
            "type": "liquid",
            "id": "title",
            "label": "Widget Title"
        },
        {
            "type": "paragraph",
            "content": "Need help to set up widgets? [Read our instruction.](https://laireviews.io/docs/settings/display/advanced-widgets/?utm_source=displaysetting&utm_medium=in-app) "
        },
        {
            "type": "select",
            "id": "type_layout",
            "label": "Widget type",
            "options": [
            {
                "value": "grid",
                "label": "Card grid"
            },
            {
                "value": "testimonial",
                "label": "Testimonial"
            },
            {
                "value": "gallery",
                "label": "Gallery"
            },
            {
                "value": "cardCarousel",
                "label": "Card Carousel"
            }
            ]
        },
        {
            "type": "select",
            "id": "source",
            "label": "Review source",
            "options": [
            {
                "value": "homePage",
                "label": "Collection 1"
            },
            {
                "value": "happyPage",
                "label": "Collection 2"
            },
            {
                "value": "highlightProductPage",
                "label": "Collection 3"
            }
            ],
            "default": "homePage"
            },
            {
            "type": "paragraph",
            "content": "Go [here](https://reviews.smartifyapps.com/login?redirectTo=/review-groups) to edit review collections."
            },
            {
            "type": "header",
            "content": "Custom layout"
            },
            {
            "type": "text",
            "id": "background",
            "label": "Background color",
            "info": "Ex: #fff or transparent",
            "default": "#fff"
            },
            {
            "type": "text",
            "id": "width_container",
            "label": "Review widget width",
            "info": "Ex:1200px or 100%"
            },
            {
            "type": "checkbox",
            "id": "use_default_setting",
            "label": "Apply default layout setting",
            "default": false
            }
        ],
            "presets": [{
            "name": "LAI  advanced widgets",
            "category": "LAI Reviews"
        }]
        }
    {% endschema %}
    ```

  - Go to **Shopify theme editor** > click on **Add section** > search for **advanced** > add **LAI advanced widgets** and follow [this guideline](https://laireviews.io/docs/settings/display/advanced-widgets) for more details. 

    ![](https://laireviews.io/assets/images/theme-app-extension-8-3e0acf95db20d2b338ac6cdcb7e8de87.png)

#### Product review section on Home page only

- **LAI product review section** block is not available on Home page in 1.0 themes, please follow this guideline to show Advanced widgets on 1.0 themes:

  + **Step 1**: Select a theme where you want to show LAI widgets. Click on **Edit code**.

    ![](https://laireviews.io/assets/images/theme-app-extension-5-8d828776dc4202610eaa3c6020d50f3b.png)

  + **Step 2**: Under **Sections**, click on **Add a new section**:

    ![](https://laireviews.io/assets/images/theme-app-extension-6-3673f5938f3ff7ccebdb75ff2ed83e63.png)

  + **Step 3**:This is a .liquid section. Please name it as **LAI-product-reviews**

    ![](https://laireviews.io/assets/images/theme-app-extension-9-a6202670d7ae2b00c54a02d5ca45aa04.png)

  + **Step 4**: Copy this following piece of code, paste it in the **LAI-product-reviews** section and replace all current code > click **Save**:

```
{% assign random_number = section.id  %}{% if section.settings.lai_product != null and section.settings.lai_product != "" %}{%- assign product = all_products[section.settings.lai_product] -%}{% endif %}<script> var sectionConfig=  (typeof sectionConfig == "undefined" || sectionConfig == null) ? {} : sectionConfig;var scmCustomData=  (typeof scmCustomData == "undefined" || scmCustomData == null) ? {} : scmCustomData;var scmCustomDataWigetAll= (typeof scmCustomDataWigetAll == "undefined" || scmCustomDataWigetAll == null) ? [] : scmCustomDataWigetAll; scmCustomDataWigetAll['{{ random_number }}'] ={  "id_iframe" : "{{ random_number }}",    "productId" : "{{ product.id }}",    "typePage" : 'productPage',    "sectionConfig" : JSON.stringify(sectionConfig), "scmCustomData" : JSON.stringify(scmCustomData),    'dataProduct' : []  };  sectionConfig= null;  scmCustomData= null;  scmCustomDataWigetAll['{{ random_number }}'].dataProduct['product']= {{ product | json }};  {% for metafieldValue in  product.metafields.scm_review_importer %}      scmCustomDataWigetAll['{{ random_number }}'].dataProduct['{{ metafieldValue[0] }}']= `{{ metafieldValue[1] | json }}`;  {% endfor %}</script>
<div class="scm-container" style="display: none;">
    {% if section.settings.title %}
  <div class="lai-title"><h2>{{ section.settings.title }}</h2></div>
  {% endif %}
  <div class="scm-reviews-importer" data-product-id={{ product.id }}>
    <iframe class="scm-reviews-importer-iframe" width="100%" title="Sma reviews section Product Page" data-idIframe="{{ random_number }}" data-custom-section='{{ section.settings | json | escape }}'></iframe>
  </div>
</div>
{% schema %}
{
    "name": "LAI product reviews",
    "class": "index-section",
    "settings": [
        {
          "type": "product",
          "id": "lai_product",
          "label": "Choose Product"
        },
        {
          "type": "liquid",
          "id": "title",
          "label": "Product Reviews Title"
        }
    ],
    "presets": [{
    "name": "LAI product reviews",
    "category": "LAI Reviews"
    }]
}
{% endschema %}
```

- Go to **Shopify theme editor** > click on **Add section** > search for **LAI** > add **LAI product reviews** to show product review sections:

    ![](https://laireviews.io/assets/images/theme-app-extension-10-9cc21d5bc2aab9ec0f2bde7e0b278a3a.png)

- Click on the new added **LAI product reviews** section > click on **Select product** > choose the product you want to show its reviews > **Save** it. 

    ![](https://laireviews.io/assets/images/theme-app-extension-11-41aab6be16b5544f2484ae397ee54fd0.png)

#### On other pages

- On your Shopify theme editor, please click on **Edit code** > choose a file where you want to show our widget > add following code > **Save**.

**1. Product review section**

```
{% assign random_number = "now" | date: "%N" | modulo: 1000 | plus: 0 %}<script>var sectionConfig=  (typeof sectionConfig == "undefined" || sectionConfig == null) ? {} : sectionConfig;var scmCustomData=  (typeof scmCustomData == "undefined" || scmCustomData == null) ? {} : scmCustomData;var scmCustomDataWigetAll= (typeof scmCustomDataWigetAll == "undefined" || scmCustomDataWigetAll == null) ? [] : scmCustomDataWigetAll; scmCustomDataWigetAll['{{ random_number }}'] ={"id_iframe" : "{{ random_number }}","productId" : "{{ product.id }}","typePage" : 'productPage',"sectionConfig" : JSON.stringify(sectionConfig),"scmCustomData" : JSON.stringify(scmCustomData),'dataProduct' : []};sectionConfig= null;scmCustomData= null;scmCustomDataWigetAll['{{ random_number }}'].dataProduct['product']= {{ product | json }};{% for metafieldValue in  product.metafields.scm_review_importer %}scmCustomDataWigetAll['{{ random_number }}'].dataProduct['{{ metafieldValue[0] }}']= `{{ metafieldValue[1] | json }}`;{% endfor %}</script>
<div class="scm-container" style="display: none;">
    <div class="scm-reviews-importer" data-product-id= "{{ product.id }}">
        <iframe class="scm-reviews-importer-iframe" width="100%" title="Sma reviews section Product page" data-idIframe="{{ random_number }}"></iframe>
    </div>
</div>
```

**2. Card carousel**

``` 
<script>var sectionConfig={ "type_layout" : "cardCarousel", "source" : "default_layout"};</script>{% assign random_number = "now" | date: "%N" | modulo: 1000 | plus: 0 %}<script>var sectionConfig=  (typeof sectionConfig == "undefined" || sectionConfig == null) ? {} : sectionConfig;var scmCustomData= (typeof scmCustomData == "undefined" || scmCustomData == null) ? {} : scmCustomData;var scmCustomDataWigetAll= (typeof scmCustomDataWigetAll == "undefined" || scmCustomDataWigetAll == null) ? [] : scmCustomDataWigetAll; scmCustomDataWigetAll['{{ random_number }}'] ={ "id_iframe" : "{{ random_number }}","productId" : "","typePage" : 'homePage',"sectionConfig" : JSON.stringify(sectionConfig),"scmCustomData" : JSON.stringify(scmCustomData),'dataProduct' : []};sectionConfig= null;scmCustomData= null;</script><div class="scm-container" style="display: none;"><div class="scm-reviews-importer"><iframe class="scm-reviews-importer-iframe" width="100%" title="Sma reviews section Home Page" data-idIframe="{{ random_number }}"></iframe></div></div>
```

**3. Testimonial carousel**

```
<script>var sectionConfig={ "type_layout" : "testimonial", "source" : "default_layout"};</script>{% assign random_number = "now" | date: "%N" | modulo: 1000 | plus: 0 %}<script>var sectionConfig=  (typeof sectionConfig == "undefined" || sectionConfig == null) ? {} : sectionConfig;var scmCustomData= (typeof scmCustomData == "undefined" || scmCustomData == null) ? {} : scmCustomData;var scmCustomDataWigetAll= (typeof scmCustomDataWigetAll == "undefined" || scmCustomDataWigetAll == null) ? [] : scmCustomDataWigetAll; scmCustomDataWigetAll['{{ random_number }}'] ={ "id_iframe" : "{{ random_number }}","productId" : "","typePage" : 'homePage',"sectionConfig" : JSON.stringify(sectionConfig),"scmCustomData" : JSON.stringify(scmCustomData),'dataProduct' : []};sectionConfig= null;scmCustomData= null;</script><div class="scm-container" style="display: none;"><div class="scm-reviews-importer"><iframe class="scm-reviews-importer-iframe" width="100%" title="Sma reviews section Home Page" data-idIframe="{{ random_number }}"></iframe></div></div>
```

**4. Media gallery**

```
<script>var sectionConfig={ "type_layout" : "gallery", "source" : "default_layout"};</script>{% assign random_number = "now" | date: "%N" | modulo: 1000 | plus: 0 %}<script>var sectionConfig=  (typeof sectionConfig == "undefined" || sectionConfig == null) ? {} : sectionConfig;var scmCustomData= (typeof scmCustomData == "undefined" || scmCustomData == null) ? {} : scmCustomData;var scmCustomDataWigetAll= (typeof scmCustomDataWigetAll == "undefined" || scmCustomDataWigetAll == null) ? [] : scmCustomDataWigetAll; scmCustomDataWigetAll['{{ random_number }}'] ={ "id_iframe" : "{{ random_number }}","productId" : "","typePage" : 'homePage',"sectionConfig" : JSON.stringify(sectionConfig),"scmCustomData" : JSON.stringify(scmCustomData),'dataProduct' : []};sectionConfig= null;scmCustomData= null;</script><div class="scm-container" style="display: none;"><div class="scm-reviews-importer"><iframe class="scm-reviews-importer-iframe" width="100%" title="Sma reviews section Home Page" data-idIframe="{{ random_number }}"></iframe></div></div>
``` 

**5. Card grid**

```
<script>var sectionConfig={ "type_layout" : "grid", "source" : "default_layout"};</script>{% assign random_number = "now" | date: "%N" | modulo: 1000 | plus: 0 %}<script>var sectionConfig=  (typeof sectionConfig == "undefined" || sectionConfig == null) ? {} : sectionConfig;var scmCustomData= (typeof scmCustomData == "undefined" || scmCustomData == null) ? {} : scmCustomData;var scmCustomDataWigetAll= (typeof scmCustomDataWigetAll == "undefined" || scmCustomDataWigetAll == null) ? [] : scmCustomDataWigetAll; scmCustomDataWigetAll['{{ random_number }}'] ={ "id_iframe" : "{{ random_number }}","productId" : "","typePage" : 'homePage',"sectionConfig" : JSON.stringify(sectionConfig),"scmCustomData" : JSON.stringify(scmCustomData),'dataProduct' : []};sectionConfig= null;scmCustomData= null;</script><div class="scm-container" style="display: none;"><div class="scm-reviews-importer"><iframe class="scm-reviews-importer-iframe" width="100%" title="Sma reviews section Home Page" data-idIframe="{{ random_number }}"></iframe></div></div>
```

**6. Star ratings**

```
<div class="scm-reviews-rate" data-rate-version2="{{ product.metafields.scm_review_importer.reviewsData.reviewCountInfo | json }}" data-product-id="{{ product.id }}"></div>
```

If you need more support, please contact us via live chat or send us emails to support@smartifyapps.com.