Dawn 12.0.0 - Icon-with-text - adding 5th icon with text

Dawn 12.0.0 - Icon-with-text - adding 5th icon with text

xnyjyh
Trailblazer
390 0 45

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>
Replies 3 (3)

Sweans
Shopify Partner
429 89 126

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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

xnyjyh
Trailblazer
390 0 45

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

xnyjyh
Trailblazer
390 0 45

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"
            }
          }
        }
      },