shopify开发常用代码集合

最新推荐文章于 2024-08-13 08:26:01 发布

来陪人家玩游戏嘛

最新推荐文章于 2024-08-13 08:26:01 发布

阅读量2k

点赞数 1

分类专栏： shopify 文章标签： html css

本文链接：https://blog.csdn.net/gongliming_qd/article/details/119924427

版权

shopify 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在网站中启用特定主题选项（themewatch--allow-live）和下拉菜单（themeget），展示了for循环、条件判断、图片引用及schema设置的实例。同时涵盖了CSS媒体查询和自定义样式，以及项目结构的Schema配置。

摘要由CSDN通过智能技术生成

启用和下拉代码

启用 ： theme watch --allow-live
下拉 ： theme get

常用代码

// for循环
{% for block in section.blocks %}
   {{block.settings.product_name}}
{% endfor %}

// 判断
{% if form.context == 'footer' %}
{% endif %}
   
// img         
<img src="{{ block.settings.product_img | img_url: 'master' }}" alt="" class="lazyload mobile-hide">

// 获取setting
{{ section.settings.header }}

@media screen and (min-width: 769px) {
.more_deals_wrap {
        padding-bottom: 4.5vw;
        background: #F5F5F7;
  }
.more_deals_wrap  .more_deals_header {
        padding: 4.5vw 0;
        text-align: center;
  }
.more_deals_wrap .more_deals_item {
        max-width: 1400px;
        display: flex;
        justify-content: space-between;
  }
.more_deals_wrap  .content_one {
        width: calc(25% - 1vw);
        box-sizing: border-box;
        max-height: 310px;
        padding-bottom: 2vw;
        border: 1px solid #DEDEDE;
        background-color: #fff;
      }
}
@media screen and (max-width: 768px) {}

schema设置

{% schema %}
  {
    "name": "more deals",
    "settings": [
      {
        "type": "text",
        "id": "header",
        "label": "more deals header"
      }
    ],
    "blocks": [
        {
            "type": "more",
            "name": "they_saying items",
            "limit": 4,
            "settings": [
                {
                    "type": "image_picker",
                    "id": "product_img",
                    "label": "item image"
                },
                {
                    "type": "text",
                    "id": "product_name",
                    "label": "item name"
                },
                {
                  "type": "url",
                  "id": "product_url",
                  "label": "item link"
                }
            ]
        }
    ],
    "presets": [{
      "name": "more deals"
    }]
  }
  
  {% endschema %}