How can I increase the number of icons per row in the Modular theme?

Store Design
,
1

Hello. Does anyone know how to increase the number of icons per row in the icons-row section of the Modular theme? I found the code to increase the number of icons in the section, but it’s still breaking it up into rows of 3. I would like a row of 7 if possible.

Alternately, I could keep this 2-3-2 configuration if I can decrease the padding for the icons and rows. I can’t figure out how to do that in the code either.

Any ideas??

kgpolicy_0-1702600498450.png
kgpolicy_0-1702600498450.png2674×2098 283 KB

2

Hi @kgpolicy

Could you drop your store link to check?

3

Thanks Dan. The icons are just taking up tooooo much real estate as is.

Preview Mode: https://u6ig7mnvmsx82ly1-59927953460.shopifypreview.com

4

To make appear 7 per row, you need to edit your theme file.

5

Thanks. I tried to find the line, but couldn’t. Any ideas?

6

Could you share code of that file to check?

7

Mind telling me how to do that?

8

You can check and change the limit code from 6 to 7 in the file and then add CSS code to change the max width of the icon so it can appear 7 in the row

9

Unfortunately, we’re now miles past my ability and I have no idea how to do that. I looked for a limit code it the sections snippet, but didn’t find one. Other than that, I don’t know where to look.

10

Drop Icon rows code here so I can check it for you

11

{% comment %}
Icons row
{% endcomment %}

{%- liquid
assign background = section.settings.color_icons_bg
assign color = section.settings.color_icons_text
assign alignment = section.settings.alignment
-%}
{%- style -%}
[data-section-id=“{{ section.id }}”] { color: {{ color }}; }
[data-section-id=“{{ section.id }}”] .icons-row__item .icon path { fill: {{ color }}; }
[data-section-id=“{{ section.id }}”] .icons-row–background { background-color: {{ background }}; }
{%- endstyle -%}

{%- for block in section.blocks -%} {%- liquid assign title = block.settings.title assign text = block.settings.text assign image = block.settings.icon_image assign icon = block.settings.icon_name -%}
{%- if image != blank -%}
{%- liquid assign sizes = '200px' assign widths = '45, 60, 90, 120, 180' render 'image' image: image, widths: widths, width: 180, sizes: sizes -%}
{%- elsif icon != blank -%} {%- case icon -%} {%- when 'award' -%} {%- render 'icon-award' -%} {%- when 'basket' -%} {%- render 'icon-basket' -%} {%- when 'ball' -%} {%- render 'icon-ball' -%} {%- when 'calendar' -%} {%- render 'icon-calendar' -%} {%- when 'camera' -%} {%- render 'icon-camera' -%} {%- when 'comment' -%} {%- render 'icon-comment' -%} {%- when 'data' -%} {%- render 'icon-data' -%} {%- when 'dollar' -%} {%- render 'icon-dollar' -%} {%- when 'email' -%} {%- render 'icon-email' -%} {%- when 'eye' -%} {%- render 'icon-eye' -%} {%- when 'fruits' -%} {%- render 'icon-fruits' -%} {%- when 'house' -%} {%- render 'icon-house' -%} {%- when 'lock' -%} {%- render 'icon-lock' -%} {%- when 'money' -%} {%- render 'icon-money' -%} {%- when 'phone' -%} {%- render 'icon-phone' -%} {%- when 'reload' -%} {%- render 'icon-reload' -%} {%- when 'shop' -%} {%- render 'icon-shop' -%} {%- when 'sync' -%} {%- render 'icon-sync' -%} {%- when 'target' -%} {%- render 'icon-target' -%} {%- when 'wallet' -%} {%- render 'icon-wallet' -%}

{%- endcase -%}
{%- else -%}

{{- 'image' | placeholder_svg_tag: 'placeholder-svg-filled' -}}
{%- endif -%}

{%- if title != blank -%}

{{ title }}

{%- endif -%}

{%- if text != blank -%}

{{ text }}

{%- endif -%}
{% endfor %}

{% schema %}
{
“name”: “Icons row”,
“max_blocks”: 9,
“class”: “shopify-section–icons-row icons-row”,
“settings”: [
{
“type”: “header”,
“content”: “Layout”
},
{
“type”: “select”,
“id”: “alignment”,
“label”: “Alignment”,
“default”: “center”,
“options”: [
{ “label”: “Center”, “value”: “center” },
{ “label”: “Left”, “value”: “left” }
]
},
{
“type”: “header”,
“content”: “Colors”
},
{
“type”: “color”,
“id”: “color_icons_bg”,
“label”: “Background”,
“default”: “#fafafa”
},
{
“type”: “color”,
“id”: “color_icons_text”,
“label”: “Text”,
“default”: “#333”
}
],
“blocks”: [
{
“type”: “text”,
“name”: “Item”,
“settings”: [
{
“type”: “select”,
“id”: “icon_name”,
“label”: “Icon”,
“default”: “shop”,
“options”: [
{ “value”: “award”, “label”: “Award” },
{ “value”: “basket”, “label”: “Basket” },
{ “value”: “ball”, “label”: “Ball” },
{ “value”: “calendar”, “label”: “Calendar” },
{ “value”: “camera”, “label”: “Camera” },
{ “value”: “comment”, “label”: “Comment” },
{ “value”: “data”, “label”: “Data” },
{ “value”: “dollar”, “label”: “Dollar” },
{ “value”: “email”, “label”: “Email” },
{ “value”: “eye”, “label”: “Eye” },
{ “value”: “fruits”, “label”: “Fruits” },
{ “value”: “house”, “label”: “House” },
{ “value”: “lock”, “label”: “Lock” },
{ “value”: “money”, “label”: “Money” },
{ “value”: “phone”, “label”: “Phone” },
{ “value”: “reload”, “label”: “Reload” },
{ “value”: “shop”, “label”: “Shop” },
{ “value”: “sync”, “label”: “Sync” },
{ “value”: “target”, “label”: “Target” },
{ “value”: “wallet”, “label”: “Wallet” },
{ “value”: “none”, “label”: “None” }
]
},
{
“type”: “image_picker”,
“id”: “icon_image”,
“label”: “Icon image”,
“info”: “If image set it will override the icon”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Feature”
},
{
“type”: “richtext”,
“id”: “text”,
“label”: “Text”,
“default”: “

Modular is a powerful Shopify theme that will set you apart from the rest with Mosaic, Image with text, and Slideshow sections.

”
}
]
}
],
“presets”: [
{
“name”: “Icons row”,
“category”: “Text”,
“blocks”: [
{
“type”: “text”
},
{
“type”: “text”
},
{
“type”: “text”
}
]
}
],
“disabled_on”: {
“groups”: [“header”]
}
}
{% endschema %}

12

kgpolicy_0-1702610837625.png
kgpolicy_0-1702610837625.png1982×1148 394 KB

13

You can try to find limit code in {% schema %}…{% endschema %} at the bottom of your file.

14

I wish I could find it, but again, we’re MILES past my ability at this point. I know just enough HTML (4!) to be dangerous, so this is really over my head. I looked for a limit code for the row, but all I could find was a limit for the section.

15

Hi Kgpolicy,
I had the the same problem an wonderwise I solved it: Go to theme.css → find .icons-row__item and set width: instead of 33,33% to 20%, if you want 5 rows.
best, Markus