「shopifyでECサイトを構築したけど、もう少し細部のデザインを編集したい」

「商品詳細・一覧ページの見やすさを向上させたい」

「全体的なUI/UXの向上を計り売り上げをUPさせたい」

本記事はこのようなお悩みを持つ方におすすめです。

ShopifyはLiquidと呼ばれるShopifyのテンプレート言語で構成されており、HTML,CSSの基礎的な知識が必要になります。HTML、CSSの基礎知識がある方向けの内容となりますので予めご了承ください。

今回の編集方法はどのテーマファイルでも通用する方法ですので、HTML,CSSが使えるのであればこの方法で、有料、無料テーマ関わらず他ストアとの差別化ができたり、独自の付け足しや表現ができます。

例えばタイトルのフォントサイズ変更や、見出しにアンダーバーを引き装飾するといった変更ができます。

コード編集はshopify管理画面で完結させることができるので、実践してみてはいかがでしょうか？

shopifyテーマとは

shopifyはストアの外観をテーマを切り替えることにより簡易的に変更することができます。

テーマによってストアにデフォルトである機能が異なりますので、自分のストアにあったテーマを選択することが重要になります。

通常のWEBサイトであればサーバーにファイルをアップロードして反映させるのですが、shopifyはテーマ編集を管理画面から行うことができますので、サーバー周りの知見は関係なHTML,CSSといったフロントサイドの知見さえあれば簡単に編集が可能です。

shopifyテーマの編集手順

実際に公開前のストアでshopifyのテーマ編集をしてみたいと思います。

1.バックアップをとるためにテーマの複製をする

テーマを編集する際に、まずバックアップを取りましょう。変更がうまく出来なかった場合、変更前にもどすことが出来ます。

「オンラインテーマ」→「テーマ」から、「アクション」→「複製」をクリックすると複製できます。

2.コードエディタへ遷移

いよいよテーマを編集していきます。まず、管理画面から「オンラインテーマ」→「テーマ」へ遷移

「アクション」→「コードを編集する」をクリックで準備完了です！

3.テーマを編集する（html,css編集）

コードエディタへ遷移できたら、ついにhtml,cssの編集が可能になります！

左の「ファイルディレクトリ」から編集したいファイルを選択し、右のエディターでソースコードを変更することができます。

Shopifyテーマの構造

どのテーマがどのページに対応しているかの一覧です。

テーマを編集する時、該当するページの検索の手助けになれば幸いです。

404.liquid：404ページ

article.liquid：ブログ記事個別ページ

blog.liquid：ブログ記事一覧ページ

cart.liquid：カート内アイテム一覧ページ

collection.liquid：コレクション（＝商品一覧）ページ

gift_card.liquid：shopify ギフトカードのレンダリングページ

index.liquid：ホームページ（ShopifyストアのTOPページ）

list_collections.liquid：コレクション一覧（＝商品カテゴリ一覧）ページ

page.liquid：固定ページ

product.liquid：商品詳細ページ

search.liquid：検索結果ページ

customers/account.liquid：アカウントの詳細ページ

customers/activate.liquid：アカウントの有効化ページ

customers/addresses.liquid：アカウントの住所ページ

customers/login.liquid：アカウントのログインページ

customers/order.liquid：アカウントの注文詳細ページ

customers/register.liquid：アカウントの作成ページ

reset_password.liquid：アカウントのパスワード再発行ページ

参照ドキュメント(Shopify公式)

https://help.shopify.com/ja/manual/online-store/os/using-themes/change-the-layout/documentation

まとめ

以上Shopifyのテーマ編集方法でした。

html,cssを編集できる関係上、購入した時のテーマをフレキシブルにテーマ編集できます。Shopifyを最大限活用するためにもテーマの編集に少し時間をかけて実現して見たいWEBデザインに近づけてみてはいかがでしょうか？