カラーパレットの実装方法

[mira0]

カラーパレット、カラースウォッチをメタフィールドとliquidコードの編集などで実装したいです。

実装方法を教えていただきたいです。

テーマはDawnになります。

[株式会社フルバランス]

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

メタフィールドで設定したカラーを表示するという認識でよろしいでしょうか？

1. メタフィールドの定義の作成

・Shopifyの管理画面に移動します。
・左側のメニューから「設定」を選択します。
・「カスタムデータ」を選択します。
・「商品」をクリックします。

・「定義を追加する」をクリックします。
・名前」と「説明」を入力します。（なんでもOKです）
・「ネームスペースとキー」に「global.key」と入力します。
・「フィールドタイプ」は「text」を選択します。
・「保存」をクリックします。

2. メタフィールドの値の設定

・商品ページに移動します。
・編集したい商品を選択します。
・商品詳細ページの最下部に先程作成したメタフィールドの入力欄があるので、ここに値を入力します。
・「保存」をクリックします。
3. Liquidテンプレートの編集

最後に、商品ページのLiquidテンプレートを編集して、カラーメタフィールドの値を表示します。

{% if product.metafields.global.color %}
<div style="background-color: {{ product.metafields.global.color }};">
</div>
{% endif %}

なにかヒントになれば幸いです。

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。