已收藏,可在 我的資料庫 中查看
關注作者
您可能還需要

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

獨立站店鋪360°全景產品主圖,讓產品360°動起來!看多了排列整齊、靜態展示的產品主圖,那么如何讓產品主圖從視覺上突破靜態限制,在觀感上更加吸引人呢?本期 店匠SHOPLAZZA 將手把手教大家使用 Sirv 插件制作360°全景產品主圖,并將它添加進商品主圖和詳情頁,看完就能會!

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

說到產品主圖,相信許多賣家腦海中首先想到的是“排列整齊、純色背景、產品居中、靜態展示、高分辨率”等特征。這樣的圖片風格統一,便于批量管理,但也難免會讓消費者覺得枯燥、沒有太大吸引力。

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

那么如何讓產品主圖從視覺上突破靜態限制,在觀感上更加吸引人呢?本期將向各位賣家介紹“360°全景產品主圖”,并為大家提供保姆級的詳細教程,手把手教大家如何使用插件制作360°全景產品主圖,并將它添加進商品主圖和詳情頁。

一:什么是360°全景產品主圖

360°全景產品主圖,指圖片自身能夠從360°等多個方向全方位展示產品的一種 GIF 動圖形式。

360°全景產品主圖突破了靜態圖片的動效限制。消費者在瀏覽商品主圖時,通過360°全景產品主圖能夠更直觀的與產品交互,從而彌補網絡虛擬環境和現實世界中對產品感受的差距。

同時,由于消費者可以從多個視角觀察產品,很大程度上能夠減少消費者對于產品的前后左右方向產品外觀的疑慮,進一步提升消費者用戶體驗,增強獨立站帶來的信任感

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

目前某些第三方平臺的部分類目產品也可以使用360°全景產品主圖,不過需要提交繁瑣的申請,還需要等待很長時間。而身為在店鋪搭建和設置方面自由度較高的獨立站賣家,使用360°全景產品主圖就方便很多了。

二:360°全景產品主圖的最佳實踐

1. 背景

背景顏色最好選用淺色,尤其注意白色背景更能從視覺上突出產品,在觀感上更加純粹。

對于產品顏色為白色或者淺色的情況下,就可以選用黑色或者灰色的背景色,根據產品的顏色和特征進行靈活調整。

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

2. 幀率

360°全景產品主圖的一般是由多張圖片組成,這些圖片在產品旋轉的時候以固定的角度進行拍攝。以 72 幀率為例,每隔 5° 就需要從固定好的相機位置進行拍攝。除此以外,還有 24、36、120、180、360 等常見的幀率,間隔拍攝角度以此類推。

從觀感來說,主圖制作使用越多的圖片,也就是越高的幀率,那么360°全景產品主圖的旋轉動畫將會更加細膩,看起來更加流暢。

可以看到,下圖中運動鞋商品詳情頁展示的是36 幀效果,旋轉略有卡頓;

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

椅子商品詳情頁展示的是72幀,旋轉動作流暢,觀感較好。

獨立站店鋪360°全景產品主圖,讓產品360°動起來!


3. 圖片

圖片的拍攝和后期處理都非常重要,從方法上來說可以使用傳統的相機拍攝照片或使用 3D 模型軟件來制作和渲染產品圖片。

拍攝完成的照片需要經過加過處理,將雜亂的背景或者是不需要的細節部分進行調整優化。照片文件必須按照統一的規則去進行命名

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

三:用 Sirv 插件制作360°全景產品主圖

關于制作360°全景產品主圖的工具,向大家推薦 Sirv 插件。它有以下幾大優點:

  • 有免費套餐可以使用,并且免費套餐的功能已經非常充沛。
  • Sirv 所提供的幾種套餐定價及功能
  • 操作簡單,針對不懂代碼的賣家,能夠自行使用。
  • 針對想要更多自定義功能的賣家,提供 API 接口。
  • 圖片不光能自主旋轉,也可以放入詳情頁中實現手動拖拽(drag to spin),使消費者能夠瀏覽更多細節,增強互動。

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

1. Sirv 插件使用方法

  • 首先將拍攝好的所有產品圖片按照統一的規則命名
  • 接著在 Sirv 將賬號注冊好,進入插件后臺
  • 新建文件夾并將產品圖片文件上傳
  • 進入文件夾后全選圖片,然后點擊右上角的 Create spin

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

  • 輸入文件名,默認選擇 Horizontal spin (a row of images),點擊 Create,spin 文件即創建成功

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

  • 選中 spin 文件,點擊更多(…)選項
  • Download as GIF – 適用商品主圖
  • Embed – 適用商品詳情頁

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

2. 主圖制作方法

  • 點擊 Download as GIF,將 GIF 文件下載下來,然后返回到 店匠SHOPLAZZA 后臺,依次找到“后臺設置-素材中心”,點擊右上角的本地上傳(Local upload),將 GIF 文件上傳

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

  • 接著返回“商品-商品管理”找到對應的商品鏈接,點擊添加圖片,將上傳好的 GIF 選中并插入(Insert),點擊保存。

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

如果只需要主圖旋轉的賣家,以上步驟操作完畢后360°全景產品主圖就設置成功了。如果還想在商品詳情頁中添加360°全景產品圖片,實現手動拖拽旋轉的效果,那還需要以下步驟。

3.  詳情頁制作方法

  • 點擊 Embed 進入代碼設置頁面。

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

  • 依次找到“商品-商品管理”,找到對應商品的描述部分,點擊編輯框右上角“源代碼(Source code)”將在 Sirv 中拿到的第一行代碼復制粘貼進來。

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

  • 如果想在詳情頁中把圖片居中擺放,可以在特定部分加上 style=”text-align: center;” 這部分代碼,然后保存,示例:
  • 修改前:<div class=”Sirv” data-src=”https://ivercerj.sirv.com/Spins/Egg-Chair/Egg-Chair.spin”></div>
  • 修改后:<div class=”Sirv” data-src=”https://ivercerj.sirv.com/Spins/Egg-Chair/Egg-Chair.spin” style=”text-align: center;”></div>

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

  • 然后在 店鋪后臺的應用市場里找到“自定義代碼嵌入(Custom code)”插件,點擊進入。

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

  • 點擊右上角的新增代碼(Create Code)創建新的自定義代碼
  • 將在 Sirv 插件中拿到的第二行代碼復制粘貼過來
  • 用戶端(Select APP):選擇 PC 端和手機端
  • 出發頁面(Trigger page):選擇全部
  • 代碼位置(Code location):選擇頂部

獨立站店鋪360°全景產品主圖,讓產品360°動起來!

  • 設置完成后點擊保存(Save),然后在前臺商品詳情描述部分就能實現手動進行拖拽旋轉了。

不知道大家有沒有學會呢?趕緊上手體驗,通過360°全景產品主圖在消費者瀏覽的第一步就抓住他們的眼球吧!更多獨立站出海干貨持續輸出中。

(來源:跨境必知bineans)
以上內容屬作者個人觀點,不代表雨果跨境立場!本文經原作者授權轉載,轉載需經原作者授權同意。

(來源:跨境必知bineans)

以上內容屬作者個人觀點,不代表雨果跨境立場!本文經原作者授權轉載,轉載需經原作者授權同意。?

分享到:

--
評論
最新 熱門 資訊 資料 專題 服務 果園 標簽 百科 搜索
雨果跨境顧問
【爆單沖刺】Google爆單沖刺包
雨果跨境谷歌官方顧問

收藏

--

--

分享
跨境必知bineans
分享不易,關注獲取更多干貨
国产成人51精品午夜福利免费| 色婷婷大香蕉| 亚洲欧美日韩国产综合五月天|