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

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

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. 「保存」をクリックして完了です。

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