FROM CACHE - jp_header

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

解決済

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

FunDoSKW
訪問者
2 0 0

はじめまして。

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

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

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

 

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

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

1 件の受理された解決策

株式会社ナレッジサービス
Shopify Partner
50 21 23

成功

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

 

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

 

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

元の投稿で解決策を見る

2件の返信2

株式会社ナレッジサービス
Shopify Partner
50 21 23

成功

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

 

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
訪問者
2 0 0

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

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