テーマにCSSを追加してウィジェットにスタイルを変更する方法

2024-02-12

基本のスタイルに関しては、「アプリを埋め込む」から設定が行えます。よりカスタマイズしたい場合は、CSSを記述することで変更できます。この記事ではテーマのCSSを追加してウィジェットにスタイルを適用する方法についてご説明いたします。

テーマにCSSを追加する

カスタムCSSを使う方法

カスタムCSSはLiquidファイルの編集なしに、デザインエディター上でCSSを適用させられる方法です。CSSの記述は必要ですがギフトオプションに関わらず、希望のデザインを適用しやすくなります。

カスタムCSSはShopifyのテーマエディタから設定できます。詳細に関してはドキュメントを参照ください。ここでは、この機能を使ってウィジェットにスタイルを適用するときのポイントを説明します。

コードを編集する方法

テーマによって編集方法は異なります。また、テーマの管理の仕方に合わせて編集を行う必要があるため、ここでは詳しい方法は述べません。こちらからご連絡いただければテーマ合わせた編集をサポートいたします。

CSSのコード量が多い場合や、CSSを再利用したい場合は、コードコードを編集して設定を行うと良いです。
以下に詳しい説明がされています。

ウィジェットにスタイルを適用する

具体的にどのようなCSSを追加すると、ウィジェットのどの部分の見た目を変えられるのか見ていきます。
対象の要素ごとにスニペットを用意しましたので、変更したい要素に合わせてコピーしてお使いください。

チェックボックスにCSSを適用する

div[data-dw-widget="gift-options"] label.dw-checkbox {
  /* ここにチェックボックスのスタイルを追加してください */
}

商品画像にCSSを適用する

div[data-dw-widget=gift-options] img.option-image {
  /* ここに商品画像のスタイルを追加してください */
}

セレクトボックスにCSSを適用する

div[data-dw-widget="gift-options"] div.dw-select > select {
  /* ここにセレクトボックスのスタイルを追加してください */
}

送り主氏名欄（インプット要素）にCSSを適用する

div[data-dw-widget=gift-options] input.dw-input {
  /* ここにインプット要素のスタイルを追加してください */
}

メッセージ（テキストエリア）にCSSを適用する

div[data-dw-widget=gift-options] textarea.dw-textarea {
  /* ここにテキストエリアのスタイルを追加してください */
}

適用例

セレクト要素の幅を広くする

div[data-dw-widget="gift-options"] div.dw-select {
  max-width: 300px
}

セレクトボックスの横幅を標準よりも広くしたい場合は、セレクト要素に対してmax-width を適用します。

縦方向レイアウトに変更

div[data-dw-widget="gift-options"] div.dw-columns {
  flex-direction: column;
}

このCSSを適用すると、レイアウトを縦方向レイアウトに固定することができます。
ウィジェットのレイアウトは標準で横方向になっており、スマートフォン表示などで画面幅が狭まると縦方向レイアウトに切り替わります。しかし、表示スペースの関係などから、横幅に制限があるといった場合は、スタイル適用でレイアウトを変更することが可能です。

終わりに

CSSを使用してウィジェットの外観をカスタマイズする方法についてご説明いたします。ウィジェットの特定の部分だけデザインを変更したいというご要望をよくいただきます。

Shopifyのテーマは頻繁に更新され、また仕様の多くがテーマ開発者に委ねられているため、アプリ開発者にとって幅広いテーマに対応することが難しい面があります。

しかし、本アプリは標準のスタイルでテーマに自然に溶け込むよう設計されています。枠線の太さや背景色などのパラメータをテーマから自動的に取得し適用することで、違和感のない表示を実現しています。さらに、CSSによる詳細なデザイン調整も可能であり、高度なカスタマイズ性を維持しています。

本記事では、このカスタマイズ法について解説しました。ショップに最適なデザインを適用する際にお役立ていただければ幸いです。