Creating a image grid on product page

Store Design
,
1

Hello guys,

I am currently using the dawn theme and I got a question. Does anyone know, how I can create an image grid like the one from the screenshot?

It should be a grid with 4 images - the text should be on the image. Also, it should adjust in the mobile version displaying 2 grids on a row.

Thanks in advance

Ercooo_0-1725906627885.png
Ercooo_0-1725906627885.png1853×659 232 KB

2

Hello

Screenshot 2024-09-09 214215.png
Screenshot 2024-09-09 214215.png2796×1420 461 KB

, the most suitable section is Multicolumn, where you can set the number of images on the desktop and set the number of images on the mobile, the only thing is that the text will not be on the picture. Only Editing the section code will help transfer the text to the picture.

3

Thank you for the idea! Is there any way to make that image clickable when using multicolumns?

4

Hi @Ercooo

Yes, this is doable. Add the collection list and I’ll provide the code for you. This is the collection list look like.

Made4uoRibe_0-1725927222844.png
Made4uoRibe_0-1725927222844.png1208×666 55.8 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Hi @Ercooo ,

This is possible, you just need to add a section and send me the code of multicolumn.liquid file, I will check and add it for you

6

This is the code of my multicolumn:

{{ ‘section-multicolumn.css’ | asset_url | stylesheet_tag }}
{{ ‘component-slider.css’ | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- liquid
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
assign show_mobile_slider = true
endif
-%}

{%- unless section.settings.title == blank -%}

{{ section.settings.title }}

{%- if section.settings.button_label != blank and show_mobile_slider -%} {{- section.settings.button_label | escape -}} {%- endif -%}
{%- endunless -%}
    {%- liquid assign highest_ratio = 0 for block in section.blocks if block.settings.image.aspect_ratio > highest_ratio assign highest_ratio = block.settings.image.aspect_ratio endif endfor -%} {%- for block in section.blocks -%} {%- assign empty_column = '' -%} {%- if block.settings.image == blank and block.settings.title == blank and block.settings.text == blank and block.settings.link_label == blank -%} {%- assign empty_column = ' multicolumn-list__item--empty' -%} {%- endif -%}
  • {%- if block.settings.image != blank -%} {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %} {% assign spaced_image = true %} {% endif %}
    {%- liquid assign number_of_columns = section.settings.columns_desktop assign number_of_columns_mobile = section.settings.columns_mobile assign grid_space_desktop = number_of_columns | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px' assign grid_space_tablet = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px' assign grid_space_mobile = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | divided_by: 2 | plus: 30 | append: 'px' if section.settings.image_width == 'half' assign image_width = 0.5 elsif section.settings.image_width == 'third' assign image_width = 0.33 else assign image_width = 1 endif -%} {% capture sizes %} (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}), (min-width: 990px) calc((100vw - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}), (min-width: 750px) calc((100vw - {{ grid_space_tablet }}) * {{ image_width }} / {{ number_of_columns_mobile }}), calc((100vw - {{ grid_space_mobile }}) * {{ image_width }} / {{ number_of_columns_mobile }}) {% endcapture %} {{ block.settings.image | image_url: width: 3200 | image_tag: widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200', sizes: sizes, class: 'multicolumn-card__image' }}
    {%- endif -%}
    {%- if block.settings.title != blank -%}

    {{ block.settings.title }}

    {%- endif -%} {%- if block.settings.text != blank -%}
    {{ block.settings.text }}
    {%- endif -%} {%- if block.settings.link_label != blank -%} {{- block.settings.link_label | escape -}}  {% render 'icon-arrow' %} {%- endif -%}
    • {%- endfor -%}

{%- if show_mobile_slider -%}

{% render 'icon-caret' %}
1 / {{ 'general.slider.of' | t }} {{ section.blocks.size }}
{% render 'icon-caret' %}
{%- endif -%}
{%- if section.settings.button_label != blank -%} {{ section.settings.button_label | escape }} {%- endif -%}

{% schema %}
{
“name”: “t:sections.multicolumn.name”,
“class”: “section”,
“tag”: “section”,
“disabled_on”: {
“groups”: [“header”, “footer”]
},
“settings”: [
{
“type”: “inline_richtext”,
“id”: “title”,
“default”: “t:sections.multicolumn.settings.title.default”,
“label”: “t:sections.multicolumn.settings.title.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
},
{
“value”: “hxl”,
“label”: “t:sections.all.heading_size.options__4.label”
},
{
“value”: “hxxl”,
“label”: “t:sections.all.heading_size.options__5.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
},
{
“type”: “select”,
“id”: “image_width”,
“options”: [
{
“value”: “third”,
“label”: “t:sections.multicolumn.settings.image_width.options__1.label”
},
{
“value”: “half”,
“label”: “t:sections.multicolumn.settings.image_width.options__2.label”
},
{
“value”: “full”,
“label”: “t:sections.multicolumn.settings.image_width.options__3.label”
}
],
“default”: “full”,
“label”: “t:sections.multicolumn.settings.image_width.label”
},
{
“type”: “select”,
“id”: “image_ratio”,
“options”: [
{
“value”: “adapt”,
“label”: “t:sections.multicolumn.settings.image_ratio.options__1.label”
},
{
“value”: “portrait”,
“label”: “t:sections.multicolumn.settings.image_ratio.options__2.label”
},
{
“value”: “square”,
“label”: “t:sections.multicolumn.settings.image_ratio.options__3.label”
},
{
“value”: “circle”,
“label”: “t:sections.multicolumn.settings.image_ratio.options__4.label”
}
],
“default”: “adapt”,
“label”: “t:sections.multicolumn.settings.image_ratio.label”
},
{
“type”: “range”,
“id”: “columns_desktop”,
“min”: 1,
“max”: 6,
“step”: 1,
“default”: 3,
“label”: “t:sections.multicolumn.settings.columns_desktop.label”
},
{
“type”: “select”,
“id”: “column_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.multicolumn.settings.column_alignment.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.multicolumn.settings.column_alignment.options__2.label”
}
],
“default”: “left”,
“label”: “t:sections.multicolumn.settings.column_alignment.label”
},
{
“type”: “select”,
“id”: “background_style”,
“options”: [
{
“value”: “none”,
“label”: “t:sections.multicolumn.settings.background_style.options__1.label”
},
{
“value”: “primary”,
“label”: “t:sections.multicolumn.settings.background_style.options__2.label”
}
],
“default”: “primary”,
“label”: “t:sections.multicolumn.settings.background_style.label”
},
{
“type”: “text”,
“id”: “button_label”,
“default”: “t:sections.multicolumn.settings.button_label.default”,
“label”: “t:sections.multicolumn.settings.button_label.label”
},
{
“type”: “url”,
“id”: “button_link”,
“label”: “t:sections.multicolumn.settings.button_link.label”
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “scheme-1”
},
{
“type”: “header”,
“content”: “t:sections.multicolumn.settings.header_mobile.content”
},
{
“type”: “select”,
“id”: “columns_mobile”,
“options”: [
{
“value”: “1”,
“label”: “t:sections.multicolumn.settings.columns_mobile.options__1.label”
},
{
“value”: “2”,
“label”: “t:sections.multicolumn.settings.columns_mobile.options__2.label”
}
],
“default”: “1”,
“label”: “t:sections.multicolumn.settings.columns_mobile.label”
},
{
“type”: “checkbox”,
“id”: “swipe_on_mobile”,
“default”: false,
“label”: “t:sections.multicolumn.settings.swipe_on_mobile.label”
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
],
“blocks”: [
{
“type”: “column”,
“name”: “t:sections.multicolumn.blocks.column.name”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.multicolumn.blocks.column.settings.image.label”
},
{
“type”: “inline_richtext”,
“id”: “title”,
“default”: “t:sections.multicolumn.blocks.column.settings.title.default”,
“label”: “t:sections.multicolumn.blocks.column.settings.title.label”
},
{
“type”: “richtext”,
“id”: “text”,
“default”: “t:sections.multicolumn.blocks.column.settings.text.default”,
“label”: “t:sections.multicolumn.blocks.column.settings.text.label”
},
{
“type”: “text”,
“id”: “link_label”,
“label”: “t:sections.multicolumn.blocks.column.settings.link_label.label”
},
{
“type”: “url”,
“id”: “link”,
“label”: “t:sections.multicolumn.blocks.column.settings.link.label”
}
]
}
],
“presets”: [
{
“name”: “t:sections.multicolumn.presets.name”,
“blocks”: [
{
“type”: “column”
},
{
“type”: “column”
},
{
“type”: “column”
}
]
}
]
}
{% endschema %}

7

Hey there,

should I post the collection list code here or just add to my shop?

8

Hi @Ercooo ,

Please change all code:

{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- liquid
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
assign show_mobile_slider = true
endif
-%}

{%- unless section.settings.title == blank -%}

## 
{{ section.settings.title }}

{%- if section.settings.button_label != blank and show_mobile_slider -%}

{{- section.settings.button_label | escape -}}

{%- endif -%}

{%- endunless -%}

{%- if section.settings.button_label != blank -%}

{{ section.settings.button_label | escape }}

{%- endif -%}

{% schema %}
{
"name": "t:sections.multicolumn.name",
"class": "section",
"tag": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"id": "title",
"default": "t:sections.multicolumn.settings.title.default",
"label": "t:sections.multicolumn.settings.title.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
},
{
"value": "hxl",
"label": "t:sections.all.heading_size.options__4.label"
},
{
"value": "hxxl",
"label": "t:sections.all.heading_size.options__5.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "image_width",
"options": [
{
"value": "third",
"label": "t:sections.multicolumn.settings.image_width.options__1.label"
},
{
"value": "half",
"label": "t:sections.multicolumn.settings.image_width.options__2.label"
},
{
"value": "full",
"label": "t:sections.multicolumn.settings.image_width.options__3.label"
}
],
"default": "full",
"label": "t:sections.multicolumn.settings.image_width.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
},
{
"value": "circle",
"label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
}
],
"default": "adapt",
"label": "t:sections.multicolumn.settings.image_ratio.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 6,
"step": 1,
"default": 3,
"label": "t:sections.multicolumn.settings.columns_desktop.label"
},
{
"type": "select",
"id": "column_alignment",
"options": [
{
"value": "left",
"label": "t:sections.multicolumn.settings.column_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.multicolumn.settings.column_alignment.options__2.label"
}
],
"default": "left",
"label": "t:sections.multicolumn.settings.column_alignment.label"
},
{
"type": "select",
"id": "background_style",
"options": [
{
"value": "none",
"label": "t:sections.multicolumn.settings.background_style.options__1.label"
},
{
"value": "primary",
"label": "t:sections.multicolumn.settings.background_style.options__2.label"
}
],
"default": "primary",
"label": "t:sections.multicolumn.settings.background_style.label"
},
{
"type": "text",
"id": "button_label",
"default": "t:sections.multicolumn.settings.button_label.default",
"label": "t:sections.multicolumn.settings.button_label.label"
},
{
"type": "url",
"id": "button_link",
"label": "t:sections.multicolumn.settings.button_link.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.multicolumn.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"options": [
{
"value": "1",
"label": "t:sections.multicolumn.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.multicolumn.settings.columns_mobile.options__2.label"
}
],
"default": "1",
"label": "t:sections.multicolumn.settings.columns_mobile.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "column",
"name": "t:sections.multicolumn.blocks.column.name",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.multicolumn.blocks.column.settings.image.label"
},
{
"type": "inline_richtext",
"id": "title",
"default": "t:sections.multicolumn.blocks.column.settings.title.default",
"label": "t:sections.multicolumn.blocks.column.settings.title.label"
},
{
"type": "richtext",
"id": "text",
"default": "t:sections.multicolumn.blocks.column.settings.text.default",
"label": "t:sections.multicolumn.blocks.column.settings.text.label"
},
{
"type": "text",
"id": "link_label",
"label": "t:sections.multicolumn.blocks.column.settings.link_label.label"
},
{
"type": "url",
"id": "link",
"label": "t:sections.multicolumn.blocks.column.settings.link.label"
}
]
}
],
"presets": [
{
"name": "t:sections.multicolumn.presets.name",
"blocks": [
{
"type": "column"
},
{
"type": "column"
},
{
"type": "column"
}
]
}
]
}
{% endschema %}

now you just need to enter the link, it will work for images too

9

Thanks a lot!!! This worked.

10

Hi @Ercooo ,

If you have any questions, you can contact me directly.
Nice to meet you :blush: