Solved

How to use svg from another snippet in the liquid template

Stevenson
Tourist
3 1 1

So I've gathered some svgs in one liquid snippet file called icons.liquid

 

{%- capture icon1 -%}<svg>...</svg>{%- endcapture -%}
{%- capture icon2 -%}<svg>...</svg>{%- endcapture -%}
{%- capture icon3 -%}<svg>...</svg>{%- endcapture -%}

and now I want to reuse them in another template. How can I do that? If those icons were in the same template I would just reference them with curly brackets e. g. 

{{ icon1 }}

but I don't know how to do that when those are in separate snippet. Is there another way if I can't achieve that with capture?

Thanks in advance for any help!

 

 

Accepted Solution (1)
Stevenson
Tourist
3 1 1

This is an accepted solution.

@Wish-It as I mentioned, I want them to be in one file

 

@Kani suggested by your answer, I found a solution:

I ended up bundling svgs in one svg-icons file using case when

 

{% case svg-icons %}
  {% when 'icon1' %}
    <svg>...</svg>
  {% when 'icon2' %}
    <svg>...</svg>
{% endcase %}

 

And then conditionally rendered them in specific place

 

{% render 'svg-icons' with 'icon1' %}

 

View solution in original post

Replies 5 (5)

Kani
Shopify Partner
468 125 225

Hi @Stevenson 

 

You can pass them to the snippet you want to include.

{%- include 'snippet', Icon: icon1 -%}

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
Stevenson
Tourist
3 1 1

Unfortunately I'm getting the error

include usage is not allowed in this context

Wish-It
Shopify Partner
151 37 41

Put each svg in a separate file under snippets folder and use "render" to show it in anywhere you want

{%- render 'icon-discount' -%}

 

I am founder of WishIt.app, you can create any theme edit task on our app - WishIt.app : Custom CSS / JS and we will do it for you. The first task is FREE!

Don't forget to checkout our reviews on Shopify AppStore.
Kani
Shopify Partner
468 125 225

huh then I think you have to include 'icons.liquid' again for that template you want to use.

You should better separate all icons.

Kani_0-1666169771320.png

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
Stevenson
Tourist
3 1 1

This is an accepted solution.

@Wish-It as I mentioned, I want them to be in one file

 

@Kani suggested by your answer, I found a solution:

I ended up bundling svgs in one svg-icons file using case when

 

{% case svg-icons %}
  {% when 'icon1' %}
    <svg>...</svg>
  {% when 'icon2' %}
    <svg>...</svg>
{% endcase %}

 

And then conditionally rendered them in specific place

 

{% render 'svg-icons' with 'icon1' %}