Key takeaways
- A new section type is a Liquid file in
sections/with an HTML structure, a{% schema %}block, and presets to appear in the “Add section” menu.- This guide builds a complete testimonials section with editable heading, column count, and repeating testimonial blocks (quote, author, rating).
"max_blocks"limits how many blocks merchants can add."min_blocks"requires a minimum.- Once published, the section appears in the Theme Editor for any page that allows sections.
A new section type becomes part of your theme’s section library — available to add to any page template that supports sections. This guide walks through building a complete, production-ready testimonials section from nothing.
How do I add a new section in Shopify?
Create a new .liquid file in your theme’s sections/ folder. Give it a descriptive kebab-case name (e.g., testimonials-grid.liquid). The file must include a valid {% schema %} block with a "presets" key for it to appear in the “Add section” menu.
Related: Add Custom Liquid Logic in Shopify.
Planning the section
Before writing code, define what the section needs:
Related: Fudge Page Builder.
Section-level settings (global):
- Heading text
- Subheading text
- Number of columns on desktop (2 or 3)
Block-level settings (per testimonial):
- Quote (the testimonial text)
- Author name
- Author title/role
- Star rating (1-5)
- Author photo (optional)
Behavior:
- Maximum 12 testimonials
- Minimum 1 testimonial
- Default preset includes 3 sample testimonials
Step 1 — Create the section file
Open the code editor → sections/ folder → add new file: testimonials-grid.liquid.
Step 2 — Write the HTML structure
<section class="testimonials-grid section-{{ section.id }}" id="section-{{ section.id }}">
<div class="page-width">
{% if section.settings.heading != blank %}
<h2 class="testimonials-grid__heading">{{ section.settings.heading }}</h2>
{% endif %}
{% if section.settings.subheading != blank %}
<p class="testimonials-grid__subheading">{{ section.settings.subheading }}</p>
{% endif %}
<div class="testimonials-grid__grid testimonials-grid__grid--{{ section.settings.columns }}-col">
{% for block in section.blocks %}
<div class="testimonials-grid__item" {{ block.shopify_attributes }}>
{% if block.settings.rating > 0 %}
<div class="testimonials-grid__stars" aria-label="{{ block.settings.rating }} out of 5 stars">
{% for i in (1..5) %}
<span class="testimonials-grid__star {% if i <= block.settings.rating %}testimonials-grid__star--filled{% endif %}">★</span>
{% endfor %}
</div>
{% endif %}
{% if block.settings.quote != blank %}
<blockquote class="testimonials-grid__quote">
{{ block.settings.quote }}
</blockquote>
{% endif %}
<div class="testimonials-grid__author">
{% if block.settings.author_photo != blank %}
<img
src="{{ block.settings.author_photo | img_url: '80x80', crop: 'center' }}"
alt="{{ block.settings.author_name }}"
class="testimonials-grid__author-photo"
loading="lazy"
width="40"
height="40"
/>
{% endif %}
<div>
{% if block.settings.author_name != blank %}
<p class="testimonials-grid__author-name">{{ block.settings.author_name }}</p>
{% endif %}
{% if block.settings.author_title != blank %}
<p class="testimonials-grid__author-title">{{ block.settings.author_title }}</p>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>Step 3 — Write the schema
{% schema %}
{
"name": "Testimonials Grid",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "What our customers say"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Trusted by thousands of happy customers"
},
{
"type": "select",
"id": "columns",
"label": "Columns on desktop",
"options": [
{ "value": "2", "label": "2 columns" },
{ "value": "3", "label": "3 columns" }
],
"default": "3"
}
],
"blocks": [
{
"type": "testimonial",
"name": "Testimonial",
"settings": [
{
"type": "range",
"id": "rating",
"label": "Star rating",
"min": 1,
"max": 5,
"step": 1,
"default": 5
},
{
"type": "textarea",
"id": "quote",
"label": "Quote",
"default": "This product completely changed the way I work. Couldn't be happier."
},
{
"type": "image_picker",
"id": "author_photo",
"label": "Author photo"
},
{
"type": "text",
"id": "author_name",
"label": "Author name",
"default": "Jane Smith"
},
{
"type": "text",
"id": "author_title",
"label": "Author title or company",
"default": "Verified Customer"
}
]
}
],
"max_blocks": 12,
"presets": [
{
"name": "Testimonials Grid",
"blocks": [
{ "type": "testimonial" },
{ "type": "testimonial" },
{ "type": "testimonial" }
]
}
]
}
{% endschema %}Step 4 — Add CSS
{% stylesheet %}
.testimonials-grid {
padding: 60px 0;
}
.testimonials-grid__heading {
text-align: center;
margin-bottom: 8px;
}
.testimonials-grid__subheading {
text-align: center;
color: #666;
margin-bottom: 40px;
}
.testimonials-grid__grid {
display: grid;
gap: 24px;
}
.testimonials-grid__grid--2-col {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid__grid--3-col {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 767px) {
.testimonials-grid__grid--2-col,
.testimonials-grid__grid--3-col {
grid-template-columns: 1fr;
}
}
.testimonials-grid__item {
background: #f9f9f9;
padding: 24px;
border-radius: 8px;
}
.testimonials-grid__star--filled {
color: #f5a623;
}
.testimonials-grid__quote {
font-style: italic;
margin: 12px 0 16px;
}
.testimonials-grid__author {
display: flex;
align-items: center;
gap: 12px;
}
.testimonials-grid__author-photo {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.testimonials-grid__author-name {
font-weight: bold;
margin: 0;
}
.testimonials-grid__author-title {
font-size: 14px;
color: #666;
margin: 0;
}
{% endstylesheet %}Step 5 — Test
After saving, go to Online Store → Themes → Customize. Click “Add section” in any page. Your “Testimonials Grid” section should appear in the list. Add it and confirm the settings panel works correctly.
How do I add a new type in Shopify?
“Type” in the context of sections refers to block types within a section (like the "type": "testimonial" block above) or the section type itself. You add new section types by creating new Liquid files in sections/. You add new block types by adding entries to a section’s "blocks" array in its schema.
Related: Add Custom JavaScript in Shopify.
Related: Add Homepage Sections in Shopify.