Hey everyone,

This is Rob Clark’s 3rd out of 4 edits of “i only speak liquid”.

Rob (a Storetasker Member) is a highly experienced Shopify developer based in Wiltshire, UK, who has worked with brands like ThruDark and Pangaia. He specializes in theme development and UX design.

Make a friend and connect with him here. 

What I’ve been thinking about: The Versatility Of Block Types

What is a block type?

Blocks are customisable modules within sections that allow you to add different types of content to enrich and enhance a template.

Why should I use block types?

A well-designed and carefully constructed template enables users to create and update their store’s layouts independently, reducing the need for ongoing developer support. One of the standout features of Shopify 2.0 is the ability to create various block types within a specific section, allowing for unparalleled flexibility and customisation in the template design.

Planning and Building a Shopify Section

Before starting the build of a section, it’s important to plan the types of blocks you’ll need and consider whether any limitations should be applied to them.

For example, on a Product Page, themes often use the Add to Cart button as a block type, allowing it to be positioned at various points on the page. However, for both user experience and technical reasons, only one Add to Cart button is required. Therefore, limiting this block type to a single instance in the template is essential.

Defining Blocks with Section Schema

The section schema determines the block types and the options assigned to them. To create a basic schema with three different block types, you can use the following example:

{% schema %}
{
 "name": "Custom Block",
 "blocks": [
   {
     "type": "image",
     "name": "Images",
     "settings": [
     ]
   },
   {
       "type": "content",
       "name": "Content",
       "settings": [
       ]
   },
   {
       "type": "quote",
       "name": "Quote",
       "settings": [
       ]
   }
 ],
 "settings": [
 ],
 "presets": [
   {
     "name": "Custom Block",
     "settings": {}
   }
 ]
}
{% endschema %}

Configuring Block Types in Shopify Sections

Although these blocks may not have any settings attached to them, they will still be usable within the template and can be attached when the section is activated.

• Type Value: The type value serves as the unique identifier for the block and is required. While you can define various block types, it’s advisable to keep the options streamlined to avoid user confusion. Providing too many different block types can make the interface less intuitive.

• Setting Limits: Adding a limit ensures that only a specified number of a particular block type can be used within the section. This is particularly helpful for maintaining consistency and preventing errors—such as limiting the number of an "Add to Cart" button block to one for technical and usability reasons.

   {
       "type": "content",
       "name": "Content",
	"limit": 1,
       "settings": [
       ]
   },

Rendering Blocks with Liquid

Once the schema is set up, you can use Liquid to loop through the blocks in your section. This ensures that each block is dynamically rendered and visible on the page.

Here’s an example of how to loop through blocks within a section:

{%- for block in section.blocks -%}
	<div>
       	{{ block.id }}
 	</div>
{%- endfor -%}

Customising Block Display with a Switch Statement

The initial loop will render all the block IDs and settings, but if each block needs a unique appearance or functionality based on its type, a switch statement is required. This ensures that content is dynamically tailored to the specific block type.

When blocks share settings with the same names, they might render similarly. However, if the goal is to display distinct content for each block type, a more granular approach is needed. The block.type value can be used to differentiate the rendering logic for each block.

Here’s an example implementation:

{%- for block in section.blocks -%}
{%- case block.type -%}
 	{%- when "image" -%}
             		<div>
       			This is an image block
 			</div>
              {%- when "content" -%}
                    <div>
       			This is a content block
 			</div>
              {%- when "quote" -%}
                    <div>
       			This is a quote block
 			</div>
       {% endcase %}
 {%- endfor -%}

Flexible Block Rendering with Liquid

With this simple setup, each block will dynamically appear on the screen, displaying unique information based on the selected block type.

This is a foundational example, but the potential to expand is immense. By incorporating variables and Liquid filters, you can create more complex and customisable blocks to suit a wide range of design and functionality requirements.

The possibilities are substantial, allowing developers to build out rich, dynamic templates that cater to unique business needs while maintaining flexibility and ease of use for end-users.

3 links you can’t miss:

1. Swiper.js: The Modern Mobile Touch Slider

Swiper.js is a lightweight yet powerful JavaScript carousel designed for modern web and mobile experiences. It offers a wide range of features and customization options, making it an excellent choice for creating responsive, touch-friendly sliders and carousels.

2. Font Awesome: A Comprehensive Icon Library

Font Awesome is a versatile and extensive icon library, perfect for a wide range of applications. With both free (2,036 icons) and paid (over 53,000 icons) options, it caters to various needs and budgets.

Font Awesome provides flexibility in how you implement icons, offering support for:

• SVGs and icon fonts for seamless integration.

• JavaScript framework integration for dynamic and scalable usage.

• Figma plugins for streamlined design workflows.

With its broad range of options and easy accessibility, Font Awesome is an essential tool for developers and designers alike.

3. Adobe Typekit: A Versatile Font Library for Web Projects

Adobe Typekit (now part of Adobe Fonts) offers an extensive collection of fonts, making it an excellent resource for web and design projects.

Key features include:

• The ability to create web projects and seamlessly integrate fonts into your site.

• Flexible implementation options, such as importing fonts via a stylesheet or adding a link in the <head> of your HTML.

Best of all, if you already own an Adobe license, access to Adobe Fonts is included, providing you with a diverse and high-quality font library to elevate your web projects.

1 app I like:

LoyaltyLion: Boost Customer Retention with a Loyalty Program

If you’re looking to enhance customer retention and drive repeat business, setting up a loyalty program is a proven strategy—and LoyaltyLion is an excellent option for Shopify stores.

LoyaltyLion offers a range of features to help you create a tailored loyalty program, including:

• Setting up a points system to reward customers with discounts.

• Encouraging social media engagement, such as follows and shares.

• Seamless integration with email marketing platforms like MailChimp and Klaviyo.

With its extensive customization options, LoyaltyLion ensures that your Shopify store’s loyalty program is perfectly aligned with your brand and designed to engage your customers effectively.

One learning as a freelancer:

Work or Life? Why not both?

Achieving the right work-life balance may seem like a cliché in the freelance world, but it’s undeniably essential for becoming a more efficient and fulfilled freelancer.

Whether you “work to live” or “live to work,” finding that equilibrium leads to a more rewarding life. Overworking can have negative consequences—not only for you but for those around you. It can also mean missing out on life’s irreplaceable moments. That’s why it’s crucial to prioritize what truly matters.

Freelancing is both a stressful and exhilarating career path. While being your own boss has its perks, keeping clients happy and maintaining a steady income often requires a daily juggling act. Personally, I prioritize playing football (soccer) 2-4 times a week—not just for physical fitness but as a way to completely disconnect for an hour or two, recharge, and return to work with a fresh perspective. Though I’m still working toward my ideal balance, I’ve learned that taking time to “down tools” is essential to finishing tasks effectively.

What works for me may not work for you, but whether it’s sports, mindfulness, family time, or any activity that helps you recharge, it’s vital to set boundaries and make time for it. Scheduling these moments into your busy lifestyle ensures you’re taking care of both your personal well-being and your professional success.

-Rob