FROM CACHE - jp_header

バッジを商品画像に重ねず、商品画像の下(商品画像とタイトルの間)に表示させたい

解決済

バッジを商品画像に重ねず、商品画像の下(商品画像とタイトルの間)に表示させたい

n_ogawa3
遊覧客
21 0 6

テーマは「Craft」を使っています。

 

現在、以下画像のようにバッジが商品画像に重なって表示されます。

Shopify_質問_バッジをタイトル上に出したい.png

 

このバッジを商品画像に重ねず、商品画像とタイトルの間に表示させたいです。

コードの修正が必要になると思うのですが、具体的にどのように修正したらいいか教えていただきたいです。

 

よろしくお願いいたします。

 

1 件の受理された解決策

Qcoltd
Shopify Partner
1059 435 427

成功

@n_ogawa3 様

 

Craftのバージョン12.0.0で確認しました。

 

テーマカスタマイズの、「テーマ設定」を編集します。

 

(1) 下図のように、カスタムCSSに入力します。

screenshot_20240104_01.png

入力内容は下記です。

.card__badge {
  display: none;
}

.card--card.card--media > .card__content .card__badge {
  display: block;
}

 

 

(2) さらに、「バッジ」の「カードでの位置」を「左上」に変更します。

screenshot_20240104_02.png

 

そうしますと、商品画像とタイトルの間に、バッジが表示されます。

(元々、商品名のエリアにもバッジがあり、デフォルトでは非表示になっているのを、強制的に表示させています。)

 

十分に検証していないため、何か表示に不具合があるかもしれません。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1059 435 427

成功

@n_ogawa3 様

 

Craftのバージョン12.0.0で確認しました。

 

テーマカスタマイズの、「テーマ設定」を編集します。

 

(1) 下図のように、カスタムCSSに入力します。

screenshot_20240104_01.png

入力内容は下記です。

.card__badge {
  display: none;
}

.card--card.card--media > .card__content .card__badge {
  display: block;
}

 

 

(2) さらに、「バッジ」の「カードでの位置」を「左上」に変更します。

screenshot_20240104_02.png

 

そうしますと、商品画像とタイトルの間に、バッジが表示されます。

(元々、商品名のエリアにもバッジがあり、デフォルトでは非表示になっているのを、強制的に表示させています。)

 

十分に検証していないため、何か表示に不具合があるかもしれません。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
n_ogawa3
遊覧客
21 0 6

迅速なご回答ありがとうございました。

ずっとお返事できず、すみません。

時間が取れず、まだ試せてないのですが、ぜひこちらを試してみたいと思います。

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