What is Shopify “render” and how to use it?

Tweet LinkedIn

Shopify’s “render” tag is used in Shopify themes for efficient and dynamic loading of content. 

It is part of the Liquid template language, which Shopify uses for templating in themes.

It’s used to load a snippet of code from a separate file into the place where the render tag is called or to call an app block.

How to Use render

Render snippets in themes

When using Shopify’s render tag, it’s important to understand how data is managed between your main templates and the smaller code pieces like snippets or app blocks.

This knowledge ensures your Shopify theme works efficiently and as intended.

The render function is used in Shopify themes to include smaller, reusable pieces of code known as snippets or app blocks into a larger template.

This helps in organizing your code better and keeping your theme clean and maintainable.

In order to use “render” in a Shopify theme you need to create a snippet.

A snippet is a piece of code that will be reused in multiple sections. It’s a logical approach to not repeat yourself in code.

First, ensure that the snippet you want to include exists in the snippets directory of your theme.

For example, you might have a snippet file named “product-card.liquid” that will display on the theme the product image, product title, and the price.

For sure you’ll need this piece of code in many parts of your store and to avoid copy/pasting the block of code everywhere you use it, the best approach is to put it in a snippet file under the snippets folder and call it from there with “render” every time you need it.

Use render in the liquid file where you want to include the snippet by utilizing the “render” tag.

The only thing you need to do if it is needed is to pass variables to it when you render it.

You can pass local variables to the snippet as parameters if the snippet needs any specific data to tag correctly.

Render a snippet:

{{ render 'product-card' }}

Data Scope and Accessibility

One key aspect of using “render” is understanding what data is accessible within these snippets or app blocks:

Normally, when you create variables in your main template, these aren’t directly accessible within the snippets or app blocks.

This means if you define a variable in your main page template, you cannot use it directly inside a snippet without passing it explicitly.

You can pass these external variables to your snippets or app blocks as parameters.

This means that while the snippet can’t automatically access the variable, you can provide it as a piece of information when you call the render function.

Passing variables to a snippet

{{ render 'product-card', product: product, custom_text: 'Limited offer' }}

The name of the snippet that you want to render must be required without the “.liquid” file extension.

Render app blocks

To render app blocks the theme block must use the {% content_for ‘blocks’ %} Liquid tag.

<div class="blocks">
  {% content_for 'blocks' %}
</div>

This tag handles block rendering.

Since you’ll be having many times more blocks in a sections you need to loop through them and created a case for each one of them:

{% for block in section.blocks %}
  {% case block.type %}
    {% when '@app' %}
      {% render block %}
    ...
  {% endcase %}
{% endfor %}

Render tag parameters

Suppose you have an array of products and a snippet file (product-card.liquid) designed to display a product card.

You could use the render tag to display each product as follows:

{% for product in products %}
  {% render 'product-card' for product as item %}
{% endfor %}

In this example, each product in the products array is passed to the product-card.liquid file as an item where it can be used to display relevant product details.

The use of as item is optional, if omitted the context within the snippet defaults to the parent context.

This tag helps in creating cleaner more modular templates by separating reusable components (like product cards) into their own files.

Render “with”

Consider you have a product object and a snippet named “product-details.liquid” that formats and displays these details.

You could render this snippet and pass the product object to it like so:

{% render 'product-details' with product as detail %}

In the snippet “product-details.liquid” you would use detail to access the properties of the product like “detail.name” or “detail.price”.

This method allows for a clean and clear way to pass specific data to components without cluttering the global scope or having to rely on the default context naming thus enhancing both maintainability and readability of the templates.

Accessing Global and Contextual Objects

Despite the restrictions on variables, snippets and app blocks can still access global objects.

Moreover, they can access any objects that are naturally part of their current context.

For example, a snippet included in a product template can access the product object, and one included within a section can access the section object.

Render vs include

The render tag is designed to replace older practices of including snippets with {% include %}.

Unlike {% include %}, render does not carry over the parent context to the snippet, which helps in maintaining better performance by not loading unnecessary variables.

In this example, each product in the products array is passed to the product-card.liquid file as an item where it can be used to display relevant product details.

The use of as item is optional, if omitted, the context within the snippet defaults to the parent context.

This tag helps in creating cleaner, more modular templates by separating reusable components (like product cards) into their own files.

Advantages of using “render”

Performance

It only loads what is needed for the snippet to run improving the theme’s overall performance.

Modularity

Helps keep code organized into manageable pieces without polluting the global scope.

Reusability

Snippets can be reused across different parts of the theme with different parameters allowing for versatile design options.

Restrictions

It’s also crucial to note that variables created inside a snippet or app block do not affect the outside environment.

This means you cannot define something inside a snippet and expect it to be available outside of it.

All variables created inside a snippet have local scope.

When you use the render tag to include a snippet, you cannot use the include tag within that snippet. 

Anyway Shopify recommends to no longer use the “include” tag since it is being deprecated.

Conclusion

The “render” tag is a valuable tool for Shopify theme development aiding in creating efficient, scalable, and maintainable themes.

By understanding these points, you can effectively use Shopify’s render function to build more dynamic and efficient themes, keeping your site’s performance optimal and your codebase clean.