How to: Basic multi-column format for clickable images

[Rokel]

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.

[Zworthkey]

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

[Rokel]

https://cqhtnzwnujpe34ch-40051409050.shopifypreview.com

Thank you!

[oscprofessional]

@Rokel ,

Have you added the multicolumn?

[oscprofessional]

@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

[Rokel]

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);
}

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

Click to expand...

multicolumn-banner.liquid

{{ 'section-multicolumn-banner.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>

{%- 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
-%}

<div class="multicolumn color-{{ section.settings.color_scheme }} gradient{% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background-{{ section.settings.background_style }}{% endunless %}{% if section.settings.title == blank %} no-heading{% endif %}">
<div class="page-width section-{{ section.id }}-padding isolate">
{%- unless section.settings.title == blank -%}
<div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin">
<h2 class="title {{ section.settings.heading_size }}">
{{ section.settings.title | escape }}
</h2>
{%- if section.settings.button_label != blank and show_mobile_slider -%}
<a href="{{ section.settings.button_link }}" class="link underlined-link large-up-hide">{{ section.settings.button_label | escape }}</a>
{%- endif -%}
</div>
{%- endunless -%}
<slider-component class="slider-mobile-gutter">
<ul class="multicolumn-list contains-content-container grid grid--{{ section.settings.columns_mobile }}-col-tablet{% if section.settings.columns_desktop == 1 %} grid--full-width{% else %} grid--{{ section.settings.columns_desktop }}-col-desktop{% endif %}{% if show_mobile_slider %} slider slider--mobile grid--peek{% endif %}"
id="Slider-{{ section.id }}"
role="list"
>
{%- 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 -%}
<li id="Slide-{{ section.id }}-{{ forloop.index }}" class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}" {{ block.shopify_attributes }}>
<div class="multicolumn-card content-container">
{%- if block.settings.image != blank -%}
{% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %}
{% assign spaced_image = true %}
{% endif %}
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}">
{% endif %}
<div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
<div class="media media--transparent media--{{ section.settings.image_ratio }}"
{% if section.settings.image_ratio == 'adapt' %}
style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 10 }}%;" /*changed times: 100 to times: 10/*
{% endif %}>
<img
class="multicolumn-card__image"
srcset="{%- if block.settings.image.width >= 275 -%}{{ block.settings.image | image_url: width: 275 }} 275w,{%- endif -%}
{%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
{%- if block.settings.image.width >= 710 -%}{{ block.settings.image | image_url: width: 710 }} 710w,{%- endif -%}
{%- if block.settings.image.width >= 1420 -%}{{ block.settings.image | image_url: width: 1420 }} 1420w,{%- endif -%}
{{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
src="{{ block.settings.image | image_url: width: 550 }}"
sizes="(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %},
(min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %},
calc(100vw - 30px)"
alt="{{ block.settings.image.alt }}"
height="{{ block.settings.image.height }}"
width="{{ block.settings.image.width }}"
loading="lazy"
>
</div>
</div>
{% if block.settings.link != blank %}
</a>
{% endif %}
{%- endif -%}
<div class="multicolumn-card__info">
{%- if block.settings.title != blank -%}
{% if block.settings.link != blank %}
<a class="link animate-arrow" href="{{ block.settings.link }}">
{% endif %}
<h3>{{ block.settings.title | escape }}</h3>
{% if block.settings.link != blank %}
</a>
{% endif %}
{%- endif -%}
{%- if block.settings.text != blank -%}
<div class="rte">{{ block.settings.text }}</div>
{%- endif -%}
{%- if block.settings.link != blank -%}
<a class="link animate-arrow" {% if block.settings.link == blank %}role="link" aria-disabled="true"{% else %}href="{{ block.settings.link }}"{% endif %}>{{ block.settings.link_label | escape }}</a>
{% else %}
<h4>{{ block.settings.link_label | escape }}</h4>
{%- endif -%}
</div>
</div>
</li>
{%- endfor -%}
</ul>

{%- if show_mobile_slider -%}
<div class="slider-buttons no-js-hidden medium-hide">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ section.blocks.size }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
<div class="center{% if show_mobile_slider %} small-hide medium-hide{% endif %}">
{%- if section.settings.button_label != blank -%}
<a class="button button--primary"{% if section.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ section.settings.button_link }}"{% endif %}>
{{ section.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
</div>
</div>

{% 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": "<p>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.</p>",
"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 %}

[made4Uo]

Hi @Rokel,

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

[oscprofessional]

@Rokel ,

Share the store URL.

[Rokel]

https://cqhtnzwnujpe34ch-40051409050.shopifypreview.com

Select Custom bespoke from the main nav - thanks! 👍