QDM 雲端開店平台

「分類頁用 - 自訂輪播圖/影片」

• 強化視覺吸引力：動態圖片影片吸睛，提升停留時間與點擊率

• 主打活動與熱銷品：可即時推播促銷資訊或主題商品，提高轉換機會

• 靈活行銷操作：可依節慶、分眾或時段快速更換內容，增加經營彈性

✎ 重點拆解：

一、「分類頁用 - 自訂輪播圖/影片」設定路徑

二、「分類頁用 - 自訂輪播圖/影片」設定方式

三、「分類頁用 - 自訂輪播圖/影片」語法

▪︎ 輪播圖片

一、「分類頁用 - 自訂輪播圖/影片」設定路徑

設定路徑：商品>商品分類(目錄)。

二、「分類頁用 - 自訂輪播圖/影片」設定方式

① 後台路徑：商品>商品分類>編輯>頁面樣式>商品分類頁上方圖文區塊。

② 點擊「原始碼」。

三、「分類頁用 - 自訂輪播圖/影片」語法

▪︎ 輪播圖片

<div class="fluid-container clearfix">
<div class="lSSlideOuter clearfix">
<div class="lSSlideWrapper usingCss">
<ul class="banner-carousel-w banner-carousel lightSlider lsGrab lSSlide" data-autoplay="1" data-item="1" id="carousel_1" data-slideSpeed="1200" >
<li class="lslide">
<center><img alt="" onerror="imgError(this);" data-fr-src="圖片連結" style="width:auto;display:inline-block" /></center>
</li>
<li class="lslide">
<center><img alt="" onerror="imgError(this);" data-fr-src="圖片連結" style="width:auto;display:inline-block" /></center>
</li>
<li class="lslide">
<center><img alt="" onerror="imgError(this);" data-fr-src="圖片連結" style="width:auto;display:inline-block" /></center>
</li>
</ul>
</div>
</div>
</div> 

▪︎ 輪播影片

<div class="fluid-container clearfix">
<div class="lSSlideOuter clearfix">
<div class="lSSlideWrapper usingCss">
<ul class="banner-carousel-w banner-carousel lightSlider lsGrab lSSlide" data-autoplay="1" data-item="1" id="carousel_1" >
<li class="lslide">
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" data-fr-src="嵌入影片連結"></iframe></div>
</li>
<li class="lslide">
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="嵌入影片連結"></iframe></div>
</li>
</ul>
</div>
</div>
</div>