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

小林爱学习ElsieLin99

已于 2023-02-05 06:15:11 修改

阅读量236

点赞数

分类专栏： Shopify 文章标签： html css 前端

于 2023-02-04 08:51:28 首次发布

本文链接：https://blog.csdn.net/weixin_41793473/article/details/128878589

版权

Shopify 专栏收录该内容

1 篇文章 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 }}%;"
      >