トップページを作る

トップページに出るものをまとめています。上から順に進める必要はありません。変えたい項目だけをご覧ください。

ヒーロー（トップの一番上）

トップページのいちばん上に出る、写真とキャッチコピーの段です。

Glass を適用した時点で、すでに表示されています。 ブロックの作成も、レイアウト管理での配置も要りません。かわりに、仮の文言が入ったままなので書き換えが必要です。

適用した直後は「ここに、いちばん伝えたい一言を。」という仮の文言が入っています。お店の言葉に書き換えてください。

[コンテンツ管理] → [ページ管理] → TOPページ を開き、冒頭の glass_hero にある copy と sub を直します（開くといまの中身が入っています）。

写真を入れる場合。 写真は [コンテンツ管理] → [ファイル管理] に上げて、 image に asset('assets/img/hero.jpg', 'user_data') の形で指定します。 第 2 引数の 'user_data' を忘れると画像切れになります（テンプレート側のフォルダを探すためです）。推奨サイズは 2000×1100 前後（横長）、1MB 以下。 image を空にすると、写真なしの CSS 描画のビジュアルに戻ります。 slides を増やすとスライダーになります。

【抜粋】 開くとページ全体の中身が入っています。冒頭のこの部分を直します。

{% set glass_hero = {
    layout:   'split',
    autoplay: 6000,
    slides: [
        {
            image:    '',
            image_sp: '',
            focus:    '50% 50%',
            veil:     0.12,
            copy:     'ここに、いちばん伝えたい一言を。',
            sub:      '補足は 1 行で。短いほうが読まれます。',
            label:    'VIEW MORE',
            url:      ''
        }
    ]
} %}

新入荷商品特集（アイキャッチ）

写真と短い文章を横に並べて見せる段です。

Glass を適用した時点で、すでに表示されています。 ブロックの作成も、レイアウト管理での配置も要りません。かわりに、仮の文言が入ったままなので書き換えが必要です。

適用した直後は「この場所で伝えたいことを書いてください。」という仮の文言が入っています。

[コンテンツ管理] → [ブロック管理] → 新入荷商品特集 を開き、title と lead を直します。管理画面では「新入荷商品特集」という名前で並んでいます（Glass ではアイキャッチと呼んでいる部分です）。

写真を入れる場合。 同じブロックの glass_eyecatch の image に、 asset('assets/img/eyecatch.jpg', 'user_data') の形で指定します。推奨サイズは 1200×900（4:3）。指定しなければ、CSS 描画のビジュアルのままです。

【抜粋】 開くとブロック全体の中身が入っています。冒頭のこの部分を直します。

{% set glass_eyecatch = {
    title_en: 'PICK UP',
    title:    '今月のおすすめ',
    lead:     "この場所で伝えたいことを書いてください。\n商品のこだわりや季節のおすすめなど、お店から一言お伝えする場所としてお使いいただけます。",
    image: '',
    focus: '50% 50%',
    alt:   ''
} %}

トピック（バナー）

特集やキャンペーンへのバナーを並べる段です。

Glass を適用した時点で、すでに表示されています。 ブロックの作成も、レイアウト管理での配置も要りません。かわりに、仮の文言が入ったままなので書き換えが必要です。

適用した直後は「特集の見出しを入力してください」という仮の文言が入っています。

[コンテンツ管理] → [ブロック管理] → トピック を開き、title と url を直します。並べる枚数も、この中で増減できます。

写真を入れる場合。 同じブロックの glass_topic の各要素の image に、 asset('assets/img/topic-01.jpg', 'user_data') の形で指定します。推奨サイズは 1200×675（16:9）。指定しなければ、CSS 描画のビジュアルのままです。

【抜粋】 開くとブロック全体の中身が入っています。冒頭のこの部分を直します。枚数を増やしたいときは、この配列に要素を足します。

{% set glass_topic = [
    {
        title: '特集の見出しを入力してください',
        url:   url('product_list'),
        image: '',
        focus: '50% 50%'
    },
    {
        title: '特集の見出しを入力してください',
        url:   url('product_list'),
        image: '',
        focus: '50% 50%'
    }
] %}

カテゴリ

登録されているカテゴリを、写真付きのカードで自動的に並べる段です。

Glass を適用した時点で、すでに表示されています。 ブロックの作成も、レイアウト管理での配置も要りません。

写真を入れたいときだけ [コンテンツ管理] → [ブロック管理] → カテゴリ を開きます。カテゴリ名をキーにして、カードに出す写真を対応づけます。

【抜粋】 開くとブロック全体の中身が入っています。冒頭のこの部分を直します。

{% set glass_category_image = {
    'ここにカテゴリ名':   asset('assets/img/01.jpg', 'user_data'),
    'ここにカテゴリ名 2': asset('assets/img/02.jpg', 'user_data')
} %}

キーは、[商品管理] → [カテゴリ管理] に出ている名前をそのまま写してください。 1 文字でも違うと一致せず、エラーも出ないまま色だけのカードになります。

推奨サイズ 1200×900 前後。書かなかったカテゴリは色だけのカードになります。 混ざっていても差し支えありません。

写真を入れてもカードが変わらないときは、次の 3 つを確かめてください。

見るところ	内容
名前	キーがカテゴリ名と完全に同じか（空白・全角半角も）
階層	親カテゴリだけが並びます。子カテゴリは表示されません
キャッシュ	追加・改名の直後は一覧が最大 1 時間ふるいままです。[コンテンツ管理] → [キャッシュ管理] で削除します

訴求バー

送料・返品・ギフトなどの 3 項目です。出る場所はトップページのヒーロー直後で、 position を 'footer' にするとフッターの手前に変わります。

ブロックを作成すると表示されます。レイアウト管理での配置は必要ありません。

• [ブロック管理] → [新規作成]
• ブロック名 訴求バー、ファイル名 features（あとから変更できません）
• 下の内容をすべて貼り、items の文言を変えて [登録]

項目は増減できます。icon に使える名前は、下のコードのコメントに並べています。

【全文】 下の内容をそのまま貼り付けてください。

{#
Glass - Design Template for EC-CUBE 4.2 / 4.3
訴求バー（送料・返品・ギフトなどの 3 項目）

**このブロックを作成すると表示されます。レイアウト管理での配置は不要です。**
置き場所は下の position で決まります。

▼ 設定 ▼
  enabled  … false にすると出しません
  top_only … true ならトップページだけに出します
             （position が 'after_hero' のときは元々トップだけです）
  position … 置き場所
     'after_hero' … トップのヒーロー直後（既定）。細い行が挟まって
                     下に続くカードの並びとリズムが変わります
     'footer'     … フッターの手前
  items    … 項目。増減できます（4 つ以上にするときは CSS の
             .g-features__inner の grid-template-columns も調整してください）
             icon に指定できるのは truck / return / gift / link / check と、
             内蔵アイコンの bars times user heart lock home shopping-cart
             angle-down arrow-right です
#}
{# **下の文言は例です。自店の条件に必ず書き換えてください。** 発送日数・返品の
   期限・ラッピングの有無は、EC-CUBE に対応する設定が無いため、こちらでは
   正しい値を入れられません。 #}
{# 送料無料の金額だけは EC-CUBE の設定から読みます。
   ［設定 > 店舗設定 > 基本情報設定］の「送料無料条件（金額）」です。
   **未設定のときは、送料無料の文言を出しません。** #}
{% set glass_free = BaseInfo.delivery_free_amount %}
{% set glass_features = {
    enabled:  true,
    top_only: true,
    position: 'after_hero',
    items: [
        { icon: 'truck',
          title: glass_free > 0 ? '送料無料' : '配送について',
          text:  glass_free > 0
                 ? (glass_free|number_format ~ '円以上のお買い上げで全国送料無料です。')
                 : '配送料は配送方法により異なります。' },
        { icon: 'return', title: '返品・交換',     text: '商品到着後 7 日以内はご返品を承ります。' },
        { icon: 'gift',   title: 'ギフト対応',     text: 'ラッピング・メッセージカードをご用意しています。' }
    ]
} %}
{# 見た目はここから先、_glass/blocks/features.twig にあります。
   **このファイルに残しているのは設定だけ**です。EC-CUBE のブロック管理は
   登録したときに入力欄の中身をこのファイルへ書き出すので、長い実装を
   置いておくと、ブロックを作り直したときに消えてしまいます。 #}
{% include '_glass/blocks/features.twig' %}

コンセプト

画面の端から端までの写真の帯。店の考え方を書く場所です。

ブロックの作成と、レイアウト管理での配置が必要です。

• [ブロック管理] → [新規作成]
• ブロック名 コンセプト、ファイル名 concept（あとから変更できません）
• 下の内容をすべて貼り付けて [登録]
• [コンテンツ管理] → [レイアウト管理] → トップページ用レイアウトを開き、作ったブロックを「メインコンテンツ下部」へドラッグ

【全文】 下の内容をそのまま貼り付けてください。

{#
Glass - Design Template for EC-CUBE 4.2 / 4.3
コンセプトブロック（画面の端から端までの画像帯＋直接重ねた文字）

商品カードの並びが続くと単調に見えるため、途中に全幅の写真を挟みます。

**文字は板に載せず、写真の上に直接置きます。** ガラスはボタンだけで、
カテゴリの札と同じ作りです。

写真の選び方（明るさ・ピント・狭い画面）は、_glass/blocks/concept.twig の
冒頭と、公開ドキュメントの「コンセプト」に書いています。

▼ 設定 ▼
  image  … 背景に敷く写真。空にすると初期状態（CSS 描画）に戻ります
           画像は [コンテンツ管理 > ファイル管理] に上げてください
           帯は画面の幅いっぱいで高さは固定（PC で 520px）なので、
           **推奨サイズ 2400×720 前後**（3.3:1 ほどの横長）
  focus  … 写真のどこを見せるか（object-position と同じ書式）
  veil   … 写真に重ねる覆いの濃さ。0 で無し。文字が読めないときに上げる
  align  … 文字を置く位置。'left' / 'center' / 'right'
  en     … 小さく出る英字
  title  … 見出し
  lead   … 説明文。改行を入れたいところに \n を書いてください
           （\n を使うので、ここだけ二重引用符 " で囲んでいます）
  url    … ボタンのリンク先。空ならボタンを出しません
  label  … ボタンの文言

  （記入例）image: asset('assets/img/top/concept.jpg', 'user_data'),

  **asset() の 2 つめの 'user_data' を忘れないでください。** 忘れると
  テンプレートのフォルダ（/html/template/glass/assets/...）を探しにいき、
  画像切れになります。ファイル管理に上げた画像は 'user_data' が要ります。
#}
{% set glass_concept = {
    image: '',
    focus: '50% 50%',
    veil:  0.16,
    align: 'left',
    en:    'CONCEPT',
    title: '伝えたいことを、ここに。',
    lead:  "お店の考え方やものづくりの背景など、商品ページでは伝えきれないことを書く場所です。\n短く 2〜3 行にまとめると読まれやすくなります。",
    url:   '',
    label: '詳しく見る'
} %}
{# 見た目はここから先、_glass/blocks/concept.twig にあります。
   **このファイルに残しているのは設定だけ**です。EC-CUBE のブロック管理は
   登録したときに入力欄の中身をこのファイルへ書き出すので、長い実装を
   置いておくと、ブロックを作り直したときに消えてしまいます。 #}
{% include '_glass/blocks/concept.twig' %}

お客様の声

引用カード。写真を使わず文字で見せる段です。

ブロックの作成と、レイアウト管理での配置が必要です。

• [ブロック管理] → [新規作成]
• ブロック名 お客様の声、ファイル名 voice（あとから変更できません）
• 下の内容をすべて貼り付けて [登録]
• [コンテンツ管理] → [レイアウト管理] → トップページ用レイアウトを開き、作ったブロックを「メインコンテンツ下部」へドラッグ

【全文】 下の内容をそのまま貼り付けてください。

{#
Glass - Design Template for EC-CUBE 4.2 / 4.3
お客様の声ブロック

商品の写真が続くページに、文字が主役の段をひとつ挟みます。
写真を用意しなくても成立するので、開店直後でも置けます。

▼ 設定 ▼
  en    … 小さく出る英字の見出し。空にすると出しません
  title … 見出し
  lead  … 説明文。空にすると出しません
  items … 載せる声。空にするとこのブロックは何も出力しません

  ▼ items の各項目 ▼
  body  … 本文
  name  … お名前（「M・K さま」など）
  meta  … 名前の下に出る小さな文字。買った商品名や年代などに
  stars … 星の数（1〜5）。0 にすると星を出しません

▼ 注意 ▼
  実際にいただいた声だけを載せてください。
  事実と違う評価を載せることは景品表示法で禁じられています（ステルス
  マーケティング規制）。掲載にあたってはご本人の同意もお取りください。
#}
{% set glass_voice = {
    en:    'VOICE',
    title: 'お客様の声',
    lead:  '',
    items: [
        {
            body:  'ここにお客様からいただいた声を入れてください。',
            name:  'A・B さま',
            meta:  '',
            stars: 5
        },
        {
            body:  'ここにお客様からいただいた声を入れてください。',
            name:  'C・D さま',
            meta:  '',
            stars: 5
        },
        {
            body:  'ここにお客様からいただいた声を入れてください。',
            name:  'E・F さま',
            meta:  '',
            stars: 4
        }
    ]
} %}
{# 見た目はここから先、_glass/blocks/voice.twig にあります。
   **このファイルに残しているのは設定だけ**です。EC-CUBE のブロック管理は
   登録したときに入力欄の中身をこのファイルへ書き出すので、長い実装を
   置いておくと、ブロックを作り直したときに消えてしまいます。 #}
{% include '_glass/blocks/voice.twig' %}

よくあるご質問

開閉するリスト。送料や返品の問い合わせを減らします。

ブロックの作成と、レイアウト管理での配置が必要です。

• [ブロック管理] → [新規作成]
• ブロック名 よくあるご質問、ファイル名 faq（あとから変更できません）
• 下の内容をすべて貼り付けて [登録]
• [コンテンツ管理] → [レイアウト管理] → トップページ用レイアウトを開き、作ったブロックを「メインコンテンツ下部」へドラッグ

【全文】 下の内容をそのまま貼り付けてください。

{#
Glass - Design Template for EC-CUBE 4.2 / 4.3
よくある質問ブロック

開閉には <details> を使っています。スクリプトが動かない環境でも開閉でき、
ページ内検索でも中身が見つかります。
開くときの動き（300ms）だけ glass.js が足しています。動かない環境では
一瞬で開きます（壊れません）。

▼ 設定 ▼
  en    … 小さく出る英字の見出し。空にすると出しません
  title … 見出し
  lead  … 説明文。空にすると出しません
  url / label … 見出しの下に出すリンク。空にすると出しません
  items … 質問と答え。空にするとこのブロックは何も出力しません
          answer には <br> や <a> などの HTML を書けます
          （このファイルを編集できる人しか書き込めないため raw で出します）
#}
{# **下の文言は例です。自店の条件に必ず書き換えてください。** 発送日数・返品の
   期限・ラッピングの有無は、EC-CUBE に対応する設定が無いため、こちらでは
   正しい値を入れられません。 #}
{# 送料無料の金額だけは EC-CUBE の設定から読みます。
   ［設定 > 店舗設定 > 基本情報設定］の「送料無料条件（金額）」です。
   **未設定のときは、送料無料の文言を出しません。** #}
{% set glass_free = BaseInfo.delivery_free_amount %}
{% set glass_faq = {
    en:    'FAQ',
    title: 'よくあるご質問',
    lead:  '',
    url:   '',
    label: 'お問い合わせ',
    items: [
        {
            q: '注文してからどのくらいで届きますか？',
            a: 'ご注文から 2〜4 営業日以内に発送いたします。<br>配送状況により前後する場合がございます。'
        },
        {
            q: '送料はいくらかかりますか？',
            a: glass_free > 0
               ? (glass_free|number_format ~ '円以上のお買い上げで送料無料です。それ未満は配送方法により異なります。')
               : '配送料は配送方法により異なります。'
        },
        {
            q: '返品・交換はできますか？',
            a: '商品到着後 7 日以内にご連絡いただいた場合に限り、承ります。'
        },
        {
            q: 'ギフトラッピングはできますか？',
            a: 'ご注文時の備考欄にご記入ください。メッセージカードもお付けできます。'
        }
    ]
} %}
{# 見た目はここから先、_glass/blocks/faq.twig にあります。
   **このファイルに残しているのは設定だけ**です。EC-CUBE のブロック管理は
   登録したときに入力欄の中身をこのファイルへ書き出すので、長い実装を
   置いておくと、ブロックを作り直したときに消えてしまいます。 #}
{% include '_glass/blocks/faq.twig' %}

掲載メディア

取扱ブランドやメディア掲載の細い帯。流れて見えます。

ブロックの作成と、レイアウト管理での配置が必要です。

• [ブロック管理] → [新規作成]
• ブロック名 掲載メディア、ファイル名 logos（あとから変更できません）
• 下の内容をすべて貼り付けて [登録]
• [コンテンツ管理] → [レイアウト管理] → トップページ用レイアウトを開き、作ったブロックを「メインコンテンツ下部」へドラッグ

【全文】 下の内容をそのまま貼り付けてください。

{#
Glass - Design Template for EC-CUBE 4.2 / 4.3
取扱いブランド / メディア掲載の帯

細い一行の帯です。ほかのブロックが「カード」や「写真」なのに対して、
これだけ背の低い横一列なので、並べたときにリズムの区切りになります。

▼ 設定 ▼
  label  … 帯の左に出る小さな見出し。空にすると出しません
  scroll … true にすると、ゆっくり右から左へ流れます
           カーソルを乗せている間とキーボード操作中は止まります
           「視差効果を減らす」設定の環境では流しません
           **流すなら items を 4 件以上にしてください。** 同じ並びを 2 つ
           置いて送る仕組みなので、2 つ分が帯の幅に届かないと右側が
           空いたまま流れます（帯の幅 929px で 2 件のとき 150px 空きを実測）
  items  … 並べるもの。空にするとこのブロックは何も出力しません
  note   … 帯の下に小さく出す注記。空なら出しません
           「※ 掲載順は五十音順です」など、断りを入れたいときに使ってください

  ▼ items の各項目 ▼
  name  … 名前。image が無いときはこの文字を並べます
  image … ロゴ画像。空なら文字だけになります
          [コンテンツ管理 > ファイル管理] に上げてください
          **横長・背景透過の PNG か SVG**を推奨します。高さ 40px 前後で出ます
  url   … リンク先。空にするとリンクにしません

  （記入例）
    { name: 'BEAUTY MAGAZINE', image: asset('assets/img/logo/01.svg', 'user_data'), url: '' },

▼ 注意 ▼
  他社のブランド名やロゴを載せるときは、取扱いの事実があることと、
  先方の利用条件（ロゴの使い方の決まり）を確認してください。
  「メディア掲載」として使う場合も、実際に掲載された媒体だけにしてください。

  **asset() の 2 つめの 'user_data' を忘れないでください。** 忘れると
  テンプレートのフォルダ（/html/template/glass/assets/...）を探しにいき、
  画像切れになります。ファイル管理に上げた画像は 'user_data' が要ります。
#}
{% set glass_logos = {
    label:  '取扱いブランド',
    scroll: false,
    note:   '',
    items: []
} %}
{# 見た目はここから先、_glass/blocks/logos.twig にあります。
   **このファイルに残しているのは設定だけ**です。EC-CUBE のブロック管理は
   登録したときに入力欄の中身をこのファイルへ書き出すので、長い実装を
   置いておくと、ブロックを作り直したときに消えてしまいます。 #}
{% include '_glass/blocks/logos.twig' %}

items が空のままだと、帯そのものが出ません。 媒体名やブランド名を入れてください。image を空にすると、名前が文字で並びます。

流す（scroll: true）なら 4 件以上ご入力ください。 同じ並びを 2 つ置いて送る仕組みなので、2 つ分が帯の幅に届かないと右側が空いたまま流れます。 2〜3 件しかないときは scroll: false にしてください。

商品一覧

指定したカテゴリの公開商品を自動で並べます。

ブロックの作成と、レイアウト管理での配置が必要です。

• [ブロック管理] → [新規作成]
• ブロック名 商品一覧、ファイル名 product_pickup（あとから変更できません）
• 下の内容をすべて貼り付けて [登録]
• [コンテンツ管理] → [レイアウト管理] → トップページ用レイアウトを開き、作ったブロックを「メインコンテンツ下部」へドラッグ

【全文】 下の内容をそのまま貼り付けてください。

{#
Glass - Design Template for EC-CUBE 4.2 / 4.3
商品一覧ブロック（カテゴリから自動取得）

指定したカテゴリの公開商品を、商品一覧ページと同じカードで並べます。
**商品を足したり公開を切り替えたりすれば、このブロックも自動で変わります。**
新着商品ブロックのように、載せる商品を手で書く必要はありません。

見せ方は新着商品ブロックと同じ（横スクロール＋クイックビュー）で、
**中身の決め方だけが違います**。あちらは載せる商品を手で書く場所、
こちらはカテゴリを 1 つ指定すれば中身が自動で入れ替わる場所です。

▼ 設定 ▼
  category_id … 並べるカテゴリの ID。管理画面 [商品管理 > カテゴリ管理] の
                一覧で確認できます。0 にするとブロックごと出しません。

                **存在しない ID を書いたときも、同じようにブロックごと
                出ません。**エラーは出ないので、「貼ったのに何も出ない」
                ときは、まずこの ID が合っているか確かめてください。
                そのカテゴリに公開中の商品が 1 つも無いときも出ません。

                **子カテゴリの商品も入ります。** 「スキンケア > 化粧水 >
                しっとりタイプ」のように階層になっていても、親（スキンケア）を
                指定すれば下にぶら下がる商品まで並びます。商品一覧ページで
                カテゴリを選んだときと同じ範囲です。

  limit       … 並べる数。横スクロールなので多めでも構いません
  order       … 'new' 新しい順 ／ 'old' 古い順
  en / ja     … 見出し
  more        … 見出しの右に「more」のリンクを出すか。押すとそのカテゴリの
                商品一覧へ飛びます
  quickview   … 写真にカーソルを乗せたとき「クイックビュー」を出すか
                押すとページを移らずに中身を見てカートへ入れられます
                （指で触る画面では、どちらにしても出しません）

▼ 置き場所 ▼
  EC-CUBE のブロックは管理画面のデータなので、テンプレートの zip では
  配置まで持ち込めません。[デザイン管理 > ブロック管理] で新規作成し
  （ファイル名 product_pickup）、[レイアウト管理] でトップページへ
  配置してください。カテゴリブロックの下あたりが収まります。
#}
{% set glass_pickup = {
    category_id: 0,
    limit:       8,
    order:       'new',
    en:          'ITEMS',
    ja:          '商品一覧',
    more:        true,
    quickview:   true
} %}
{# 見た目はここから先、_glass/blocks/product_pickup.twig にあります。
   **このファイルに残しているのは設定だけ**です。EC-CUBE のブロック管理は
   登録したときに入力欄の中身をこのファイルへ書き出すので、長い実装を
   置いておくと、ブロックを作り直したときに消えてしまいます。 #}
{% include '_glass/blocks/product_pickup.twig' %}

category_id は 0 のままだと何も出ません。 [商品管理] → [カテゴリ管理] で自店のカテゴリの ID を確かめ、置き換えてください。存在しない ID や、公開中の商品が無いカテゴリを指定したときも、エラーは出ないままブロックごと表示されません。 「貼ったのに何も出ない」ときは、まずここを確かめてください。ja の見出しもカテゴリに合わせます。

Instagram

写真を手で並べるか、外部ウィジェットを貼ります。

ブロックの作成と、レイアウト管理での配置が必要です。

• [ブロック管理] → [新規作成]
• ブロック名 Instagram、ファイル名 instagram（あとから変更できません）
• 下の内容をすべて貼り付けて [登録]
• [コンテンツ管理] → [レイアウト管理] → トップページ用レイアウトを開き、作ったブロックを「メインコンテンツ下部」へドラッグ

【全文】 下の内容をそのまま貼り付けてください。

{#
Glass - Design Template for EC-CUBE 4.2 / 4.3
Instagram ブロック

使い方は 2 通りあります。どちらも空のままなら、このブロックは何も出力しません。

  A. 外部ウィジェットを貼る
     下の「埋め込みコード」の中に、SnapWidget や LightWidget などで発行した
     コードをそのまま貼り付けてください。投稿は自動で更新されます。
     （Instagram との通信はそのサービスが行います）

  B. 手動で写真を並べる（外部サービスを使わない）
     glass_instagram.items に画像とリンク先を並べます。自動更新はされませんが、
     外部サービスに依存しないため、Instagram の仕様変更で壊れることがありません。

     （記入例）画像は [コンテンツ管理 > ファイル管理] に上げます

       items: [
           { image: asset('assets/img/insta/01.jpg', 'user_data'),
             url:   'https://www.instagram.com/p/xxxxxxxxxxx/' },
           { image: asset('assets/img/insta/02.jpg', 'user_data'),
             url:   'https://www.instagram.com/p/yyyyyyyyyyy/',
             alt:   '新作のギフトボックス' }
       ]

注意：このテンプレートは Instagram の API を直接利用しません。
      デザインテンプレートには PHP の実行点・管理画面の設定欄・アクセストークンの
      保管先が無く、トークンの定期更新も行えないためです。
      API 連携が必要な場合は、ストアで配布されている専用プラグインをご利用ください。

   見た目は _glass/blocks/instagram.twig にあります。
   **このファイルに残しているのは設定だけ**です。EC-CUBE のブロック管理は
   登録したときに入力欄の中身をこのファイルへ書き出すので、長い実装を
   置いておくと、ブロックを作り直したときに消えてしまいます。

  **asset() の 2 つめの 'user_data' を忘れないでください。** 忘れると
  テンプレートのフォルダ（/html/template/glass/assets/...）を探しにいき、
  画像切れになります。ファイル管理に上げた画像は 'user_data' が要ります。
#}
{% set glass_instagram = {
    heading: 'Instagram',
    lead:    '',
    account: '',
    items: []
} %}

{# ▼ 埋め込みコード（A の場合はこの 2 行の間に貼り付け）▼ #}
{% set glass_instagram_embed %}
{% endset %}
{# ▲ ここまで ▲ #}

{% include '_glass/blocks/instagram.twig' %}

items が空のままだと、ブロックそのものが出ません。 写真を並べるか、 glass_instagram_embed に外部ウィジェットの埋め込みコードを貼ってください。

並べ替えと取り外し

[コンテンツ管理] → [レイアウト管理] → トップページ用レイアウトで、置いたブロックの順番を変えられます。外したいブロックは「未使用」へ戻してください。削除しなくても、出なくなります。

続けて読む

• 写真を入れる
• お知らせバーとフッターを整える