Shopify themes, liquid, logos, and UX
By default i can only add 3 icons with text, but I have already added a 4th one, but don't remember how I did it. Now I'm trying to add a 5th icon with text. This is the code witch I'm very sure its correct... but I'm sure I add something else somewhere else too but cant remember or find where I added for the new icons with text. can someone help me please!? Thanks - code below...
{% 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 heading_4_empty = false assign heading_5_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 block.settings.heading_4 == empty assign heading_4_empty = true endif if block.settings.heading_5 == empty assign heading_5_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 elsif heading_4_empty == false and block.settings.icon_4 != 'none' or block.settings.image_4 != null assign text_only_all_items = false elsif heading_5_empty == false and block.settings.icon_5 != 'none' or block.settings.image_5 != null assign text_only_all_items = false endif -%} <ul class="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 -%} <li class="icon-with-text__item"> {%- 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 -%} <span class="h4 inline-richtext" style="font-size:14px!important;font-weight:400!important;color:black!important;"> {{- block.settings.heading_1 -}} </span> </li> {%- endunless -%} {%- unless heading_2_empty -%} <li class="icon-with-text__item"> {%- 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 -%} <span class="h4 inline-richtext" style="font-size:14px!important;font-weight:400!important;color:black!important;"> {{- block.settings.heading_2 -}} </span> </li> {%- endunless -%} {%- unless heading_3_empty -%} <li class="icon-with-text__item"> {%- 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 -%} <span class="h4 inline-richtext" style="font-size:14px!important;font-weight:400!important;color:black!important;"> {{- block.settings.heading_3 -}} </span> </li> {%- endunless -%} {%- unless heading_4_empty -%} <li class="icon-with-text__item"> {%- if block.settings.image_4 == null -%} {% render 'icon-accordion', icon: block.settings.icon_4 -%} {%- else -%} <img src="{{ block.settings.image_4 | image_url }}" {% if block.settings.image_4.alt != blank %} alt="{{ block.settings.image_4.alt | escape }}" {% else %} role="presentation" {% endif %} height="auto" width="auto" loading="lazy" > {%- endif -%} <span class="h4 inline-richtext" style="font-size:14px!important;font-weight:400!important;color:black!important;"> {{- block.settings.heading_4 -}} </span> </li> {%- endunless -%} {%- unless heading_5_empty -%} <li class="icon-with-text__item"> {%- if block.settings.image_5 == null -%} {% render 'icon-accordion', icon: block.settings.icon_5 -%} {%- else -%} <img src="{{ block.settings.image_5 | image_url }}" {% if block.settings.image_5.alt != blank %} alt="{{ block.settings.image_5.alt | escape }}" {% else %} role="presentation" {% endif %} height="auto" width="auto" loading="lazy" > {%- endif -%} <span class="h4 inline-richtext" style="font-size:14px!important;font-weight:400!important;color:black!important;"> {{- block.settings.heading_5 -}} </span> </li> {%- endunless -%} </ul>
Hi @xnyjyh,
If the fifth icon isn't appearing, it's likely due to a limitation in the theme's settings schema, where the number of allowed blocks is still set to four.
1. Theme Schema (schema section in theme files)
In your theme file (likely in the sections or templates folder), there is a schema that defines how many blocks you can add. Look for the section where blocks are defined, and increase the number of blocks allowed.
Example:
{
"name": "Icon with text",
"settings": [
{
"type": "text",
"id": "heading_1",
"label": "Heading 1"
},
{
"type": "icon",
"id": "icon_1",
"label": "Icon 1"
},
...
{
"type": "text",
"id": "heading_5",
"label": "Heading 5"
},
{
"type": "icon",
"id": "icon_5",
"label": "Icon 5"
}
],
"blocks": [
{
"type": "block",
"name": "Icon with Text Block",
"settings": [
{
"type": "text",
"id": "heading_1",
"label": "Heading 1"
},
...
]
}
],
"presets": [
{
"name": "Default",
"category": "Custom",
"blocks": [
{
"type": "block",
"name": "Icon with Text Block",
"settings": [
...
]
},
{
"type": "block",
"name": "Icon with Text Block",
"settings": [
...
]
},
...
]
}
]
}
If your schema only defines four blocks or limits the total number of icons (through block limits), increase that number.
2. Check the section or block template in theme.liquid
Verify whether any hardcoded limit on the number of blocks exists in your template or block logic. Sometimes, the blocks are restricted in both the theme and the section.
If you can confirm the schema allows five blocks, the icon and heading should display. Let me know if you need more guidance in locating the schema file or adjusting its settings!
I hope this helps! If it does, please like it and mark it as a solution!
If you need further assistance, feel free to reach out!
Regards,
Sweans
no schema ion templaes, and nothign like that in thme.liquid. remember that I'm using dawn 12.0.0, completely different than newerer dan themes
this is the en.default.schema.json, but i already changed that too and still not showing... see code below:
"icon_with_text": {
"name": "Icon with text",
"settings": {
"layout": {
"label": "Layout",
"options__1": {
"label": "Horizontal"
},
"options__2": {
"label": "Vertical"
}
},
"content": {
"label": "Content",
"info": "Choose an icon or add an image for each column or row."
},
"heading": {
"info": "Leave the heading label blank to hide the icon column."
},
"icon_1": {
"label": "First icon"
},
"image_1": {
"label": "First image"
},
"heading_1": {
"label": "First heading"
},
"icon_2": {
"label": "Second icon"
},
"image_2": {
"label": "Second image"
},
"heading_2": {
"label": "Second heading"
},
"icon_3": {
"label": "Third icon"
},
"image_3": {
"label": "Third image"
},
"heading_3": {
"label": "Third heading"
},
"icon_4": {
"label": "Forth icon"
},
"image_4": {
"label": "Forth image"
},
"heading_4": {
"label": "Forth heading"
},
"icon_5": {
"label": "Fifth icon"
},
"image_5": {
"label": "Fifth image"
},
"heading_5": {
"label": "Fifth heading"
}
}
}
},
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025