1. All code

{% liquid
    if product.metafields.trustshop_reviews.stars_review.value.average_review
        assign ratingValue = product.metafields.trustshop_reviews.stars_review.value.average_review | json
    else
        assign ratingValue = 0
    endif

    if product.metafields.trustshop_reviews.stars_review.value.total_review 
        assign ratingCount = product.metafields.trustshop_reviews.stars_review.value.total_review | json
    else
        assign ratingCount = 0
    endif 
    
%}
{% if template.name == 'index' and block.settings.selected_product.id %}
    {%capture productInfo %}
        {
            "productId": "{{ block.settings.selected_product.id }}",
            "productName": "{{ block.settings.selected_product.title | base64_encode }}",
            "shopId": "{{ shop.id }}",
            "productImage": "{{ block.settings.selected_product.featured_image | replace: "'", "\\'" }}",
            "shopUrl": "{{ shop.url | replace: "'", "\\'" }}",
            "productUrl": "{{ block.settings.selected_product.url | replace: "'", "\\'" }}",
            "productPrice": "{{ block.settings.selected_product.price }}",
            "productPriceCompare": "{{ block.settings.selected_product.compare_at_price }}",
            "currencySymbol": "{{ cart.currency.symbol }}",
            "is_show": true,
            "reply_name": "{{ shop.metafields.trustshop_reviews.widget_box_reply_shop_name | base64_encode }}"

        }
    {% endcapture %}
{% else %}
    {% capture productInfo %}
        {
            "productId": "{{ product.id }}",
            "productName": "{{ product.title | base64_encode }}",
            "shopId": "{{ shop.id }}",
            "productImage": "{{ product.featured_image | replace: "'", "\\'" }}",
            "shopUrl": "{{ shop.url | replace: "'", "\\'" }}",
            "productUrl": "{{ product.url | replace: "'", "\\'" }}",
            "productPrice": "{{ product.price }}",
            "productPriceCompare": "{{ product.compare_at_price }}",
            "currencySymbol": "{{ cart.currency.symbol }}",
            "is_show": true,
            "reply_name": "{{ shop.metafields.trustshop_reviews.widget_box_reply_shop_name | base64_encode }}"
        }
    {% endcapture %}
{%endif %}

{% style %}    
    .trustshop-modal-design-mode--container{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: grid;
        place-items: center;
        z-index: 9999;
    }

    .trustshop-notice--box{
        display: flex;
        flex-direction: column;
        font-family: Inter, Arial, sans-serif;
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 4px 12px rgba(0,0,0,.25);
        padding: 20px;
        z-index: 9999;
        min-height: 163px;
        transition: height .1s ease-in-out;
        color: #091218;
        padding: 12px 16px;
        font-weight: 400;
        border-radius: 16px;
    }

    .trustshop-notice--header{
        text-align: unset;
        position: relative;
    }

    .trustshop-notice--header p{
        margin: 0;
    }

    .trustshop-notice--header .trustshop-notice--title{
        font-weight: 500;
        font-size: 28px;
        line-height: 36px;
        position: relative;
    }

    .trustshop-notice--header .trustshop-notice--description{
        font-size: 16px;
        line-height: 24px;
    }

    .trustshop-notice--header button{
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    .trustshop-notice--header button:hover svg path{
        fill: #000;
    }

    .trustshop-notice--content{
        margin-top: 10px;
    }

    .trustshop-notice--content .trustshop-introduction ol,
    .trustshop-notice--content .trustshop-introduction li{
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }
    .trustshop-introduction--img{
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        overflow: hidden;
        border: 4px solid #0c6a40;
    }
    .trustshop-introduction--img img{
        max-width: 405px;
    }

{% endstyle %}

<div id="trustshop-init-widget-box-metafield--data" style="display: none;">
    <input
        type="hidden"
        id="trustshop-get-product_info"
        value='{{ productInfo }}'
        disabled />

    <input
        type="hidden"
        id="trustshop-widget_box_layout_box"
        value='{{ shop.metafields.trustshop_reviews.widget_box_layout_box }}'
        disabled />
    <input
        type="hidden"
        id="trustshop-widget_box_layout_summary_box"
        value='{{ shop.metafields.trustshop_reviews.widget_box_layout_summary_box }}'
        disabled />
    <input
        type="hidden"
        id="trustshop-widget_box_color_customize"
        value='{{ shop.metafields.trustshop_reviews.widget_box_color_customize }}'
        disabled />

    <input
        type="hidden"
        id="trustshop-widget_box_section_show"
        value='{{ shop.metafields.trustshop_reviews.widget_box_section_show }}'
        disabled />
    <input
        type="hidden"
        id="trustshop-widget_box_sort_filter"
        value='{{ shop.metafields.trustshop_reviews.widget_box_sort_filter }}'
        disabled />

    <input
        type="hidden"
        id="trustshop-widget_box_label_content"
        value='{{ shop.metafields.trustshop_reviews.widget_box_label_content | replace: "'", "&apos;"}}'
        disabled />
    <input 
        type="hidden" 
        id="trustshop-widget_box_review_per_page" 
        value='{"review_per_page_desktop": "{{ shop.metafields.trustshop_reviews.widget_box_review_per_page_desktop }}", "review_per_page_mobile": "{{ shop.metafields.trustshop_reviews.widget_box_review_per_page_mobile }}"}' 
        disabled />
</div>
<div class="trustshop trustshop-review-wrap" id="trustshop-review"></div>

<script defer src="<https://cdn.shopify.com/extensions/6999d4a3-c2c1-4194-a87e-11606406dffb/trustshop-product-reviews-144/assets/trustshop-cloudflarestream.min.js>"></script>
<script defer src="<https://cdn.shopify.com/extensions/6999d4a3-c2c1-4194-a87e-11606406dffb/trustshop-product-reviews-144/assets/trustshop-confetti.min.js>"></script>
<link rel="stylesheet" href="<https://cdn.shopify.com/extensions/6999d4a3-c2c1-4194-a87e-11606406dffb/trustshop-product-reviews-144/assets/trustshop-product-reviews.min.css>">
<script defer src="<https://cdn.shopify.com/extensions/6999d4a3-c2c1-4194-a87e-11606406dffb/trustshop-product-reviews-144/assets/trustshop-product-reviews.min.js>"></script>
<script>
        window.TS_BLOCK_ADDED = {
            ...window.TS_BLOCK_ADDED,
            widget: true
        }
</script>
<script>
    if({{ ratingValue }} != 0) {
            let productSnippet = {
                "@context": "<https://schema.org/>",
                "@type": "Product",
                "name": {{ product.title | json }},
                "brand": {
                "@type": "Brand",
                "name": {{ product.vendor | json }}
                },
                "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": {{ ratingValue }},
                "ratingCount": {{ ratingCount }}
                }
            };
            const script = document.createElement('script');
                script.type = 'application/ld+json';
                script.text = JSON.stringify(productSnippet);
                document.head.appendChild(script);
           
        }
</script>

1. Explain Code

This code is used to get values including average reviews and total reviews

{% liquid
    if product.metafields.trustshop_reviews.stars_review.value.average_review
        assign ratingValue = product.metafields.trustshop_reviews.stars_review.value.average_review | json
    else
        assign ratingValue = 0
    endif

    if product.metafields.trustshop_reviews.stars_review.value.total_review 
        assign ratingCount = product.metafields.trustshop_reviews.stars_review.value.total_review | json
    else
        assign ratingCount = 0
    endif 
    
%}

This code is used to get the product info value to load product info used in the modal detail product and write reviews sections. Divided into 2 cases, get it from the home page and get it from the product detail page

{% if template.name == 'index' and block.settings.selected_product.id %}
    {%capture productInfo %}
        {
            "productId": "{{ block.settings.selected_product.id }}",
            "productName": "{{ block.settings.selected_product.title | base64_encode }}",
            "shopId": "{{ shop.id }}",
            "productImage": "{{ block.settings.selected_product.featured_image | replace: "'", "\\'" }}",
            "shopUrl": "{{ shop.url | replace: "'", "\\'" }}",
            "productUrl": "{{ block.settings.selected_product.url | replace: "'", "\\'" }}",
            "productPrice": "{{ block.settings.selected_product.price }}",
            "productPriceCompare": "{{ block.settings.selected_product.compare_at_price }}",
            "currencySymbol": "{{ cart.currency.symbol }}",
            "is_show": true,
            "reply_name": "{{ shop.metafields.trustshop_reviews.widget_box_reply_shop_name | base64_encode }}"

        }
    {% endcapture %}
{% else %}
    {% capture productInfo %}
        {
            "productId": "{{ product.id }}",
            "productName": "{{ product.title | base64_encode }}",
            "shopId": "{{ shop.id }}",
            "productImage": "{{ product.featured_image | replace: "'", "\\'" }}",
            "shopUrl": "{{ shop.url | replace: "'", "\\'" }}",
            "productUrl": "{{ product.url | replace: "'", "\\'" }}",
            "productPrice": "{{ product.price }}",
            "productPriceCompare": "{{ product.compare_at_price }}",
            "currencySymbol": "{{ cart.currency.symbol }}",
            "is_show": true,
            "reply_name": "{{ shop.metafields.trustshop_reviews.widget_box_reply_shop_name | base64_encode }}"
        }
    {% endcapture %}
{%endif %}

Code css

{% style %}    
    .trustshop-modal-design-mode--container{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: grid;
        place-items: center;
        z-index: 9999;
    }

    .trustshop-notice--box{
        display: flex;
        flex-direction: column;
        font-family: Inter, Arial, sans-serif;
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 4px 12px rgba(0,0,0,.25);
        padding: 20px;
        z-index: 9999;
        min-height: 163px;
        transition: height .1s ease-in-out;
        color: #091218;
        padding: 12px 16px;
        font-weight: 400;
        border-radius: 16px;
    }

    .trustshop-notice--header{
        text-align: unset;
        position: relative;
    }

    .trustshop-notice--header p{
        margin: 0;
    }

    .trustshop-notice--header .trustshop-notice--title{
        font-weight: 500;
        font-size: 28px;
        line-height: 36px;
        position: relative;
    }

    .trustshop-notice--header .trustshop-notice--description{
        font-size: 16px;
        line-height: 24px;
    }

    .trustshop-notice--header button{
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    .trustshop-notice--header button:hover svg path{
        fill: #000;
    }

    .trustshop-notice--content{
        margin-top: 10px;
    }

    .trustshop-notice--content .trustshop-introduction ol,
    .trustshop-notice--content .trustshop-introduction li{
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }
    .trustshop-introduction--img{
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        overflow: hidden;
        border: 4px solid #0c6a40;
    }
    .trustshop-introduction--img img{
        max-width: 405px;
    }

{% endstyle %}

The code retrieves the widget's setting information, this information will be saved in the metafield

<div id="trustshop-init-widget-box-metafield--data" style="display: none;">
    <input
        type="hidden"
        id="trustshop-get-product_info"
        value='{{ productInfo }}'
        disabled />

    <input
        type="hidden"
        id="trustshop-widget_box_layout_box"
        value='{{ shop.metafields.trustshop_reviews.widget_box_layout_box }}'
        disabled />
    <input
        type="hidden"
        id="trustshop-widget_box_layout_summary_box"
        value='{{ shop.metafields.trustshop_reviews.widget_box_layout_summary_box }}'
        disabled />
    <input
        type="hidden"
        id="trustshop-widget_box_color_customize"
        value='{{ shop.metafields.trustshop_reviews.widget_box_color_customize }}'
        disabled />

    <input
        type="hidden"
        id="trustshop-widget_box_section_show"
        value='{{ shop.metafields.trustshop_reviews.widget_box_section_show }}'
        disabled />
    <input
        type="hidden"
        id="trustshop-widget_box_sort_filter"
        value='{{ shop.metafields.trustshop_reviews.widget_box_sort_filter }}'
        disabled />

    <input
        type="hidden"
        id="trustshop-widget_box_label_content"
        value='{{ shop.metafields.trustshop_reviews.widget_box_label_content | replace: "'", "&apos;"}}'
        disabled />
    <input 
        type="hidden" 
        id="trustshop-widget_box_review_per_page" 
        value='{"review_per_page_desktop": "{{ shop.metafields.trustshop_reviews.widget_box_review_per_page_desktop }}", "review_per_page_mobile": "{{ shop.metafields.trustshop_reviews.widget_box_review_per_page_mobile }}"}' 
        disabled />
</div>

This code is used to embed the widget box

<div class="trustshop trustshop-review-wrap" id="trustshop-review"></div>