Hi,
I have an icons with text section on my product page, I’d like it to show trust marks based on the product tags in shopify.
For example, Vegan, Gluten free, Organic, British / European, Refill / Recycle
There are 5 options in total, slashed items above are “or”s
Each of the products has the appropriate tag
On page, there should always be at least three icons with text, with a maximum of 5
The order above is the priority order to show
All items are Vegan, which should always be present
All of the items are Refill or Recycle, one of which should always be present
If there are only two tags present, Vegan and Refill or Recycle, the third available slot should be “free delivery” else it should be replaced with the the other options.
I have icons for each of the icons
Here’s the default icon-with-text.liquid or would i be better with some custom.liquid file?
{% comment %}
Renders icon with text block
Accepts:
- block: {Object} passes in the block information.
Usage:
{% render ‘icon-with-text’,
block: block
%}
{% endcomment %}
{%- liquid
assign heading_1_empty = false
assign heading_2_empty = false
assign heading_3_empty = false
assign text_only_all_items = true
if block.settings.heading_1 == empty
assign heading_1_empty = true
endif
if block.settings.heading_2 == empty
assign heading_2_empty = true
endif
if block.settings.heading_3 == empty
assign heading_3_empty = true
endif
if heading_1_empty == false and block.settings.icon_1 != ‘none’ or block.settings.image_1 != null
assign text_only_all_items = false
elsif heading_2_empty == false and block.settings.icon_2 != ‘none’ or block.settings.image_2 != null
assign text_only_all_items = false
elsif heading_3_empty == false and block.settings.icon_3 != ‘none’ or block.settings.image_3 != null
assign text_only_all_items = false
endif
-%}
<ulclass=“icon-with-text icon-with-text–{{ block.settings.layout }} list-unstyled{% if text_only_all_items %} icon-with-text–text-only{% endif %}”
{{ block.shopify_attributes }}
>
{%- unless heading_1_empty -%}
{%- if block.settings.image_1 == null -%}
{%- render ‘icon-accordion’, icon: block.settings.icon_1 -%}
{%- else -%}
<img
src=“{{ block.settings.image_1 | image_url }}”
{% if block.settings.image_1.alt != blank %}
alt=“{{ block.settings.image_1.alt | escape }}”
{% else %}
role=“presentation”
{% endif %}
height=“auto”
width=“auto”
loading=“lazy”
>
{%- endif -%}
{{- block.settings.heading_1 -}}
{%- endunless -%}
{%- unless heading_2_empty -%}
{%- if block.settings.image_2 == null -%}
{% render ‘icon-accordion’, icon: block.settings.icon_2 -%}
{%- else -%}
<img
src=“{{ block.settings.image_2 | image_url }}”
{% if block.settings.image_2.alt != blank %}
alt=“{{ block.settings.image_2.alt | escape }}”
{% else %}
role=“presentation”
{% endif %}
height=“auto”
width=“auto”
loading=“lazy”
>
{%- endif -%}
{{- block.settings.heading_2 -}}
{%- endunless -%}
{%- unless heading_3_empty -%}
{%- if block.settings.image_3 == null -%}
{% render ‘icon-accordion’, icon: block.settings.icon_3 -%}
{%- else -%}
<img
src=“{{ block.settings.image_3 | image_url }}”
{% if block.settings.image_3.alt != blank %}
alt=“{{ block.settings.image_3.alt | escape }}”
{% else %}
role=“presentation”
{% endif %}
height=“auto”
width=“auto”
loading=“lazy”
>
{%- endif -%}
{{- block.settings.heading_3 -}}
{%- endunless -%}