FROM CACHE - jp_header

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

mira0
Shopify Partner
110 0 1

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

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

テーマはDawnになります。

1件の返信1

株式会社フルバランス
Shopify Partner
1473 521 651

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

 

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

 

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ボタンを押して頂ければ嬉しいです。

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス