Render tag

Improve theme performance with 'render' tags

  • Shopify
  • Performance

Published

You hear this again and again, but performance is critical to conversion in Ecommerce. Even modest wait times can lead to shoppers getting frustrated, and moving on to better things. With this in mind, you should be taking advantage of whatever tools are available to improve the overall performance and load times of your Shopify theme.

It may have passed under your radar, unless you keep up on the Shopify change-log, but {% include %} tags have been deprecated in favour of a new {% render %} tag. The new render tag works a little differently, so it’s not a simple find-and-replace. The render tag isolates variables used in the snippet, and no longer automatically has access to variables declared in the parent scope. This means that you need to explicitly pass in the variables your snippet needs access to.

This can be done in a couple different ways:

Passing a variable

	{% assign a_string_var = 'pizza' %}
	{% render 'snippet', a_string_var: a_string_var %}

Using the with parameter

	{% assign feat_product = all_products['handle'] %}
	{% render 'product' with feat_product as product %}

This more declarative syntax should have a positive side effect of making theme code easier to read, and understand what variables are being shared with what snippet.

Back to blog
Robin Hamill Headshot

Author: Robin Hamill

Robin is an independent Shopify and Ecommerce consultant specializing in performant and accessible custom themes, and shop experience augmentation.

Let's talk about bringing your business to life.

Get in Touch!