文章彙整

Shopify 建立購買按鈕

Astral WebBy Astral Web 1 year agoNo Comments
首頁  /  Shopify  /  Shopify 建立購買按鈕

什麼是購買按鈕?把商品的購買按鈕顯示在其它網頁或部落格網站上,當客人在瀏覽你的部落格時就可以看到商品並點選「購買按鈕」下單,很方便使用。

「購買按鈕」要怎麼運用呢?!設定好購買按鈕,Shopify會自動幫你生成編碼,你就可以直接copy編碼,新增到其它網頁或部落格網站上,這樣就完成了。

讓我們一起設定「購買按鈕」吧!

若想觀看本文章的影片教學,請見歐斯瑞YouTube教學系列

建立「購買按鈕」

  1. 登入Shopify後台,點選SALES CHANNELS旁的「+」,popup-Add Sales Channel

  2. 在這我們要建立購買按鈕,點擊Buy Button的「+」Button

  3. 在「Sales Channels」下的「Buy Button」功能,點擊「Create Buy Button」button

  4. 購買按鈕有二種:(操作方式差不多)
    第一種是單一購買商品,另一種是二個以上(複數)的購買商品。
    順著頁面上方的步驟,就完成了:
    設定按鈕類型->製定按鈕細節->複製程式碼到部落格等網站上

設定「購買按鈕」細項

  1. 做某商品的購買按鈕,請點擊「Product Buy Button」Button
  2. 商品的購買按鈕,勾選商口後,點擊「Select」button
    在這可以勾選要做購買按鈕的商品,或是搜尋特定的商品。
  3. 在「製定按鈕細節」頁面:左邊是設定欄位,右邊為預覽。
    預覽上方有電腦版和手機版,因為會常需要確認設定後的版型是否為自己要的,所以很重要。
    之後的步驟會以設定欄位為主,大家可以設定完後切換預覽畫面。
  4. 快速說一下各欄位的設定功能:

    Layout style:畫面如何呈現
    Basic:最基本只有加入購物車的功能按鈕
    Classic:有商品圖片、商品名稱,包含Basic的功能
    Full view:會呈現較多的商品資訊,包含Classic的功能

    Action when people click:按鈕功能
    Add product to cart:點擊按鈕後,將商品加入購物車
    Direct to checkout:點擊按鈕後直接進入結帳頁
    Open Product details:點擊按鈕後能看到商品資訊,消費者確定要此商品再加入購物車

    Button style:按鈕設定


    Settings-Button corners:調整按鈕的圓角弧度
    Settings-Button width:調整按鈕的寬度
    Colors-Background:調整按鈕的底色
    Colors-Button text:調整按鈕文字的顏色
    Typography-Button text:調整按鈕文字的字型
    Typography-Size:調整按鈕文字的大小

    Layout:商品頁面設定


    Settings-Image size:調整商品圖片的尺寸
    Show additional product images:勾選此項,則可顯示商品的其它示意圖片
    Settings-Alignment:要怎麼對齊
    Settings-Button text:填入功能按鈕內的文字
    Show quantity field:勾選後可以填入要購買的數量
    Colors-Product title:調整商品名稱的顏色
    Colors-Price:調整商品價格的顏色
    Typography-Product title:調整商品名稱的字型
    Typography-Size:調整商品名稱文字的大小
    Typography-Price:調整商品價格的字型
    Typography-Size:調整商品價格文字的大小

    Shopping cart:購物車頁面設定


    Settings-Heading:填寫購物車頁的抬頭
    Settings-Subtotal:填寫購物車頁的小計文字
    Show order note field:勾選後,讓消費者可以填寫資訊
    Settings-Additional information:填寫購物車補充資訊
    Settings-Button text:填寫購物車頁的按鈕文字
    Settings-Empty cart:填寫當購物車頁無商品時的文字
    Colors-Background:選擇購物車頁的背景色
    Colors-Body text:選擇購物車頁的文字顏色

    Advanced settings:進階設定,點選按鈕後會怎麼做


    Open pop-up window:跳出新視窗
    Redirect in the same tab:留在原來視窗

     

  5. 設定完成後,請點擊畫面右上角「Next」Button,則會出現程式碼。
    拿到程式碼後就可以放到你想要的其它網頁或部落格網站上。

當然在「類型的購買按鈕」也是一樣喔。
這當個小作業讓大家來試試看吧!

如果真的不會,給你一點小提示:

  1. 在設定的步驟1時選「Collection Buy Button」Button
  2. 功能設定可以參考步驟4

是不是很簡單呢?!
如想看影片版,也可以在Youtube上找到作者Astralweb,再搜尋同名影片觀看喔!

若有任何關於Shopify的問題,歡迎聯絡我們。也別忘了追蹤歐斯瑞臉書粉絲團Instagram,以及訂閱我們的電子報,隨時接收第一手新知分享唷!

 000

推薦文章

Category:
  Shopify

留下回應

你的電子郵件地址不會被公開.