幫助中心 > 設計 > 商品列表 > 商品圖片放大或轉換

商品圖片放大或轉換

 

網店網頁設計・商品列表・商品展示

 

商家可以利用 eshopland 網店平台的多功能網頁設計工具,設定商品圖片在商品列表的顯示方式,例如當把滑鼠移到商品列表上的圖片時,圖片會放大顯示,或會轉換;甚至可以設定圖片按時自動轉換,以增強網頁的視覺效果。

 

更多有關商品列表的設計方法,可參考《商品列表設計》的介紹。

 

1.    商品列表頁

 

進入主控台 > 設計 > 頁面

然後點選「商品」列表頁面。

 

 

2.    商品列表設計

 

點選「商品列表設計」,進入商品列表的設計操作頁面。

當您更新並儲存商品列表的設計風格,「所有商品列表」「所有分類及商品」「分類商品列表」特色商品頁面設計區塊亦會自動套用更新。

 

 

3.    設定「商品圖片」

 

您可以自訂商品圖片在「商品列表」上的顯示方式。

 

 

高寬比例

選擇商品圖片在商品列表顯示時,高度與寬度的比例。

圖片顯示會按照原圖的比例自動調整。

 

提示:

假如您上載的商品圖片是正方形(即 1:1),而您選擇使用 16:9 的高寬比例,商品圖片會被自動裁剪,以達到符合 16:9 的比例。

假如您希望使用 16:9 的高寬比例,建議上載 16:9 比例的圖片,例如1280 x 7201920 x 10803840 x 2160 等。

 

 

鼠標效果:放大

當顧客利用滑鼠(mouse)在商品列表上互動,把鼠標(cursor or mouse pointer)移到商品圖片上時,該圖片會稍微放大顯示,以增強互動時的視覺效果。

 

 

鼠標效果:轉換

當顧客把鼠標移到商品圖片上時,商品圖片會轉換為第二幅圖片。

 

商家必須為商品加入最少兩幅圖片,方可展現圖片轉換的效果。

 

 

鼠標效果:自動轉換

全部在「商品列表」上的商品圖片,都會按照設定時間自動轉換

商品圖片自動輪播轉換功能,只會套用於商品的首兩幅圖片。

商家必須為商品加入最少兩幅圖片,方可展現圖片自動轉換的效果。

自動轉換的設定時間以秒(s – second)為單位。

 

例子:

自動轉換時間設定為「3s」,即表示所有在「商品列表」的圖片,會每 3 秒鐘自動轉換一次;而只有一幅圖片的商品,則不會有任何轉換。

 

 

4.    套用

 

儲存 https://support.eshopland.comhttps://d2aeweyrgxfptr.cloudfront.net/core/images/article/129/zh-Hant/image008.png 設定。

 

eshopland - NGO Offer
eshopland - 立即免費試用
eshopland 14 天免費試用
無需提供信用卡資料
FB、IG、WhatsApp 快速結帳 link
eshopland 網店平台-「接受缺貨訂單」、「預購」、「無限庫存」功能
eshopland 網店平台-社交媒體店主也應該開網店
eshopland 網店平台-社交媒體店主善用網店賺更多
eshopland 網店平台-系統直出順豐單,無須插件
eshopland 網店平台-網店貨源一覽
eshopland 網店平台服務計劃明碼實價,零抽佣,無插件費,無隱藏收費,無系統維護費
eshopland 網店平台範本-Epsilon

延伸閱讀

QFPay 自動收款

eshopland 網店平台已整合 QFPay 收款閘道(payment gateway)的收款方案,支援多種信用卡、電子錢包及線上線下收款方式,eshopland 商戶可透個後台申請賬戶,及支付系統... [閱讀更多]

滿額多重優惠設定

商家利用 eshopland 網店平台,可以設定不同的滿額網店優惠(例如:訂單滿額折扣、全單滿額免運費、購物滿額可獲贈品等)更可把個別優惠設為可以與其他優惠同時使用,讓顧客在購物時,可以同時享用多重優... [閱讀更多]

商品頁面背景顏色

商家利用 eshopland 網店平台的多功能網頁設計工具,可以自訂商品頁面的背景顏色,以配合網店的設計風格。網頁設計工具簡單易用,商家可以隨時更換商品頁面底色,定時為網店換上新裝。1. 商品頁面設... [閱讀更多]

網店網址及二維碼

eshopland 網店平台系統會自動生成網店的二維碼,商家可以在網店管理後台,複製網店的網址或二維碼,分享到不同的社交平台,以推廣您的網店業務。1. 登入帳戶進入主控台>設定>一般,下移至「網址」... [閱讀更多]

推介文章