How do I use a list type as an input in a custom liquid component for use in Shopify theme studio?

Technical Questions
1

At the moment, Builder does not support the list input type when dealing with custom liquid components built for use in Shopify stores. Any input type used must return a result of the types boolean, number, or string, which means you can use any of the input types except object and list.

As a workaround, instead of using a list input, you can specify each input directly. It is not as elegant as using a list, but it will work. Let’s say for example you want to build a review component that takes in review quotes. You might start with a liquid component that looks like:

{% comment schema %}
  {
    "name": "Review Carousel",
    "inputs": [
      {
        "name": "title",
        "type": "text",
        "defaultValue": "Great Reviews"
      },
      {
        "name": "items",
        "type": "list",
        "defaultValue": [
          {
            "reviewText": "hello"
          }
        ],
        "subFields": [
          {
            "name": "reviewText",
            "type": "text",
            "defaultValue": "“I love this place”"
          },
          {
            "name": "reviewCaption",
            "type": "text",
            "defaultValue": "Mike from Oakland, CA"
          },
          {
            "name": "reviewRating",
            "type": "number",
            "defaultValue": 5
          }
        ]
      },
      {
        "name": "buttonUrl",
        "type": "text",
        "defaultValue": "#an-anchor-link"
      },
      {
        "name": "buttonText",
        "type": "text",
        "defaultValue": "Get started"
      }
    ]
  }
{% endcomment %}

<div class="review-card">
  {%- if title != blank -%}
    <div class="heading">
      {%- if title != blank  -%}
        <h1 class="title">
          {{- title -}}
        </h1>
      {%- endif -%}
    </div>
  {%- endif -%}

  {%- for item in items -%}
      {{ item }}
  {%- endfor -%}
</div>

The problem with that format is that it uses the list input type, so it will not render correctly. If you know ahead of time that there will only ever be three reviews max, you change it to instead use individual named inputs:

{% comment schema %}
  {
    "name": "Review Carousel",
    "inputs": [
      {
        "name": "title",
        "type": "text",
        "defaultValue": "Great Reviews"
      },
      {
        "name": "reviewTextOne",
        "type": "text",
        "defaultValue": "“I love this place”"
      },
      {
        "name": "reviewCaptionOne",
        "type": "text",
        "defaultValue": "Mike from Oakland, CA"
      },
      {
        "name": "reviewRatingOne",
        "type": "number",
        "defaultValue": 5
      },
      {
        "name": "reviewTextTwo",
        "type": "text",
        "defaultValue": "“I love this place”"
      },
      {
        "name": "reviewCaptionTwo",
        "type": "text",
        "defaultValue": "Mike from Oakland, CA"
      },
      {
        "name": "reviewRatingTwo",
        "type": "number",
        "defaultValue": 5
      },
      {
        "name": "reviewTextThree",
        "type": "text",
        "defaultValue": "“I love this place”"
      },
      {
        "name": "reviewCaptionThree",
        "type": "text",
        "defaultValue": "Mike from Oakland, CA"
      },
      {
        "name": "reviewRatingThree",
        "type": "number",
        "defaultValue": 5
      },
      {
        "name": "buttonUrl",
        "type": "text",
        "defaultValue": "#an-anchor-link"
      },
      {
        "name": "buttonText",
        "type": "text",
        "defaultValue": "Get started"
      }
    ]
  }
{% endcomment %}

<div class="review-card">
  {%- if title != blank -%}
    <div class="heading">
      {%- if title != blank  -%}
        <h1 class="title">
          {{- title -}}
        </h1>
      {%- endif -%}
    </div>
  {%- endif -%}

  {%- if reviewTextOne != blank -%}
	{{ reviewTextOne }}
  {%- endif -%}
  {%- if reviewCaptionOne != blank -%}
	{{ reviewTextOne }}
  {%- endif -%}
  {%- if reviewRatingOne != blank -%}
	{{ reviewTextOne }}
  {%- endif -%}

  {%- if reviewTextTwo != blank -%}
	{{ reviewTextOne }}
  {%- endif -%}
  {%- if reviewCaptionTwo != blank -%}
	{{ reviewTextOne }}
  {%- endif -%}
  {%- if reviewRatingTwo != blank -%}
	{{ reviewTextOne }}
  {%- endif -%}

  {%- if reviewTextThree != blank -%}
	{{ reviewTextOne }}
  {%- endif -%}
  {%- if reviewCaptionThree != blank -%}
	{{ reviewTextOne }}
  {%- endif -%}
  {%- if reviewRatingThree != blank -%}
	{{ reviewTextOne }}
  {%- endif -%}
</div>

Again, it is not quite as nice as using a list input type, but it will get the job done!