カスタムCSSを使用してストアをカスタマイズ

プログラミングのバックグラウンドを持つユーザー向けに、SHOPLINEはカスタムCSSを使用してストアの外観をカスタマイズする便利な方法を提供しています。この機能を使用すると、グローバルテーマとコンポーネントレベルの両方でスタイルを調整でき、ストアのデザインやサードパーティーアプリのスタイルに細かい制御が可能です。

カスタムCSSの制限事項

次の制限事項に注意してくださいカスタムCSS:

• コンポーネントレベルのCSS: At-rulesはサポートされていません。
• グローバルテーマCSS: 次のat-rulesのみ許可されています：@color-profile、@font-face、@counter-style、@font-feature-values、@font-palette-values、@keyframes、@page、@property。
• URLの使用: ドメインhttps://*.myshopline.comからのみURLが許可されています。
• 文字数制限:
  • グローバルテーマのカスタムCSS：1,500文字
  • コンポーネントレベルのカスタムCSS：500文字

カスタムCSSの追加方法

次の手順に従って、カスタムCSSを実装してください:

1. 管理画面で、オンラインストア＞デザインに移動します。 現在のテーマモジュール内のデザインボタンをクリックします。
   
2. テーマエディターで、カスタムCSSモジュールを見つけます：
   • グローバルテーマ: パレットアイコンをクリックしてテーマ設定にアクセスし、カスタムCSSを選択します。
     
   • コンポーネントレベル: カスタマイズしたい特定のコンポーネントを選択し、カスタムCSSモジュールを見つけます。
     
3. カスタムCSSコードを入力し、保存をクリックして変更を適用します。