Shopify Dawn7.0 自定义开发 设置各种图片展示为圆角

设置collection图片展示为圆角

在Edit Code -> Snippets -> card-collection.liquid
大约42行左右的位置
原代码是：

<div class="card__inner {% if card_style == 'standard' %}color-{{ card_color_scheme }} gradient{% endif %}{% if card_collection.featured_image or card_style == 'standard' %} ratio{% endif %}" 
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">

在style后增加border-radius的设置，即可从div的层面限制图片的展示，让它有个圆角。

<div class="card__inner {% if card_style == 'standard' %}color-{{ card_color_scheme }} gradient{% endif %}{% if card_collection.featured_image or card_style == 'standard' %} ratio{% endif %}" 
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%; --border-radius: {{ 3 }}%;">

设置Featured Collection的图片为圆角

在Edit Code -> Snippets -> card-product.liquid
大约48行的位置，添加border-radius的参数。

<div
        class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == 'standard' %} ratio{% endif %}"
        style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%; --border-radius: {{ 5 }}%;"
      >