ShopifyのDAWNテーマで、商品写真のズームアイコンの位置を変更する方法を解説します。
「アセット」フォルダ内のsection-main-product.cssファイルを編集します。
具体的には、以下のコードを探してきて、
.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;
}leftをrightに、topをbottomに変更します。
.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;
}