網站編輯器-初階

如何訪問 Online Store

  在Posify購買網店計劃或者O2O計劃後，您才可以使用Online Store功能。

  訪問Online Store的方法有三種：從CMS打開、直接輸入Link以及通過網域訪問。

從 CMS打開

  打開CMS點擊左上方的前臺icon，將彈出Online Store的網頁。

直接輸入 Link

  在瀏覽器的地址欄中輸入Posify標準online store link：“https://web21.posify.me/”+“登記的商店名稱”。

  例如：你申請的Posify商店名稱是：teststationerystore，那麼對應的online store link為：https://web21.posify.me/teststationerystore。

通過網域訪問

  如果你有自己的domain（網域），且已完成domain配置，那麼可直接使用domain訪問Online Store。

  進行Domain配置的方法請看playbook如何設置網域。

套用網店主題

  如果您是初級eCommerce商家，那麼可以選擇使用Posify內置的主題快速搭建一個簡單的Online Store。

  打開CMS點擊 綫上商店點擊 設計 。

主題設定

  點擊頁簽 主題設定 ，選擇您的網店主題。

  點擊主題下方的[選用]以轉換不同的網店主題。

  選擇主題后編輯主頁

    點擊[選用]主題后，再點擊[編輯主頁]即可修改主頁内容。    

    進入主頁編輯頁面後，建議先將頁面名稱更改成：Homepage。

    主頁中的第一個元件為：圖片元件。

    把鼠標移動到圖片元件區域內，可以看到元件右上方顯示出了幾個不同的icon，點擊小筆icon可在左側編輯該圖片元件的詳細設定。

    在左側的圖片編輯頁面中點擊[網頁版圖片]字段下圖片右上角的“X”可以刪除本主題自帶的圖片，然後點擊[選擇檔案...]從本地上傳您需要展示于網店首頁的廣告圖片。

    注意：1.圖片元件只能上傳一張圖。

            2.廣告圖建議pixel尺寸如下：

            PC版：最小寬度不低於1600px，建議寬度1920px，高度根據實際需要製作即可。

            手機版：最小寬度不低於1080px，建議寬度1200px，高度根據實際需要製作即可。

            3.單張圖片文件大小請控制在2MB以下，可使用jpg, jpeg, png格式。

    上傳完成後，右側的網頁編輯工具中即會立即見到新上傳的圖片。

    點擊右上角的[儲存]按鈕即可儲存變更。建議商家在編輯網頁過程中多進行保存，以避免編輯進度丟失。

    儲存后打開Online Store，刷新頁面即可看到你新上傳的圖片。

    如果你希望首頁的廣告圖有幻燈片效果，即多張廣告圖片循環播放，那麽可使用 “幻燈片”元件。

    回到Homepage網頁編輯頁面，將鼠標移動到圖片元件區域內，點擊垃圾桶icon刪除圖片元件。

    點擊畫筆icon打開左側工具欄，用鼠標點擊並按住其中的[幻燈片元件]，拖拽到右側原本圖片元件所在的容器中，即下圖“C20640”區域內。

    將鼠標移動到幻燈片元件的範圍内，點擊小筆icon打開詳細編輯頁面，點擊[網頁版圖片]字段下的[選擇檔案...]，上傳廣告圖片。如需編輯[手機版圖片]也是同樣的方法。

    注意：上傳的圖片最多不可超過10張。

    向下滾動左側幻燈片元件編輯頁面，選擇[進階設計設定]為 是 ，可以在此設置幻燈片自動轉頁間隔時間及顯示樣式。還可以設置手機模式是否隱藏此元件，以及元件的邊距大小。

    設置完成后，點擊右上角的[儲存]，刷新online store查看幻燈片效果。

    接下來我們繼續在Homepage中添加其他常用元件。

    首先，我們需要先增加一個[分段]，您可以將[分段]理解為元件的“容器”，其他所有元件都必須放在[分段]中。

    在左側工具欄中，點擊[新增分段]，或者安裝[分段]拖拽到右側需要新增分段的位置，如下圖所示：

    點擊分段名稱可以修改分段名稱。

    按住上下拖動可以調整分段的排序。

    點擊可以顯示/隱藏該分段。

    點擊可以刪除該分段。

    注意：如果您的主頁元素較多，我們強烈建議你修改系統默認分段名稱，以便之後方便維護。

    按住[富文本]元件拖放到右側的新分段中。

    然後在左側的富文本框中輸入想要顯示的文字，例如希望在下面展示紅酒類商品，那麽可輸入：精選紅酒。

    根據在系統設定中啟用的語言種類，這裡需要輸入對應的不同語言的文本。 例如在系統中啓用了簡體中文、繁體中文和英文，那麽在此處將會有三種語言的頁簽。分別在不同的頁簽中輸入對應的文本内容。

    在富文本元件中，可修改字形，大小，加粗，顏色等，請自行進行嘗試（如下圖所示）。點擊可展開文字元件，更大的區域方便編輯大量文字。

    新增一個[商品分類]元件用来展示紅酒類商品，同樣，需要先新增一個分段，再將[商品分類]元件拖放到新增的分段中。

    勾選需要顯示的商品分類，這裏選擇：精選紅酒。

    再新增一個[分段]，放入一個[富文本]元件。

    例如：下面想展示減價促銷的商品，那麽可以在富文本框中輸入：減價促銷。

    跟上面一樣，新增一個[分段]，再把一個[商品分類]元件拖放到下面。

    選擇減價促銷分類，然後點擊[儲存]。

    按照以上設置，已經完成主頁頁面的製作。

創建頁面

  一般而言，除了主頁以外，往往還需要增添一些其他頁面。例如：關於我們、退貨&換貨説明等。

  下面以創建“關於我們”的頁面爲例。

  打開CMS點擊 綫上商店點擊 所有分頁點擊[新增]。

  新增的頁面同樣可以使用模板，在此我們選擇使用空白模板，點擊[使用]即可進入編輯。

  輸入頁面名稱：關於我們把[富文本]元件拖放到右側的空白[分段]内。

  在富文本框内輸入[關於我們]的内容點擊[儲存]，完成第一個其他頁面的製作。

  返回CMS點擊 綫上商店點擊 所有分頁點擊[新增]，新增一個[退換貨説明]的頁面。

  同樣，選擇空白模板點擊使用(可根據自己需要使用其他模板，把模板内容編輯成您的内容即可) 。

  輸入頁面名稱：退換貨説明將[富文本]元件拖放到右側的空白[分段]内。

  在富文本框内輸入退換貨説明内容點擊[儲存]。

  注意：

  1.按住元件左右移動可以調整元件的位置。

  2.按住元件右下角的箭頭icon左右拖動，可以調整元件的寬度。

  至此，其他頁面也製作完成了，如果您還想要製作更多的頁面，例如：店鋪地址、聯絡我們等頁面同樣可以按照上面的步驟去新增。

設置網店的條款/隱私政策頁面

  打開CMS點擊 綫上商店點擊 網站導航點擊[内建頁面]下[規則及條款]右邊的小筆icon打開[規則及條款]頁面。

  新增一個[分段]把[富文本]元件拖放到右側的[分段]内。

  編輯您的規則及條款内容點擊[儲存]，即可完成[規則及條款]内容頁面的編輯。

  返回CMS點擊 綫上商店點擊 網站導航點擊[内建頁面]下[隱私政策]右邊的小筆以同樣的方式對[隱私政策]頁面進行編輯。

設置網店頁頂導航

  通過上面的步驟已經完成了網店主頁和其他頁面的製作，下面來制作網店的頁頂導航。

  打開CMS點擊 綫上商店點擊 網站導航 。

  之前選擇的模板已經建立了一個頁頂導航，其中有四個導航選項。

  點擊導航選項右邊的小筆icon可以對已有的導航選項進行編輯。

  可以選擇的選項類別有 鏈接、自定義頁面、商品分類（單項）、品牌以及部落格分類 。

  選擇主頁類別為 自定義頁面在[自定義頁面]字段下選擇前面製作好的Homepage點擊[儲存]。

  继续編輯[關於我們]的頁頂導航選項。

  同樣，類別選擇 自定義頁面在[自定義選項]字段下選擇前面製作好的[關於我們]的頁面點擊[儲存]。

  點擊[主目錄]右邊的[+]可以添加導航選項。

  輸入選項標題：退換貨説明類別選擇 自定義頁面頁面選擇前面製作好的[退換貨説明]點擊[儲存]。

  按住上下拖動可以调整导航选项的先后排序。

  查看剩下兩個模板自带的導航選項的内容。

  選項網上商店默認的類別是： 商品分類(單項) ，可以選擇全部貨品、某一分類或子分類，這裏默認選擇的是 全部貨品 。

  如果希望把導航選項修改為其他的商品分類，那麽在[商品分類(單項)]選擇自己想要放在導航選項的分類，并把[選項標題]修改為該分類的名稱。

  例如：把[選項名稱]改成啤酒，並在商品分類(單項)選擇分類啤酒，然後點擊[儲存]。

  點擊可以刪除導航選項。

設置網店頁尾

  返回CMS點擊 綫上商店點擊 網站導航 。可以看到之前選擇的模板已經生成了一個頁尾，點擊可以進行編輯。

  點擊可以新增一個頁尾。

  選擇空白模板，點擊使用。

  新增一個[分段]，把[圖片]元件拖拉到右側分段内 ，把公司logo圖片上傳到[圖片]元件中。

  將一個[富文本]元件拖拖放到[分段]内。

  在富文本框中輸入頁尾内容。常用的頁尾一般會填上聯絡我們的地址、電話和電郵等信息。

  再拖放一個[富文本]元件到[分段]内，編輯一個購物指南。

  可以對將這些内容連結到對應的頁面。

  例如：在富文本框中選擇“退換政策”點擊連結icon。

  可以看到顯示文字是“退換政策”。

  可以選擇連結類型為 Posify分頁、網址、文字中的錨點連結、電子郵件或者Phone 。

  Posify分頁：指在Posify系統内設置的分頁，包括前面的主頁、關於我們等頁面。

  網址：連結到一個網址。

  文字中的錨點連結：如果在頁面中設定了錨點，可以設定通過連結直接跳轉到該錨點的位置。一般是在内容章節標題設置錨點，在對應的目錄項設置錨點連結，這樣在點擊目錄項時會跳轉到對應的内容章節。

  電子郵件：連結到電子郵件。

  Phone：連結到電話號碼。

  由於之前已經製作好了[退換貨説明]的頁面，所以這裏的[連結類型]選擇 Posify分頁[分頁連結]選擇[退換貨説明]的頁面點擊[確定]。

  設定好連結的文字會顯示爲藍色。

  最後可以在頁尾加上一些[按鈕]，譬如Facebook、whatsapp等。

  把[按鈕]元件拖放到右側的[分段]内。

  點擊[從這裏選擇預設按鈕]彈出[由模板開始]的彈窗，其中包括很多常用的按鈕模板。先選擇一個Facebook的按鈕點擊[使用]添加到頁尾。

  在左側的編輯面板，點擊[連結]下的下拉框。

  在輸入框中輸入您的Facebook主頁網址，點擊自定義鏈接，這樣客人點擊該[按鈕]就會跳轉到您公司的Facebook主頁。

  最後輸入頁面名稱：footer，選擇[自動發佈]為是，點擊[儲存]。

  按照上面的步驟，網站已經製作完成。

  可以看到網站顯示的頁頂導航、廣告圖。

  網站顯示精選紅酒的内容。

  網站顯示減價促銷的内容。

  網站最後顯示的頁尾内容。

  如果你希望頁尾可以加深顔色顯示，那麽請返回CMS點擊 綫上商店點擊 網站導航點擊頁面footer后的小筆icon進入編輯頁面點擊頁尾分段的編輯按鈕。

  調整頁尾的背景顔色點擊[儲存]。

  之後就能在網上商店看到頁尾加入的背景顔色。

在網店查看隱私政策和條款規則

  在前面的步驟中，我們已經製作了[隱私政策頁面]和[規則及條款頁面]。

  顧客在網店購物時，在結賬的最後一步，可以點擊[規則及條款]和[隱私政策]跳轉到對應的頁面查看這些政策和條款。