Shopify Question posted in
The Shopify help center can be found here.

Shopify select SVG in section block

I am trying to build a block that allows the merchant to choose between a number of SVGs I have uploaded to the snippets folder of a theme.

The code I have here makes sense to me, but Shopify will not output the any SVGs. It goes by default to “No SVG selected”.

Here is the for loop: 

  {% for block in section.blocks %}
    <div class="grid__item large--one-third text-center reason-block">
      {% case svg__choice %}
        {% when block.settings.svg == 'family' %}
          {% include 'svg--family' %}
        {% when block.settings.svg == 'bottles' %}
          {% include 'svg--plastic' %}
        {% when block.settings.svg == "globe" %}
          {% include 'svg--globe' %}
        {% else %}
          No SVG Selected
      {% endcase %}
      <h4 class="h4v3">{{ block.settings.title }}</h4>
      <p>{{ block.settings.text }}</p>
    </div>
  {% endfor %}

And here is my {% schema %}:

"blocks": [
      {
        "type": "select",
        "name": "Standard Block",
        "settings": [
          {
            "type": "select",
            "id": "svg",
            "label": "Select SVG code",
            "options": [
              {
                "value": "family",
                "label": "Family"
              },
              {
                "value": "globe",
                "label": "Globe"
              },
              {
                "value": "bottles",
                "label": "Bottles"
              }
            ],
            "default": "family"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Block Title"
          },
          {
            "type": "textarea",
            "id": "text",
            "label": "Block Paragraph"
          }
        ]
      }
    ]

Any help is appreciated!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found the answer. Had to use an if/else instead of a case. The answer should look like this:

      {% for block in section.blocks %}
    <div class="grid__item large--one-third text-center reason-block">

        {% if block.settings.svg == 'family' %}
          {% include 'svg--family' %}
        {% elsif block.settings.svg == 'bottles' %}
          {% include 'svg--plastic' %}
        {% elsif block.settings.svg == 'globe' %}
          {% include 'svg--globe' %}
        {% else %}
          No SVG Selected
        {% endif %}

      <h4 class="h4v3">{{ block.settings.title }}</h4>
      <p>{{ block.settings.text }}</p>
    </div>
  {% endfor %}

  2. 0

    Your case/when syntax is not correct.

    It must read :

      {% case block.settings.svg %}
    {% when 'family' %}
      {% include 'svg--family' %}
    {% when 'bottles' %}
      {% include 'svg--plastic' %}
    {% when "globe" %}
      {% include 'svg--globe' %}
    {% else %}
      No SVG Selected
  {% endcase %}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search