Usage of include vs. render

[james2doyle]

According to the Shopify docs, we should be avoiding include (https://help.shopify.com/en/themes/liquid/tags/deprecated-tags#include) and instead using render (https://help.shopify.com/en/themes/liquid/tags/theme-tags#render).

As a reference theme this is great, but it seems to contradict the official docs.

From the docs on include:

The include tag works similarly to the render tag, but it lets the code inside of the snippet to access and overwrite the variables within its parent template. The include tag has been deprecated because the way that it handles variables reduces performance and makes theme code harder to both read and maintain.

Is this theme going to be updated to reflect that? Or is there a reason it is still using include?

[james2doyle]

Any verdict on this?

[dan-gamble]

render is a very recent addition to the theme tags. include was used before this.

This starter theme hasn't been updated to reflect this change yet. As far as I know, the render tag was introduced mainly for the new "Sections everywhere" feature that is going to be released soon.

[PaulNewton]

Blocking issue is render has it's own private scope so any usage of include needs to be checked for external dependencies in any theme that you want to make the change too.

Which makes it a good reason ,for now, that existing themes continue to use include if there is not also time for testing since it is not a simple find and replace text operation for quite a lot of themes.
AFAIK there's no test suite for liquid themes to handle verifying such things so templates and snippets have to be manually checked, or visual regression, and potentially all affected files have be refactored to encapsulate everything properly in a private scope.

[prayagbs]

Hi All,
I am Shopify Developer. I have one question.
I use Include --( in )--> Include. But How Can I Use RENDER Like This ?

[dan-gamble]

Use render in render. You can't use include in render.

[PaulNewton]

@prayagbs If your trying to nest a snippet within itself to reuse code, such as a menu builder or grid system or filter hierarchy , then keep in mind when using render that any nested render's cannot permanently change variables of the outer render snippets.

[prayagbs]

@PaulNewton Thank you

[mvuljevas]

At this point, we should all use render instead of include tag for all our stuff developed inside shopify right?

[ersanjay1995]

At this point, we should all use render instead of include tag for all our stuff developed inside shopify right?

yes replace with include to render

[mvuljevas]

At this point, we should all use render instead of include tag for all our stuff developed inside shopify right?

yes replace with include to render

Thanks @ersanjay1995 !

[Ross-Angus]

I'm finding render has limitations, compared to include. For example, if I use it within a section, the rendered liquid file doesn't seem to have access to block.settings. The documentation mentions that variables are encapsulated, but I assumed that block.settings was in the global scope. Does anyone know anything about this?

[Ross-Angus]

Here's my solution, if it's useful to anyone. Originally, in my section file, I had the following (inside a for block):

{% when 'home-introduction' %} {% include 'home-introduction' %}

The block.settings object would be in scope in the include file. However, when you use render, you need to explicitly pass this through:

{% when 'home-introduction' %} {% assign config = block.settings %} {% render 'home-introduction', config: config %}

Then, within the included liquid file, you could access the block.settings object like this: {{ config.mini_faq_title }}

[dan-gamble]

@Ross-Angus you could just do {% render 'home-introduction', config: block.settings %}

What you describe is true and the purpose of it. Nothing can leak into and out of a render block. You can pass in variables though as you have done