[Shopify]カートにアンケートを設置して注文管理画面に表示する(Dawn)80/100
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
カートにアンケートを設置してみようと思います。さらにアンケートの回答を注文管理画面に表示して今後の販売戦略に役立てられるようにします。
今回はラジオボタンを使って、1つの質問で一回だけ選択できるアンケートを作成。任意のアンケート用です。必須にする場合のも今度作成しようと思います。
あと、複数選択できるセクションも次回作ろうかと思っています。
✔︎今回のゴール
カートにアンケートを設置。
◆CMSの特徴
共通カラー設定:小計をクリックするとカラー設定ができます。
管理画面で追加の詳細欄に表示されます。
✔︎設置手順
Step1 カートの既存セクションファイルにブロックを追加
管理画面>テーマ>コード編集>セクション>main-cart-footer.liquidを開く
まずはSchema内のBlockに下記をコピペ。
{
"type": "questioner",
"name": "アンケート",
"settings": [
{
"type": "text",
"id": "attribute",
"label": "注文管理画面に表示する名称",
"default": "興味があるもの"
},
{
"type": "header",
"content": "設問1"
},
{
"type": "text",
"id": "id1",
"label": "ID(他の設問と被らないように)",
"default": "1",
"info": "半角英数字"
},
{
"type": "text",
"id": "q1",
"label": "設問",
"default": "インスタ",
"info" : "空欄にすると設問が非表示になります"
},
{
"type": "header",
"content": "設問2"
},
{
"type": "text",
"id": "id2",
"label": "ID(他の設問と被らないように)",
"default": "2",
"info": "半角英数字"
},
{
"type": "text",
"id": "q2",
"label": "設問",
"default": "Twitter",
"info" : "空欄にすると設問が非表示になります"
},
{
"type": "header",
"content": "設問3"
},
{
"type": "text",
"id": "id3",
"label": "ID(他の設問と被らないように)",
"default": "3",
"info": "半角英数字"
},
{
"type": "text",
"id": "q3",
"label": "設問",
"default": "TikTok",
"info" : "空欄にすると設問が非表示になります"
},
{
"type": "header",
"content": "設問4"
},
{
"type": "text",
"id": "id4",
"label": "ID(他の設問と被らないように)",
"default": "4",
"info": "半角英数字"
},
{
"type": "text",
"id": "q4",
"label": "設問",
"default": "Note",
"info" : "空欄にすると設問が非表示になります"
}
]
}
また、今回はラジオボタンで一回だけ選択できるようなアンケートを作ってみたいと思っています。
ラジオボタンのレイアウトはボタンにしたいので、SchemaのSettings内に下記を追記。
{
"type": "richtext",
"id": "heading",
"label": "見出し",
"default": "<p>好きな色はなんですか?</p>"
},
{
"type": "color",
"id": "color_f_bd",
"label": "◆アンケートエリアの枠",
"default": "#fff"
},
{
"type": "color",
"id": "color_f_bg",
"label": "◆アンケートエリアの背景",
"default": "#dedede"
},
{
"type": "header",
"content": "カラー"
},
{
"type": "color",
"id": "color_bd",
"label": "◆ボタンの枠",
"default": "#dedede"
},
{
"type": "color",
"id": "color_bg",
"label": "◆ボタンの背景",
"default": "#fff"
},
{
"type": "color",
"id": "color_txt",
"label": "◆ボタンのテキスト",
"default": "#000"
},
{
"type": "paragraph",
"content": "選択した時"
},
{
"type": "color",
"id": "color_bd_ck",
"label": "◆ボタンの枠",
"default": "#fff"
},
{
"type": "color",
"id": "color_bg_ck",
"label": "◆ボタンの背景",
"default": "#000"
},
{
"type": "color",
"id": "color_txt_ck",
"label": "◆ボタンのテキスト",
"default": "#fff"
}
次にHTMLを編集します。
ここから先は
14,086字
/
2画像
この記事が気に入ったらサポートをしてみませんか?