A.テーマShowcaseへ定期購買アプリをインストールした際に発生する表示崩れを修正するには、下記をご参照下さい。

Shopifyテーマ「Showcase」：https://themes.shopify.com/themes/showcase/styles/betty

1. マイページ内のウィジェットの崩れを修正する方法

以下のコードをstyles.css.liquid最下部もしくは別のcssファイルでテーマに追加して下さい。

.huckleberry-subscription-list-color article dl {
  width: 100%;
}

.huckleberry-subscription-list-color main {
  width: 100%;
}

.huckleberry-subscription-list-color footer {
  float: none;
}

.micromodal-overlay [role=dialog] footer button {
  color: #fff;
  line-height: 1;
  padding: 0;
}

.micromodal-overlay [role=dialog] header button:after, .micromodal-overlay [role=dialog] header button:before {
  width: 50%;
}

.huckleberry-subscription-list-color row, .huckleberry-subscription-list-color .grid {
  margin: 0 auto;
}

.huckleberry-subscription-list-color .grid .grid__item {
  margin-bottom: 12px;
}

.huckleberry-subscription-list-color select {
  color: #5e5c5c;
  border: 1px solid #d7d6d6;
  background: #ffffff;
  padding: 1em 1.7em;
  max-width: 100%;
  width: 432px;
  min-height: 32px;
}

.huckleberry-subscription-list-color .btn {
  color: #fff;
  line-height: 1;
}

.huckleberry-subscription-list-color #root .wrap {
 width: 100%;
}

2. iframeの高さが無限に増加するバグの修正方法

style.css等のテーマのベースとなっているcssファイル内のhtml, body {}内のmin-height, heightの指定を解消します。

(Showcaseの場合) style.css.liquid の以下のコードを変更して下さい。(2100行目付近)


html, body {
  min-height: 100%;
  height: 100%;
  font-size: {{ font_size_base_int }}px;
}
// ↓ min-heightとheightを削除
html, body {
  font-size: {{ font_size_base_int }}px;
}

theme.liquidの{{ 'styles.css' | asset_url | stylesheet_tag }}の上に以下コードを追加して下さい。

<style>
    html, body {
      {%- unless template contains 'account' -%}
      min-height: 100%;
      height: 100%;
      {%- endunless -%}
    }
  </style>

<aside> <img src="/icons/checklist_purple.svg" alt="/icons/checklist_purple.svg" width="40px" /> ヘルプページ