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

Shopifyのテーマ「Dawn」のスライドショーで表示されるページネーションのスタイル画像を変更する方法

Shopifyのテーマ「Dawn」のスライドショーで表示されるページネーションのスタイル画像を変更する方法

用途

  • ナビゲーション管理・編集

実装方法

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

マニアックなカスタマイズ事例を一つ。ブランドのトーンに合わせてShopifyのスライドショーなどのページャーアイコンをデフォルト以外の任意のアイコンに変える方法です。テーマによってやり方は異なりますが、SVGを使えば画像ファイルをアップロードせずにコード編集だけで対応できますね。


テーマ「Dawn」のスライドショーで表示されるページネーションのスタイル画像を変更する方法


設定手順①「slideshow.liquid」にschemeを、「ja.schema.json」にラベルを追加


設定手順②:SVG形式のアイコン画像を作成&アイコン用のスニペットファイルを追加し、「slideshow.liquid」の表示側コードを修正


設定手順③:テーマエディタでスライドショーセクションを追加し、使用する「ページネーションのスタイル」を選択


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

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

サンプルコード

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

「slideshow.liquid」にschemeを追加


「ja.schema.json」にラベルを追加


slideshow-slider-visual-heart.liqui...

関連ポスト