跳转到主要内容

Shopify 高级技巧

Shopify 上添加关联产品组合变体，提高网站转化率（size版）

Shopify 上添加关联产品组合变体，提高网站转化率（size版）

在 Shopify 上，通过优化产品页面和关联产品的展示，可以有效地提高用户体验和转化率。本文将介绍如何通过添加自定义字段和修改代码来实现关联产品组合变体功能，并提高网站的转化率。

步骤一：创建自定义字段

首先，我们需要在 Shopify 后台添加自定义字段，以便在产品页面中显示关联产品。

  1. 登录到您的 Shopify 后台，点击 Settings > Custom data > Products。
  2. 点击 Add definition，创建两个新的自定义字段：
    • Option Title: 这是产品的选项标题字段，选择 Single line text 类型，设置名称为 custom.option_title，并在 List of values 中设置您的选项。
    • Related Products: 这是关联产品字段，选择 Product 类型，设置名称为 custom.related_products，并在 List of products 中选择要关联的产品。

这些自定义字段将用于存储与产品相关的变体和其他推荐产品。

步骤二：修改主题代码

接下来，我们需要修改 Shopify 主题的代码，以便在产品页面上显示这些自定义字段。具体操作如下：

  1. 在 Shopify 后台，点击 Online Store > Themes，找到当前使用的主题，并点击 Edit code。
  2. 进入 sections 文件夹，找到并编辑 main-product.liquid 文件。
  3. 搜索 @app，找到 }，并在其下方添加以下代码：
{
  "type": "custom_related_products",
  "name": "Custom Related Products",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "产品关联组合变体"
    },
    {
      "type": "number",
      "id": "heading_font_size",
      "label": "Heading font size (px)",
      "default": 18
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading color",
      "default": "#121212"
    }
  ]
}

代码解释：

  • type: 设置为 custom_related_products，指示这是一个自定义的关联产品部分。
  • name: 设置关联产品的标题，例如 产品关联组合变体。
  • settings: 允许您设置字体大小和颜色等样式。

步骤三：渲染关联产品

接下来，我们需要修改代码以确保在产品页面上显示关联产品。

  1. 找到 {%- when '@app' -%}，并将其替换为以下代码：
{%- when 'custom_related_products' -%}
  {% if product.metafields.custom.related_products %}
    {% assign relatedProducts = product.metafields.custom.related_products.value %}
    {%- liquid 
      assign yeshasproduct = false
      for relatedPro in relatedProducts
        if relatedPro.available == true
          assign yeshasproduct = true
        endif
      endfor
    -%}
  {% if yeshasproduct %}
<div class="related-products-wrapper">
{% for relatedPro in relatedProducts %}
    {% if relatedPro.handle == product.handle %}
    <h3>Size:{{relatedPro.metafields.custom.option_title.value[0]}}</h3>
       {%endif%}
      {% endfor %}
     <div class = "related-product-list">
      {% for relatedPro in relatedProducts %}
          {% if relatedPro.available == true %}
       <a href = "{{ relatedPro.url }}" aria-label="{{relatedPro.title}}" title="{{ relatedPro.title }}">
        <div class = "related-product">
         <div class = "related-product-image" style="{% if relatedPro.handle == product.handle %}border: 2.8px solid rgba(255,0,0);{% else %}border: 1.2px solid #888;{% endif %} border-radius: 5%;">
           <img src = "{{ relatedPro.images[0] | image_url: width: 115, height: 115 }}"  alt="{{ relatedPro.title }}" />
          </div>
         <div class = "related-product-name">{{relatedPro.metafields.custom.option_title.value[0]}}</div>
         <div class = "related-product-price">{{relatedPro.price | money}}</div>
        </div>
       </a>
        {%endif%}
      {% endfor %}
     </div>
</div>
 {%endif%}
<div class = "related-products-dummy"></div>
{% endif %}

代码解析：

  • 相关产品：根据 product.metafields.custom.related_products 获取关联的产品，并检查它们的可用性。
  • 显示相关产品：使用 for 循环来渲染每个相关产品的图片、标题和价格。

步骤四：自定义样式

为了确保关联产品展示得美观，您需要添加一些 CSS 样式。请将以下代码添加到您的 base.css 或 theme.css 文件中：

// **************************************************** Related products styles start here **************************************************** //

.related-products-wrapper {
}

.related-products-dummy {
    padding: 10 px;
    clear: both;
}

.related-product-list {
    margin-top: 15px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.related-product {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    max-width: 120px;
}

.related-product-image {
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.related-product-image img {
    max-width: 100%;
    max-height: 100%;
}

.related-product-price {
    color: $color-body-text;
}

// **************************************************** Related products styles end here **************************************************** //

这些样式可以帮助您美化关联产品的展示，使其在页面中看起来更加整洁和吸引人。

步骤五：编辑产品页面

最后，您需要为每个产品页面添加 Option Title 和 Custom Related Products 字段内容。

  1. 转到产品页面，填写 Option Title 和 Custom Related Products 字段。
  2. 在模板定义里，找到产品模板并编辑。
  3. 在产品模板中添加块 Custom Related Products，使其显示在产品详情页面上。

步骤六：修改 product-meta.liquid

  1. 转到 snippets 文件夹，找到并编辑 product-meta.liquid 文件。
  2. 在 {%- if block.settings.show_taxes_included -%} 上面添加以下代码：
{% if product.metafields.custom.related_products %}
    {% assign relatedProducts = product.metafields.custom.related_products.value %}
    {%- liquid 
      assign yeshasproduct = false
      for relatedPro in relatedProducts
        if relatedPro.available == true
          assign yeshasproduct = true
        endif
      endfor
    -%}
  {% if yeshasproduct %}
<div class="related-products-wrapper">
{% for relatedPro in relatedProducts %}
    {% if relatedPro.handle == product.handle %}
    <h3>Size:{{relatedPro.metafields.custom.option_title.value[0]}}</h3>
       {%endif%}
      {% endfor %}
     <div class = "related-product-list">
      {% for relatedPro in relatedProducts %}
          {% if relatedPro.available == true %}
       <a href = "{{ relatedPro.url }}" aria-label="{{relatedPro.title}}" title="{{ relatedPro.title }}">
        <div class = "related-product">
         <div class = "related-product-image" style="{% if relatedPro.handle == product.handle %}border: 2.4px solid rgba(255,0,0);{% else %}border: 1.2px solid #888;{% endif %} border-radius: 3%;">
           <img src = "{{ relatedPro.images[0] | image_url: width: 135 }}"  alt="{{ relatedPro.title }}" />
          </div>
         <div class = "related-product-name">{{relatedPro.metafields.c_f.option_title.value[0]}}</div>
         <div class = "related-product-price">{{relatedPro.price | money}}</div>
        </div>
       </a>
        {%endif%}
      {% endfor %}
     </div>
</div>
 {%endif%}
<div class = "related-products-dummy"></div>
{% endif %}

结论

通过上述步骤，您可以在 Shopify 上成功添加关联产品组合变体，这将有助于提高用户的购买意图和转化率。此方法通过自定义字段和主题代码的修改，使您能够在产品页面上展示相关的产品组合，为客户提供更多的选择，并促使他们进行更多的购买。