如何对 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 中自定义样式。但是您可以通过在初始化组件时在选项参数中传递配置来做到这一点。例如，在您想要使用变体调整 select 框的包装元素的特定情况下，它看起来像这样：

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

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

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

您还可以考虑按照 Advanced customization 页面上一节中所述禁用 iframe。它允许您直接自定义样式，因为组件将在您的 DOM.

中呈现

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

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

How to implement CSS changes into the iFrame for Shopify Buy Button

html

css

shopify