# How to: Basic multi-column format for clickable images

**URL:** <https://community.shopify.com/t/how-to-basic-multi-column-format-for-clickable-images/114709>\
**Category:** Technical Q&A\
**Created:** [April 18, 2022, 3:26am UTC](https://community.shopify.com/t/how-to-basic-multi-column-format-for-clickable-images/114709 "2022-04-18T03:26:13Z")\
**Posts on this page:** 10\
**Page:** 1

## AI-generated 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.

<div class="post-metadata">

**Author:** ![Rokel](https://avatars.discourse-cdn.com/v4/letter/r/b487fb/32.png) [@Rokel](https://community.shopify.com/u/Rokel)\
**Post date:** [April 18, 2022, 3:26am UTC](https://community.shopify.com/t/how-to-basic-multi-column-format-for-clickable-images/114709/1 "2022-04-18T03:26:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Zworthkey](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/zworthkey/32/261275_2.png) [@Zworthkey](https://community.shopify.com/u/Zworthkey)\
**Post date:** [April 18, 2022, 5:00am UTC](https://community.shopify.com/t/how-to-basic-multi-column-format-for-clickable-images/114709/2 "2022-04-18T05:00:04Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![oscprofessional](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/oscprofessional/32/367832_2.png) [@oscprofessional](https://community.shopify.com/u/oscprofessional)\
**Post date:** [April 18, 2022, 5:00am UTC](https://community.shopify.com/t/how-to-basic-multi-column-format-for-clickable-images/114709/3 "2022-04-18T05:00:14Z")

</div>

@Rokel ,

Share the store URL.

---

<div class="post-metadata">

**Author:** ![Rokel](https://avatars.discourse-cdn.com/v4/letter/r/b487fb/32.png) [@Rokel](https://community.shopify.com/u/Rokel)\
**Post date:** [April 18, 2022, 5:01am UTC](https://community.shopify.com/t/how-to-basic-multi-column-format-for-clickable-images/114709/4 "2022-04-18T05:01:43Z")

</div>

[https://cqhtnzwnujpe34ch-40051409050.shopifypreview.com](https://cqhtnzwnujpe34ch-40051409050.shopifypreview.com)

Thank you!

---

<div class="post-metadata">

**Author:** ![Rokel](https://avatars.discourse-cdn.com/v4/letter/r/b487fb/32.png) [@Rokel](https://community.shopify.com/u/Rokel)\
**Post date:** [April 18, 2022, 5:03am UTC](https://community.shopify.com/t/how-to-basic-multi-column-format-for-clickable-images/114709/5 "2022-04-18T05:03:36Z")

</div>

[https://cqhtnzwnujpe34ch-40051409050.shopifypreview.com](https://cqhtnzwnujpe34ch-40051409050.shopifypreview.com)

Select Custom bespoke from the main nav - thanks! 👍

---

<div class="post-metadata">

**Author:** ![oscprofessional](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/oscprofessional/32/367832_2.png) [@oscprofessional](https://community.shopify.com/u/oscprofessional)\
**Post date:** [April 18, 2022, 5:04am UTC](https://community.shopify.com/t/how-to-basic-multi-column-format-for-clickable-images/114709/6 "2022-04-18T05:04:17Z")

</div>

@Rokel ,

Have you added the multicolumn?

---

<div class="post-metadata">

**Author:** ![oscprofessional](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/oscprofessional/32/367832_2.png) [@oscprofessional](https://community.shopify.com/u/oscprofessional)\
**Post date:** [April 18, 2022, 5:11am UTC](https://community.shopify.com/t/how-to-basic-multi-column-format-for-clickable-images/114709/7 "2022-04-18T05:11:57Z")

</div>

@Rokel ,

If you in 5 in a row

```markup
.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

---

<div class="post-metadata">

**Author:** ![Rokel](https://avatars.discourse-cdn.com/v4/letter/r/b487fb/32.png) [@Rokel](https://community.shopify.com/u/Rokel)\
**Post date:** [April 19, 2022, 11:45pm UTC](https://community.shopify.com/t/how-to-basic-multi-column-format-for-clickable-images/114709/8 "2022-04-19T23:45:31Z")

</div>

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](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 %}

---

<div class="post-metadata">

**Author:** ![made4Uo](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/made4uo/32/269231_2.png) [@made4Uo](https://community.shopify.com/u/made4Uo)\
**Post date:** [May 27, 2022, 10:04pm UTC](https://community.shopify.com/t/how-to-basic-multi-column-format-for-clickable-images/114709/9 "2022-05-27T22:04:23Z")

</div>

Hi @Rokel ,

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

[![](https://canada1.discourse-cdn.com/shopifyforum/original/4X/3/0/b/30b72195b5d37319919bcf2f38bbf0bd87bf6f73.jpeg "How to Add a Link in Image or Text in Shopify - NO APP") ](https://www.youtube.com/watch?v=6Jc3bmvI49Q)

---

<div class="post-metadata">

**Author:** ![essencevbs](https://avatars.discourse-cdn.com/v4/letter/e/71c47a/32.png) [@essencevbs](https://community.shopify.com/u/essencevbs)\
**Post date:** [October 7, 2025, 5:48am UTC](https://community.shopify.com/t/how-to-basic-multi-column-format-for-clickable-images/114709/10 "2025-10-07T05:48:26Z")

</div>

This was really helpful! Thank you so much 🙂