SWELL + ポチップ お知らせバーをショップサイトで色分け

SWELL と Pochipp を組み合わせると、Amazonなどのショッピングサイトでセール中にヘッダー付近のお知らせバーに表示することができます。

通常はSWELLのカスタマイズで設定した背景色と文字色が適用されます。

• WPダッシュボード
• 外観
• カスタマイズ
• サイト全体設定
• お知らせバー

この記事のカスタマイズをすると、セール中のショップサイトによって背景色や文字色を変えることができるようになります。

• Amazon
• 楽天
• Yahoo! ショッピング

SAVA

ショッピングサイトの色のイメージってあるよね。

お知らせバーの色をサイトによって変える

背景色と文字色は好きなように変更可能できます。

style.css を編集

セール中のリンクに指定したサイトのURL(amazon.co.jpなど)があったときに色分けするように設定します。

SWELL 子テーマ /swell_child/ style.css に追記

/*ヘッダーお知らせ*/
.c-infoBar > a[href*="amazon"] { /*Amazon*/
  background: #febd68;
  color: #131921;
}

.c-infoBar > a[href*="rakuten"] { /*楽天*/
  background: #edc0c0;
  color: #c25959;
}

.c-infoBar > a[href*="yahoo"] { /*ヤフー*/
  background: #e3f2fa;
  color: #8dc2d9;
}

カラーコードは自分の好きに設定できますので、以下のツールを参考にしてみてください。

使いやすいWPテーマ「SWELL」

関連記事

あわせて読みたい

ポチップに Amazonレビュー へのリンクを追加する方法