关于按钮元素
按鈕元素是任何頁面的基本元素之一。它充當您在頁面上實現的任何目標的行動召喚。
你可以在下面的视频查看更多信息。
訪問按鈕元素
- 第 1 步:單擊加號圖標,即添加元素功能
- 第 2 步:單擊下拉菜單欄中的按鈕元素
- 第 3 步:按鈕元素帶有 4 個按鈕變體,每個變體都有不同的樣式。我們將繼續添加更多變體以幫助您節省時間。在頁面編輯器上拖放您想要的這些變體之一。
按鈕元素配置
按鈕元素帶有大量參數,您可以微調內容外觀,以達到行動召喚的最佳點擊率。
選擇佈局中的元素以查看其參數。
通用配置
内容 | |
按鈕文字:插入並設置樣式標題的內容。按鈕的寬度將根據此文本的長度擴展。 | ![]() |
顯示圖標:啟用/禁用圖標 圖標位置:在頂部的左、右中選擇圖標位置 | ![]() |
操作 | |
您可以通過單擊操作定向到鏈接、模塊、彈出窗口、電子郵件地址或電話號碼。 請在此處閱讀有關操作參數的更多信息。 | ![]() |
您可以在此處獲取有關屬性、透明度、動畫參數的更多信息樣式配置 | |
樣式預設 | |
全局樣式 (Global style):選擇具有 5 個變體的按鈕樣式。 | ![]() |
狀態樣式:容納 3 個選項正常狀態、鼠標懸停狀態和活動/選定狀態,您可以為按鈕選擇。 | ![]() |
您可以在此處查看有關樣式選項卡的更多信息。
如何增加按鈕的大小?
基本上,如果增加內容按鈕,那麼按鈕大小也會自動增加。在另一種情況下,您可以更改按鈕的內邊距。您可以查看下面的 gif。
在這種情況下,我們將左右內邊距從 20 像素增加到 40 像素,將上下內邊距從 12 像素增加到 50 像素。
如何創建快速結帳按鈕(立即購買)
請注意,這僅適用於產品詳細信息元素(您必須將其添加到產品詳細信息元素中,並打開組合變體選項)。
在這種情況下,我們需要使用 HTML/Liquid 元素並在其中添加代碼,請按照以下步驟操作:
- 第 1 步:單擊左側邊欄上名為添加元素的圖標
- 第 2 步:向下滾動到基本模塊 > 選擇 HTML/Liquid 元素
- 第 3 步:將此元素拖放到頁面編輯器中
- 第 4 步:單擊通常選項卡中的打開代碼編輯器按鈕以打開 HTML/Liquid 代碼編輯器
- 第5步:將下面的代碼粘貼到:
{{ form | payment_button }}
您可以查看下面的 gif。請注意,您需要發布才能看到結果。
為了添加 Paypal 按鈕,您需要在 Shopify 商店中設置 Paypal,然後使用上面的代碼。您可以查看此視頻以了解如何將元素鏈接到特定模塊。
如何製作全寬按鈕
如果您希望按鈕為全寬,請選擇您的按鈕 > 通用選項卡 > 打開啟用全寬。