logo

【Shopify】ページテンプレートを新規作成・変更・削除する方法

【Shopify】ページテンプレートを新規作成・変更・削除する方法

Shopifyでは下層ページを作成する際に、独自のテンプレートを作成・変更することができます。

このことにより、TOPページ以外でも自由度の高いカスタマイズしたページを作成することができるようになりました。

通常であれば商品ページもレイアウトはすべて共通になっています。
例えば商品A〜商品Zがあったとして、デフォルトの状態だとすべて同じレイアウトになっています。

商品ページのテンプレートを1つ追加することで
商品A〜商品MはパターンAの見せ方。商品N〜商品ZはパターンBの見せ方といったそれぞれ違う商品ページを作成することができるようになります。

今回は、そんなShopifyでもっとも使用すると言っても過言ではない独自ページのテンプレートを新規作成・変更・削除する方法をご紹介していきます。

新規でページテンプレートを作成する方法

それではさっそく新規でページテンプレートを作成していきましょう。
今回は、商品ページのテンプレート作成を例に解説していきます。

テンプレートは商品ページ以外にもありますが、基本的には作成手順は今回の解説内容と同じになります。

  1. 「オンラインストア」をクリック
  2. 「テーマ」をクリック
  3. 「カスタマイズ」をクリックしてテーマのカスタマイズ画面へ移動

  1. 画面上の「ホームページ」をクリック
  2. 商品をクリック
  3. 「テンプレートを作成する」をクリック

  1. ①にテンプレートにつける名前を入力
  2. ②で基にしたいテンプレートを選択
  3. 「テンプレートを作成する」で完了

今回は「second-product」というテンプレート名で作成しました。

ページテンプレートを変更する方法

商品のテンプレートを先ほど作成した「second-product」に変更していきます。
Shopify画面から変更したい商品ページへ移動しましょう。

  1. 商品ページの右下にある「テーマテンプレート」をクリック
  2. 先ほど作成した「second-product」があるので選択
  3. 保存して完了

以上で商品のテンプレートを変更することができました。
その他の商品も同じ作業でテンプレートを変更することができます。

ページテンプレートの削除方法

 作成したページテンプレートが不要になった時には削除することができます。
今回の削除方法はテンプレートだけでなく、Shopify内のファイルを削除する際の共通の方法となります。

こちらの方法も覚えておくといざという時に役に立つかもしれませんね。

 

  1. 管理画面から「テーマ」をクリック
  2. 「コードを編集」をクリック

こちらのファイル検索から削除したいファイルを入力します。

削除したいファイルが見つかったら、ファイルをクリックします。
するとゴミ箱マークが出てくるので、こちらからファイルの削除をすることができます。

一度削除してしまったファイルは元に戻せないため、お気をつけください。
また、テンプレートファイルを削除した場合、そのテンプレートを使用している箇所があるとレイアウト崩れなどの影響がありますので、削除するテンプレートが使用されていないか確認のうえ削除するようにしましょう。

まとめ

いかがでしたでしょうか?
Shopifyではテンプレートを上手く活用することで効率良くストア制作ができるようになっています。

ページテンプレートを複数にあてる注意点として
同じテンプレートが当たっているページでは、ページのセクションやブロックを変更すると、その他のページレイアウトも変わってしまいます。

例えば、
「会社概要」と「商品規約」の両方のページで「テンプレートA」というページテンプレートを使用していたとします。

その場合、会社概要のセクションやブロックでレイアウトを変更した場合は商品規約ページの該当箇所も変更されてしまいます。

その点を注意すればとても便利な機能になりますので
ぜひ活用してみましょう!

※この記事は2024年04月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。

\ShopifyでEC構築を検討中の方へ/

現在、Shopify公式は無料のお試しキャンペーンを実施しています。

Shopify

百聞は一見に如かずといいますが、ネット上で情報収集するよりも、実際にShopifyに触れるほうが何倍も効率が良いでしょう。

下記の案内ページからキャンペーンの詳細をご確認ください。

【1ドル×1ヶ月】CP実施中!!

サービス

Service

- プロジェクトプラン -

こんな方におすすめ!

  • これからShopifyでECを立ち上げるための支援をしてほしい

  • 自社で取ってきたShopify案件のディレクションや開発業務を任せたい

  • 自社サービスとShopifyを連携させたアプリケーションを作ってほしい

- サポートプラン -

こんな方におすすめ!

  • 自社でShopifyストアを立ち上げてみたが、やはり専門家がいないと厳しいため、相談できるパートナーがほしい

  • 自社で受けたShopify案件の一部を、Shopifyに強い開発者に相談したい

  • 開発してもらったShopifyアプリの保守やメンテナンスをお願いしたい

- SESプラン -

こんな方におすすめ!

  • ストアの改修や更新業務が忙しくなってきたため、色々な業務をお願いできて専門的なスキルを持っている人材がほしい

  • 自社でShopify案件が溢れてしまい、数ヶ月間、スピーディかつ自由に案件を依頼できる外部のパートナーがほしい

事例

Works

ストア開発/支援

Shopify Store

累計100以上のShopifyストア開発経験を基に、商材・業界ごとに無駄のないご提案~実装が可能です。また、既に公開されているShopifyストアを、技術的な観点から保守/サポートさせて頂いております。弊社が構築していないストア様も、ご加入が可能です。

アプリ開発

Shopify App

各ストアに特化したカスタムアプリだけでなく、Shopify App Storeに掲載できる公開アプリ開発のご相談・ご依頼を承っています。例えば、自社サービスで構築しているAPIとShopifyのAPIを連携~Shopify App Storeで公開することで、Shopifyを使用しているEC事業者に自社サービスをリーチさせることができます。