Shopifyの基本的なレイアウト設定
Shopifyは大幅にカスタマイズしないのであれば、管理画面から簡単なレイアウトの設定ができます。
どれくらい自由度があるか少し説明していきます。
Shopifyは、管理画面でテーマを自由に変更することができます。
テーマによってできることが違ってきますので、有料テーマを購入する場合には見え方が近いものを選びましょう。どのテーマを選んでも、基本的には管理画面から「オンラインストア ＞ テーマ ＞ カスタマイズ」をクリックすることでレイアウトの変更ができるようになります。
カスタマイズできる項目はテーマによって違う
Shopifyのテーマのカスタマイズ画面は以下のようになっていて、セクションを追加したり順番を並べ替えることで見た目のレイアウトを変更することができます。
順番はドラッグで変更することもでき、感覚的に使うことができます。
また、セクションはテーマによって使えないものもあり、使いたいセクションがあるかどうかチェックしてから導入する必要があります。
以下は無料テーマSimpleと有料テーマ2つを比較しています。
比較して気が付いた方もいるかもしれませんが、同じものを表示させるセクションでもテーマによって呼び方が違うと言うのも注意が必要かもしれません。
ただ、この名前は自分で好きなように変更できるので、どのセクションが使えるかがわかっていればあまり問題ないと思います。
有料テーマは購入前にお試しできます
また、テーマは購入前にカスタマイズまでお試しができます。
公開するには購入の必要がありますが、見た目の確認やどんなセクションが使えるかを確認したい場合はまずは気軽にお試ししてみましょう。
気になるテーマを見つけたら「Try theme」をクリックするとお試しができます。
Shopifyでコアファイルを触らずオリジナルのhtmlをトップページに追加する方法
さて、トップページのレイアウトはカスタマイズである程度できることがわかりましたが、自由なレイアウトを配置したいときの方法をご説明します。
セクションに「HTMLをカスタムする」「Custom html」があればそれで可能
幅も設定できるので横並びのボックスも作れます。
さらにセクションを繰り返すことで２カラムと３カラムの２列のデザインなど凝ったレイアウトも実現可能です。
参考画像でCSSはインラインで書いていますが、試してみたところstyleタグを使っても問題なさそうです。
こちらがスタイルタグを上部に追加してみた例です。
ワンブロックくらいのデザインの追加ならスタイルタグが後々修正しやすいかもしれませんね。
セクションのテキストの分類から「Page」を使う方法
テーマによってはカスタムhtmlのセクションがないものもあります。
個人的な印象ですが、有料版のテーマではカスタムhtmlがないものが多い気がしています。
カスタムhtmlがないテーマでオリジナルのレイアウトを表示する方法をご紹介します。
（１）表示させたい内容をページで作る
ページは「オンラインストア ＞ ページ ＞ ページを追加 」で作ることができます。
styleタグを使ってレイアウトしても良いですし、CSSファイルを追加しても良いと思います。
（CSSファイルの追加については別記事でご紹介します）
（２）レイアウトのカスタマイズでページを読み込む
ページを保存したらレイアウトのカスタマイズに移動します。
セクションのテキストのグループから「Page」（テーマによっては「Rich Text」の場合もあります）を追加すると、Pageを選択できるようになるので、先ほど作成したページを選択します。
これで完成です。
セクションをいくつか作れば、ブロックごとにデザインを管理して移動もしやすいのでとても便利です。
コアファイルに何か加えずとも、HTMLとCSSの知識があればトップページのレイアウトはこれで自自由自在ですね。
ShopifyでECサイトの構築をお考えの方、簡単なカスタマイズをご希望の方はお気軽にご相談ください。
つなぐデザインでは丁寧にお話を伺い、できることは精一杯お手伝いさせていただいております。
お気軽にご相談ください。
