功能說明:
  • 一頁式商店是一種簡約而高效的網上購物體驗設計,所有商品或服務信息都集成在同一個網頁上。
  • 用戶可以輕鬆地滾動或點擊頁面上的內容區域,全面了解商品特色、價格和購買過程,無需在多個頁面間切換。
  • 一頁式商店的迅速加載速度和在移動設備上的優越適應性,進一步提升了用戶的購物滿意度,使其更容易流暢地探索和選購所需商品, 同時也有助於商家更輕鬆地管理和更新內容,提高業務運作的效率。

操作目錄:

注意事項:
  • 一頁式活動頁比照商店設定之行銷活動結帳,例如:滿千送百、優惠券/紅利、任選折扣…等,無法額外設定專屬行銷活動。
  • 不適用多購物車功能(商品僅使用同一個購物車進行結帳)
  • 若有新增一頁式頁面專屬商品,當活動結束後請記得將專屬商品隱藏或下架。
  • 活動頁的商品請加入相同溫層的商品,請勿混入不同溫層或是商品有複數溫層的商品,以免無法結帳。

📌 一頁式商店 搜尋篩選功能


後台路徑 : 「行銷活動」→「一頁式商店頁面」

目前可搜尋的條件 :
  1. 選擇公開狀態
  2. 選擇活動狀態
  3. 輸入關鍵字針對「活動頁名稱」
  • 進入頁面點擊右上方的「新增頁面」
    搜尋功能

  • 📌 新增一頁式商店頁面


    後台路徑 : 「行銷活動」→「一頁式商店頁面」

    1. 進入頁面點擊右上方的「新增頁面」
      新增頁面

    2. 選擇【拖拉版型】、【舊版介面】。
      新增頁面名稱

    3. 新增一頁式商店頁面【名稱】、【網址】。
      *後續可在設定中更改。
      一頁式頁面


    📌 一頁式商店頁面設定(舊版介面)


    後台路徑 : 「行銷活動」→「一頁式商店頁面」→選擇一頁式頁面


    📍【選擇商品】

    1. 搜尋商品後,可點選「未加入活動」單一商品加入活動。
      進階搜尋 : 選擇【類型】、【廠商】、【商品標籤】、【一般商品/組合商品】
      選擇商品

    2. 已選取的商品
      商品編輯

    3. 調整商品順序。(升序/降序/創建日期/價格/手動/暢銷商品)
      *暢銷商品 : 「商品的總售出數」,包含「所有款式」的售出數。
      商品順序

    📍【基本設定】

    1. 活動內容設定 : 可看下方圖片一對應位置,進行設定。
      • 活動標題 : 可自行設定
      • 活動網址 : 可自行設定,並作為活動網址。
      • 頁面搜尋 :設定不能被搜尋的話 前台頁面會被加上 noindex
      基本設定

    2. 導覽列設定
      • 網站LOGO : 設定一頁式的網站 LOGO,可看下方圖片一。
      • Logo圖片連結 : 設定點擊圖片導向的網址。
      • 導覽列背景設定 : 可設定導覽列相關色系。
      導覽列1
      圖片一
      導覽列2

    3. 活動時間設定 : 設定一頁式活動開始/結束時間。
      基本設定 活動設定

    4. 置頂活動訊息 : 說明活動訊息。
      基本設定 置頂活動訊息

    5. 優惠時間倒數
      *此倒數目的為催單,並無與任何實際行銷活動連動,即使顯示優惠時間已到,消費者仍可下單。
      基本設定 優惠時間倒數

    6. SEO 設定 : 設定 SEO 可以加強您網頁在搜尋引擎上的排名。
      基本設定 SEO

    📍【銷售內容設定】

    設定畫面
    基本設定 SEO
    • 進入分頁「銷售內容設定」,選擇下方新增銷售內容區塊。
      銷售內容設定

      • 圖片 : 選擇檔案,並且可設定【圖片寬度 : 適中/固定/全滿】後,點選「新增」。
        銷售內容設定 圖片

      • 影片 : 貼上 youtube 網址。
        銷售內容設定 影片

      • 文字編輯
        可至 CKEDITOR-文章編輯器教學 查看如何編寫文字。
        銷售內容設定 文字編輯

      • 按鈕 : 自訂文字。(點擊按紐後會前往商品列表區)
        *按鈕顏色可至「商品設定」→「主色調顏色」編輯。
        銷售內容設定 按鈕

    📍【商品設定】

    前台畫面
    商品設定 前台對照畫面
    • 商品設定 : 可看下方前台畫面範例圖進行調整。
      商品設定 設定畫面

    • 商品預設檢視模式。(條列/格狀)
      商品設定 檢視模式

    • 購物車預設代入商品 : 開啟後進入一頁式商店頁面會自動將所有商品加入購物車。
      商品設定 預設代入商品


    📌 一頁式商店頁面設定(拖拉介面)


    後台路徑 : 「行銷活動」→「一頁式商店頁面」→選擇一頁式頁面


    📍【基本設定】

    1. 活動內容設定 : 可看下方圖片一對應位置,進行設定。
      • 活動標題 : 可自行設定
      • 活動網址 : 可自行設定,並作為活動網址。
      • 頁面搜尋 :設定不能被搜尋的話 前台頁面會被加上 noindex
      選擇商品

    2. 導覽列設定
      • 網站LOGO : 設定一頁式的網站 LOGO,可看下方圖片一。
      • Logo圖片連結 : 設定點擊圖片導向的網址。
      • 導覽列背景設定 : 可設定導覽列相關色系。
      導覽列1
      圖片一
      導覽列2

    3. 活動時間設定 : 設定一頁式活動開始/結束時間。
      基本設定 活動設定

    4. 置頂活動訊息 : 說明活動訊息。
      基本設定 置頂活動訊息

    5. 優惠時間倒數
      *此倒數目的為催單,並無與任何實際行銷活動連動,即使顯示優惠時間已到,消費者仍可下單。
      基本設定 優惠時間倒數

    6. SEO 設定 : 設定 SEO 可以加強您網頁在搜尋引擎上的排名。
      基本設定 SEO

    📍【頁面設定】

    *輪播素材、橫幅廣告、自訂排版設計、自訂HTML、圖文介紹、文字編輯、商品列表

    頁面設定

    一、[輪播素材] 選擇商品

    1. 其他版面設計
      • 圖片停留秒數 : 可設定每輪圖片幾秒後跳至下一輪。
      • 邊距 : 設定 左右外邊距/底部外邊距。(可設定 電腦/平板、手機)
      • 圖片數量 : 可設定每一輪顯示圖片數量。(設定張數大於素材張數,照片會重複顯示)
      • 圖片間距 : 每張圖片之間的距離。(適用在2個圖片以上)

    2. 素材 (可設定多個素材)
      • 圖片 : 設定顯示的輪播素材圖片。(可設定 電腦/平板/手機)
      • 圖片連結 : 可設定點擊圖片後連結的項目。(點開下拉選單後有諸多頁面可做連結,也可設定外部連結,請自行嘗試設定)
      • 圖片替代文字 : 可輸入此圖片的說明文字來優化 SEO 搜尋引擎。

    二、[橫幅廣告]

    • 素材設定
      1. 圖片 : 設定顯示的廣告圖片。(可設定 電腦/平板/手機)
      2. 圖片連結 : 可設定點擊圖片後連結的項目。(點開下拉選單後有諸多頁面可做連結,也可設定外部連結,請自行嘗試設定)
      3. 顯示按鈕 : 選擇是否開啟按鈕功能。
      4. 邊距 : 設定 左右外邊距/底部外邊距。(可設定 電腦/手機)
      5. 按鈕位置 : 中上/置中/中下。(僅提供3種位置,無法客製化調整)
      6. 按鈕文字 : 自訂按鈕文字。

    三、[自訂排版設定]

    1. 其他版面設計
      • 邊距 : 設定 左右外邊距/底部外邊距。(可設定 電腦/平板、手機)
      • 區塊間距 : 設定每個素材之間的距離。(電腦版)
      • 排版(平板、手機) : 設定排版方式要 單個一列/兩個一列。(可點選上方響應式按鈕查看即時變化)

    2. 素材(可設定 圖片/影片/排程跑馬燈/自訂HTML)
      • 圖片
        • 圖片連結 : 可設定點擊圖片後連結的項目。(點開下拉選單後有諸多頁面可做連結,也可設定外部連結,請自行嘗試設定)
        • 圖片替代文字 : 可輸入此圖片的說明文字來優化 SEO 搜尋引擎。
      • 影片
        • 複製 youtube 影片連結。
      • 排程跑馬燈
        • 選擇已設定好的跑馬燈
        • 點選連結去建立跑馬燈
      • 自訂HTML
        • 點選「編輯」可進行 HTML 編寫,並且支援 CSS 語法。
          *CYBERBIZ 不提供 語法教學。

    四、[自訂HTML]

    1. 其他版面設計 : 可設定邊距(電腦版/平板、手機)
    2. 自訂HTML : 點選「編輯」可進行 HTML 編寫,並且支援 CSS 語法。

    五、[圖文介紹]

    1. 其他版面設計
      • 文字排版 : 設定 靠左/置中/靠右。(文字、背景顏色)
      • 邊距設定 : 設定 左右外邊距/底部外邊距。(可設定 電腦/平板、手機)

    2. 圖片設計
      • 圖片素材 : 設定圖片。(至少需上傳電腦版圖片)
      • 圖片位置 : 左側/右側。
      • 圖片替代文字 : 設定 左右外邊距/底部外邊距。(可設定 電腦/平板、手機)
      • 電腦版占比 : 設定圖片占比比例。

    3. 文字素材 (上限為3,可設定重複的素材)
      • 標題 : 自訂文字,設定字級(文字大小)。
      • 內文 : 使用簡易文字編輯器,輸入內文,設定字級(文字大小)。
      • 按鈕 : 自訂按鈕文字,調整按鈕顏色以及按鈕連結,可選點擊按鈕後連結的項目。(點開下拉選單後有諸多頁面可做連結,也可設定外部連結,請自行嘗試設定)

    六、[文字編輯]

    1. 邊距 : 設定 左右外邊距/底部外邊距。(可設定 電腦/平板、手機)
    2. 內文 : 使用簡易文字編輯器,輸入內文,設定字級(文字大小)。

    七、[商品列表]

    1. 選擇商品 : 點選「新增商品」,可選擇官網的商品。
      *未公開、已下架商品無法加入。
    2. 標題 : 可以設定商品列表的群組。
    3. 商品展開 : 選擇商品排序方式,往下展開(所有商品呈現)、左右滑動(消費者需左右滑動查看商品)
    4. 商品排列 : 當商品少於指定數量的情況,可設定各裝置的排列方式,預設為置左。
      *電腦(3)、平板(2)、手機(1)
    5. 邊距 : 設定 左右外邊距/底部外邊距。(可設定 電腦/平板、手機)
    6. 電腦版商品分類樣式 : 可以設定 預設/顯示部分內容/全顯示。(請查看圖二範例)


    📌 設定分潤一頁式商店


    1. 分別複製兩個網址 :
      • 一頁式網址 :
        https://CYBTS.cyberbiz.co/events/best
      • 分潤碼網址 : (推薦碼)
        https://CYBTS.cyberbiz.co/?rcode=LNVNQB8X
      • 最終網址 : https://CYBTS.cyberbiz.co/events/best?rcode=LNVNQB8X
      分潤

    2. 點擊最終網址進入一頁式商店頁面後,可以直接帶入推薦碼。
      分潤2


    📌 一頁式頁面鎖右鍵功能

    後台路徑 : 「行銷活動」→「一頁式商店」→選擇頁面→「銷售內容設定」→「插入文字編輯」


    1. 進入「銷售內容設定」後,插入文字編輯,並點選編輯內容。
      一頁式商店

    2. 即可編輯程式碼與內容,請將下方程式貼上去後儲存頁面,即可開啟一頁式頁面鎖定右鍵功能。
      <style type="text/css">
       *:not(input):not(textarea) { 
      -webkit-touch-callout:none;
       -webkit-user-select:none;
       -khtml-user-select:none; 
      -moz-user-select:none;
       -ms-user-select:none; user-select:none; } 
      </style> 
      <script> 
      (function () { 
      function stopEvent(event) { 
      event.preventDefault(); 
      event.stopPropagation(); }
       ['dragstart', 'selectstart', 'contextmenu'].forEach(function(event) { document.addEventListener(event, stopEvent);
       }); } )();
       </script>
      一頁式商店26

    3. 前台呈現畫面,加入程式碼後則無法使用右鍵操作相關功能。
      一頁式商店3

    Loading