~ 1 min read

如何在 Shopify 中創建自訂區段.

How to Create a Custom Section in Shopify

內容表

  1. 介紹
  2. 了解 Shopify 區段
  3. 在 Shopify 中創建自訂區段
  4. 創建自訂區段的最佳實踐
  5. 結論
  6. 常見問題

介紹

想像你在瀏覽一個電子商務商店,偶然發現一個設計精美的產品頁面,完美地融合了引人入勝的視覺效果和資訊內容。如果你能為自己的 Shopify 商店創建類似的體驗,那會怎樣呢?隨著電子商務的興起,擁有一個獨特且可自訂的店面對於在競爭激烈的市場中脫穎而出至關重要。利用 Shopify 的自訂區段是達成這一目標的最有效方式之一。

Shopify 的區段允許商家在不需要 Extensive Coding 知識的情況下修改和增強他們的在線商店。隨著 在線商店 2.0 的推出,Shopify 使用者能夠比以往更有效地創建和管理區段。這篇博文的目的是引導你了解,並突顯這項功能所提供的各種特點和能力。

在本文結束時,你將理解自訂區段的重要性、如何創建它們,以及它們如何提升你 Shopify 商店的用戶體驗。我們將深入探討以下主題:

  • 什麼是 Shopify 區段及其重要性
  • 可用的不同類型的區段
  • 創建您自己的自訂區段的逐步指南
  • 優化自訂區段的最佳實踐

讓我們開始這段旅程,充分發揮 Shopify 商店的潛力,通過自訂區段!

了解 Shopify 區段

什麼是 Shopify 區段?

Shopify 區段是主題的模組化組件,允許商家在他們的網站上添加、刪除和自訂各種內容區域。作為 Shopify 致力於提供靈活且友好使用者經驗的平台的一部分,區段讓使用者能夠輕鬆設計他們的頁面。每個區段可以包含特定內容、設置和樣式,成為創建獨特在線存在的必要工具。

自訂區段的重要性

創建自訂區段的能力意味著你可以根據品牌的身份和客戶的需求來調整你的商店。自訂區段通過提供相關的內容、有效展示產品並鼓勵互動來增強用戶體驗。當設計得當時,這些區段可以顯著影響轉換率和客戶滿意度。

Shopify 區段的類型

在 Shopify 中,區段主要可以分為兩種類型:

  1. 主頁區段:這些區段與特定的頁面模板相關,通常包含定義該頁面內容的基本元素。例如,一個產品頁面可能會有一個主區段顯示產品圖片、描述和定價信息。

  2. 模組化區段:這些區段可以在不同頁面中重用,設計上旨在補充主內容。例子包括幻燈片展示、特色系列或促銷橫幅。模組化區段提供了靈活性,使商家能夠動態自訂他們的商店。

在 Shopify 中創建自訂區段

在 Shopify 中創建自訂區段是一個簡單的過程,涉及幾個關鍵步驟。以下是一個詳細指南,幫助你完成這個過程。

步驟 1:訪問 Shopify 後台

首先,登錄到你的 Shopify 後台。在這裡,導航到 在線商店 > 主題

步驟 2:複製你的主題

在進行任何更改之前,創建當前主題的備份是必要的。單擊你目前主題旁邊的 操作 按鈕,然後選擇 複製。這樣確保你有一個版本可以在需要時恢復。

步驟 3:編輯代碼

一旦你複製了你的主題,請再次單擊 操作 按鈕,然後選擇 編輯代碼。這將打開代碼編輯器,讓你可以對主題文件進行更改。

步驟 4:創建新區段

在代碼編輯器的左側邊欄,找到 區段 目錄。單擊它以展開,然後單擊 添加新區段。系統會提示你為新區段命名。選擇一個描述性的名稱,反映其目的,比如 custom-collection

步驟 5:添加 HTML 和 Liquid 代碼

創建區段後,你將看到一個模板文件。在這裡,你可以插入你的 HTML 和 Liquid 代碼。例如,如果你想創建一個在產品缺貨時展示產品的區段,你的代碼可能看起來像這樣:

<div class="custom-collection-section">
  {% if product.available == false %}
    <p>這個產品目前缺貨。</p>
    <a href="https://www.amazon.com" title="在 Amazon 上查看" target="_blank">在 Amazon 上查看</a>
  {% else %}
    <p>這個產品可用!</p>
  {% endif %}
</div>

{% schema %}
{
  "name": "自訂系列",
  "settings": [
    {
      "type": "text",
      "id": "amazon_link",
      "label": "Amazon 連結"
    }
  ]
}
{% endschema %}

在這段代碼中,我們使用 Liquid 檢查產品的可用性並根據情況顯示消息。schema 部分定義了使用者可以在主題編輯器中自訂的設置。

步驟 6:將區段添加到模板

現在你的自訂區段已經準備好了,你需要將其添加到希望顯示的模板中。例如,如果你想在產品頁面上添加它,請導航到 模板 目錄,找到 product.json,並使用以下行包含你的自訂區段:

{% section 'custom-collection' %}

步驟 7:自訂你的區段

添加區段後,返回到你的 Shopify 後台,導航到 在線商店 > 主題 > 自訂。從下拉菜單中選擇相關的頁面模板。你應該會看到新的區段可供編輯。單擊它以配置你在 schema 中定義的任何設置。

步驟 8:保存你的更改

一旦你按自己的喜好自訂了區段,務必保存所有更改。預覽你的商店,以確保所有內容看起來和功能如預期。

創建自訂區段的最佳實踐

知道了如何創建自訂區段之後,讓我們探討一些最佳實踐,以確保你的區段在用戶體驗和性能上得到優化。

1. 保持簡單

避免讓你的區段擁擠,盛載過多信息。乾淨而簡潔的設計將增強可用性,並使訪客保持參與感。

2. 優化移動端

隨著大量在線購物發生在移動設備上,確保你的自訂區段是響應式的。測試它們在不同屏幕大小上的顯示方式並進行相應調整。

3. 使用高品質圖片

視覺內容對於電子商務的成功至關重要。使用高品質的圖片吸引客戶並有效展示你的產品。

4. 實施清晰的行動呼籲

通過在自訂區段中包含清晰的行動呼籲 (CTAs) 來鼓勵用戶互動。無論是購買產品的按鈕還是查看更多物品的連結,CTAs 都能指導用戶下一步應做的事情。

5. 測試與迭代

定期測試你的自訂區段的性能和用戶參與度。利用分析工具觀察它們的轉換情況,並根據需要進行調整,以優化性能。

結論

在 Shopify 中創建自訂區段是一種設計獨特且引人入勝的在線商店的強大方法。通過遵循本指南中的步驟,你可以增強商店的功能,為客戶創造量身定制的體驗。記得保持設計的用戶友好性,並與品牌形象一致。

在 Praella,我們專注於用戶體驗與設計、網站和應用開發、以及戰略、持續和增長。如果你需要協助來創建提升你的 Shopify 商店的自訂區段,我們的專家團隊隨時為你提供幫助。讓我們一起實現你的願景,為你的客戶創造難忘的體驗。

探索我們的服務,請訪問 Praella Solutions,開始今天邁向更客製化和成功的電子商務體驗之路!

常見問題

Q: 我需要編程經驗來創建 Shopify 的自訂區段嗎?
A: 雖然一些編程知識是有益的,但 Shopify 的用戶友好接口使許多商家能夠在不需要 Extensive 編程技能的情況下創建自訂區段。

Q: 我可以在單個頁面上添加多個自訂區段嗎?
A: 是的,你可以根據設計偏好和頁面佈局添加任意多的自訂區段。

Q: 如果我在創建自訂區段時遇到問題怎麼辦?
A: 如果你遇到挑戰,考慮聯繫 Shopify 專家或利用 Shopify 幫助中心提供的資源。

Q: 如何確保我的自訂區段適合 SEO?
A: 實施 SEO 的最佳實踐,例如使用相關的關鍵字、優化圖片的替代文字,並確保自訂區段的加載速度快速。

了解,你可以顯著提升在線商店的設計和功能,最終提高客戶的參與度和銷售量。


Previous
如何在 Shopify 中創建自定義頁面
Next
如何在 Shopify 中創建開發商店