How to build Shopify Theme dynamic section with Testimonials

Having completed a navigation menu for our Shopify Theme, we can now start adding further components to the home page of our store. There are various things we might want to show on our home page such as a selection of featured products, customer testimonials or a general information about our product offering. All of those things can be effectively accomplished by using a carousel so today we are going to build a testimonials carousel.

Individual components of a Shopify Theme are often called sections. There are static and dynamic sections. A dynamic section is a special case of a static section. Dynamic sections can only be used on the home page of the Shopify Theme and the merchant can add them, remove them and change their position on the home page all through the administrative interface of the store. Static sections are just the oposite - they can be used on any page and although they are still configurable by the merchant, they can only be displayed or hidden. They cannot be easily positioned on the page through the Administrative Interface of a Shopify store.

Let's start by clearing up our index.liquid file. We are simply going to remove all there is and replace it with {{ content _for_index }}. The index.liquid file represents the home page of our Shopify Theme. By replacing everything with our Jinja syntax we ensure, that only the things we configure in the settings_data.json file, will be made available to us to use for our home page. All the styling will be taken care of by the styles implemented for our individual components. We are also going to create a container for our components in theme.liquid so let's just do that. 

Our theme.liquid file should look look like on the image above with a container for our components. Now that we have set the scene we can start creating our component. 

In the 'section' folder we will create a new file called testimonial.liquid. We will create the HTML of our component in this file as you can see bellow. 

And we will also create its {% schema %} below the HTML. You can find the full code on Github. What is interesting about this component is, that we essentialy have further components contained within the testimonials.liquid. As this is a carousel, we need to be able to dynamically add images and test as individual slides of that carousel. Shopify enables us to do this by creating 'blocks' within the component. Blocks are created in the {% schema %} of the given component. Here is an example of just that. 

Each block represents one slide in our carousel. We have specified two text fields and an image and in our Shopify administrative interface we will be able to configure those for each block and also to to have as many or as few block as we like. 

Let's now register our component in settings_data.json so that we can see our new component in the store administraiton. 

And finally let's see the results of our work. 

As you can see, we are able to create as many blocks as we like. Each block represents one slide in our carousel. As we have specified the fields in the blocks to be of type 'richtext', we are able to style those as links which is exactly what we want. Our new component also looks great on mobile devices. 

You can find the full theme including the code for this component in the corresponding Bitbucket repository.

Thank you