Introduction

AI 智慧商品推薦 PLUS 是 AI 智慧商品推薦的進階功能，商家可透過擴充功能商店安裝，讓相關商品有三種顯示模式，依序為完整展示、單行滾動、循環滾動，並且可讓商家新增相關商品到商品列表頁的底部，讓商品有更高的曝光機會。

以下文件是提供給 Layout Engine 商家，如何透過自行更新，使用智慧商品推薦 PLUS 功能，提供以下幾個步驟來協助商家開啟。

另提醒 Layout Engine 店家，若要開啟 AI 智慧商品推薦 PLUS，請先完成 AI 智慧商品推薦的 html 以及 css 設定。

加入智慧商品推薦 liquid

到後台選擇左邊的目錄，點選網店設計 -> 編輯 HTML/CSS。

搜尋 products.liquid 檔案，選擇檔案並滾到最下方，將內容插入到 <div class="right-c-box">區塊內的最下方，或是也可尋找{% endif %} 隔一層的 </div>的下方。

並貼上以下整段程式碼到 {% endif %} 下一層 </div> 以後。

      {% if enable_smart_product_recommendation %}
        <div class="ProductList-relatedProducts" id="relatedProduct">
          <h3 class="ProductList-relatedProducts-title">
            {{ 'shopline_translations.themes.products.related_products' | translate }}
          </h3>
          <div class="ProductList-relatedProducts-list row" id="relatedProductList">
            <lazyload-related-products 
              data-product-ids="{{ products | map: 'id' | join: ',' }}"
              data-page-type="{{ page.identifier }}"
              {% if search_keyword %}data-search-keyword="{{ search_keyword }}"{% endif %}
              {% if category %}data-category-id="{{ category.id }}"{% endif %}
            >
              {% for i in (1..4) %}
                <div class="Product-item autofill-item">
                  <div class="Image-boxify">
                    <div class="Image-boxify-image loading-placeholder loading-image"></div>
                  </div>
                  <span class="loading-placeholder loading-title"></span>
                  <span class="loading-placeholder loading-price"></span>
                </div>
              {% endfor %}
            </lazyload-related-products>
          </div>
        </div>
      {% endif %}

貼上後點擊保存並按下 出版，這樣就完成了商品列表頁面的 html 設定。

加入智慧商品推薦 css

同樣到後台選擇左邊的目錄，點選網店設計 -> 編輯 HTML/CSS

點擊搜尋框，輸入 theme.css.liquid，篩選出檔案，並且點擊進入編輯。

滾動到最後區塊加上以下 css，確保商品列表頁以及輪播功能顯示正確樣式。

#relatedProductList .owl-item>* {
    width: 100%;
    height: 100%
}

#relatedProductList .owl-nav {
    margin-top: 0
}

#relatedProductList .owl-carousel {
    padding: 0 15px
}

#relatedProductList .owl-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    pointer-events: none
}

#relatedProductList .owl-nav .owl-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--page-background, #fff);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);
    pointer-events: all;
    left: 0
}

#relatedProductList .owl-nav .owl-prev svg {
    height: 18px;
    width: 18px;
    background-size: cover;
    fill: hsla(var(--page-background-h, 0deg), var(--page-background-s, 0%), 60%, 0.8)
}

#relatedProductList .owl-nav .owl-prev:hover:not(.disabled) {
    color: var(--primary-background, var(--primary-color, #c74060));
    background-color: var(--page-background, #fff)
}

#relatedProductList .owl-nav .owl-prev:hover:not(.disabled) svg {
    fill: var(--primary-background, var(--primary-color, #c74060))
}

#relatedProductList .owl-nav .owl-prev::before,#relatedProductList .owl-nav .owl-prev::after {
    display: none
}

#relatedProductList .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--page-background, #fff);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);
    pointer-events: all;
    right: 0
}

#relatedProductList .owl-nav .owl-next svg {
    height: 18px;
    width: 18px;
    background-size: cover;
    fill: hsla(var(--page-background-h, 0deg), var(--page-background-s, 0%), 60%, 0.8)
}

#relatedProductList .owl-nav .owl-next:hover:not(.disabled) {
    color: var(--primary-background, var(--primary-color, #c74060));
    background-color: var(--page-background, #fff)
}

#relatedProductList .owl-nav .owl-next:hover:not(.disabled) svg {
    fill: var(--primary-background, var(--primary-color, #c74060))
}

#relatedProductList .owl-nav .owl-next::before,#relatedProductList .owl-nav .owl-next::after {
    display: none
}

#relatedProductList .owl-stage {
    display: flex
}

.ProductList-relatedProducts-title {
    letter-spacing: 2px;
    font-size: calc(20px * var(--font-size-title, 1));
    font-family: var(--font-family-title);
    padding: 15px 5px 25px;
    margin: 0 0 8px
}

@media screen and (max-width: 991px) {
    .ProductList-relatedProducts-title {
        padding-left:0;
        padding-right: 0;
        margin-bottom: 25px
    }
}

.ProductList-relatedProducts-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    padding: 0
}

.ProductList-relatedProducts-list .Product-item {
    flex-direction: column;
    flex-wrap: initial;
    flex-basis: 25%;
    width: 25%;
    padding: 5px 5px 15px 5px
}

.ProductList-relatedProducts-list .product-item {
    width: 25%;
    position: relative;
    padding: 5px 5px 15px;
    margin-bottom: 15px
}

@media screen and (max-width: 767px) {
    .ProductList-relatedProducts-list .Product-item {
        flex-basis:50%;
        padding: 5px 1.5px 15px
    }

    .ProductList-relatedProducts-list .product-item {
        width: 50%;
        padding: 5px 1.5px 15px
    }
}

同樣貼上後點擊保存並出版，這樣就完成了商品列表頁面的 css 設定