Shopify 插件的产品和产品系列显示高级自定义

这些高级设置可帮助您在 WordPress 上自定义在线店面、打造个性化的业务品牌并提升客户的购买体验。

Shopify 插件和 Shopify 店面组件

Shopify 插件是使用 Shopify Storefront Web Components 构建的。以下组件被用作 Shopify 店面的构建块:

  • 产品卡组件:此组件显示单个产品信息,通常显示在产品清单或产品系列页面上。它通常包括产品图片、标题、价格和“添加到购物车”按钮等元素。
  • 产品快速查看模式组件:此组件在现有内容上方显示一个模态窗口,其中包含产品详细信息、“添加到购物车”按钮以及用于查看完整产品详细信息的链接。
  • 产品详细信息页面组件:此组件显示单个产品及其完整的产品详细信息。每个产品详细信息页面组件都有一个唯一的 URL。
  • 产品系列组件:此组件显示您创建的产品系列。

Shopify 产品和产品系列显示自定义

插件上的默认 Shopify 店面组件提供可帮助您打造无缝购物体验的工具。您还可以灵活地自定义这些组件的显示,以符合您的特定品牌形象和设计要求。

要进行此类自定义,您必须有权修改 WordPress 模板文件和目录。此过程涉及在您的可用 WordPress 模板目录中创建一个专用文件夹。

步骤:

  1. 创建 Shopify 文件夹:首先,直接在您的可用模板目录中创建一个名为 Shopify 的新文件夹。此文件夹是您的自定义组件覆盖文件的中心位置。
  2. 覆盖单个组件:要修改特定组件,请在新建的 Shopify 文件夹中添加一个具有指定名称的 PHP 文件。这些覆盖文件的命名约定对于插件识别和应用您的自定义版本至关重要:
    • 要覆盖产品卡组件,请在 Shopify 文件夹中创建一个名为 product-card.php 的 PHP 文件。
    • 要覆盖产品快速查看模式组件,请在 Shopify 文件夹中创建一个名为 modal.php 的 PHP 文件。
    • 若要覆盖产品详细信息页面组件,请在 Shopify 文件夹中创建一个名为 pdp.php 的 PHP 文件。
    • 若要覆盖产品系列组件,请在 Shopify 文件夹中创建一个名为 component.php 的 PHP 文件。

创建自定义 PHP 文件后,该插件会忽略此特定元素的默认组件文件。您可以在这些覆盖文件中实现任何代码,从静态 HTML 代码块到复杂的 PHP 逻辑均可。

虽然强烈建议您利用 Shopify 在线店面 Web 组件(在默认插件结构中使用)来确保一致性并访问内置的 Shopify 功能,但您并非只能使用它们。您可以集成其他方法来获取和显示产品及产品系列数据,从而实现高级自定义。

有关详细信息和最佳做法,请参阅 WordPress 插件开发人员文档

Shopify 产品和产品系列重写

在 Shopify 上发布产品或产品系列时,每个产品和产品系列都有一个唯一的 URL。默认情况下,系统会使用您的 Shopify 域名创建这些 URL。通过重写功能,您可以使用您的公共 WordPress 域名访问这些唯一的 URL。

步骤:

  1. 在 Shopify 插件中,前往设置
  2. 高级标签中,请确保已激活 Shopify 链接重写部分中的两个复选框。
  3. 前往永久链接
  4. 点击保存以应用此新规则。
  5. 前往您的 Shopify 后台,然后导航到您想为其创建 WordPress 链接的产品或产品系列详细信息页面。
  6. 在搜索引擎产品页面卡中,会显示一个可将客户直接链接到您的产品或产品系列的 URL。例如:https://johns-apparel.myshopify.com › products › huskee-reusable-cup
  7. products/huskee-reusable-cup 添加到您的 WordPress 网站 URL 的末尾。例如:https://johns-apparel-wordpress.com/products/huskee-reusable-cup

自定义您的产品卡行为

使用 Shopify 在线店面组件时,有两种产品详细信息卡类型:

  1. 快速查看:将鼠标悬停在产品卡上时,客户可以选择“快速购买”。点击后,产品详细信息会显示在现有内容上方的 弹出窗口或模态窗口 中。
  2. 详细产品页面:当客户点击产品卡(例如图片或产品名称)时,产品详细信息会以整页视图形式显示,并带有唯一的 URL。

您可以更改此设置,以仅显示快速查看、仅显示详细产品页面或两者都显示。

步骤:

  1. 在 WordPress 的 Shopify 插件中,前往设置
  2. 高级标签中,前往产品视图部分。
  3. 选择最适合您商店的选项。
  4. 点击保存