Shopify Prestige主题product-template.liquid商品标签椭圆自适应样式设置

开发者阿泽

2026-9-27

实现步骤

步骤1：修改product-template.liquid模板代码

将原有文件中的标签判断逻辑替换为带统一样式类的结构，代码如下：

<div class="Product__InfoWrapper">
<div class="Product__Info {% if image_count == 0 %}Product__Info--noGallery{% endif %}">
<div class="Container">

{% if product.tags contains "new-badge" %}
<span class="product-badge">NEW PRODUCT</span>
{% elsif product.tags contains 'restocked' %}
<span class="product-badge">RESTOCKED</span>
{% elsif product.tags contains 'best-seller' %}
<span class="product-badge">BEST SELLER</span>
{% elsif product.tags contains 'selling-fast' %}
<span class="product-badge">SELLING FAST</span>
{% endif %}

{%- render 'product-meta', product: product, show_description: true -%}

{%- if product.template_suffix != 'coming-soon' -%}
{%- render 'product-form', product: product -%}
{%- endif -%}

步骤2：添加自定义CSS样式

将以下CSS代码添加到Prestige主题的自定义CSS配置区域（路径：Shopify后台 > 在线商店 > 主题 > 自定义 > 主题设置 > 自定义CSS），也可以直接追加到主题的theme.css文件底部：

.product-badge {
  /* 控制文本和边框的内间距 */
  padding: 4px 12px;
  /* 大数值圆角实现椭圆效果，自动适配文本长度 */
  border-radius: 999px;
  /* 边框样式，颜色可根据主题原有风格调整 */
  border: 1px solid #d1d1d1;
  /* 文本样式匹配原有标签风格 */
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* 阴影效果，可按需调整参数 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  /* 行内块属性实现宽度自适应文本长度 */
  display: inline-block;
  /* 底部外边距，和下方内容拉开距离 */
  margin-bottom: 12px;
}

如果样式和原有Best Seller不完全匹配，可自行调整对应参数：