Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Render element by x times

Solved

How can I render a font icon multiple times in Liquid?

navster
Visitor
2 0 0

Hi,

 

I'm trying to do something quite simple, well, I think it's simple, but struggling!

 

I am making a rating system where I am using a font awesome icon. All I want to do is pass a given number, say 3, to then render out that icon out 3 times.

 

My usual attack would be to do new Array(3) then iterate over it. But I can't seem to find a way to do this in Liquid.

 

Any ideas?

 

Many thanks.

Accepted Solution (1)

m_waqas
Shopify Partner
170 37 52

This is an accepted solution.

Hi @navster, I assume you want to iterate using loops, please have a look at the following code.

{% for i in (1..5) %}
<!-- Your code will be here -->
{% endfor %}

Or if want to use an array, check the following example code

{% assign array = [1,2,3] %}
{% for item in array %}
  {{ item }}
{% endfor %}
- Was my reply helpful? Click Like and Accept as Solution
- Want to implement a custom solution? Feel free to contact me at waqas4346@gmail.com

View solution in original post

Replies 3 (3)

m_waqas
Shopify Partner
170 37 52

This is an accepted solution.

Hi @navster, I assume you want to iterate using loops, please have a look at the following code.

{% for i in (1..5) %}
<!-- Your code will be here -->
{% endfor %}

Or if want to use an array, check the following example code

{% assign array = [1,2,3] %}
{% for item in array %}
  {{ item }}
{% endfor %}
- Was my reply helpful? Click Like and Accept as Solution
- Want to implement a custom solution? Feel free to contact me at waqas4346@gmail.com
navster
Visitor
2 0 0

Ahh that's spot on mate - thank you! I was not aware of the 1..x syntax.

 

Thanks again 🙂

qjames
Shopify Partner
10 0 9

Here is a succinct way to render snippets (which could contain icons) iteratively: 

 

 

 

{%- liquid
  assign upsells = section.blocks | where: 'type', 'upsell'
  render 'block-product-upsell' for upsells as upsell
-%}