Guides

AI 智慧商品推薦 PLUS ( 購物車 ) - AI Smart Product Recommendations PLUS Cart

AI 智慧商品推薦 PLUS ( 購物車 ) 能夠讓店家商品在購物車側欄以及購物車頁面，搭配演算法提供商品，提高商品曝光機會，

Introduction

AI 智慧商品推薦 PLUS (購物車)，是基於 PLUS 擴展的功能，開啟之後會在購物車側邊欄位、購物車頁面，顯示智慧商品推薦，提高商品的曝光量，進一步提高營收。

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

另提醒 Layout Engine 店家，若要開啟 AI 智慧商品推薦 PLUS (購物車)，請先完成 AI 智慧商品推薦 教學文件 AI 智慧商品推薦 PLUS 的 教學文件 設定。


加入智慧商品推薦 liquid

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

編輯 HTML/CSS


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

theme.css.liquid

滾動到最後區塊加上以下 css，確保 loading 顯示正確樣式。


.cart-related-products-title {
    padding: 24px 20px 16px;
    font-size: calc(20px * var(--font-size-paragraph, 1));
}

.cart-related-products-loading {
    display: flex;
    width: 100%;
    gap: 10px;
    padding: 15px;
    padding-bottom: 0;
}

.cart-related-products-loading-image {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    margin-bottom: 40px;
}

.cart-related-products-loading-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.cart-related-products-loading-price-details {
    width: 50px;
}

.cart-related-products-list {
    display: flex;
    flex-direction: column;
}

.cart-related-products-item {
    padding: 15px;
    padding-bottom: 0;
    border: none;
}

.cart-related-products-item .product-link {
    display: flex;
    width: 100%;
    gap: 10px;
}

.cart-related-products-item-image-container {
    padding-bottom: 40px;
    flex-shrink: 0;
}

.cart-related-products-item-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.cart-related-products-item-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-related-products-item-title {
    padding-bottom: 2px;
}

.cart-related-products-item-price-details {
    padding-bottom: 10px;
}

.cart-related-products-hide {
    display: none;
}

.cart-panel-empty-wrapper.has-related-products {
    overflow-y: auto;
}

.cart-related-products-list:not(.has-cart-related-products-horizontal-scroll)>.cart-related-products-item:not(:first-child) {
    border-top-width: 1px;
    border-top-style: solid;
    border-color: hsla(var(--page-background-h, 0deg), var(--page-background-s, 0%), 80%, 0.5);
}

.cart-related-products-list.has-cart-related-products-horizontal-scroll {
    padding: 0 15px;
}

.cart-related-products-horizontal-scroll {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 10px;
}

.cart-related-products-horizontal-scroll:after {
    content: '';
    display: block;
    flex: 0 0 50px;
}

.cart-related-products-horizontal-scroll .cart-related-products-item {
    width: calc(100% - 50px);
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 0;
}

.cart-related-products-horizontal-scroll .cart-related-products-item-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1199px) {
    .cart-panel-empty-wrapper.has-related-products .CartPanel-hint {
        min-height:420px;
    }
}

完成後要點擊保存，再來點選 出版 才會完成套用更新。

保存、出版




開啟智慧商品推薦 PLUS (購物車) 功能

請到商家後台，點擊右下角聯繫小幫手，請小幫手協助開啟智慧商品推薦 PLUS (購物車) 功能

後台小幫手


前往頁面 確認購物車是否正確顯示

請進入頁面，點擊查看購物車 icon，展開購物車側欄，確認下方是否顯示相關商品。如果有開啟智慧推薦 PLUS ( 購物車 )，下方會顯示最多 20 個相關商品。


購物車側欄



編輯購物車側欄、購物車，智慧商品版面配置

同樣也可以透過進入後台的 AI 智慧商品推薦 ，編輯購物車側欄以及購物車的版面配置，目前購物車側欄支援 完全展示 單行滾動 ，購物車頁面則是預設樣式，無法調整。


Updated about 14 hours ago