如何在 Shopify 中创建自定义部分

简介

想象一下，你正在浏览一家电商商店，发现一个设计精美的产品页面，它将引人入胜的视觉效果与丰富的信息内容无缝结合。如果你也可以为自己的 Shopify 商店创造类似的体验呢？随着电子商务的兴起，拥有一个独特且可定制的商店前台对于在拥挤的市场中脱颖而出至关重要。而利用 Shopify 的自定义部分是实现这一目标的最有效方法之一。

Shopify 的部分功能允许商家在无需深入编码知识的情况下，修改和增强他们的在线商店。随着在线商店 2.0 的推出，Shopify 使用户能够比以往更高效地创建和管理部分。本文旨在指导你完成在 Shopify 中创建自定义部分的过程，强调该功能提供的各种特性和能力。

到本文结束时，你将理解自定义部分的重要性、如何创建它们以及它们如何提升用户在你 Shopify 商店中的体验。我们将深入以下主题：

什么是 Shopify 部分及其重要性
可用的不同类型的部分
创建自定义部分的逐步指南
优化自定义部分的最佳实践

让我们开始这段旅程，通过自定义部分释放你 Shopify 商店的全部潜力吧！

理解 Shopify 部分

什么是 Shopify 部分？

Shopify 部分是主题的模块化组件，使商家能够添加、移除和自定义他们网站上的各种内容区域。作为 Shopify 提供灵活和用户友好平台承诺的一部分，部分使用户能够轻松设计他们的页面。每个部分可以包含特定的内容、设置和样式，使其成为创建独特在线存在的关键工具。

自定义部分的重要性

创建自定义部分的能力意味着你可以定制你的商店，以反映你品牌的身份并满足客户的需求。自定义部分通过提供相关内容、有效展示产品和鼓励互动来增强用户体验。经过深思熟虑的设计，这些部分可以显著影响转化率和客户满意度。

Shopify 部分的类型

在 Shopify 中，部分主要可以分为两种类型：

主页部分：这些部分与特定页面模板绑定，通常包含定义该页面内容的基本元素。例如，产品页面可能有一个主部分显示产品图像、描述和定价信息。
模块部分：这些部分可以在不同页面上重复使用，并旨在补充主要内容。例子包括幻灯片、精选系列或促销横幅。模块部分提供灵活性，使商家能够动态定制他们的商店。

在 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="在亚马逊上查看" target="_blank">在亚马逊上查看</a>
  {% else %}
    <p>该产品可用！</p>
  {% endif %}
</div>

{% schema %}
{
  "name": "自定义集合",
  "settings": [
    {
      "type": "text",
      "id": "amazon_link",
      "label": "亚马逊链接"
    }
  ]
}
{% endschema %}

在这个代码片段中，我们使用 Liquid 检查产品的可用性并相应地显示消息。schema 部分定义了用户可以在主题编辑器中自定义的设置。

第 6 步：将部分添加到模板

现在自定义部分准备好了，你需要将其添加到想要显示的模板中。例如，如果你想将其放在产品页面上，导航到模板目录，找到product.json，并使用以下行包含你的自定义部分：

{% section 'custom-collection' %}

第 7 步：自定义你的部分

添加部分后，返回到你的 Shopify 管理面板，导航到在线商店 > 主题 > 自定义。从下拉菜单中选择相关的页面模板。你应该看到新的部分可供编辑。点击它以配置你在 schema 中定义的任何设置。

第 8 步：保存更改

一旦你自定义了部分，确保保存所有更改。预览你的商店，以确保一切看起来和功能正常。

创建自定义部分的最佳实践

现在你知道如何创建自定义部分，让我们讨论一些最佳实践，以确保你的部分优化用户体验和性能。

1. 保持简单

避免在你的部分中填满太多信息。简洁明了的设计将增强可用性并保持访客的参与。

2. 针对移动优化

鉴于大量在线购物发生在移动设备上，请确保你的自定义部分具有响应性。测试它们在不同屏幕尺寸上的外观并进行相应调整。

3. 使用高质量图像

视觉内容对电商成功至关重要。使用高质量的图像来吸引顾客并有效展示你的产品。

4. 实施清晰的行动号召

通过在你的自定义部分中包含清晰的行动号召（CTA）来鼓励用户互动。无论是购买产品的按钮还是查看更多项目的链接，CTA 都可以指导用户进行下一步。

5. 测试和迭代

定期测试你的自定义部分的性能和用户参与度。使用分析来查看它们的转化效果如何，并根据需要进行调整，以优化性能。

结论

在 Shopify 中创建自定义部分是一种强有力的方式来设计一个独特且引人入胜的在线商店。通过遵循本指南中列出的步骤，你可以增强商店的功能性，并为客户创造量身定制的体验。记住使设计用户友好，并与你的品牌身份保持一致。

在 Praella，我们专注于用户体验与设计、Web 与应用开发，以及战略、连续性和增长。如果你在创建提升你的 Shopify 商店的自定义部分方面需要帮助，我们的专家团队随时为你服务。让我们一起实现你的愿景，为你的客户创造难忘的体验。

探索我们的服务，访问 Praella 解决方案，并开始你的个性化和成功的电商体验之旅吧！

常见问题

问：我需要编码经验才能在 Shopify 中创建自定义部分吗？
答：虽然一些编码知识是有帮助的，但 Shopify 的用户友好界面使得许多商家在没有广泛编程技能的情况下也能够创建自定义部分。

问：我可以在单个页面上添加多个自定义部分吗？
答：是的，你可以根据设计偏好和页面布局，尽可能添加多个自定义部分。

问：如果在创建自定义部分时遇到问题怎么办？
答：如果你遇到挑战，考虑联系 Shopify 专家或利用 Shopify 帮助中心提供的资源。

问：我如何确保我的自定义部分符合 SEO 标准？
答：实施 SEO 的最佳实践，例如使用相关关键词、优化图像 alt 文本，并确保自定义部分的快速加载时间。

通过了解，你可以显著增强在线商店的设计和功能，最终带来更好的客户参与和销售。

如何在 Shopify 中创建自定义部分.

目录

简介