Shopify产品系列导航框

添加Section代码，collection-select.liquid

{% schema %}
{
  "name": "select collections",
  "settings": [
    {
      "type": "range",
      "id": "font_size",
      "label": "Font Size",
      "min": 10,
      "max": 30,
      "step": 1,
      "default": 14,
      "unit": "px"
    }
   
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "select a collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection_select",
          "label": "select a collection"
    
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collections Select",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<div class="page-width collection-wrapper">
  {% for block in section.blocks %}
    {% assign collection_select = block.settings.collection_select %}
    <div class="collection-item">
      <a href="{{ collection_select.url }}" style="font-size: {{ section.settings.font_size }}px;">{{ collection_select.title }}</a>
    </div>
  {% endfor %}
</div>

<style>
.collection-wrapper {
  display: flex;

}

.collection-item {
  margin: 10px;
  padding: 5px;
  border: 1px solid #000;
  
}
a{
  text-decoration: none;
  color: black; 
}
 a:hover {
  color: #FFCA20;
}
  
.collection-item:last-child {
  margin-right: 0;
}
</style>