株式会社メタフェイズ

Shopify

テーマに画像設定項目を設置する

メタフェイズではShopifyを利用したストア構築を行っています。
今回はテーマに画像設定項目を設置する方法を紹介いたします。

1. config/settings_schema.jsonへ下記を追記する。

[
  {
    "name": "xxx",
    "theme_name": "xxx",
    "theme_version": "xxx",
    "theme_author": "xxx",
    "theme_documentation_url": "https:\/\xxx",
    "theme_support_url": "https:\/\/yyy"
  }
//---------ここから---------
  ,{
    "name": "トップページ",
    "settings": [
      {
        "type": "image_picker",
        "id": "main_image",
        "label": "メイン画像",
        "info": "メイン画像です"
      }
    ]
  }
//--------ここまでを追記-----------
]

2. 画像を表示したい場所へ下記コードを追記する。

{% if settings.main_image != blank %}<img src="{{ settings.main_image.src | image_url: width: 1040, format: 'pjpg' }}">{% endif %}

3. 管理画面 > オンラインストア > テーマ > カスタマイズをクリックします。

themecustom02.png

4. 表示したい画像を設定します。

  1. 画面左テーマ設定をクリックします。
  2. トップページをクリックします。
  3. 画像を選択をクリックして画像を設定します。
  4. ヘッダー「保存する」をクリックします。

themecustom03.png



Shopifyを利用したストアの構築・運用のご相談はお問い合わせフォームより受け付けております。

Share on

その他の記事

  • Strategy

    ECサイトとは?簡単にできる構築方法を実例をもとにご紹介

  • Shopify

    セクションに可変長カスタム入力欄を設置する

  • Shopify

    コレクション内商品のタイトルだけ表示する

トップへ戻る

お問い合わせ

Webサイト制作やWebビジネスに関するお悩みがある方はお気軽にご相談ください。

お問い合わせはこちら

会社案内

社内で検討・回覧したい方向けに、弊社の会社概要や最新の制作実績を掲載した資料を、PDFでご覧いただけます。

ホワイトペーパー

最新のプロジェクトや過去の7,000サイト以上の実績と経験で獲得したWebサイト制作におけるノウハウの一部をホワイトペーパーとして公開しています。