如何将 CSS 更改实施到 Shopify 购买按钮的 iFrame 中

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"      }    }  }}