Bright PluginsはWordPress・WooCommerceプラグインの買収を行っています。 お問い合わせ

BOGOカードスタイルのカスタマイズ

1 min read Updated 2026年4月20日 By the Bright Plugins team

概要
Stylesタブを使って、テーマファイルに触れずにBOGOカードや通知を店舗のブランドに合わせてください。明確さとコンバージョンを生み出す3つの分野に焦点を当てましょう。

スタイルタブの場所#

  1. 行きます Bright Plugins Pro → BOGO Deal .
  2. 開けて スタイル タブ。
ボゴディール: Bogo deal styles section

BOGOのスタイリングにおける80/20アプローチ#

最良の視覚的結果を迅速に得るために、以下の3つの分野を優先してください:

  1. カードスタイル 構造と読みやすさのために。
  2. レーベルスタイル 明確さを提供するために。
  3. 価格+通知メッセージスタイル 意思決定の際に顧客の信頼を得るために。

それ以外はすべて洗練です。

ショット1 – カードスタイル(レイアウト先)#

このセクションはBOGOカード全体のコンテナを制御します。

何が一番大事か#

  • 背景と境界
  • 国境半径
  • パッドと間隔

きれいなカードがあれば、申し出をスキャンしやすく、信頼しやすくなります。

簡単なおすすめ#

  • テーマのニュートラルなトーンに合わせてください。
  • カードが詰まって感じにくいように、快適なパッドを使いましょう。
  • テーマボタンやカードの形を一貫させてください。

ショット2 – ラベルのスタイル(オファーを分かりやすくする)#

ラベルは顧客が最初に読む要素であることが多いです。

何が一番大事か#

  • 高コントラストの背景とテキスト
  • 読みやすいフォントサイズ
  • きれいなパッドと半径
ボゴディール: Bogo text labels

簡単なおすすめ#

  • 「無料」オファーには強いコントラストを使いましょう。
  • ラベルは短くして包まれないようにしましょう。

ショット3 – 価格と通知メッセージ(割引を確認)#

これら二つの要素は、最終段階でのためらいを減らします。

価格スタイル#

このセクションを使って区別してください:

  • 元の価格
  • 割引価格

ベストプラクティス: 割引価格を元の価格よりも視覚的に目立たせましょう。

メッセージスタイルの通知#

これによりカートが制御され、商品は取引が有効または未完了であることを察知します。

ベストプラクティス: 背景は控えめながら読みやすく、メッセージが役立つものに感じられ、邪魔にならないようにしましょう。

磨きたい時のオプションの洗練#

これらはカードをカタログのビジュアルスタイルに合わせるのに役立ちます:

  • 製品名とカテゴリスタイル
  • 製品イメージスタイル

プレビューとリセット#

ライブプレビューをご利用ください#

保存する前に可読性とコントラストを確認しましょう。

テーマデフォルトにリセット#

カスタムスタイリングを削除してデフォルトの見た目に戻すのに使えます。

一般的な問題#

  • キャッシュのために変更は現れません。
  • テーマや最適化プラグインはアップデートを遅らせます。
  • スタイルは編集されましたが保存はされていません。

Updated on 2026年4月20日 · Need help? Open a support ticket