How To Make Collage image clickable- Refresh Theme

Store Design
,
1

I have 3 images in the collage and I want to make each of them link to different collections when I click on each image.

2

Steps: Go to Edit code > search for collage.liquid

change line no. 34-39
update code as below:


{{ block.settings.image | image_url: width: 3000 | image_tag:
  loading: 'lazy',
  sizes: sizes,
  widths: '550, 720, 990, 1100, 1500, 2200, 3000'
}}

Also add schema 277-282

},
{
  "type": "collection",
  "id": "collection",
  "label": "Select Collection"
}

then SAVE the template

on Theme customize go to the college section and then find image blog option find collection like this:

WebDeskSolution_0-1672919719618.png
WebDeskSolution_0-1672919719618.png1910×938 163 KB

and select the collection and save it.

If you find our reply helpful, please hit Like and Mark it as a Solution.

An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

3

You should remove the images you upload to the collage press change then change the product to the collection and press the collection to add, if you don’t understand reach out to me on via hemmytheryor@gmail.com mark as solved if this help out

4

Hi Sam168,

I implemented your code & it is working great apart from one issue. The image with the lnked collection now show the image enlarged outside of the container. So, only part of the image is showing within the container. How can I make the image resize accordingly? It was resizing to fit the container before I added the code, but now it’s not.

Here is my code:

{{ ‘collage.css’ | asset_url | stylesheet_tag }}
{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{{ ‘component-modal-video.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 -%}

{{ section.settings.heading | escape }}

{%- for block in section.blocks -%}
{%- case block.type -%} {%- when 'image' -%}
{%- if block.settings.image != blank -%} {%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px)}{%- endcapture -%} {{ block.settings.image | image_url: width: 3000 | image_tag: loading: 'lazy', sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000' }} {%- else -%} {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }} {%- endif -%}
{%- when 'product' -%} {% render 'card-product', card_product: block.settings.product, media_aspect_ratio: 'adapt', show_secondary_image: block.settings.second_image, extend_height: true %} {%- when 'collection' -%} {% render 'card-collection', card_collection: block.settings.collection, media_aspect_ratio: 'adapt', columns: 2, extend_height: true, wrapper_class: section.settings.card_styles %} {%- when 'video' -%}
{%- if block.settings.cover_image != blank -%} {%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px){%- endcapture -%} {{ block.settings.cover_image | image_url: width: 3000 | image_tag: loading: 'lazy', sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000' }} {%- else -%} {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }} {%- endif -%}
{%- render 'icon-play' -%}

{%- if block.settings.cover_image != blank -%}
{%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px){%- endcapture -%}
{{ block.settings.cover_image | image_url: width: 3000 | image_tag:
loading: ‘lazy’,
sizes: sizes,
widths: ‘550, 720, 990, 1100, 1500, 2200, 3000’
}}
{%- else -%}
{{ ‘collection-2’ | placeholder_svg_tag: ‘placeholder-svg placeholder’ }}
{%- endif -%}

{% render 'icon-close' %}
{%- if block.settings.video_url.type == 'youtube' -%} {%- else -%} {%- endif -%}
{%- endcase -%}
{%- endfor -%}

{% schema %}
{
“name”: “t:sections.collage.name”,
“tag”: “section”,
“class”: “section”,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“default”: “Multimedia collage”,
“label”: “t:sections.collage.settings.heading.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”: “desktop_layout”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.collage.settings.desktop_layout.options__1.label”
},
{
“value”: “right”,
“label”: “t:sections.collage.settings.desktop_layout.options__2.label”
}
],
“default”: “left”,
“label”: “t:sections.collage.settings.desktop_layout.label”
},
{
“type”: “select”,
“id”: “mobile_layout”,
“options”: [
{
“value”: “collage”,
“label”: “t:sections.collage.settings.mobile_layout.options__1.label”
},
{
“value”: “column”,
“label”: “t:sections.collage.settings.mobile_layout.options__2.label”
}
],
“default”: “collage”,
“label”: “t:sections.collage.settings.mobile_layout.label”
},
{
“type”: “select”,
“id”: “card_styles”,
“options”: [
{
“value”: “none”,
“label”: “t:sections.collage.settings.card_styles.options__1.label”
},
{
“value”: “product-card-wrapper”,
“label”: “t:sections.collage.settings.card_styles.options__2.label”
}
],
“default”: “product-card-wrapper”,
“info”: “t:sections.collage.settings.card_styles.info”,
“label”: “t:sections.collage.settings.card_styles.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”,
“info”: “t:sections.all.colors.has_cards_info”
},
{
“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”: “image”,
“name”: “t:sections.collage.blocks.image.name”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.collage.blocks.image.settings.image.label”
},
{
“type”: “checkbox”,
“id”: “image_padding”,
“default”: false,
“label”: “t:sections.collage.blocks.image.settings.image_padding.label”,
“info”: “t:sections.collage.blocks.image.settings.image_padding.info”
},
{ “type”: “collection”,
“id”: “collection”,
“label”: “Select Collection” }
]
},
{
“type”: “product”,
“name”: “t:sections.collage.blocks.product.name”,
“settings”: [
{
“type”: “product”,
“id”: “product”,
“label”: “t:sections.collage.blocks.product.settings.product.label”
},
{
“type”: “checkbox”,
“id”: “second_image”,
“default”: false,
“label”: “t:sections.collage.blocks.product.settings.second_image.label”
}
]
},
{
“type”: “collection”,
“name”: “t:sections.collage.blocks.collection.name”,
“settings”: [
{
“type”: “collection”,
“id”: “collection”,
“label”: “t:sections.collage.blocks.collection.settings.collection.label”
}
]
},
{
“type”: “video”,
“name”: “t:sections.collage.blocks.video.name”,
“settings”: [
{
“type”: “image_picker”,
“id”: “cover_image”,
“label”: “t:sections.collage.blocks.video.settings.cover_image.label”
},
{
“type”: “video_url”,
“id”: “video_url”,
“accept”: [
“youtube”,
“vimeo”
],
“default”: “https://www.youtube.com/watch?v=_9VUPq3SxOc”,
“label”: “t:sections.collage.blocks.video.settings.video_url.label”,
“placeholder”: “t:sections.collage.blocks.video.settings.video_url.placeholder”,
“info”: “t:sections.collage.blocks.video.settings.video_url.info”
},
{
“type”: “text”,
“id”: “description”,
“default”: “Describe the video”,
“label”: “t:sections.collage.blocks.video.settings.description.label”,
“info”: “t:sections.collage.blocks.video.settings.description.info”
},
{
“type”: “checkbox”,
“id”: “image_padding”,
“default”: false,
“label”: “t:sections.collage.blocks.video.settings.image_padding.label”,
“info”: “t:sections.collage.blocks.video.settings.image_padding.info”
}
]
}
],
“max_blocks”: 3,
“presets”: [
{
“name”: “t:sections.collage.presets.name”,
“blocks”: [
{
“type”: “video”
},
{
“type”: “product”
},
{
“type”: “collection”
}
]
}
]
}
{% endschema %}

This is a snapshot of the error along with what the image should look like:

RachelQuagliani_0-1673422701778.png
RachelQuagliani_0-1673422701778.png1984×1326 198 KB

Thank you!