z-indexとは？
z-indexとは、CSSのプロパティの一つで、要素の重なり順を指定するために使用されます。値が大きい要素ほど前面に表示されます。ストア内に様々な要素が同時に表示される場合に、親要素に対しての重ね順が各要素のz-indexに応じて変化します。
z-indexによって生じる問題の例
easyPointsのウィジェットは通常z-indexが999に設定されており、多くの要素よりも前面に表示されるよう設計されておりますが、必要に応じて変更することも可能です。
例えばサイドカートのz-indexよりもウィジェットの値が大きく、一部ボタンと重複が起きてしまう場合や、他のストアポップアップとの重ね順の兼ね合いでUIに問題が生じてしまう場合などはz-indexの変更が推奨されます。
ウィジェットのz-indexを変更する方法
以下の方法でz-indexを変更可能です。
ウィジェットのカスタマイズ画面から選択する
テーマカスタマイズ内のウィジェットの設定から、ウィジェットのz-index設定を選択可能です。
カスタマイズ画面内の「埋め込みアプリ」→「easyPoints Widget」内の「レイヤー (z-index)」から設定を変更可能です。
それぞれ以下のz-indexに変更されます。
- デフォルト: 999
- 増加: 9999
- 最大: 99999
任意の値に設定する
Shopifyのテーマカスタマイズでは自由な「設定」より自由なカスタムCSSを追加することができます。こちらでウィジェットのclassに対してz-indexを指定することで、前述した3種類以外の値も適用できます。
形式 (z-indexを10に指定する場合):
.epwa-container {
z-index: 10;
}