バッジの背景色を変更したい

kni_inc · ‎04-13-2023

お世話になっております。

・今回やりたいこと：「販売バッジの配色」を変更したいと思っています。

（使用しているテーマは「Dawn」です。）

販売バッジの配色は、「オンラインストア＞テーマ＞カスタマイズ＞テーマ設定」から、「色」を設定して、「バッジ＞販売バッジの配色」を設定することで変更できるということは承知しております。

・今回、困っている内容としては、商品ページのテンプレートに使用している背景色のため、既にテーマ設定で指定できる色の枠をすべて使ってしまっていることです。

「アクセント１」「アクセント２」「背景１」「背景２」の色は商品ページのテンプレートで使用している色のため、販売バッジに指定する色の指定枠が足りてない状態です。

そのため、「テーマ設定」の方法以外で、販売バッジの配色を変更する方法があれば教えていただけますでしょうか？

もしくは、今後商品を増やすことまで考えると、「テーマ設定」で設定できる色の指定枠を、増やせるのが一番ベストだと思っています。

（「テーマ設定＞色」に、「背景３」「背景４」を追加する）

リキッドのコーディングで、テーマ設定に「色」の枠を増やす方法があれば、ご教授いただけると幸いです。

どうぞよろしくお願いします。

shou · ‎04-15-2023

はじめまして、フリーランスエンジニアのShouと申します。
『「テーマ設定」で設定できる色の指定枠を増やす』について助けになれれば幸いです。

方法としては2種類あるかと思います。

CSSを扱われる場合は、①のカスタムCSS指定が簡単です。

またテーマ設定に色を追加する場合は、②でカラーピッカーを新たに用意するのが良いかと思います。ただし②はLiquidコードを編集するため、テーマのバックアップをオススメします。

①「カスタムCSS」でCSSを指定する

「カスタマイズ＞テーマ設定＞カスタムCSS」より、販売バッジのクラス”badge”に対してCSSを指定して色をご変更頂けます。

　例：バッジを背景赤、文字色白に変更する場合の「カスタムCSS」設定内容

.badge {
  border-color:red;
  background-color:red;
  color:white;
}

②「バッジ」にカラーピッカー設定を追加する

以下手順で「カスタマイズ＞テーマ設定＞バッジ」にカラーピッカーを新設して色をご変更頂けます。

設定手順は以下をご参照ください。(Dawnバージョン9.0.0)

Dawnのカスタマイズ画面の左上”…(3点リーダー)”より「コードを編集」をクリックします
ファイル検索で”settings_schema.json”と検索し「settings_schema.json(設定フォルダ内)」を開きます
ファイル内の”settings_schema.badges.name”と記載された箇所を探します。「ctrl + f」キーを押すと検索欄が開きますので、「”settings_schema.badges.name”を入力→Nextボタンをクリック」すると見つけやすいです。
「"settings": [」の下に以下コードを追加し、保存して下さい。エラーがなければ正しく反映されます。(“,”など書き忘れにご注意ください)

{
    "type": "color",
    "id": "badge_background",
    "label": "バッジの背景色",
    "default": "#333333”
},
{
    "type": "color",
    "id": "badge_color",
    "label": "バッジの文字色",
    "default": “#FFFFFF”
},

　　5. ファイル検索で”theme.liquid”と検索し「theme.liquid(レイアウトフォルダ内)を開きます

　　6. “<head>”タグの最後に、以下コードをコピペして保存して下さい

{%- comment -%}バッジの色設定{%- endcomment -%}
<style>
  .badge {
    border-color:{{ settings.badge_background }};
    background-color:{{ settings.badge_background }};
    color:{{ settings.badge_color }};
  }
</style>

以上ご設定頂けますとバッジ設定に「バッジの背景色」「バッジの文字色」項目が追加され、指定した色にご変更頂けます。

以上、ご参考になれれば幸いです。

元の投稿で解決策を見る

shou · ‎04-15-2023

はじめまして、フリーランスエンジニアのShouと申します。
『「テーマ設定」で設定できる色の指定枠を増やす』について助けになれれば幸いです。

方法としては2種類あるかと思います。

CSSを扱われる場合は、①のカスタムCSS指定が簡単です。

またテーマ設定に色を追加する場合は、②でカラーピッカーを新たに用意するのが良いかと思います。ただし②はLiquidコードを編集するため、テーマのバックアップをオススメします。

①「カスタムCSS」でCSSを指定する

「カスタマイズ＞テーマ設定＞カスタムCSS」より、販売バッジのクラス”badge”に対してCSSを指定して色をご変更頂けます。

　例：バッジを背景赤、文字色白に変更する場合の「カスタムCSS」設定内容

.badge {
  border-color:red;
  background-color:red;
  color:white;
}

②「バッジ」にカラーピッカー設定を追加する

以下手順で「カスタマイズ＞テーマ設定＞バッジ」にカラーピッカーを新設して色をご変更頂けます。

設定手順は以下をご参照ください。(Dawnバージョン9.0.0)

Dawnのカスタマイズ画面の左上”…(3点リーダー)”より「コードを編集」をクリックします
ファイル検索で”settings_schema.json”と検索し「settings_schema.json(設定フォルダ内)」を開きます
ファイル内の”settings_schema.badges.name”と記載された箇所を探します。「ctrl + f」キーを押すと検索欄が開きますので、「”settings_schema.badges.name”を入力→Nextボタンをクリック」すると見つけやすいです。
「"settings": [」の下に以下コードを追加し、保存して下さい。エラーがなければ正しく反映されます。(“,”など書き忘れにご注意ください)

{
    "type": "color",
    "id": "badge_background",
    "label": "バッジの背景色",
    "default": "#333333”
},
{
    "type": "color",
    "id": "badge_color",
    "label": "バッジの文字色",
    "default": “#FFFFFF”
},

　　5. ファイル検索で”theme.liquid”と検索し「theme.liquid(レイアウトフォルダ内)を開きます

　　6. “<head>”タグの最後に、以下コードをコピペして保存して下さい

{%- comment -%}バッジの色設定{%- endcomment -%}
<style>
  .badge {
    border-color:{{ settings.badge_background }};
    background-color:{{ settings.badge_background }};
    color:{{ settings.badge_color }};
  }
</style>

以上ご設定頂けますとバッジ設定に「バッジの背景色」「バッジの文字色」項目が追加され、指定した色にご変更頂けます。

以上、ご参考になれれば幸いです。

kni_inc · ‎04-17-2023

Shou 様

ご返信いただき、ありがとうございます。

①のカスタムcssに設定を行うことで、無事に販売バッジの色を変更することができました！

簡単に実装できる方法を教えてくださり、本当に感謝いたします。

②の方法も、今後必要があれば、参考にさせていただき行ってみたいと思います。

ありがとうございました！

バッジの背景色を変更したい

バッジの背景色を変更したい

コミュニティ・ブログ記事