Coleções Arredondadas – Script Shopify

Crie um arquivo chamado colecoes-arredondadas.liquid na pasta Seções

Script

{% schema %}
{
  "name": "Coleçoes Arredondadas",
  "max_blocks": 30,
  "blocks": [
    {
      "type": "collection",
      "name": "Coleção",
      "settings": [
        {
          "id": "single_cat",
          "type": "collection",
          "label": "Coleção"
        },
        {
          "id": "collection_name",
          "type": "text",
          "label": "Nome da Coleção"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Coleções Arredondadas",
      "category": "Collections"
    }
  ]
}
{% endschema %}

{% comment %} Liquid Code for Display {% endcomment %}

<div class="scrollmenuitems">
  {% for block in section.blocks %}
    {% assign data_title = block.settings.single_cat.title %}
    {% assign data_url = block.settings.single_cat.url %}
    {% assign collection_name = block.settings.collection_name %}
    <div class="column">
      <div class="column">
        <div class="slider">
          <a href="{{data_url }}">
            <div class="slide">
              <div class="circle">
                <img
                  loading="eager"
                  width="auto"
                  height="auto"
                  src="{{ block.settings.single_cat | img_url: '450x450' }}"
                  alt=""
                >
                <svg
                  viewBox="0 0 100 100"
                  xmlns="http://www.w3.org/2000/svg"
                  style="enable-background: new -580 439 577.9 194"
                  xml:space="preserve"
                >
                  <circle cx="50" cy="50" r="45"></circle>
                </svg>
              </div>
            </div>
          </a>
          <div class="cat_name" style="display: flex; flex-direction: column">
            {% if collection_name == '' %}
              {% assign collection_show_name = data_title %}
            {% else %}
              {% assign collection_show_name = collection_name %}
            {% endif %}
            <span
              ><strong>{{- collection_show_name | link_to: collection.url }}</strong></span
            >
          </div>
        </div>
      </div>
    </div>
  {% endfor %}
</div>

{% comment %} Stylesheet {% endcomment %}

<style>
  * {
    box-sizing: border-box;
  }
  @media screen and (max-device-width: 1024px) {
    .scrollmenuitems {
      justify-content: flex-start !important;
    }
  }
  .circle {
    position: relative;
    width: 100px;
    height: 100px;
  }
  .circle svg {
    fill: none;
    stroke: #8a3ab9;
    stroke-linecap: round;
    stroke-width: 3;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
  .circle svg:hover {
    cursor: pointer;
  }
  .circle img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    border-radius: 50%;
    transition: box-shadow 0.3s ease;
  }
  @keyframes stroke-draw {
    from {
      stroke: #8a3ab9;
      stroke-dasharray: 1;
    }
    to {
      stroke: #cd486b;
      transform: rotate(180deg);
      stroke-dasharray: 8;
    }
  }
  h4 {
    margin: 15px;
    padding: 0;
  }
  .slider {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
  }
  .slide {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 2;
  }
  .column {
    float: left;
    padding: 3px;
  }
  div.scrollmenuitems {
    overflow: auto;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div.scrollmenuitems a {
    display: inline-block;
    color: rgb(120, 85, 71);
    text-align: center;
    padding: 5px;
    text-decoration: none;
  }
  div.scrollmenuitems a:hover {
    color: black;
  }
  .cat_name {
    color: rgb(120, 85, 71);
  }

  .circle img:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
</style>