Icons with text issue
Hello,
To quickly describe my problem i wonder how i can have a fourth icon with text inside the icon with text section on my product page.
my product page: https://r1vex.myshopify.com/products/emil-randig-strandstol-taupe
I'm trying to recreate a similar "icon with text" section on my product page to this one:
And currently mine looks like this:
The problem i have is not how to align the text right now but how to add another text with icon, because you can only have 3 by default.
I have tried changing the code inside "icon-with-text.liquid" to this but it didn't work:
{% 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 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 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
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">
{{- 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">
{{- 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">
{{- 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">
{{- block.settings.heading_4 -}}
</span>
</li>
{%- endunless -%}
</ul>
Thanks for helping!
@manbru, add this code to the end of base.css file
product-info .icon-with-text {
display: grid!important;
grid-template-columns: 1fr 1fr!important;
}
Result:
@manbru , In main-product.liquid file search for the text "icon-with-text"
You will see like this
In settings section add this code into the position like i mark below
The code
{
"type": "select",
"id": "icon_4",
"options": [
{
"value": "none",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
},
{
"value": "apple",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
},
{
"value": "banana",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label"
},
{
"value": "bottle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label"
},
{
"value": "box",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
},
{
"value": "carrot",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label"
},
{
"value": "chat_bubble",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
},
{
"value": "check_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
},
{
"value": "clipboard",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label"
},
{
"value": "dairy",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label"
},
{
"value": "dairy_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label"
},
{
"value": "dryer",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label"
},
{
"value": "eye",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
},
{
"value": "fire",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label"
},
{
"value": "gluten_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label"
},
{
"value": "heart",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
},
{
"value": "iron",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label"
},
{
"value": "leaf",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label"
},
{
"value": "leather",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label"
},
{
"value": "lightning_bolt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label"
},
{
"value": "lipstick",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label"
},
{
"value": "lock",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label"
},
{
"value": "map_pin",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label"
},
{
"value": "nut_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label"
},
{
"value": "pants",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__25.label"
},
{
"value": "paw_print",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__26.label"
},
{
"value": "pepper",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__27.label"
},
{
"value": "perfume",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__28.label"
},
{
"value": "plane",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__29.label"
},
{
"value": "plant",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__30.label"
},
{
"value": "price_tag",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__31.label"
},
{
"value": "question_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__32.label"
},
{
"value": "recycle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__33.label"
},
{
"value": "return",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__34.label"
},
{
"value": "ruler",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__35.label"
},
{
"value": "serving_dish",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__36.label"
},
{
"value": "shirt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__37.label"
},
{
"value": "shoe",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__38.label"
},
{
"value": "silhouette",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__39.label"
},
{
"value": "snowflake",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__40.label"
},
{
"value": "star",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__41.label"
},
{
"value": "stopwatch",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__42.label"
},
{
"value": "truck",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label"
},
{
"value": "washing",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label"
}
],
"default": "return",
"label": "t:sections.main-product.blocks.icon_with_text.settings.icon_1.label"
},
{
"type": "image_picker",
"id": "image_4",
"label": "t:sections.main-product.blocks.icon_with_text.settings.image_1.label"
},
{
"type": "inline_richtext",
"id": "heading_4",
"default": "t:sections.main-product.blocks.icon_with_text.settings.heading_1.default",
"label": "t:sections.main-product.blocks.icon_with_text.settings.heading_1.label",
"info": "t:sections.main-product.blocks.icon_with_text.settings.heading.info"
}
I added the code as you said here:
But it gives me this:
Sorry, please add a comma (",") right after this before you add my code
Community Blog Articles
The 9 Questions You Need To Answer When Starting a B2B Store
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024
Get ready for peak holiday selling season 2024
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
Highlights | Top Contributors August '24
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024