Shopify: Types of Settings for Sections
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.