更有效地展示 Shopify 购物车的自定义数据

更有效地展示 Shopify 购物车的自定义数据

2025年8月21日

让我们看看更改后的效果。

好的，让我们开始这个教程吧！

登录到您的 Shopify 管理面板，然后前往在线商店 > 主题页面。

我们将使用 Shopify 的默认 Dawn 主题作为示例进行复制，点击 "更多" 按钮跳转到代码编辑页面。

选择 snippets 文件夹，然后点击 "新建文件" 按钮。

创建一个名为 customeow-data.liquid 的文件。

您可以下载 customeow-data.liquid 文件以进行替换。

下载 liquid 文件

保存文件。
快捷键：保存文件

找到 sections/main-cart-items.liquid 文件。

本教程基于 Shopify 2.1 主题版本。如果您的主题版本不匹配，可以尝试搜索 property in item.properties 找到代码文件及其位置。

按 Command/Ctrl + F 打开文件搜索窗口，然后搜索 property in item.properties 代码。
快捷键：搜索

选择代码，然后按 Command/Ctrl + / 进行注释。
快捷键：搜索

将下面的代码复制并粘贴到 sections/main-cart-items.liquid 文件中。

{% comment %} CustoMeow Custom Data  {% endcomment %}
{% render 'customeow-data',
  properties: item.properties, 
  title: 'Your personalization', 
  enable_dark: false,
  text_color: '#000000',
  preview_font_size: 12,
  preview_image_width: 60, 
  preview_image_radius: 6, 
  enable_modal: true,
  modal_background_color: '#000000',
  cart_item_id: '',
  cart_item_image_classname: ''
%}

将复制的代码粘贴到注释掉的代码下方。

保存文件。
快捷键：保存文件

好的，让我们现在测试一下吧！

退出编辑器，返回主题，点击自定义按钮以启用 CustoMeow 插件。

启用 CustoMeow 插件后，不要忘记点击保存！

现在预览这个主题。

找到您自定义的产品，调整它，添加到购物车，并查看它在购物车中的外观。

太好了！购物车现在显示您的自定义数据！

高级设置

我们有一些设置可以调整！

{% comment %} CustoMeow Custom Data  {% endcomment %}
{% render 'customeow-data',
  properties: item.properties, 
  title: 'Your personalization', 
  enable_dark: false,
  text_color: '#000000',
  preview_font_size: 12,
  preview_image_width: 60, 
  preview_image_radius: 6, 
  enable_modal: true,
  modal_background_color: '#000000',
  cart_item_id: '',
  cart_item_image_classname: ''
%}

接下来，让我们深入了解每个设置的功能！

properties (必填)
获取购物车中产品的自定义参数。
properties: item.properties,
title (可选)
显示自定义部分的标题。
title: 'Your personalization',
推荐使用本地化文本获取标题。
{%- assign properties_title = 'general.cart.properie.title' | t -%} {% render 'customeow-data', properties: item.properties, title: properties_title, enable_modal: true %}
enable_dark (可选)
如果设置为 true，文本颜色将强制为白色，并且图像样式将优化为深色模式，默认为 false。
enable_dark: false,
text_color (可选)
字体文本颜色，十六进制或 rgba，默认值为 'oklch(37.3% .034 259.733)'。
text_color: '#000000',
preview_font_size (可选)
用户预览自定义文本的字体大小，12~16px，默认为 12px。
preview_font_size: 12,
preview_image_width (可选)
预览图像缩略图的宽度，默认为 60px。
preview_image_width: 60,
preview_image_radius (可选)
预览图像缩略图的圆角，默认为 6px。
preview_image_radius: 6,
enable_modal (必填)
启用或禁用点击预览缩略图查看全尺寸图像的选项。
enable_modal: true,
modal_background_color (可选)
设置图像弹出窗口的背景颜色—当图像有透明区域时，您将看到背景颜色透过。
modal_background_color: '#000000',

预览图像显示在产品图像上。

cart_item_id 和 cart_item_image_classname 参数必须同时设置才能生效。

cart_item_id (可选)
购物车的商品 ID—通常，商品的排序顺序用作 ID，您可以在 main-cart-items.liquid 文件中找到购物车商品 ID。
如果没有 ID，您可以使用 item.index 作为唯一标识符手动添加一个。
CartItem-{{ item.index | plus: 1 }}
cart_item_image_classname (可选)
产品图像的父层 classname，如果没有，您可以添加自己的 classname。
这是最终的代码，准备就绪。
{% comment %} add item id {% endcomment %} {%- assign cart_item_index = item.index | plus: 1 -%} {%- assign cart_item_id = 'CartItem-' | append: cart_item_index -%} {% comment %} CustoMeow Custom Data {% endcomment %} {% render 'customeow-data', properties: item.properties, title: 'Your personalization', enable_dark: false, text_color: '#000000', preview_font_size: 12, preview_image_width: 60, preview_image_radius: 6, enable_modal: true, modal_background_color: '#000000', cart_item_id: cart_item_id, cart_item_image_classname: 'cart-item-thumbnail'
保存代码，然后返回购物车，看看结果吧！