按钮元素

关于按钮元素Click to copy

按鈕元素是任何頁面的基本元素之一。它充當您在頁面上實現的任何目標的行動召喚。

你可以在下面的视频查看更多信息。

訪問按鈕元素Click to copy

  • 第 1 步:單擊加號圖標,即添加元素功能
  • 第 2 步:單擊下拉菜單欄中的按鈕元素
  • 第 3 步:按鈕元素帶有 4 個按鈕變體,每個變體都有不同的樣式。我們將繼續添加更多變體以幫助您節省時間。在頁面編輯器上拖放您想要的這些變體之一。

button

按鈕元素配置Click to copy

按鈕元素帶有大量參數,您可以微調內容外觀,以達到行動召喚的最佳點擊率。

選擇佈局中的元素以查看其參數。

button

通用樣式選項卡中的參數特定於該元素

通用配置Click to copy

内容
按鈕文字:插入並設置樣式標題的內容。按鈕的寬度將根據此文本的長度擴展。button
顯示圖標:啟用/禁用圖標

圖標位置:在頂部的左、右中選擇圖標位置

button
操作
您可以通過單擊操作定向到鏈接、模塊、彈出窗口、電子郵件地址或電話號碼。

此處閱讀有關操作參數的更多信息。

button
您可以在此處獲取有關屬性、透明度、動畫參數的更多信息

樣式配置Click to copy

樣式預設
全局樣式 (Global style):選擇具有 5 個變體的按鈕樣式。button
狀態樣式:容納 3 個選項正常狀態、鼠標懸停狀態和活動/選定狀態,您可以為按鈕選擇。button

您可以此處查看有關樣式選項卡的更多信息。

如何增加按鈕的大小?Click to copy

基本上,如果增加內容按鈕,那麼按鈕大小也會自動增加。在另一種情況下,您可以更改按鈕的內邊距。您可以查看下面的 gif。

button

在這種情況下,我們將左右內邊距從 20 像素增加到 40 像素,將上下內邊距從 12 像素增加到 50 像素。

如何創建快速結帳按鈕(立即購買)Click to copy

請注意,這僅適用於產品詳細信息元素(您必須將其添加到產品詳細信息元素中,並打開組合變體選項)。

在這種情況下,我們需要使用 HTML/Liquid 元素並在其中添加代碼,請按照以下步驟操作:

  • 第 1 步:單擊左側邊欄上名為添加元素的圖標
  • 第 2 步:向下滾動到基本模塊 > 選擇 HTML/Liquid 元素
  • 第 3 步:將此元素拖放到頁面編輯器中
  • 第 4 步:單擊通常選項卡中的打開代碼編輯器按鈕以打開 HTML/Liquid 代碼編輯器
  • 第5步:將下面的代碼粘貼到:

{{ form | payment_button }}

您可以查看下面的 gif。請注意,您需要發布才能看到結果。

button

為了添加 Paypal 按鈕,您需要在 Shopify 商店中設置 Paypal,然後使用上面的代碼。您可以查看此視頻以了解如何將元素鏈接到特定模塊。

如何製作全寬按鈕Click to copy

如果您希望按鈕為全寬,請選擇您的按鈕 > 通用選項卡 > 打開啟用全寬

button

Navigate this category

Next articlePrevious

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese, French and Japanese. Please check the flags on the page header.

I got it!
Discover the Shopify Invoice Generator by PageFly, a seamless solution for invoicing in your online store. Try it now!