進階分頁

SHOPLINE_____.jpg

 

「進階分頁」的功能簡單易用,輕鬆排版,深受新手店主喜愛。店主可以選擇系統預設的樣板或空白頁面開始設計您的分頁。利用 Drag-and-drop (拖曳)功能組合橫額、圖片、影片、文字等元素,創造獨一無二的網店版面。

此文章將簡介:

 

首先進入「網店分頁」> 點選增加「進階分頁」按鈕 > 選擇您喜愛的樣板

系統提供不同的樣板讓您參考使用。您可以選擇其中一個或點選空白的自己稍後進行排版

 

一、 添加新元件操作示範

在左方的目錄選單中的功能元件(下稱為元件),您可以拖拉希望加入的元件到您喜歡的位置

_____2017-02-21___3.39.58.png

 

拖拉元件到編輯工作區時,會以綠色區塊顯示元件能夠放下的位置

 

二、 新增文字段落

Screen_Shot_2016-03-10_at_11.21.17_pm.png

放下元件後會顯示我們預設的文字範例:

_____2017-02-21___3.50.12.png

編輯文字時,請點選要編輯的文字元件,左側會顯示編輯文字工具

功能支援:段落工具、文字風格(粗體、斜體、底線)、文字對齊、清除格式、文字連結、字體顏色、字體大小

 

文字加入超連結

若您有需要在文字上加入超連結,請參考以下步驟來加入:

步驟一

反白選取欲加入超連結的文字,接著按下「連結」按鈕

_____2018-05-11___4.26.06.png

 

步驟二

系統會跳出視窗,請輸入您的網址,

並選擇要「當前頁面開啟連結」還是「另開視窗開啟連結」,接著按下「確定」

TC_2_step2.png 

步驟三

最後請按下「確定」> 「保存」

TC_2_step3.png

 

三、 新增文字及標題

_____2017-02-21___3.40.32.png

放下元件後會顯示我們預設的文字範例
文字塊分為兩個部份,上方為「標題」;下方是「描述」
標題和描述需分開編輯,與文字元件相同,請點選要編輯的文字元件,左側會顯示編輯文字工具

  

四、 新增圖片項目

你可以添加一幅圖片或以幻燈片形式展示多幅圖片,在彈出的選項框中上傳新的圖片並按拖動排序。
您還可以為每一張圖片設置不同的 URL 連結,當用戶點選圖片的時候就會自動打開連結。

 

 

設定全寬圖片模式

按圖片 > 左邊選單點選「設定」> 於圖片設定勾選「顯示全寬圖片模式」,不勾選則變回原來大小。

 

五、 新增影片項目

新增YouTube 影片

直接複製 Youtube 影片連結,放入元件中。

 

 

 

新增VIMEO影片

直接複製 Vimeo 影片連結,放入元件中

可在設定中選擇影片自動播放、循環播放,以及影片大小及比例。

註: 最新版本的 Google Chrome 防止影片自動播放,如需更改您的設定,請到 chrome://flags/#autoplay-policy

 

六、 新增單一商品展示

選擇您想展示的單一商品(可使用商品名稱或是標籤搜尋您想選擇的商品後)> 點選「保存」

 

選取完後會出現在左方編輯區的內容中,可以點選「修改商品」更換其他商品

 

「描述位置設定」是設定商品名稱及價格是在元件區塊的放置方式
預設是置左,可以更換置中或置右

   

七、 新增分類商品展示

選擇您想展示的商品分類(如「精選商品」)

 

您可於分類設定選擇是否顯示加入標題、描述、快速加入購物車功能;以及每頁顯示的商品數量,其預設為自動顯示分類裡排列最前的 24 件商品。

category_zh.png

 

若您勾選啟用「快速加入購物車」功能,顧客在頁面前台可透過點選「加入購物車」按鈕直接將商品加入購物車並繼續瀏覽該購物頁面,不需再跳至單個商品頁面進行選購。

instant_add_to_cart_-_zh_demo.gif

 

 

 

八、新增 Facebook 專頁框

輸入您的 Facebook 專頁網址

 

九、 新增地圖

map_icon.png

左側選單出現 Google Map > 搜尋地址 > 按「確定」

insert_map.gif

了解其他新增地圖的方法

 

十、 新增Instagram

ig_icon.png

步驟一

在彈出選單按「授權應用程式」按鈕 

TC_10_step1.png

 

步驟二

導向至 Instagram 登陸頁面 > 輸入個人密碼

ig_2_.png

 

步驟三

按 "Authorize" 按鈕繼續

ig_3.png

 

步驟四

頁面會重新轉到後台,店家可以點擊方塊 > 按「取消連接」中斷與帳號連結

ig_4.png

 

qr_code_icon.png

十一、 新增二維碼

在彈出選單輸入連結 > 按「確定」

qr_code_.gif

 

 

十二、 新增H1標籤

Screen_Shot_2018-09-19_at_2.50.55_pm.png

一個內含默認文字的文字框會出現。

Screen_Shot_2018-09-19_at_1.16.51_pm.png

 

點擊文字框以編輯。文字編輯工具會在編輯器的上方提供。

Screen_Shot_2018-09-19_at_2.57.58_pm.png

請注意,每頁只限使用一次H1標籤,如要更改使用位置,請移動原有的H1標籤。

 

十三、 其他設定及功能

1.  為分頁命名

左側藍色「目錄」按鈕 > 「分頁設定」下的「分頁標題」> 輸入分頁名稱

 

2.  設定SEO內容

左側藍色「目錄」按鈕 > 「SEO設定」> 輸入標題、簡介、關鍵字及描述性URL

了解更多關於SEO資訊

 

備註:如果不建立雙語言頁面,可以只填寫預設語言的分頁標題

 

3. 預覽功能

您可以隨時預覽你的設計及排版,點選右下角綠色的「預覽頁面」按鈕進入預覽功能

preview_button.png

 

進入預覽功能後,您可以選擇查看網頁在不同的行動裝置上的顯示效果
由左至右分別為:手機、平板、電腦

 

您的網頁都可以自動適應

完成所有編輯後,記得按右下角的「保存」按鈕保存頁面! 

 

十四、 複製進階分頁

針對已完成的進階分頁,店家也可以在列表中,複製進階分頁來修改新的活動要使用的頁面。
所有的元件將會同步被複製到新的分頁中,包含名稱、URL、SEO設定等,請記得在製作新頁面時將內容修改為最新的資訊!
請注意,只有進階分頁能夠使用複製的功能,文字分頁是無法使用的。

TC_14.png

還有其他問題?提交請求

評論