Shopifyで商品画像やブログ記事の画像に角丸を付けたい場合、テーマエディタの設定で簡単に調整することができます。本記事で紹介する方法は、DawnテーマおよびRiseテーマを利用した調整方法になります。
前提
本記事で紹介する方法は、Dawn 15.0.0およびRise 15.0.0を利用した調整方法になります。バージョンによっては、設定場所が異なる場合や調整できない場合がありますので、ご了承ください。
また、DawnテーマやRiseテーマ以外でもテーマエディタ上で角丸を調整できる可能性がありますので、一度ご利用中のテーマエディタをご確認ください。
商品カードの角丸を調整する方法
アウトプット
上記の添付画像のように特集コレクションやコレクションページに表示される商品一覧の画像の角丸を調整することができます。
調整方法
(1) オンラインストア > テーマの順にアクセス
(2) 調整したいShopifyテーマの「カスタマイズ」をクリック
(3) テーマエディタ画面の左にある「テーマ設定」アイコンをクリック
(4)商品カードセクションを展開
(5)「角の半径」のピクセル値を変更（※ 大きい値ほどより丸くなります）
(6)画面右上の「保存」をクリック
商品画像の角丸を調整する方法
アウトプット
上記の添付画像のように商品ページの画像の角丸を調整することができます。
調整方法
(1) オンラインストア > テーマの順にアクセス
(2) 調整したいShopifyテーマの「カスタマイズ」をクリック
(3) テーマエディタ画面の左にある「テーマ設定」アイコンをクリック
(4) メディアセクションを展開
(5)「角の半径」のピクセル値を変更（※ 大きい値ほどより丸くなります）
(6)画面右上の「保存」をクリック
注意点
本設定を行うことで、ブログ記事内の画像の角丸も調整されてしまいますので、ご注意ください。
ブログカードの角丸を調整する方法
アウトプット
上記の添付画像のようにブログ記事一覧に表示されるのアイキャッチ画像の角丸を調整することができます。
調整方法
(1) オンラインストア > テーマの順にアクセス
(2) 調整したいShopifyテーマの「カスタマイズ」をクリック
(3) テーマエディタ画面の左にある「テーマ設定」アイコンをクリック
(4) ブログカードセクションを展開
(5)「角の半径」のピクセル値を変更（※ 大きい値ほどより丸くなります）
(6)画面右上の「保存」をクリック
コンテンツ内の画像の角丸を調整する方法
アウトプット
上記の添付画像のようにブログ記事や商品ページのコンテンツ内に含まれる画像の角丸を調整することができます。
調整方法
(1) オンラインストア > テーマの順にアクセス
(2) 調整したいShopifyテーマの「カスタマイズ」をクリック
(3) テーマエディタ画面の左にある「テーマ設定」アイコンをクリック
(4) メディアカードセクションを展開
(5)「角の半径」のピクセル値を変更（※ 大きい値ほどより丸くなります）
(6)画面右上の「保存」をクリック
注意点
本設定を行うことで、商品ページの商品画像の角丸も調整されてしまいますので、ご注意ください。
最後に
本記事では、ShopifyのDawnテーマおよびRiseテーマにおける画像の角丸調整方法をご紹介しました。テーマエディタの「角の半径」設定を変更することで、以下の画像に角丸を適用することができます。
- 商品一覧（特集コレクション、コレクションページ）の商品画像
- 商品ページの商品画像
- ブログ記事一覧のアイキャッチ画像
- ブログ記事や商品ページのコンテンツ内の画像
最後に、下記のブログ記事では、角丸以外にも商品ページのカスタマイズ事例を紹介しています。ぜひご参考にしてください。
