制作浮贴部件

註意

此功能可能不適用於某些 Shopify 主題,具體取決於主題開發人員創建主題的方式。

此功能僅適用於一個模塊。如果您需要將按鈕設置為置頂,請聯繫我們的支持團隊。(本文檔不適用於使按鈕置頂)。

在本文中,您將了解如何不使用自定義 CSS 代碼創建置頂模塊。

如何製作置頂模塊Click to copy

第 1 步:點擊要使其置頂的模塊。

sticky section

第 2 步:轉到一般標簽 > 向下滾動至啟用置頂 > 選擇“是的”。

sticky section

注意:此功能僅適用於在線頁面,可能因主題衝突而無法使用。

現在,選擇菜單欄上的發布按鈕並轉到在線頁面以查看結果。

sticky section

配置Click to copy

當您打開啟用置頂功能時,有兩個高級設置需要調整。

頂部偏移:調整視區頂部邊緣和置頂模塊之間的間隔 sticky section
Z-index (Z-索引)(在更多設置按鈕中):一個模塊的堆棧級別,較高的堆棧級別將在較低的前面 sticky section

常見情況置頂模塊不起作用Click to copy

該模塊不置頂Click to copy

儘管您遵循了上述所有步驟,但置頂模塊仍然不起作用。 你不知道為什麼?

我將此模塊設置為置頂,但它不適用於在線觀看:

sticky section

原因是該模塊有一個容納模塊,其中包括來自主題的代碼“overflow:hidden;”。 此代碼覆蓋置頂代碼並使置頂模塊不起作用。 要修復它,請按照以下步驟操作:

  • 在在線頁面上,右鍵點擊置頂模塊並打開檢查

sticky section

  • 從置頂模塊,逐一檢查該模塊的容納模塊

sticky section

  • 檢查直到看到代碼“overflow:hidden;” 在該模塊的樣式標簽中

sticky section

  • 複製此模塊的類名。 返回 PageFly 頁面編輯器,打開自定義代碼編輯器並添加以下代碼:

.classname {overflow: visible !important;}

在這種情況下,模塊的類名稱是“pagefly-container”,因此您需要添加的代碼是:https://pastebin.com/raw/YkX4J7z6

sticky section

  • 發布頁面並檢查在線觀看

sticky section

如果您已按照上述解決方案,置頂模塊仍然不起作用,請通過 24/7 應用內在線聊天與我們聯繫,以便我們直接為您提供幫助。

Navigate this category

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
Boost your holiday sales with PageFly's Thanksgiving Template 👉 Discover Now