【超簡単】特定のページ(商品,コレクション)にのみCSSを反映させる方法

公開日:2023.10.28, 更新日:2023.10.28

Shopifyで作った特定のページにのみ、CSSをあてたいんだけど、どうやればいいのかわからない・・・

↑こういったお悩みに答えます。

結論:該当ページのHTMLに直接記述する

まずは、下記のように、<style>と</style>の間にあてたいCSSを記述します。

--------------

<style>
 p {
  color: red;
}
</style>

--------------

そうしたら、このコードを反映させたいページのHTML欄に貼り付けます。
(操作の流れは、下記動画を参照)

https://gyazo.com/8114bec3d702693cf55112fb72232a34

動画はページですが、商品やコレクションページでも同様です。

まとめ

これで、任意のページにCSSを反映させることができました。

※こちらは、Shopifyテーマ開発に詳しくない方向けのHowtoになりますので、技術者の方はテーマファイルから記述された方が良いです

参考: 画像とテキストを横並び、かつレスポンシブ対応にしたい

記事を書いた人

福水正太

代表/エンジニア/マーケター/ブロガー 福水正太

国内5番目の個人Shopifyエキスパート / Shopify専門のEC支援企業「株式会社ファイブビット」を設立 / Shopifyストアの新規構築・カスタマイズ・既存ECからShopifyへの移行が得意。