How to choose between Static and Dynamic Sections within a Shopify Theme

Let's now look at the difference between static and dynamic Shopify sections. So far we have built two components for our Shopify Theme. We have built a navigation menu component as a static section and a testimonials component as a dynamic section. So what are the main differences between those two essential concepts and how should we choose between the two? 

Static sections

Static section is simply a reusable block of code which can be called as part of any page of a Shopify Theme. To insert the block of code we would simply call {% section section_name %}. The section component consists of HTML code and {% schema %}. Schema is a JSON structure where we specify instructions about how this component can be customised in the administrative interface of the Shopify store. For example we can define a text_field as part of the schema. The merchant may then by able to customise the text which will be displayed in the given section. Other example would be the use of radio buttons. The merchant could for example change the alignment of text in the section by selecting the appropriate option.

In other words, schema gives merchants the ability to customise their store without having to directly interect with any code. This makes sections user friendly and also powerful as they can be customised and used anywhere throughout the theme.

In the section component we can dynamically render user input as part of the HTML by reffering to the 'section' object. for example by reffering to {{ section.our_custom_text_field }} we would be able to retrieve whatever the merchant has typed into the specified text field which we have defined in schema. As part of the schema we can also define a default value to deal with a scenario where there is no input provided by the merchant.

Blocks

When working with Shopify components there is a number of options available to us to use in the schema. We have already mentioned text_field or radio buttons as examples. Blocks are another example such functionality but they are more complex and more powerful. All the previously mentioned examples only enable the merchant to customise a given field in the section but they cannot be dynamically created or removed by the merchant. Let's say the merchant wants to display a couple of featured products in a carousel. Each slide in the carousel would display a certain product image and product description which would need to be customizable by the merchant. But we don't know how many products should be displayed in the carousel. What if the merchant wants to display 3 or 4 products? Blocks enable us t odeal with those exact scenarios.

A block is a group of simpler fields which can be added or removed by the merchant. What do we mean by a group of fields? In our example of a carousel with featured products the block would be the individual slides in the carousel. Each slide can have a number of configurable elements (fields) such as text alignemnt (perhaps configurable through radio buttons), image and text. All of those fields may be customizable by the merchant.

"blocks":[
{
"type":"text_block",
"name":{
"en":"Image"
},
"settings":[
{
"type":"image_picker",
"id":"image",
"label":{
"en":"Image"
}
},
{
"type":"richtext",
"id":"product_description",
"label":{
"en":"Product Description"
},
"default":{
"en":"<p>Very coold product. Good value!</p>"
}
}
]
}
]

In the above is an example of how a block could look like in our schema. We have created a block where the merchant can select an image of a product and type in their product description. We have also provided labels to those fields which will be displayed in the store and will help the merchant understand what information should they specify. Finally, we have also provided default values to our fields which will be displayed when no user input has been specified.

To display information from blocks in our HTML, we can do so in a similar way to how other static fields in sections can be configured. The difference here is however, that as many (or few) block can be created by the merchant, as they desire. We will therefore need to use for loops in our code t oiterate over all the possibly created blocks.

{% for block in section.blocks %}
{{ block.image }}
{{ block.product_description }}
{% %}

We would first reffer to the section-object. As a property of that object we have defined blocks which is a collection of all the fields the merchant could have created. Then we simply refer to individual fileds of those blocks depending on the IDs we have used to identify those fields e.g. {{ block.product_description }}. Also notice the difference in the used brackets {{ }} vs {% %}. When using double curly braces, we want to display the underlying value on the page. When using the percentage symbols, we simlpy want to trigger a functionality (such as a foor-loop) but we do not want any infromation to be displayed on the page.

Dynamic sections

hat are dynamic sections? Dynamic sections are very similar to the static sections we have just described. Dynamic section is a component of a shopify theme consisting of HTML and {% schema %} through which enables the merchant to configure the content of the section. All the properties which apply to static sections also apply to dynamic sections with a few differences.

Dynamic sections can only be used on the home page (also called the 'index' page) of the shopify theme. Dynamic sections are not direcly called in the code of the home page like a static section would be. Instead of calling {% section my_section %} on the index page of the Shopify Theme, we will specify our dynamic sections in the settings_data.json file and then simply type {{ content_for_index }} into our index.liquid file.

"content_for_index": [
"my_section"
]

Every time we create a dynamic section, we 'register' this component in the settings_data.json file by adding its name under the 'content_for_index' field as we can see above. Why can't we just call them direclty like static sections?

While this may seem overly complicated, there is a good reason for this implementation. Static sections are always displayed at the exact part of the page where they are called with {% section my_section %}. Once called the only thing we can do is to enable the mechant to hide them from display. Dynamic sections however cna be either hidden or reorganised on the page by the merchant without having to type in any code. The merchant can simply drag & drop the dynamic sections in the Shopify administrative interface of the store whereby changing their positions on the page. This is realyl cool but currently only possible to do on the home page of a Shopify Theme.

You can find more information about static vs dynamic sections and their uses on in the Shopify documentation:

Creating your first Shopify section 
Introduction to sections 
Developer documentation 

Thank you