调整Shopify嵌入Buy Button长Variant下拉框宽度的技术求助

方案1：给目标产品添加专属类（修改嵌入代码） #

通过给特定产品的Buy Button组件添加自定义类，实现精准样式控制，不影响其他产品的下拉框。

嵌入代码修改（添加自定义类与初始宽度） #

<div id='product-component-XXXXXX'></div>
<script type="text/javascript">
  ShopifyBuy.UI.onReady(client).then(function(ui) {
    ui.createComponent('product', {
      id: 'XXXXXX', // 替换为目标产品ID
      node: document.getElementById('product-component-XXXXXX'),
      options: {
        product: {
          styles: {
            select: {
              'max-width': '200px', // 设置为短Variant下拉框的一致宽度
              'width': '100%'
            }
          },
          // 给组件容器添加专属类
          classes: {
            container: 'custom-long-variant-select'
          }
        }
      }
    });
  });
</script>

配套CSS（实现点击后自适应宽度） #

/* 初始状态：限制下拉框宽度与短Variant一致 */
.custom-long-variant-select .shopify-buy__option-select {
  max-width: 200px;
  width: 100%;
  transition: max-width 0.2s ease; /* 平滑过渡效果 */
}

/* 点击下拉框时：取消宽度限制，完整显示文本 */
.custom-long-variant-select .shopify-buy__option-select:focus {
  max-width: 100%;
  white-space: nowrap; /* 防止文本换行 */
}

方案2：通过组件ID精准定位（无需修改嵌入代码） #

如果不想改动嵌入代码，可直接通过目标产品组件的ID定位，实现同样效果：

/* 替换为目标产品组件的实际ID */
#product-component-XXXXXX .shopify-buy__option-select {
  max-width: 200px;
  width: 100%;
  transition: max-width 0.2s ease;
}

#product-component-XXXXXX .shopify-buy__option-select:focus {
  max-width: 100%;
  white-space: nowrap;
}

效果演示代码（模拟场景） #

<!-- 模拟普通短Variant产品下拉框 -->
<div class="shopify-buy__product">
  <select class="shopify-buy__option-select">
    <option value="s">S</option>
    <option value="m">M</option>
  </select>
</div>

<!-- 模拟长Variant目标产品下拉框 -->
<div id="product-component-XXXXXX" class="shopify-buy__product">
  <select class="shopify-buy__option-select">
    <option value="long">超长长长长长长长长长长尺寸名称</option>
    <option value="m">M</option>
  </select>
</div>

<style>
/* 基础样式 */
.shopify-buy__option-select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 目标产品专属样式 */
#product-component-XXXXXX .shopify-buy__option-select {
  max-width: 200px;
  width: 100%;
  transition: max-width 0.2s ease;
}

#product-component-XXXXXX .shopify-buy__option-select:focus {
  max-width: 100%;
  white-space: nowrap;
}
</style>

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