shopifyのDawnで商品ページを複製し、コレクション毎に商品ページを作る
テーマは、Dawn version3.0を使っています。
この度、コレクション毎に商品ページを作ることになりました。
それで、テーマのコードの編集画面で新しいテンプレートを作るを選択して、product.xxx.liquidを作りました。
でも空なので、sectionの中にあるmain-product.liquidの中身をコピーして、作ろうとしました。
とりあえずコピペで貼り付けて保存しようとしたら、{% javascript %}が有る行が、syntaxエラーになりました。
タグが無いという内容でした。
それでこの{% javascript %}から{% endjavascript %}をコメントアウトしました。
でも、今度は、別の場所でsyntaxエラー別の内容でタグが無いと表示されました。
この一連の流れは、私がshopifyの新しいテーマのShopify 2.0テーマに対応した作り方を忘れていたからです。
この記事が、とても役立ちました。
テンプレートフォルダの中に、新しいテンプレートを作る
コードを編集の画面で、新しいテンプレートを追加するを選択します。
JSONを選択して、ファイル名を入力します。
productを選択します。
ファイル名のproductの後ろの部分が、テンプレート名として使われます。
下記のコードで、"custom-****-product"の部分を、新しく追加したsessionフォルダの中に作ったファイル名と同じにしてください。
"main": {
"type": "custom-****-product",
"blocks": {
"vendor": {
"type": "text",
"settings": {
"text": "{{ product.vendor }}",
"text_style": "uppercase"
}
},
sectionのフォルダの中に新しくファイルを作る
ただ先に、このJSONのファイルを保存する前に、sectionのフォルダの中に作った新しいファイルを先に保存してください。
先にJSONのファイルを保存すると、セクション名の関連性がないという内容のエラーが出てしまいます。
sectionのフォルダの中に作ったファイルには、main-product.liquidの中身をそのままコピーして貼り付けることが出来ます。
コレクションにまとめた商品のこだわりをアピールできる工夫
コレクションにまとめた商品を販売するにあたって、商品の特徴やこだわりをアピールすることは非常に重要です。商品ページをカスタマイズすることで、コレクションごとに異なるデザインや情報を提供することができます。ここでは、Dawn version3.0を使用して、コレクションにまとめた商品のこだわりをアピールする工夫を紹介します。
-
商品の特徴をハイライトする
商品ページのヘッダー部分に、商品の特徴を簡潔にまとめた説明文を記載することで、ユーザーが商品の魅力をすぐに理解できるようになります。例えば、コレクションが「オーガニックコスメ」であれば、ヘッダーに「天然成分100％のオーガニックコスメラインナップ」といった説明を入れると良いでしょう。 -
コレクションに合わせたデザインを作る
コレクションごとに異なるデザインを提供することで、商品の特徴を強調することができます。例えば、コレクションが「アウトドア用品」であれば、商品ページに自然な色合いや野外で使われる素材を使ったデザインを取り入れると良いでしょう。 -
商品のこだわりを詳しく説明する
商品ページの詳細欄に、商品のこだわりや特徴を詳しく説明することで、ユーザーが商品に興味を持つきっかけになります。例えば、オーガニックコスメの場合は、天然成分の効能や肌への影響について詳しく説明すると良いでしょう。 -
顧客の声を掲載する
商品ページに、実際に商品を購入した顧客の声を掲載することで、ユーザーが商品の信頼性や品質について判断しやすくなります。また、顧客の声から商品の改善点を把握し、サービス向上につなげることもできます。
shopifyテーマ2.0の商品ページを複製したい方のお役に立ちたい
今回ネットで色々検索しました。
そしてBingのAIにも質問して調べたのですが、このproduct.jsonというファイルを複製する方法は、見つかりませんでした。
私が検索する言葉を英語に変えて検索したら、冒頭でご紹介した英語の記事を見つけまいた。
こちらの記事の解説も、惜しいです。
テンプレートのファイルの例が、product.abc.liquidと書かれているので、liquidのファイルだと思ったのです。
でも、実際は、テンプレートを追加するときは、JSONを選択して追加することが肝と分かりました。
セクションのフォルダの中にあるmain-product.liquidの中身は、セクションのフォルダの中に追加したセクションのファイルに、コピペできました。
そして、shopifyのウェブのテーマ編集画面で、編集できました。
私の備忘録を兼ねて、記録に残したいと思います。
Discussion