Как внедрить CSS изменений в кнопку iFrame для Shopify Buy

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, я использую инструмент инспектора, чтобы выбрать эти два элемента из живого изображения, а затем изменив соответствующий css, который показывает FireFox. Так как я могу это сделать, и все работает правильно, я думаю, что был бы способ действительно включить эти изменения в код и сохранить его, но не знаю, как к этому подойти. Я попытался просто добавить эти два элемента css на мою главную страницу css, но он не работает.

Вот JSFiddle, показывающий исходный код кнопки покупки вместе с изменениями в css (изменения на самом деле не работают): https://jsfiddle.net/johnsmithh/eo4rzLwc/3/

Answer 1

Вы не можете напрямую настраивать стили внутри iframe Shopify But Button. Но вы можете сделать это, передав конфигурацию в параметре options при инициализации вашего компонента. Например, в заданном вами c случае, когда вы хотите настроить элемент-обертку вашего поля выбора с вариантами, это будет выглядеть примерно так:

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

Более подробную информацию вы можете найти здесь: Расширенная настройка , см. Пользовательский стиль раздел.

А вот элементы, которые вы можете настроить: Параметры настройки , поиск Доступные ключи .

Вы также можете отключить iframe, как описано в последнем разделе на странице Расширенная настройка . Это позволит вам настраивать стили непосредственно, так как компонент будет отображаться в вашем DOM.

Вот обновленный пример , основанный на вашем JSFiddle.