How to use a variable name inside of liquid shortcode to render a section file in a template file for Shopify?

Question

Objective:

I want to render a Shopify section inside of a template using a variable as the section file's name. i.e.

Example

Template: templates/parent.liquid

Section: sections/child.liquid

Attempting to render (include) child.liquid inside parent.liquid when variableName = 'child'

context: *child* could be anything -- in my theme's specific use case, I'm assigning variableName = page.handle. If page.handle matches an existing product vendor AND sections/[page.handle].liquid exists, I am includuing it in the page.

WHY? I want to avoid a hardcoded list of available section-files in lieu if this proposed progammatic approach of dynamic filenames derived from the current page.

The following code would go inside templates/parent.liquid

this works (hardcoded quoted strings):

BUT, I want to avoid hard-coded filenames at all costs.

{% section 'child' %}

these all throw an error (any form of dynamic filename):

{% section variableName %}

{% section {{ variableName }} %}

{% section 'variableName' %}

{% section "'" + variableName + "'" %}

{% section variableName %}

{% section "{{ variableName }}" %}

{% section [variableName] %}

edit more errors

{% render variableName %} Syntax error in tag 'render' - Template name must be a quoted string

{% include variableName %} look for a snippet, not a section

{% include sections.variableName %} Liquid error: Argument error in tag 'include' - Illegal template name

{% include sections.[variableName] %} Liquid error: Argument error in tag 'include' - Illegal template name

Research The closest article I've found via Google is https://community.shopify.com/c/Shopify-Design/Dynamic-Liquid-Variable-inside-Liquid-tag/td-p/162451

Pseudo Answer I'm searching for a working solution along the lines of:

{% include sections.[page.handle] %}

Charles C. Charles C. · Accepted Answer · 2021-04-15T17:43:44

Use include or render

passing variable to section is not possible

Question asked here

Document

Variables created outside sections are not available within sections. Likewise, variables created in sections are not available outside sections. If a section includes a snippet, the snippet has access to the variables in the section.

using variable as a filename will not work for render. It only works for include

For Example

 {% assign fileName = "product-" | append: product.handle %}
 {% capture productLinkContent %}
   {% include fileName %}
 {% endcapture %}
 
 {% unless productLinkContent contains "Liquid error: Could not find asset " %}
     {% include fileName %}
     
 {% else %}
     do something else
 {% endunless %}

so, In your template/parent.liquid call {% section 'parent-template' %}

and in parent-template.liquid use include like above.

The reason is that you need to make sure that the section files exist so that it does not break shopify customizer, and there is no way to check that using liquid code right now.

Here is another solution if you really want to stick with the variable solution, is that you pass the file with if-else / case - when statement;

 {% assign fileName = "product-" | append: product.handle %}
 
 {% case fileName %}
 {% when 'product-a' %}
  {% section 'product-a' %}
  {% when 'product-b' %}
  {% section 'product-b' %}
  {% else %}
  do something else
 {% endcase %}

How to use a variable name inside of liquid shortcode to render a section file in a template file for Shopify?

1 Answers