shopify使用記錄

schema主題模塊開發詳解
https://help.shopify.com/en/themes/development/theme-editor/settings-schema#creating-from-scratch

俺們常用的屬性集合

"type": "text"    //輸入框
"type": "checkbox"    //多選框
"type": "html"    //html代碼塊
"type": "image_picker"    //圖片
"type": "textarea"    //文本域
"type": "richtext"    //富文本

模塊開關

{% if section.settings.enable %}
	//把代碼放到開關裏然後在schema創建一個checkbox	.........
{% endif %}

塊的使用

{%- for block in section.blocks -%}
    <div class="point-item">
        <img src="{{ block.settings.icon | img_url: '300x300' }}"/>
        <div class="point-content">
            <span>{{ block.settings.title | strip }}</span><br>
            {{ block.settings.infos | strip }}
        </div>
    </div>
{%- endfor -%}
/*-----------schema--------------*/
  "blocks": [
      {
        "type": "default",
        "name": "利益點",
        "settings": [
            {
                "id": "icon",
                "type": "image_picker",
                "label": "圖標"
            },
              {
                "id": "title",
                "type": "text",
                "label": "標題"
            },            
            {
                "id": "infos",
                "type": "richtext",
                "label": "描述文字"
            }
        ]
      }
  ]

根據產品標籤判斷

{% assign productTags = product.tags | join:',' %}//聲明一個變量productTags獲取產品標籤
{% if productTags contains 'photo-mistakes' %}//判斷productTags是否包含我們後臺創建的photo-mistakes標籤
    …………
{% endif %}