獨(dú)立站店鋪360°全景產(chǎn)品主圖，讓產(chǎn)品360°動(dòng)起來！

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

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

一：什么是360°全景產(chǎn)品主圖

360°全景產(chǎn)品主圖，指圖片自身能夠從360°等多個(gè)方向全方位展示產(chǎn)品的一種 GIF 動(dòng)圖形式。

360°全景產(chǎn)品主圖突破了靜態(tài)圖片的動(dòng)效限制。消費(fèi)者在瀏覽商品主圖時(shí)，通過360°全景產(chǎn)品主圖能夠更直觀的與產(chǎn)品交互，從而彌補(bǔ)網(wǎng)絡(luò)虛擬環(huán)境和現(xiàn)實(shí)世界中對產(chǎn)品感受的差距。

同時(shí)，由于消費(fèi)者可以從多個(gè)視角觀察產(chǎn)品，很大程度上能夠減少消費(fèi)者對于產(chǎn)品的前后左右方向產(chǎn)品外觀的疑慮，進(jìn)一步提升消費(fèi)者用戶體驗(yàn)，增強(qiáng)獨(dú)立站帶來的信任感。

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

二：360°全景產(chǎn)品主圖的最佳實(shí)踐

1. 背景

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

對于產(chǎn)品顏色為白色或者淺色的情況下，就可以選用黑色或者灰色的背景色，根據(jù)產(chǎn)品的顏色和特征進(jìn)行靈活調(diào)整。

2. 幀率

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

從觀感來說，主圖制作使用越多的圖片，也就是越高的幀率，那么360°全景產(chǎn)品主圖的旋轉(zhuǎn)動(dòng)畫將會(huì)更加細(xì)膩，看起來更加流暢。

可以看到，下圖中運(yùn)動(dòng)鞋商品詳情頁展示的是36 幀效果，旋轉(zhuǎn)略有卡頓;

椅子商品詳情頁展示的是72幀，旋轉(zhuǎn)動(dòng)作流暢，觀感較好。

3. 圖片

圖片的拍攝和后期處理都非常重要，從方法上來說可以使用傳統(tǒng)的相機(jī)拍攝照片或使用 3D 模型軟件來制作和渲染產(chǎn)品圖片。

拍攝完成的照片需要經(jīng)過加過處理，將雜亂的背景或者是不需要的細(xì)節(jié)部分進(jìn)行調(diào)整優(yōu)化。照片文件必須按照統(tǒng)一的規(guī)則去進(jìn)行命名。

三：用 Sirv 插件制作360°全景產(chǎn)品主圖

關(guān)于制作360°全景產(chǎn)品主圖的工具，向大家推薦 Sirv 插件。它有以下幾大優(yōu)點(diǎn)：

• 有免費(fèi)套餐可以使用，并且免費(fèi)套餐的功能已經(jīng)非常充沛。

• Sirv 所提供的幾種套餐定價(jià)及功能
• 操作簡單，針對不懂代碼的賣家，能夠自行使用。
• 針對想要更多自定義功能的賣家，提供 API 接口。
• 圖片不光能自主旋轉(zhuǎn)，也可以放入詳情頁中實(shí)現(xiàn)手動(dòng)拖拽(drag to spin)，使消費(fèi)者能夠?yàn)g覽更多細(xì)節(jié)，增強(qiáng)互動(dòng)。

1. Sirv 插件使用方法

• 首先將拍攝好的所有產(chǎn)品圖片按照統(tǒng)一的規(guī)則命名
• 接著在 Sirv 將賬號注冊好，進(jìn)入插件后臺
• 新建文件夾并將產(chǎn)品圖片文件上傳
• 進(jìn)入文件夾后全選圖片，然后點(diǎn)擊右上角的 Create spin

• 輸入文件名，默認(rèn)選擇 Horizontal spin (a row of images)，點(diǎn)擊 Create，spin 文件即創(chuàng)建成功

• 選中 spin 文件，點(diǎn)擊更多(…)選項(xiàng)
• Download as GIF – 適用商品主圖
• Embed – 適用商品詳情頁

2. 主圖制作方法

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

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

如果只需要主圖旋轉(zhuǎn)的賣家，以上步驟操作完畢后360°全景產(chǎn)品主圖就設(shè)置成功了。如果還想在商品詳情頁中添加360°全景產(chǎn)品圖片，實(shí)現(xiàn)手動(dòng)拖拽旋轉(zhuǎn)的效果，那還需要以下步驟。

3.  詳情頁制作方法

• 點(diǎn)擊 Embed 進(jìn)入代碼設(shè)置頁面。

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

• 如果想在詳情頁中把圖片居中擺放，可以在特定部分加上 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>

• 然后在 店鋪后臺的應(yīng)用市場里找到“自定義代碼嵌入(Custom code)”插件，點(diǎn)擊進(jìn)入。

• 點(diǎn)擊右上角的新增代碼(Create Code)創(chuàng)建新的自定義代碼

• 將在 Sirv 插件中拿到的第二行代碼復(fù)制粘貼過來
• 用戶端(Select APP)：選擇 PC 端和手機(jī)端
• 出發(fā)頁面(Trigger page)：選擇全部
• 代碼位置(Code location)：選擇頂部

• 設(shè)置完成后點(diǎn)擊保存(Save)，然后在前臺商品詳情描述部分就能實(shí)現(xiàn)手動(dòng)進(jìn)行拖拽旋轉(zhuǎn)了。

不知道大家有沒有學(xué)會(huì)呢?趕緊上手體驗(yàn)，通過360°全景產(chǎn)品主圖在消費(fèi)者瀏覽的第一步就抓住他們的眼球吧!更多獨(dú)立站出海干貨持續(xù)輸出中。

（來源：跨境必知bineans）
以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果跨境立場！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，轉(zhuǎn)載需經(jīng)原作者授權(quán)同意。

（來源：跨境必知bineans）

以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果跨境立場！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，轉(zhuǎn)載需經(jīng)原作者授權(quán)同意。?