How can I make images clickable in Dawn 10.0 and remove padding?

[hitideshop]

Hello everyone,

I would like to make my images clickable in multicolumn. Using Dawn 10.0. Also would like to remove the padding around the images so it displays the same as featured collections. Any help is appreciated!

The section I am working on it right at the top here:

https://hitiderecordings.com

[dmwwebartisan]

@hitideshop

Please follow these steps:

• Step 1: Go to Online store > Themes > Actions > Edit code.

• Step 2: Go to sections > multicolumn.liquid and change all the code: https://pastebin.com/tvvm1EQ0

• Step 3: Go to Customize > Multicolumn. https://i.imgur.com/aMu12ba.png

Hope it is clear to you.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

[dmwwebartisan]

@hitideshop

Just paste this into your multicolumn.liquid section, instead of what’s there. Totally works!

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

## 
{{ section.settings.title | escape }}

{%- if section.settings.button_label != blank and section.settings.swipe_on_mobile -%}
{{ section.settings.button_label | escape }}
{%- endif -%}

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

{{ section.settings.button_label | escape }}

{%- endif-%}

{% schema %}
{
"name": "t:sections.multicolumn.name",
"class": "spaced-section spaced-section--full-width",
"tag": "section",
"settings": [
{
"type": "text",
"id": "title",
"default": "Multicolumn",
"label": "t:sections.multicolumn.settings.title.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": "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"
},
{
"value": "secondary",
"label": "t:sections.multicolumn.settings.background_style.options__3.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": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
}
],
"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": "url",
"id": "image_link",
"label": "Image link"
}
]
}
],
"presets": [
{
"name": "t:sections.multicolumn.presets.name",
"blocks": [
{
"type": "column"
},
{
"type": "column"
},
{
"type": "column"
}
]
}
]
}
{% endschema %}

[Made4uo-Ribe]

Hi @hitideshop ,

To achieve this desing you need a developer to write the code you. Or if not you can check this out.

Thanks!

Create a Customizable Clickable Image For Landing Page

I hope it help.

[hitideshop]

Thanks, this works for the link, but the spacing is now very tight for the text below the image. Can you tell me how to match that to the section below in terms of padding? Also I’d like the text below the image to be 16pt. Lastly is it possible to make the link open in a new window? Thank again

[hitideshop]

Also the heading text is now smaller than the section below, and does not seem to be editable anymore within the content block itself. The sections below are set to MEDIUM size

[dmwwebartisan]

@hitideshop

Please find the following herf tag

replace to

[dmwwebartisan]

@hitideshop

Please share screenshots with an explanation of what you want

[dmwwebartisan]

@hitideshop

Please add the following CSS code to your assets/base.css bottom of the file.

#shopify-section-template--16290327527609__009dfc53-7848-4644-b153-971c60ea6f5d  .multicolumn .title {font-size: 4rem !important;}
 #shopify-section-template--16290327527609__009dfc53-7848-4644-b153-971c60ea6f5d .background-none .multicolumn-card__info {padding-top: 22px;}

[hitideshop]

This is perfect. Can you tell me also how to specify the font size of the heading and description for each image? I would like for these to match

[dmwwebartisan]

@hitideshop

open your multicolumn.liquid file and find the following code.

Replace to

Thanks!

[hitideshop]

Thank you! That works perfectly… A couple more things I am looking to do. Since adding the custom code I don’t see option to specify these anymore:

• 4 columns on desktop

• 2 columns on mobile

• Section heading size matching “Featured Collection” below (it currently matches on desktop but it’s larger on mobile)

• Image heading & description text style, size & spacing matching “Featured Collection” below

Thanks very much for your help!