Shopifyこんにちは、ムネトです。Shopifyを使い始めてみて、「ちょっとこの部分のカラーを変えたい」、「違うフォントを使いたい」などと思ったことはありませんか?今回はShopifyで独自のCSS(スタイルシート)を作成してページをデザイン方法についてお伝えしていきます。Shopifyではtemplate(テンプレート)とよばれるページをカスタマイズする際は、カスタマイズ用のCSSファイルを新たに設けておくと自分で書いたコードがすぐわかるので管理が楽になります。独自のCSSを作成して思い通りのページに変更しちゃいましょう。Sheets)とは?HTMLで書かれたページをWEBブラウザなどでどのように表示するかを定義するためのプログラミング言語のことです。要するにブラウザでの見え方をどう見せるか記述する言語だと理解してください。設定する項目は下記のとおり、順番に解説していきます。テーマを複製するCSSファイルを作成CSSを記述テーマファイルでCSSファイルを読み込む本番環境に反映する今回はCSSファイルの設置と、テストでページ全体の背景色を赤にするスタイルを記述してみます!今回のゴールページ全体の背景を真っ赤にしました。わかりやすくするためにド派手にしてみました!テーマの複製あとで変更したテーマを元に戻せるようにしておくために、変更前のテーマを複製しておきましょうテーマ複製のメリット変更したテーマの復元ポイントを作成しておくことで、エラーなどの突発的なトラブルに対処するのに有効です。ページを編集した後はこまめに複製しておき、いつでも元に戻せるようにしておくことも大事な運用の一部です。管理画面からアクション>複製をクリックします現在のテーマの下段に「(現在のテーマ名)コピー」という名前で複製ができました。複製したテーマの名前を変更しておきます。CSSファイルを作成つづいてCSSファイルの作成方法です。アクション>コードを編集を選びます。新しいAssetを追加するファイルの一覧から下段にあるAssetsフォルダを探して新しいassetを追加するをクリックします。空のファイルを作成するを選んで、custom.css.liquidというファイルを作ります。アセットを追加するをクリックしてファイルを追加します。}}’);}CSSを記述するCSSファイルを作成したら、コードを書いていきましょう。red!important;}記述できたら「保存する」を忘れずに!CSSを読み込むテーマのベースファイルである『theme.liquid』に、先程作成した「custom.css.liquid」を読み込むためのタグを追加していきましょう。}}<head></head>内にタグを追加します。追加する場所は下の画像あたりで大丈夫です。追加したら保存します。反映する最後に反映したスタイルを本番環境に移す作業です。複製したテーマを公開にすることで、現在のテーマと置き換えられます今回複製したテーマのアクションから公開を選びます。すると現在のテーマに表示されます。テーマを元に戻したい場合は、以前のテーマを公開にすることで元のテーマに戻すことができます。いかがでしたか?意外と簡単だったと思います。他にも、見出しのフォントサイズを大きくしてみるなど、コードを追記してみてください。以上、少しでも皆様の参考になれば幸いです。Shopifyのストア制作やページの修正のご依頼、Shopifyに関するアドバイスなどのはお気軽にご相談ください。検索プロフィールソケットブログ自称、Shopify制作屋。食品・アパレルを中心にストア制作のサポートをしています。現在は制作会社・CSで受注しながら、2022年から某企業のShopify制作チームにジョインしています。DawnでGlightboxを実装しようこんにちは、ムネトです。自作で画像をポップアップで拡大表示させようと思うと、実装が大変ですよね。[...]ソケットブログ2024年6月20日ShopifyShopify【簡単!アプリなし】shopify利用規約のチェックボックスを商品ページに設置しようこんにちは。方法を解説していきます。Flowアプリで顧客タグを付与するこんにちは、ムネトです。方法を解説していきます。Flowアプリについて深掘りします。