时间戳

首页 > 解决方案 > 如何在 Shopify Buy Button 的 iFrame 中实施 CSS 更改

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

问题描述

我需要将以下样式添加到我的购买按钮的 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/

标签： htmlcssshopify

解决方案

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

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

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

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

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

这是一个基于您的 JSFiddle的更新示例。

推荐阅读