如何在 Shopify Buy Button 的 iFrame 中实施 CSS 更改

Question

我需要将以下样式添加到我的购买按钮的 iFrame 中，但我不确定如何执行此操作，并且正在努力寻找针对购买按钮的这些确切元素的文章。我不想禁用 iFrame，我只想对其进行以下更改：

.shopify-buy__layout-vertical {
    text-align: right;
}

.shopify-buy__option-select-wrapper {
    border: 0px;
    border-radius: 5px;
    position: fixed;
    height: 42px;
    bottom: 0;
    width: 85px;
}

基本上，当我在 FireFox 中打开购买按钮时，我使用检查器工具从实时视图中挑选出这两个元素，然后更改 FireFox 显示的相应 css。由于我能够做到这一点并且它工作正常，我想有一种方法可以将这些更改实际合并到代码中并保存它，但不知道如何处理。我试图简单地将这两个 css 元素添加到我的 css 主页面上，但它不起作用。

这是一个 JSFiddle，显示原始购买按钮代码以及 css 中的更改（更改实际上不起作用）：https://jsfiddle.net/johnsmithh/eo4rzLwc/3/

Answer 1

您实际上无法在 Shopify But Button iframe 中直接自定义样式。但是您可以通过在初始化组件时在选项参数中传递配置来做到这一点。例如，在您想要使用变体调整选择框的包装元素的特定情况下，它看起来像这样：

var options = {
  "option": {
    "styles": {
      "wrapper": {
        "border": "0px",
        "border-radius": "5px",
        "position": "fixed",
        "height": "42px",
        "bottom": "0px",
        "width": "85px"
      }
    }
  }
}    

您可以在此处找到更多信息：Advanced customization，请参阅自定义样式部分。

您可以自定义以下元素：Customization Options，搜索可用键。

您还可以考虑禁用 iframe，如 Advanced customization 页面的最后一节所述。它允许您直接自定义样式作为组件，然后将在您的 DOM 中呈现。

这是基于您的 JSFiddle 的 an updated example。