# Introduction AI 智慧商品推薦 PLUS (購物車)，是基於 PLUS 擴展的功能，開啟之後會在購物車側邊欄位、購物車頁面，顯示智慧商品推薦，提高商品的曝光量，進一步提高營收。以下文件是提供給 Layout Engine 商家，如何透過自行更新，使用智慧商品推薦 PLUS (購物車) 功能，提供以下幾個步驟來協助商家開啟。另提醒 Layout Engine 店家，若要開啟 AI 智慧商品推薦 PLUS (購物車)，請先完成 AI 智慧商品推薦 [教學文件](https://shopline-layout.readme.io/docs/smart-product-recommdation-%E6%99%BA%E6%85%A7%E5%95%86%E5%93%81%E6%8E%A8%E8%96%A6-%E6%89%8B%E5%8B%95%E9%96%8B%E5%95%9F%E5%8A%9F%E8%83%BD、) AI 智慧商品推薦 PLUS 的 [教學文件](https://shopline-layout.readme.io/docs/ai-%E6%99%BA%E6%85%A7%E5%95%86%E5%93%81%E6%8E%A8%E8%96%A6-plus-ai-smart-product-recommendations-plus) 設定。
## 加入智慧商品推薦 liquid 到後台選擇左邊的目錄，點選網店設計 -> 編輯 HTML/CSS

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

滾動到最後區塊加上以下 css，確保 loading 顯示正確樣式。 ```css .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 智慧商品推薦，編輯購物車側欄以及購物車的版面配置，目前購物車側欄支援 `完全展示` `單行滾動` ，購物車頁面則是`預設樣式`，無法調整。