Sections & Blocks

{% schema %}
{
  "name": "Section Display Name",
  "tag": "section",
  "class": "section",
  "limit": 1,
  "settings": [ ... ],
  "blocks": [ ... ],
  "max_blocks": 16,
  "presets": [ ... ],
  "default": { ... },
  "templates": ["index", "collection", "product"],
  "enabled_on": { ... },
  "disabled_on": { ... }
}
{% endschema %}

"settings": [
  {
    "type": "header",
    "content": "Layout Options"
  },
  {
    "type": "paragraph",
    "content": "Configure how this section appears on the page."
  },
  {
    "type": "text",
    "id": "heading",
    "label": "Heading",
    "default": "Featured Products",
    "info": "Leave blank to hide the heading",
    "placeholder": "Enter a heading..."
  },
  {
    "type": "richtext",
    "id": "description",
    "label": "Description",
    "default": "<p>Discover our curated collection.</p>"
  },
  {
    "type": "select",
    "id": "layout",
    "label": "Layout style",
    "options": [
      { "value": "grid", "label": "Grid" },
      { "value": "carousel", "label": "Carousel" },
      { "value": "list", "label": "List" }
    ],
    "default": "grid",
    "info": "Choose how products are displayed"
  },
  {
    "type": "range",
    "id": "columns",
    "label": "Products per row",
    "min": 2,
    "max": 5,
    "step": 1,
    "default": 4,
    "info": "Desktop only. Mobile shows 2 columns."
  },
  {
    "type": "range",
    "id": "products_to_show",
    "label": "Number of products",
    "min": 2,
    "max": 24,
    "step": 2,
    "default": 8
  },
  {
    "type": "collection",
    "id": "collection",
    "label": "Collection"
  },
  {
    "type": "checkbox",
    "id": "show_vendor",
    "label": "Show product vendor",
    "default": false
  },
  {
    "type": "checkbox",
    "id": "show_secondary_image",
    "label": "Show second image on hover",
    "default": true,
    "info": "Displays the second product image when hovering"
  },
  {
    "type": "header",
    "content": "Colors"
  },
  {
    "type": "color",
    "id": "background_color",
    "label": "Background color",
    "default": "#ffffff"
  },
  {
    "type": "header",
    "content": "Spacing"
  },
  {
    "type": "range",
    "id": "padding_top",
    "label": "Top padding",
    "min": 0,
    "max": 100,
    "step": 4,
    "default": 36,
    "unit": "px"
  },
  {
    "type": "range",
    "id": "padding_bottom",
    "label": "Bottom padding",
    "min": 0,
    "max": 100,
    "step": 4,
    "default": 36,
    "unit": "px"
  }
]

"blocks": [
  {
    "type": "testimonial",
    "name": "Testimonial",
    "limit": 6,
    "settings": [
      {
        "type": "image_picker",
        "id": "avatar",
        "label": "Customer photo"
      },
      {
        "type": "text",
        "id": "author",
        "label": "Customer name",
        "default": "Jane Smith"
      },
      {
        "type": "textarea",
        "id": "quote",
        "label": "Testimonial text",
        "default": "This product changed my life. Highly recommended!"
      },
      {
        "type": "range",
        "id": "rating",
        "label": "Star rating",
        "min": 1,
        "max": 5,
        "step": 1,
        "default": 5
      }
    ]
  }
]

<div class="testimonials__grid">
  {%- for block in section.blocks -%}
    <div class="testimonial-card" {{ block.shopify_attributes }}>

      {%- if block.settings.avatar -%}
        <img
          class="testimonial-card__avatar"
          src="{{ block.settings.avatar | image_url: width: 80 }}"
          alt="{{ block.settings.author | escape }}"
          width="80"
          height="80"
          loading="lazy"
        >
      {%- endif -%}

      <blockquote class="testimonial-card__quote">
        {{ block.settings.quote }}
      </blockquote>

      <div class="testimonial-card__stars">
        {%- for i in (1..block.settings.rating) -%}
          ★
        {%- endfor -%}
        {%- assign empty_stars = 5 | minus: block.settings.rating -%}
        {%- for i in (1..empty_stars) -%}
          ☆
        {%- endfor -%}
      </div>

      <cite class="testimonial-card__author">
        {{ block.settings.author }}
      </cite>

    </div>
  {%- endfor -%}
</div>

{%- comment -%} LIQUID MARKUP {%- endcomment -%}
<section class="multi-content section-{{ section.id }}">
  <div class="page-width">
    {%- if section.settings.heading != blank -%}
      <h2 class="multi-content__heading">{{ section.settings.heading }}</h2>
    {%- endif -%}

    <div class="multi-content__grid">
      {%- for block in section.blocks -%}
        <div class="multi-content__item" {{ block.shopify_attributes }}>
          {%- case block.type -%}

            {%- when 'text_block' -%}
              <div class="content-text">
                {%- if block.settings.title != blank -%}
                  <h3>{{ block.settings.title }}</h3>
                {%- endif -%}
                {{ block.settings.body }}
              </div>

            {%- when 'image_block' -%}
              <div class="content-image">
                {%- if block.settings.image -%}
                  <img
                    src="{{ block.settings.image | image_url: width: 600 }}"
                    alt="{{ block.settings.image.alt | escape }}"
                    loading="lazy"
                  >
                {%- endif -%}
                {%- if block.settings.caption != blank -%}
                  <p class="content-image__caption">{{ block.settings.caption }}</p>
                {%- endif -%}
              </div>

            {%- when 'video_block' -%}
              <div class="content-video">
                {%- if block.settings.video_url != blank -%}
                  {{ block.settings.video_url | external_video_tag }}
                {%- endif -%}
              </div>

            {%- when 'cta_block' -%}
              <div class="content-cta">
                <h3>{{ block.settings.heading }}</h3>
                <p>{{ block.settings.text }}</p>
                {%- if block.settings.button_label != blank -%}
                  <a href="{{ block.settings.button_link }}" class="btn">
                    {{ block.settings.button_label }}
                  </a>
                {%- endif -%}
              </div>

          {%- endcase -%}
        </div>
      {%- endfor -%}
    </div>
  </div>
</section>

{%- comment -%} SCHEMA {%- endcomment -%}
{% schema %}
{
  "name": "Multi-Content",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Why Choose Us"
    }
  ],
  "blocks": [
    {
      "type": "text_block",
      "name": "Text",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        },
        {
          "type": "richtext",
          "id": "body",
          "label": "Body text"
        }
      ]
    },
    {
      "type": "image_block",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "caption",
          "label": "Caption"
        }
      ]
    },
    {
      "type": "video_block",
      "name": "Video",
      "settings": [
        {
          "type": "video_url",
          "id": "video_url",
          "label": "Video URL",
          "accept": ["youtube", "vimeo"]
        }
      ]
    },
    {
      "type": "cta_block",
      "name": "Call to Action",
      "limit": 2,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
          "type": "text",
          "id": "text",
          "label": "Text"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Multi-Content",
      "blocks": [
        { "type": "text_block" },
        { "type": "image_block" },
        { "type": "text_block" }
      ]
    }
  ]
}
{% endschema %}

<!-- Load the CSS file at the top of the section -->
{{ 'section-testimonials.css' | asset_url | stylesheet_tag }}

<section class="testimonials">
  <!-- section content -->
</section>

{%- style -%}
  .section-{{ section.id }} {
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
    background-color: {{ section.settings.background_color }};
  }

  .section-{{ section.id }} .heading {
    color: {{ section.settings.heading_color }};
    text-align: {{ section.settings.text_alignment }};
  }

  @media (max-width: 749px) {
    .section-{{ section.id }} {
      padding-top: {{ section.settings.padding_top | divided_by: 2 }}px;
      padding-bottom: {{ section.settings.padding_bottom | divided_by: 2 }}px;
    }
  }
{%- endstyle -%}

<section class="testimonials section-{{ section.id }}">
  <h2 class="heading">{{ section.settings.heading }}</h2>
  <!-- rest of content -->
</section>

"presets": [
  {
    "name": "Testimonials — Grid",
    "settings": {
      "layout": "grid",
      "columns": 3
    },
    "blocks": [
      { "type": "testimonial" },
      { "type": "testimonial" },
      { "type": "testimonial" }
    ]
  },
  {
    "name": "Testimonials — Carousel",
    "settings": {
      "layout": "carousel",
      "auto_rotate": true
    },
    "blocks": [
      { "type": "testimonial" },
      { "type": "testimonial" },
      { "type": "testimonial" },
      { "type": "testimonial" }
    ]
  }
]

"blocks": [
  {
    "type": "title",
    "name": "Title",
    "limit": 1,
    "settings": []
  },
  {
    "type": "price",
    "name": "Price",
    "limit": 1,
    "settings": []
  },
  {
    "type": "@app"
  }
]

{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'title' -%}
      <h1 {{ block.shopify_attributes }}>{{ product.title }}</h1>

    {%- when 'price' -%}
      <div {{ block.shopify_attributes }}>{{ product.price | money }}</div>

    {%- when '@app' -%}
      <div {{ block.shopify_attributes }}>
        {% render block %}
      </div>
  {%- endcase -%}
{%- endfor -%}

{%- comment -%} Only available on product and collection pages {%- endcomment -%}
"enabled_on": {
  "templates": ["product", "collection"]
}

{%- comment -%} Available everywhere EXCEPT the cart page {%- endcomment -%}
"disabled_on": {
  "templates": ["cart"]
}

{%- comment -%} Only in header and footer groups {%- endcomment -%}
"enabled_on": {
  "groups": ["header", "footer"]
}

{%- comment -%} Disable in all section groups (only in templates) {%- endcomment -%}
"disabled_on": {
  "groups": ["*"]
}