目玉商品・価格リスト・注文CTAを含むメニュー紹介のシングルバブルFlex Message。
カテゴリ: プロモーション
メニュー
メニュー項目をヒーロー画像と注文CTAで一覧表示するバブル。
プレビュー
JSONテンプレート
{
"type": "bubble",
"hero": {
"type": "image",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_2_restaurant.png",
"size": "full",
"aspectRatio": "20:13",
"aspectMode": "cover",
"action": {
"type": "uri",
"uri": "https://linecorp.com"
}
},
"body": {
"type": "box",
"layout": "vertical",
"spacing": "md",
"action": {
"type": "uri",
"uri": "https://linecorp.com"
},
"contents": [
{
"type": "text",
"text": "Brown's Burger",
"size": "xl",
"weight": "bold"
},
{
"type": "box",
"layout": "vertical",
"spacing": "sm",
"contents": [
{
"type": "box",
"layout": "baseline",
"contents": [
{
"type": "icon",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/restaurant_regular_32.png"
},
{
"type": "text",
"text": "$10.5",
"weight": "bold",
"margin": "sm",
"flex": 0
},
{
"type": "text",
"text": "400kcl",
"size": "sm",
"align": "end",
"color": "#aaaaaa"
}
]
},
{
"type": "box",
"layout": "baseline",
"contents": [
{
"type": "icon",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/restaurant_large_32.png"
},
{
"type": "text",
"text": "$15.5",
"weight": "bold",
"margin": "sm",
"flex": 0
},
{
"type": "text",
"text": "550kcl",
"size": "sm",
"align": "end",
"color": "#aaaaaa"
}
]
}
]
},
{
"type": "text",
"text": "Sauce, Onions, Pickles, Lettuce & Cheese",
"wrap": true,
"color": "#aaaaaa",
"size": "xxs"
}
]
},
"footer": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "spacer",
"size": "xxl"
},
{
"type": "button",
"style": "primary",
"color": "#905c44",
"action": {
"type": "uri",
"label": "Add to Cart",
"uri": "https://linecorp.com"
}
}
]
}
}- 日替わり・週替わり特別メニューの通知
- レストラン・カフェのメニュー公開
- テイクアウト・デリバリーキャンペーン
| フィールド | カスタマイズ方法 |
|---|---|
contents.hero.url | 看板メニュー・ヒーローバナーのHTTPS画像URLに差し替えます。 |
contents.body | 商品名と価格を更新します。店舗や時間帯で変動する場合はLiquid変数の利用を検討します。 |
contents.footer (action URI) | 注文ページまたはLINEミニアプリへのリンクを指定します。 |
出典
このテンプレートはLINE Flex Message Simulator をベースに改変しています。配信前に、ペイロードをブランドとキャンペーン文脈に合わせて調整してください。