【官網設計】移動商品描述欄的位置(Candy 或之前發佈之佈景主題)

此文章僅適用於 Candy 或之前發佈之佈景主題(舊版主題)
商品描述欄的位置都是根據佈景主題的預設展示的。倘若您是使用以下佈景主題,他們的商品描述欄將會展示在左邊商品圖片的下方。其他的舊版主題就是直接展示在右邊的商品價格下方。
此文章主要是想要使用以下佈景主題但是希望商品描述欄展示在右下方的商家。
Candy
X-force
Lucky
Wave
Maker
Fall
Mine Style
Happy Kitchen
Dreams Bedding
The Summer
Adventure Camping
Flower & Tea House
Prisme
Inspiration
移動商品描述至右邊「加入購物車」按鈕下
前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → 打開 templates/product.liquid → 搜尋 product/description 找到以下灰色部分的原始碼

把這段原始碼 {% app_snippet 'product/content_right' %} 加在灰色原始碼的上方。請參考下圖:

刪除 class="grid__item" 這段原始碼 (包含前方的空格原始碼)

完成並儲存。
之前:

之後:

更多詳情可以參考以下GIF:

移動商品描述至商品名稱下
前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → product.liquid 文件
搜尋 {% app_snippet 'product/description_top' %} → 剪切以下代碼

搜尋 <h1 itemprop="name">{{ product.title }}</h1> → 在下方貼上以下代碼

點擊儲存
之前:

之後:

手機版官網對齊商品描述
前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → product.liquid 文件
搜尋 product-description rte → 移除 product-description , 只留下 rte


更新時間: 07/02/2025
感謝!