跳转到主要内容

Shopify 高级技巧

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

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

在这篇教程中，我们将展示如何在 Shopify 上通过关联产品组合变体的方式来提高网站的转化率。通过对产品颜色和相关变体的精细化管理，能够帮助客户更快找到他们感兴趣的产品，从而提升整体购买率。接下来，我们将分步介绍如何设置自定义字段、编辑主题代码和样式，以便在产品页面中展示相关的颜色选项。

步骤 1：创建自定义字段

首先，进入 Shopify 后台，前往 Settings > Custom data > Products，点击 Add definition，然后添加以下自定义字段：

  • 产品短标题 (color title)
    • 定义：c_f.color_title
    • 类型：Single line text
    • 选项：List of values
  • 颜色关联产品 (color products)
    • 定义：c_f.color_products
    • 类型：Product
    • 选项：List of products
  • 产品颜色值 (color value)
    • 定义：c_f.color_value
    • 类型：Single line text
    • 选项：List of values

这些字段将用于存储每个产品的颜色标题、颜色相关的产品和颜色值。

步骤 2：修改主题代码

接下来，我们需要修改 Shopify 主题的代码。进入 Online Store > Themes，找到当前使用的主题并点击 Edit code。在 sections > main-product.liquid 文件中，搜索 @app，然后在 } 结束符后面添加以下代码：

{
  "type": "color3_related_products",
  "name": "color3 related products",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "产品关联组合变体颜色3"
    },
    {
      "type": "number",
      "id": "heading_font_size",
      "label": "Heading font size (px)",
      "default": 18
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading color",
      "default": "#121212"
    }
  ]
}

这个代码块将为颜色相关的产品变体添加一个自定义设置。

步骤 3：在 @app 部分添加代码

在文件中找到 {%- when '@app' -%} 这一行，并将以下代码添加到该位置：

{%- when 'color3_related_products' -%} 
  {%- render 'product-color-nav3', product: product -%}

接下来，在 snippets 文件夹中创建一个新的文件 product-color-nav3.liquid，并插入以下代码：

{% if product.metafields.c_f.color_products and product.metafields.c_f.color_value %}
  <link rel="stylesheet" href="{{ 'bootstrap.min.css' | asset_url }}">
{% endif %}

{% if product.metafields.c_f.color_products and product.metafields.c_f.color_value %}
  {% assign relatedProducts = product.metafields.c_f.color_products.value %}
  {%- liquid 
    assign yeshasproduct = false
    for relatedPro in relatedProducts
      if relatedPro.available == true
        assign yeshasproduct = true
      endif
    endfor
  -%}
  
  {% if yeshasproduct %}
    <!-- 颜色显示标签 -->
    {% for relatedPro in relatedProducts %}
      {% if relatedPro.handle == product.handle %}
        <div class="color_related-container mt-4">
          <div class="color_related-nav_color__label">
            <span>Color: </span>
            <span class="color_related-nav__value">{{ relatedPro.metafields.c_f.color_title.value[1] }}</span>
            <div class="color_related-circle" style="background-color:#{{ product.metafields.c_f.color_value.value[1] }};"></div>
          </div>
        </div>
      {% endif %}
    {% endfor %}
    
    <!-- 手风琴结构 -->
    <div class="color_related-container">
      <div class="color_related-accordion">
        <div class="color_related-accordion-item">
          <div class="color_related-accordion-button" aria-expanded="false">
            Select Birthstone: 
            {% for relatedPro in relatedProducts %}
              {% if relatedPro.handle == product.handle %}
                {{ relatedPro.metafields.c_f.color_title.value[0] }}
              {% endif %}
            {% endfor %}
            <span class="color_related-arrow">&#9660;</span>
          </div>
          <div class="color_related-accordion-body">
            <ul class="color_related-list-unstyled">
              {% for relatedPro in relatedProducts %}
                {% if relatedPro.available == true and relatedPro.metafields.c_f.color_value.value[0] %}
                  {% assign color_values = relatedPro.metafields.c_f.color_value.value %}
                  {% if color_values[0] != "" %}
                    <li class="color_related-nav__item">
                      <a href="{{ relatedPro.url }}" class="color_related-btn {% if relatedPro.handle == product.handle %}active{% endif %}">
                        <div class="color_related-circle" style="background-color:#{{ color_values[0] }};"></div>
                        <span>{{ relatedPro.metafields.c_f.color_title.value[0] }}</span>
                      </a>
                    </li>
                  {% endif %}
                {% endif %}
              {% endfor %}
            </ul>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
{% endif %}

步骤 4：添加 CSS 样式

为了美化颜色相关的产品展示，我们需要为 base.css 或 theme.css 文件添加以下样式：

/* Container for accordion */
.color_related-container {
  max-width: 600px;
  margin: 0 auto;
}

/* Accordion button */
.color_related-accordion-button {
  background-color: #fff;
  color: #333;
  font-size: 14px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

/* Hover effect on the accordion button */
.color_related-accordion-button:hover {
  background-color: #7a7a7a;
  border-color: #999;
  color:#ffffff;
}

/* Arrow rotation */
.color_related-accordion-button .color_related-arrow {
  transition: transform 0.3s ease;
  font-size: 18px;
}

/* Rotate arrow when accordion is expanded */
.color_related-accordion-button.active .color_related-arrow {
  transform: rotate(180deg);
}

/* Accordion body */
.color_related-accordion-body {
  display: none;
  padding: 10px 15px;
  border-top: 1px solid #ccc;
  background-color: #ffffff;
  border-radius: 5px;
}

/* Display accordion body when active */
.color_related-accordion-body.show {
  display: block;
}

/* List styles */
.color_related-list-unstyled {
  list-style: none;
  padding-left: 0;
}

.color_related-nav__item {
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.color_related-nav__item .color_related-btn {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #070707;
  padding: 8px 15px;
  border-radius: 5px;
  transition: transform 0.3s, background-color 0.3s;
  width: 100%;
  background-color: #ffffff;
}

.color_related-nav__item .color_related-btn:hover {
  background-color: #5f5e5e;
  transform: scale(1.05);
  color:#fff;
}

/* Active state for current page */
.color_related-nav__item .color_related-btn.active {
  background-color: #7c7c7c;
  color: #ffffff;
}

/* Circle for each birthstone option */
.color_related-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 15px;
}

/* Color display section */
.color_related-nav_color__label {
  display: inline-flex;
  align-items: center;
  padding-left: 15px;
  font-size: 16px;
}

.color_related-nav_color__label .color_related-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-left: 10px;
}

步骤 5：在产品页面填写相关字段

在 Shopify 后台，进入每个产品页面，填写 color title、color products 和 color value 字段的内容。这些信息将用于展示相关的颜色变体。

步骤 6：更新产品模板

最后，前往 模板定义，找到产品模板，编辑并添加 color3 related products 块。

通过完成这些步骤，你将能够在 Shopify 网站中为每个产品创建颜色关联的变体选择，增强客户的购物体验，并有效提升转化率。如果你有任何问题，欢迎随时咨询！