商品情報にスキップ
1 1
公開日:2024.11.22

ShopifyのShopifyのテーマ「Rise/Dawn」のトップページで女性用/男性用の切り替えボタンを設置し、選択状態によってコンテンツを出し分ける設定例

ShopifyのShopifyのテーマ「Rise/Dawn」のトップページで女性用/男性用の切り替えボタンを設置し、選択状態によってコンテンツを出し分ける設定例

用途

  • ヒーローイメージ管理・編集

実装方法

  • Javascript
  • HTML/CSS
詳細を表示する

Rise/Dawn テーマで女性向け・男性向け切り替えボタンを設置してコンテンツの表示を切り替える設定例です。

切り替えた後、ストア内のページを回遊して戻ってきても選択状態が維持されます。

また、SEOに配慮して、CSS/jsを使って表示・非表示を切り替えるのではなく、liquidコード上で選択状態を判別してソースコードごと非表示にします。(デフォルトでは女性向けを表示)

◆実装のメリット
・ユーザーの属性に合わせた商品提案が可能
・不要なコンテンツを完全に非表示にすることでページ表示速度も改善
・検索エンジンへの重複コンテンツ配信を防止

◆具体的な手順
①出し分けを行いたいコンテンツ(セクション)に対して、出し分け設定が行えるように項目と出し分け処理を追加
②出し分けを行い、その状態を保持する切り替えボタンを設置
③テーマエディタ上で出し分けコンテンツを作成


Shopifyのテーマ「Rise/Dawn」のトップページで女性用/男性用の切り替えボタンを設置し、選択状態によってコンテンツを出し分ける設定例


【(テーマDawn/Riseの場合)設定手順①】例えばスライドショーを出し分ける場合「sections/slideshow.liquid」のスキーマを追加し、コードを編集


【(テーマDawn/Riseの場合)設定手順②】トップページテンプレートにカスタマイズされたLiquidセクションを追加しコードを挿入


【(テーマDawn/Riseの場合)設定手順③】女性用・男性用で出し分けたいスライドショーの設定をONにし、どちらで表示するか設定する


ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Dawn/Rise 15.2.0

「sections/slideshow.liquid」にスキーマを追加

「sections/slideshow.liquid」のコードを編集

関連ポスト

すべてのShopify TIPS