【Shopify】カスタマイズで画像をアップするセクションをliquidで作成する

投稿日:2021.12.01

Shopifyテーマのカスタマイズから、画像を簡単にアップできるセクションを作成する方法を紹介します。

Shopifyテンプレートの基本

Shopifyは無料テーマ、もしくは有料テーマを使用し、サイト全体のデザインを変更することが可能です。

トップページやサイト全体の編集をするには、HTMLをさわったことが無い人でも簡単に編集できる
【カスタマイズ】 か、自由に編集できる 【コード編集】 の2種類があります。
オンラインストア → テーマ  からカスタマイズ、もしくはコード編集が可能です。


ここでは 【Debut】 のテーマを基準としたコード編集で使えるポイントをまとめていきます。
クライアントによっては当然テーマが違っている場合がありますが、それでもこのページで説明することは応用できますので是非活用してください。

◎ポイント
Debutのテーマは元々インストールされている無料テーマですが、もし削除してしまった場合は オンラインストア → テーマ からページ下部のテーマライブラリー無料のテーマからインストールしなおしてください。


カスタマイズで簡単にトップページを作成できる

テーマのカスタマイズを見ると下記の様な項目があります。


ここの各セクションで画像やテキストなどの項目を簡単に入れることができます。
【Debut】があらかじめ用意しているセクションだけで立派でお洒落なページを作ることは出来ますが、用意されていないデザインのものを作る場合はコード編集からオリジナルのセクションを作成する必要があります。

画像を簡単にアップ、削除出来るセクションを作成する

コード編集のSectionsから【新しいsectionを追加する】でセクションを追加してください。



ここのschemaより上の部分にHTMLとliquid用のタグを記入し、schemaで役割を設定します。
役割とは、画像アップであったり、テキストを入れるボックスだったりします。

{% schema %}
  {
    "name": "Section name",
    "settings": []
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}


実際にコードを入れる

下記コードをschemaの間に入れます。
idは好きなアルファベット、nameは好きな文字を入れることが出来ます。
typeimage_pickerとすることで画像をアップ出来るセクションとして設定できます。

{
  "name": "画像ボックス",
  "settings": [
    {
      "type": "image_picker",
      "id": "image_box",
      "label": "画像を選ぶ"
    }
  ],

"presets": [
   {
     "name": "テスト画像",
     "category": "画像"
   }
 ]
}


下記コードをschemaより上に入れてください。
section.settings.の後の文字はschemaで定義したidを入力してください。

<img src="{{ section.settings.image_box | img_url: 'master' }}" alt="{{ section.settings.image_box.alt }}">


すべて入力すると下記のコードになります。

<img src="{{ section.settings.image_box | img_url: 'master' }}" alt="{{ section.settings.image_box.alt }}">

{% schema %}
{
 "name": "画像ボックス",
 "settings": [
  {
   "type": "image_picker",
   "id": "image_box",
   "label": "画像を選ぶ"
  }
 ],

"presets": [
  {
   "name": "テスト画像",
   "category": "画像"
  }
 ]
}
{% endschema %}


カスタマイズの画面を確認する

実際にカスタマイズの画面を見てみるとホームページセクションを追加の部分に【テスト画像】が追加されました。
ここの名前はpresetsnameになります。




テスト画像を選択すると【画像ボックス】が追加されました。
ここの名前はschema下のnameの部分になります。


◎ポイント
namepresetsのnameの名前が違うとこの様に分かり辛くなるので、基本的には同じ名前にするとよいです。
※今回はどの部分の文字がどこにつながっているかを分かりやすくするためにあえて違う名前にしました。



【画像を選ぶ】からアップしたい画像を選びます。
ここの名前はlabelの部分になります。




【代替テキストを編集する】から文字を入れていただくと
alt="{{ section.settings.image_box.alt }}"の部分に入力した文字が反映されます。




トップページに画像が表示されました。

SNSでシェア

このエントリーをはてなブックマークに追加
弊社ブログの最新記事を無料メルマガでお届け!

関連記事

【Shopify】カスタマイズで画像にURLを入れるセクションをliquidで作成する

【Shopify】カスタマイズで画像にURLを入れるセクションをliquidで作成する

2021.12.26

楽天スーパーセール必殺マニュアル
売上リサーチツール mark bench
【Shopify】カスタマイズで画像にURLを入れるセクションをliquidで作成する

2021.12.26

【Shopify】カスタマイズで画像にURLを入れるセクションをliquidで作成する

【Shopify】カスタマイズで画像をアップするセクションをliquidで作成する

2021.12.01

【Shopify】カスタマイズで画像をアップするセクションをliquidで作成する

「2021年EC業界図」にECコンサル会社の5社のうちの1社として掲載されました

2021.04.27

「2021年EC業界図」にECコンサル会社の5社のうちの1社として掲載されました

【楽天市場】広告費削減のためにまずやるべきRPP広告のチューニング

2020.07.12

【楽天市場】広告費削減のためにまずやるべきRPP広告のチューニング

Amazon出店時に気を付ける3つのポイント

2020.05.25

Amazon出店時に気を付ける3つのポイント

楽天他社売上想定ツールmarkbench新機能追加のお知らせ

2020.05.20

楽天他社売上想定ツールmarkbench新機能追加のお知らせ

Amazonで売る戦略!スポンサーブランド広告とは?

2020.05.18

Amazonで売る戦略!スポンサーブランド広告とは?

より魅力的な商品ページに!商品紹介コンテンツとは?

2020.05.08

より魅力的な商品ページに!商品紹介コンテンツとは?

今ならECコンサル無料お試し可
弊社ブログの最新記事を無料メルマガでお届け!
DX人材・Webマーケター育成サービスのD-marketing Academy(Dマーケティングアカデミー)

SERVICE

多くの選択肢の中から最適解を導き出し、高精度な施策のご提案を行います

CONTACT

サービスに関するご相談やご質問などこちらからお問い合わせください。