カスタムCSS

ShopifyテーマエディターからAlignテーマに目的に合ったカスタムCSSを追加します。

注目のリンク

役立つ動画

Shopify Academy動画：ストアをカスタマイズする

カスタムCSSを追加する

カスタムCSSを使用すると、組み込み設定で必要な結果が得られない場合に、Alignテーマのスタイルを変更できます。慎重に使用し、ライブストアに公開する前に変更をテストしてください。

ボタンのスタイルなど、ストア全体に表示する変更にはテーマレベルのCSSを使用します。

テーマレベルのCSSはチェックアウトを除くすべてのストアページに適用され、1,500文字に制限されています。

フォントサイズや背景色など、1つのセクションだけに影響する変更にはセクションレベルのCSSを使用します。

セクションレベルのCSSは選択したセクションに限定して適用され、500文字に制限されています。

カスタムCSSを使用するには、CSSとHTMLに関する知識が必要です。Align固有のガイダンスについては、Company XYZサポートから始めてください。Shopifyプラットフォームの制限とテーマサポート全般については、利用可能なテーマサポートを確認してください。

対応しているルールを使用する。 @import、@charset、@namespaceはサポートされていません。セクションレベルのCSSでは、@media、@container、@layer、@supportsのアットルールのみ使用できます。
セクションのコンテンツを慎重にターゲットにする。 セクションレベルのCSSでは、セクションの外側のラッパーにあるIDやクラスをターゲットにできません。親ラッパーのタグで始まるルールは、そのセクション内の子孫ルールとして扱われます。ラッパーは通常<div>ですが、テーマではその他の許可された値を使用することもできます。
承認済みのアセットURLを使用する。 カスタムCSS内のURLでは、https://cdn.shopify.comドメインのみ使用できます。
フォントのパフォーマンスを考慮する。 カスタムフォントは使用できますが、ブラウザはテキストを表示する前にフォントをダウンロードします。ストアのパフォーマンスへの影響をテストし、テーマでカスタムフォントを使用する方法を確認してください。
テーマの更新後に再テストする。 テーマのマークアップ、セレクター、クラスが変更されると、既存のカスタムCSSが動作しなくなることがあります。

解決できないエラーが発生した場合は、Company XYZサポートに連絡してAlignに関するガイダンスを受け、プラットフォームについてはShopifyの追加サポートリソースを確認してください。