「全ページ共通」「トップ」など各入力ページの「CSS」欄、「JavaScript」欄に入力した内容は、そのままでは画面に出力されません。テンプレートのソース側で、CSS、JavaScriptファイルのURLを出力するタグを読み込む記述がされている必要があります。
初期値からソースを変更・削除しているテンプレートで発生しやすい事象です。
出力の仕組み
「CSS」欄、「JavaScript」欄の内容は、それぞれ次のタグでファイルのURLとして出力されます。「HTML」欄にこのタグを使った読み込みの記述がないと、入力した内容は画面に反映されません。
| 入力欄 | 出力タグ | 記述例 |
|---|---|---|
| CSS欄 | <{$page.css}> | <link rel="stylesheet" href="<{$page.css}>"> |
| JavaScript欄 | <{$page.javascript}> | <script src="<{$page.javascript}>"></script> |
※CSSの記述例は主に各ページの<head>～</head>内、JavaScriptの記述例は主にページ末尾付近に配置されています。
確認方法
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 各ページ（トップ、商品詳細など）
「HTML」欄
- 上記の編集画面を開き、ソースコード内に<{$page.css}>、<{$page.javascript}>の記述があるか確認します。
- 記述がない場合は、上記の「記述例」を参考にタグを追記して保存します。
- プレビューでショップページを表示し、内容が反映されているか確認します。
※ソースコードを編集する前に、必ずデザインセットのバックアップを取得してください。保存した内容は上書きされるため、バックアップがない場合は元の状態に戻せないことがあります。
よくある質問：【クリエイターモード】デザインセット（ソースコード）をバックアップする方法を教えてください。
関連記事
■タグリファレンス
クリエイターモード タグリファレンス（共通タグ）
【クリエイターモード】CSSを書いたのに反映されない、意図した通りにならない場合のチェックポイントを教えてください。
【クリエイターモード】HTMLを書いたのに反映されない、意図した通りにならない場合のチェックポイントを教えてください。