The use of sections is an important part of the store’s theme and layout, allowing the store owner to add and customize the content within these sections. In particular, the blocks which display the products (image and text) should have the accessible functionality to provide a store owner with convenient management. The reusable modules can be customized as a merchant wishes. The image below shows the main theme architecture components with sections highlighted in blue and blocks highlighted in red.

(Source: shopify.dev/themes/architecture/sections)

In the article, we will explain different types of settings for sections and what is important to know to create sections. For instance, these two significant points are essential to realize while creating sections:

Any type of settings can be used in single sections and the ones that use blocks.
For different types of data, additional attributes are not always relevant.

Single sections vs. block sections

Adding the content to the store requires creating the sections. Namely, to add the modules, a merchant should decide whether to use single or block sections. The main difference between these notions is the fact that with block sections, it is possible to add, delete, and reorder the content within a section.

Whether you need to make a single section or block sections, you need to implement the following:

Single sections:

<div class=”my-section”>{{ section.settings.text-box }}</div>
{% schema %}
{
“name”: “My section”,
“settings”: [
{
“id”: “text-box”,
“type”: “text”,
“label”: “Heading”,
“default”: “My section Title”
}
] }
{% endschema %}

Block sections:

{% for block in section.blocks %}
<div class=”my-section”>{{ block.settings.text-box }}</div>
{% endfor %}
{% schema %}
{
“name”: “My section”,
“settings”:[],
“blocks”:[
{
“type”: “select”,
“name”: “Text block”,
“settings”: [
{
“id”: “text-box”,
“type”: “text”,
“label”: “Heading”,
“default”: “My section Title”
}
] }
]}
{% endschema %}

Content of a store:

There are multiple types of content that can be placed in sections. The main content elements in the sections include:

article – Article

blog – Expand & collapse blogs

page – Expand & collapse pages

collection – Drop-down collections

product – Drop-down products

Text and links:

text – single-line text field

textarea – multi-line text field

richtext – rich text

html – User’s HTML

url – URL

Control:

radio – radio buttons

checkbox – checkboxes

Lists:

select – dropdown lists

link_list – expand & collapse list of links

Media:

image_picker – image uploading

Video_url – video URL

Features:

range – sliders

color – selection of color

font_picker – selection of font

Conclusions

Even though Shopify offers the customization of sections with the help of theme editors, the customization of these sections requires the knowledge of settings. Moreover, the notion that every section can have individual settings implies that it be customized as a store owner wants. The described setting would help to implement the crucial modules into sections to make an appealing and functional store.