作ったセクションの複製

作ったセクションの複製 Shopifyテーマ

Shopify のセクションとは

Shopify のセクションとは、オンラインストアのテーマをカスタマイズする際に使用するパーツのセットの呼称で、下図のような箇所をセクションと呼んでいます

Shopifyのカスタマイズページのセクション説明

セクションはすでに作成した(画像やテキストなど素材を組み込み済みの)ものを複製することができます

そうすることで、作業がより時短になるだけでなくデザインを作成していないスタッフなどでも簡単にサイトのイメージを崩すことなくページの修正や追加が可能となります

オンラインストアカスタマイズ時のインスペクターの活用

少し横道にそれますが、Shopify のオンラインストアカスタマイズ時に知っておくと便利なインスペクターの機能について説明します

カスタマイズ画面を見ると下図のように編集エリアとプレビューエリアに分かれてページの表現がされており追加や修正ができるようになっています

Shopifyのカスタマイズページの使い方

作業するPCの大きさによっては3分割される場合もあります
その場合は上記の内容はそのままに、右側には一番左の編集操作エリアで選択したセクション詳細が編集できるような作りになっています

Shopifyのカスタマイズページの使い方(3分割)

インスペクターを有効にする、というのはこの上記で説明した「プレビューエリア」からでも編集できるようにするということです

下図のようにカスタマイズ画面の上部に表示されています

Shopifyのカスタマイズ画面のインスペクターを有効にする場所

インスペクターを有効にすると、マウスオーバーするたびに編集のアクションが出てきます

このプレビューエリアで作業するのも好みだと思いますので、適宜インスペクターを無効にするなどして使用するのが良いと思います

以下にインスペクター無効のときとインスペクター有効のときを分けてまとめています

1つめ:インスペクター無効時のセクション複製

1つめのほうほうはインスペクター無効時に複製する方法です

複製したい内容のセクションを選択すると、セクション名の横に「…」横3つの点(縦三点リーダー)が表示されるのでクリックすると「複製」が選べます!クリックしてまるっとコピーしましょう!

Shopifyのカスタマイズページでセクションを複製する方法

2つめ:インスペクター有効時のセクション複製

2つめの方法はインスペクターを有効にして利用する方法です

インスペクターを有効化することで、複製したい箇所を直感的そうさできるようになります
インスペクターを有効にするとカーソルを動かすだけで編集したい箇所に青枠などの補助が出ます
プレビューエリアで複製したい内容のセクションを選択しクリックします
その後はインスペクター無効時と同じく、編集操作エリアのセクション名の横に「…」横3つの点(縦三点リーダー)が表示されるのでクリックすると「複製」が選べます!

Shopifyのカスタマイズページでインスペクターを有効しセクションを複製する方法

どちらも複製箇所は統一されていますが、そこに至るまでの手順が微妙に違います
慣れると簡単なので使いやすい方をどんどん使いましょう
セクションの設定も案外細やかに設定されているケースもあるので、複製機能はとても便利です

タイトルとURLをコピーしました