Shopifyで商品ページをカスタマイズするたった4つの方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
サムネイル101

この記事の所要時間:5分

Shopifyでサイト構築を始め、テーマの導入まではできたものの、商品ページをカスタマイズする方法がわからない方もいると思います。

Shopifyの管理画面には様々な編集項目があります。そのなかで、商品ページをカスタマイズするための項目が4つあります。

今回は、Shopifyで商品ページをカスタマイズする、その4つの方法を紹介したいと思います。

最初の3つは、コード(HTML/CSS/Liquid)が全く読めない方にも実践していただける方法です。

商品ページのデザインと構成

商品ページのデザインは、選択しているテーマによって異なります。

あなたが理想とするデザインに近いテーマを選択すると、カスタマイズが少なくて済みます。

product-page-customize1
product-page-customize2

好みのテーマを選んだ上で細かいデザインをカスタマイズしていきます。

テーマによってデザインは異なりますが、どのテーマも共通の部品から構成されています。

例外として、シェアボタンがないテーマや、他の部品を含むテーマなどもあります。

また、商品情報をカスタマイズしていない状態では、「説明」が表示されません。

商品ページをカスタマイズする方法を、これらの部品から考えることができます。

管理画面の商品管理から行えるカスタマイズの例がこちらです。

  • “説明”を充実させる。
  • “基本情報”と”写真”の変更を行う。
  • “購入関連”の中にある、サイズや色などの選択肢を増やす。

管理画面の言語編集から行えるカスタマイズの例がこちらです。

  • “購入関連”の「今から購入」という文字を「購入する」に変える。
  • “シェア”の「ツイート」という文字を「Tweet」に変える。

テーマエディターからコードを変更せずに行えるカスタマイズの例がこちらです。

  • 特定の部品を非表示にする。
  • 販売元を表示する。
  • ブログ記事を”シェア”の下に差し込む。
  • 写真のサイズを変更する。
  • 文字や背景の色を変更する。

上の全ての手段で行えないカスタマイズは、テーマのコードを編集する必要があります。

それぞれのカスタマイズ方法を順番に紹介していきます。

1 管理画面の商品管理からカスタマイズする

Shopifyの管理画面にログインして、「商品管理」を選択します。

product-page-customize3

商品を選択すると、その商品ページのカスタマイズができます。

商品名や写真も変更できますが、デザインとしてインパクトが大きいのは”説明”のカスタマイズです。

product-page-customize4

“説明”の欄には、上部にある編集用のボタンを活用することで、商品説明部分をデザインすることができます。

product-page-customize5

このように表示されます。

サイズや色などの選択肢を増したい場合は、商品編集ページの「バリエーションを追加する」から行えます。

product-page-customize6

2 管理画面の言語編集からカスタマイズする

管理画面の言語編集からは、テーマに設定されている文章や単語を変更することが可能です。

海外製のテーマだと日本語がぎこちないことがありますが、言語編集で、ある程度はカスタマイズすることができます。

言語編集を行うには、「オンラインストア」>「テーマ」>「アクション」>「言語を編集する」と、順番に選択します。

product-page-customize7

このページではサイト全体の単語や文章を設定できますが、今回は商品ページをカスタマイズするので、「Products」を選択します。

product-page-customize8

試しに、「カートに追加する」を、「とりあえずカートに入れる」に変更してみます。

product-page-customize9

ボタンの中の文字が変わりました。

product-page-customize10

全ての単語や文章が、言語編集で変えられるわけではありません。

テーマ開発者は、マーチャントが変えたいであろう文字を選んで設定します。

言語編集で変えられない文字を変えるには、直接コードを編集する必要があります。

3 テーマエディタでコードにふれずにカスタマイズする

Shopifyにはコードにふれずに、サイトのデザインを編集できるテーマエディタという機能があります。

テーマ開発者が、デザインの部品を用意しています。

テーマエディタでは、部品の設定を変えたり、新たな部品をページに埋め込んだりすることができます。

テーマエディタを開くには、「オンラインストア」>「テーマ」>「カスタマイズ」の順に選択します。

product-page-customize12

テーマエディタでは、サイト全体のデザインを編集できますが、今回は商品ページを選択します。

product-page-customize13

左のメニューから「商品ページ」という部品を選択します。

左メニューで「商品ページ」という部品の設定が行えます。

設定項目はテーマによって異なります。

今回は、「数量セレクタ」をオフに、画像サイズを「全幅」にしてみました。

product-page-customize14

個数を選ぶボタンがなくなり、画像のサイズが大きくなりました。

テーマエディタには、他にも、様々な編集方法があります。

気になった方は、shopifyヘルプセンターのテーマをカスタマイズを読んでみてください。

4 テーマのコードを編集する

上記の方法でできないカスタマイズも多くあります。

その場合は、テーマのコードを直接編集するしかありません。

今からテーマのコードを編集する方法を紹介します。

この方法は、HTML/CSSの基本的な知識をつけてから行うことをおすすめします。

テーマのコードを編集するにはいくつかの方法がありますが、一番手っ取り早いのは、管理画面から編集する方法です。

まずは、間違った変更をしてしまっても回復できるように、現時点でのコードを複製しておきましょう。

以下の手順でコードを複製できます。

product-page-customize15

「アクション」>「コードを編集する」を順に選択すると、コードの編集画面が開きます。

product-page-customize16

商品ページに対応するのは、templatesディレクトリにあるproduct.liquidというファイルです。

product-page-customize16

product.liquidを選択すると右側にコードエディタが開きます。

中身を見ると、5行目と6行目にセクションが宣言されています(画像の青枠)。

セクションは、デザインのコンポーネントです。

ここで宣言されている”product-template”というセクションは、sectionsディレクトリのproduct-template.liquidファイルで記述されています。

以降は、テーマのディレクトリ構造や、Liquidについての知識が必要になります。

以下の記事が参考になります。

Shopifyのコード編集を始める前に抑えるべき6つのこと

【最後に】

本記事ではShopifyで商品ページをカスタマイズする4つの方法を紹介しました。

最後に紹介したコードを直接編集する方法は、ほとんどの人にとってはハードルが高いと思います。

一方で、細部のデザインまで作り込めると、サイトの成功に一歩近づきます。

ポイントとなるのは、テーマ選びです。

理想のデザインに近いテーマや、デザインのコンポーネントであるセクションの柔軟性が高いテーマを選ぶことが大事です。

全ての無料テーマを比較している記事があるので、ぜひ参考にしてみてください!

Shopifyの無料テーマを徹底比較!2021年最新版おすすめ

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。