商品写真のズームアイコンの位置変更

日本語 ディスカッション 技術的なQ＆A
,

Topic summary

Dawnテーマを使用している際、商品写真の左上に表示されるズームアイコンを右下に移動させる方法についての質問です。

解決方法：

  • 管理画面から「オンラインストア」>「テーマ」>「コードを編集」に移動
  • section-main-product.cssファイルを開く
  • .product__media-iconと.thumbnail__badgeのCSSコードを探す
  • 位置指定プロパティを以下のように変更：
    • left → right
    • top → bottom
    • 値は両方とも1.2remのまま

結果：
質問者は提案された方法で無事に設定変更ができたと報告し、問題は解決しました。

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

はじめまして。

テーマ：Dawnを使用しているのですが、

商品写真の左上に表示されるズームアイコンの位置を

右下に変更する場合はどこを変更すればいいでしょうか？

素人質問で恐縮ですが、どなたかご教示いただけますと幸いです。

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

2

以下の手順をお試しください。

  1. 管理画面にログインし、[オンラインストア] > [テーマ] に移動します。

  2. 「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。

  3. 「アセット」フォルダ内のsection-main-product.cssファイルを選択します。

  4. 以下のコードを探します。

.product__media-icon,
.thumbnail__badge {
  background-color: rgb(var(--color-background));
  border-radius: 50%;
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  color: rgb(var(--color-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  position: absolute;
  left: 1.2rem;
  top: 1.2rem;
  z-index: 1;
  transition: color var(--duration-short) ease, opacity var(--duration-short) ease;
}
  1. 上記のコードを、以下のように書き換えます。

※変更する点は、left→right、top→bottomの2箇所のみです。

.product__media-icon,
.thumbnail__badge {
  background-color: rgb(var(--color-background));
  border-radius: 50%;
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  color: rgb(var(--color-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 1;
  transition: color var(--duration-short) ease,
    opacity var(--duration-short) ease;
}
  1. 「保存」をクリックして完了です。

コードを編集しますので、事前にバックアップを取るなどのリスク対策をオススメいたします。

1 Like
3

早速のご回答ありがとうございました。

おかげさまで、無事に設定変更できました！