Shopify产品页用jQuery替换文本：新手求助代码位置及函数失效问题

核心问题说明 #

你的jQuery代码无效主要有两个原因：

• 选择器错误：.product-block product-block--price 写法错误，同一元素的多个class需用.连接，正确应为 .product-block.product-block--price
• 部分Shopify主题未默认加载jQuery，导致$/jQuery函数无法调用

下面提供三种解决方案，按推荐优先级排序：

方案1：直接修改Liquid模板（最稳定，无需JS） #

这是最优方案，避免JS加载延迟导致的文本闪烁：

1. 进入Shopify后台 → 在线商店 → 主题 → 点击对应主题的「操作」→「编辑代码」
2. 找到产品相关模板文件（常见名称：product-template.liquid、main-product.liquid，或对应snippet如product-price.liquid）
3. 搜索包含"Price"的代码，比如可能是 {{ 'products.product.price' | t }} 或直接写死的"Price"文本
4. 将其替换为 "M.R.P"；如果是使用翻译标签，可进入「在线商店→主题→操作→编辑语言」，搜索"Price"并替换为"M.R.P"

方案2：使用原生JavaScript（无需依赖jQuery） #

如果无法修改模板，用原生JS更稳妥：

1. 进入主题代码编辑页面，找到产品模板文件（如main-product.liquid）
2. 在文件末尾的</body>标签前添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
  const priceLabel = document.querySelector('.product-block.product-block--price .variant__label');
  if (priceLabel) {
    priceLabel.textContent = 'M.R.P';
  }
});

3. 保存并预览产品页效果

方案3：修复jQuery代码（需确保主题加载jQuery） #

若坚持用jQuery：

1. 先确认主题是否加载jQuery：查看theme.liquid的<head>或<body>部分是否有类似<script src="...jquery..."></script>的引入
2. 若未加载，可在theme.liquid的<head>中添加：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

3. 然后在产品模板的</body>前添加修正后的代码：

jQuery(document).ready(function() {
  $('.product-block.product-block--price .variant__label').text('M.R.P');
});

（注：部分主题会把jQuery置于noConflict模式，需用jQuery而非$）

内容的提问来源于stack exchange，提问作者Campy