Shopify 如何为每个客户提供个性化的购物车提示？

今天接到客户的电话，对方希望我们为其二次开发的shopify应用中添加如下需求：为每个客户提供个性化的购物车展示。

经过查询了一番资料后，成功完成了这个功能的开发。并将过程总结出来，在此分享给大家，希望能帮助到有需要的朋友。如果你也想系统学习shopify二次开发，这里分享给你们shopify二次开发应用实战这本书，讲的真是系统全面。

在这里插入图片描述

一、理解个性化购物车提示的重要性

在电商行业中，个性化已成为提升用户体验和提高转化率的关键因素。购物车作为用户购买旅程的核心环节，是直接影响用户是否完成购买的关键节点。通过在购物车中添加个性化的提示，可以为用户提供更贴心的购物体验，激发他们的购买欲望。例如：

推荐相关商品：根据用户的浏览和购物车内的商品，推荐相关或互补的产品，增加附加销售的机会。
优惠提醒：如满减、限时折扣、即将失效的优惠券等，促使用户尽快完成购买。
免费配送提示：例如告知用户“再购买50元即可获得免费配送”，有助于提升订单价值。

二、Shopify平台下的个性化策略实施

在Shopify平台上，实现个性化购物车提示的关键步骤包括数据收集与分析、应用市场的工具利用、购物车页面的定制开发，以及后续的邮件与短信提醒等。

1. 数据收集与分析

在实施个性化提示前，需要确保已经集成了用户行为数据的收集工具，如Google Analytics或Shopify的自带数据分析功能。Shopify本身提供了一些用户行为数据分析的基本功能，但结合Google Analytics等工具可以更深入地获取访客数据：

<!-- 将Google Analytics脚本添加到您的Shopify页面 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_TRACKING_ID');
</script>

通过这些数据，我们可以了解用户的访问路径、点击偏好、停留时间和浏览商品等详细行为，这为后续的个性化推荐提供了精准的依据。

2. 利用Shopify Apps增强个性化能力

Shopify应用市场提供了丰富的第三方应用，专门用于个性化推荐。例如：

Nosto：支持个性化推荐，能自动根据用户行为生成相关商品推荐。
Personalizer by LimeSpot：通过人工智能分析用户行为并提供个性化的产品推荐。

小贴士：选择支持A/B测试的个性化推荐应用，例如Nosto，可以帮助您测试不同推荐方案的效果，从而选择最优策略。

3. 定制购物车页面

在Shopify中，可以通过编辑模板来定制购物车页面，实现基于用户行为的个性化提示。

代码示例：展示购物车满减提示

假设用户在购物车中的总额达到一定的门槛时可以享受优惠，可以通过在购物车页面添加以下代码来实现动态的提示：

{% assign cart_total = cart.total_price | divided_by: 100 %}
<div class="cart-savings-message">
  {% if cart_total >= 300 and cart_total < 400 %}
    <p>再加 {{ 400 - cart_total }} 元即可享受满 400 减 50 的优惠！</p>
  {% elsif cart_total >= 400 %}
    <p>您已获得满 400 减 50 的优惠！</p>
  {% else %}
    <p>再加 {{ 300 - cart_total }} 元即可享受满 300 减 20 的优惠！</p>
  {% endif %}
</div>

在上面的代码中，cart.total_price 是购物车的总价格。通过条件判断，用户可以实时看到离下一个优惠门槛的金额，从而激励他们添加更多商品。

代码示例：基于购物车商品推荐

通过用户之前浏览过的商品或购物车内商品的类别，推荐与其购物偏好相似的商品。在Shopify中可以使用recommendations API来生成推荐商品：

{% for recommendation in product.recommendations %}
  <div class="recommendation-item">
    <img src="{{ recommendation.featured_image.src }}" alt="{{ recommendation.title }}">
    <p>{{ recommendation.title }}</p>
    <p>{{ recommendation.price | money }}</p>
    <a href="{{ recommendation.url }}" class="btn">添加到购物车</a>
  </div>
{% endfor %}

此代码将展示当前产品的推荐商品列表，用户可以根据购物车内的商品发现更多相关商品，提高转化率。

4. 邮件与短信营销

利用邮件和短信可以在用户离开购物车时对其进行进一步的触达，尤其是在用户离开页面后还未完成购买的情况下。

代码示例：发送个性化的弃单提醒邮件

通过Shopify的邮件通知功能，可以定期向用户发送购物车弃单提醒。以下是一种简单的邮件模板：

<p>您好 {{ customer.first_name }}，</p>
<p>您购物车中有未完成的订单！以下是您购物车中的商品：</p>
{% for item in abandoned_checkout.line_items %}
  <div class="cart-item">
    <p>{{ item.title }}</p>
    <p>数量: {{ item.quantity }}</p>
    <p>价格: {{ item.price | money }}</p>
  </div>
{% endfor %}
<p>赶快完成订单，限时享受 <strong>5% 折扣</strong> 优惠！</p>
<a href="{{ abandoned_checkout.url }}">立即返回购物车</a>

这个模板中，abandoned_checkout.line_items 是用户购物车内的商品列表。结合用户的名字和商品信息，能够个性化地提醒用户完成订单，同时添加限时折扣激励，进一步提高转化率。

三、实现Ajax购物车更新

在提高用户体验方面，利用Ajax实现动态的购物车更新，避免用户刷新页面的频率，这样也能更加流畅地展示个性化提示。

代码示例：基于Ajax的动态购物车更新

通过Ajax，您可以在用户点击“添加到购物车”时更新购物车内容而不刷新整个页面：

document.querySelector('.add-to-cart-btn').addEventListener('click', function(event) {
  event.preventDefault();
  let productId = this.getAttribute('data-product-id');
  
  fetch(`/cart/add.js`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ items: [{ id: productId, quantity: 1 }] })
  })
  .then(response => response.json())
  .then(data => {
    // 在页面上动态更新购物车数据
    document.querySelector('.cart-total').innerHTML = data.total_price;
    alert('商品已加入购物车！');
  })
  .catch(error => console.error('Error:', error));
});