Having creative control to customize your Shopify site is a powerful tool your organization can take advantage of. Customers are looking to have a user-friendly and simple experience on your site, so having information at the right place and the right time can drastically improve the number of conversions on your site.
If you are tweaking your Shopify theme yourself or working with an eCommerce agency to help implement changes to your site, you will want to create a few different sections that can be interchangeable.
In this article, we will break down what section blocks are and how to implement dynamic and static section blocks to your site. These adjustments will allow you to unlock creative ways to customize your store and thus improve your site’s conversion potential.
What are Section Blocks?
Section blocks are customizable elements of a page that can have specific dedicated functions. This change was made several years ago by Shopify to make it much easier to customize your theme.
Sections can be included statically in a theme’s template (added to the header or footer), or they can be dynamically added to the theme’s homepage using Shopify’s Theme Editor feature.
How to Create Static Section Blocks
A static section block is a fixed component that you can customize in the Theme Editor section of Shopify. The position of the section block will be locked based on where you have assigned it within the page template.
An example may include the need to create a section that allows organizations to add custom text on a product page. This is useful for organizations that need to share timely information with clients, need customization requests, or have the need to share unique shipping information about this specific product.
Shopify-sections-custom-text
Immediately after you create a new section from the theme file editor, a scaffold is automatically created with Javascript, CSS, and schema. Within the schema tags, you will add JSON which will indicate how to “read” the content added. Javascript and CSS tags can be used to add styling functions, but if you choose not to add styling, by default the section will pull its style from your main stylesheet of the theme.
You will add HTML and Liquid tags to the top of the file to add content to a section. Liquid tags can be defined within the schema.
In the example below you will see the Liquid tags in the HTML reflect the settings in the schema section. You will also see we have created a plain text box and a richtext box.
Within the settings of schema, id is referring to the Liquid tag being defined, type refers to the output we are creating, label defines a name for this output and default is assigning a placeholder.
Since we want this static text box to appear on a product page, we will need to add {% section ‘text’ %} to the product.liquid template file. (line 6 in example image)
When you move to the Them Editor and navigate to the product page, you can see the new section appearing below the main content of your page and above the footer.
You will see the code for this section block below. You can rework the settings to work best for each organization.
How to Create Dynamic Section Blocks
Dynamic section blocks can be moved to different positions on a webpage. This drag and drop function allows you to build custom dynamic sections that can allow a large degree of personalization for your store.
Dynamic sections are created by adding presets to the section file. These presets will help you define how the section will appear in the Theme Editor. Once added, the sections will also automatically be available to add to the index page.
A wide range of different section blocks can be added, and the location of these dynamic blocks can be changed from the Theme Editor.
Section blocks can be used in both dynamic and static sections, but it is important to identify what types of blocks would be appropriate for certain areas of your site.
How to Use Section Blocks to Set Up Schema Markup on Your Shopify Site
Step 1: Create your JSON schema using a tool like Google Schema
Your organization can take advantage of the schema markup builder tool from technicalseo.com. You will be able to create your organization schema and copy the JSON-LD. Below we will show an example for Stryde.
Step 2: Create your snippet in Shopify
To create your snippet in Shopify, you will need to log-in to your store and follow: Online Shop > Themes > Actions > Edit Code. It is here where things can seem intimidating, but schema markup is a minimal change so it’s hard to do any serious damage.
From this view, open the snippets folder and click “Add a New Snippet.” You will want to rename the snippet to something easy to understand, should you need to make edits.
Step 3: Create a snippet to the homepage
Within the same view, in the left-hand navigation locate the template directory and click on “index.liquid.”
You will then enter {% include ‘snippet-name’ %} replacing “snippet-name” with the file name you created from step 2 in the process and click save.
Step 4: Paste your Organizaition Schema (JSON-LD) into the empty field
and hit save. Make sure to add div and script tags.
Step 5: Test it using Google’s Data Testing Tool to make sure they can pick it up.
You can easily test whether you implemented the structured data properly by using Google’s Structured Data Testing Tool. All you have to do is enter your homepage and test if it works.
Empowering Creative Customization
Now that you have seen how easy it can be to add static and dynamic section blocks, you can add multiple to your site to improve the overall user experience with your site. Presets also provide the freedom to move sections throughout the webpage. The opportunities for customization are endless!
Greg is the founder and CEO of Stryde and a seasoned digital marketer who has worked with thousands of businesses, large and small, to generate more revenue via online marketing strategy and execution. Greg has written hundreds of blog posts as well as spoken at many events about online marketing strategy. You can follow Greg on Twitter and connect with him on LinkedIn.
