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

[FunDoSKW]

はじめまして。

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

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

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

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

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

[株式会社ナレッジサービス · Accepted solution]

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

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;
}

5. 上記のコードを、以下のように書き換えます。

※変更する点は、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;
}

6. 「保存」をクリックして完了です。

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

[FunDoSKW]

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

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