How to: Basic multi-column format for clickable images

Technical Q&A

Topic summary

A user seeks to create a custom multi-column section in Shopify’s Dawn theme featuring clickable images with labels, without the default hyperlink arrow. They want flexibility to display 4-6 columns in a single row across different pages.

Initial Request:

  • Clickable images with labels
  • Optional hyperlinks on both elements
  • Reusable section supporting 4-6 columns without line breaks

Solution Provided:
A community member shared CSS code to control column width:

.grid--2-col-tablet .grid__item {
    width: calc(20% - .5rem);
}

To be added to base.scss.liquid.

Implementation Steps:

  1. Duplicated Dawn’s default multicolumn section
  2. Modified CSS for 3-column tablet format (30% width)
  3. Hard-coded a 3-column mobile variant option

Remaining Issue:
On mobile, the first 4 columns display correctly, but the final 2 images on the second line appear oversized. The user requests guidance on maintaining consistent image sizing across all columns.

A video tutorial was subsequently shared addressing the implementation approach.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hi gurus!

Feels like an easy ask..

I’m trying to create a new section in Dawn theme - a muilticolumn to achieve the attached mockup:

  • image

  • label

  • optional hyperlink on both the image and the label (but without the lame Dawn theme hyperlink arrow)

I’m already using the out of the box multicolumn successfully elsewhere so I think it needs to be a new section(?).

And I’d like to reuse this new multicolumn elsewhere with only 4 or 5 columns, but all in one row without a break.

What do you think - is it doable?

Thanks for your help! ; )

Rob.

1 Like
2

@Rokel
Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

3

@Rokel ,

Share the store URL.

4

https://cqhtnzwnujpe34ch-40051409050.shopifypreview.com

Thank you!

5

https://cqhtnzwnujpe34ch-40051409050.shopifypreview.com

Select Custom bespoke from the main nav - thanks! :+1:

6

@Rokel ,

Have you added the multicolumn?

7

@Rokel ,

If you in 5 in a row

.grid--2-col-tablet .grid__item {
    width: calc(20% - .5rem);
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

1 Like
8

Thank you so much!

Check out my step list below and with your css it seems to render a tidy result for 2 column and 3 column display. 1 column is a screw-up though and I’d love to tidy that up for a fully reusable section component > screen share here:

https://9czp4gy52xzj9eow-40051409050.shopifypreview.com

The mobile display tries the 6 column desktop format which is fine - I like this. The first 4 columns look great. But why do the final two images blow up big on the second line? How do we have the same small image size as the others? I tried mucking around with the image size and haven’t been able to work it out.

So here’s what I did:

  1. I copied the default Dawn theme multicolumn and adapted it for the multicolumn banner section I want (code pasted below). I named it Multicolumn banner (there’s prob a better naming convention but all I could think of.).

  2. I pasted your css code into base.css as a 3 column format to cope with my 6 column desktop format as follows:

.grid–3-col-tablet .grid__item {
width: calc(30% - .5rem);
}

  1. I hard coded a 3 column variant in the multicolumn admin where you choose the number of columns for mobile format, as follows. This picks up the css 3 column variant:

“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”
},
{
“value”: “3”,
“label”: “3 columns”
}
],
“default”: “1”,
“label”: “t:sections.multicolumn.settings.columns_mobile.label”
},

And that seems to render a tidy result for 2 column and 3 column display. 1 column is a screw-up though. The mobile display tries the 6 column desktop format which is fine - I like this. The first 4 columns look great. But why do the final two images blow up big on the second line? How do we have the same small image size as the others? I tried mucking around with the image size and haven’t been able to work it out.

Show More

multicolumn-banner.liquid

{{ ‘section-multicolumn-banner.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 | escape }}

{%- 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”: “Multicolumn banner”,
“class”: “section”,
“tag”: “section”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“default”: “Multicolumn”,
“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”
}
],
“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”: “Button label”,
“label”: “t:sections.multicolumn.settings.button_label.label”
},
{
“type”: “url”,
“id”: “button_link”,
“label”: “t:sections.multicolumn.settings.button_link.label”
},
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.label”
},
{
“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”
},
{
“value”: “3”,
“label”: “3 columns”
}
],
“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”: “text”,
“id”: “title”,
“default”: “Column”,
“label”: “t:sections.multicolumn.blocks.column.settings.title.label”
},
{
“type”: “richtext”,
“id”: “text”,
“default”: "

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

",
“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”: “Multicolumn banner”,
“blocks”: [
{
“type”: “column”
},
{
“type”: “column”
},
{
“type”: “column”
},
{
“type”: “column”
}
]
}
]
}
{% endschema %}

9

Hi @Rokel ,

I provided a video tutorial to handle this problem like a developer will do. Please follow the instructions in the video.

3 Likes
10

This was really helpful! Thank you so much :slightly_smiling_face: