Hello, I want to make this main “Sheetmask” image clickable in collage feature my website. Can anybody help? Thank you.
Topic summary
A user seeks to make the main image in a collage feature clickable on their Shopify store using the Sense theme.
Initial Guidance:
- One responder suggests locating the collage section in the theme code, finding the
<a>tag with anhrefattribute, and wrapping the collage container with it - Recommends backing up the section before making edits
Code Solution Provided:
- Another user offers a complete replacement code for the
collage.liquidfile - The solution includes functionality to select a URL for images directly in the theme editor
- Implementation requires navigating to: Online Store > Themes > Edit Code > collage.liquid
- A screenshot demonstrates the expected result after applying the code
Status:
The discussion appears resolved with a working code snippet provided, though no confirmation from the original poster indicates whether the solution was successfully implemented.
Hello @LVSShop ,
You need to find and edit the section after that first search for the tag with href attribute.
Once found, check its opening and closing tag.
Next identify the collage container and wrap it with the with href attribute.
Note; Take backup of the section before making any edit so in case something is broken you can revert it.
is there any codes that I could use for?
You can try to replace your default code in your Online store > Themes > Edit code > collage.liquid with this code then you can select the URL for that image.
{{ '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 }}
{{ 'component-deferred-media.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 -%}
{%- if section.settings.heading != blank -%}
##
{{ section.settings.heading }}
{%- endif -%}
{%- for block in section.blocks -%}
{%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
{%- case block.type -%}
{%- when 'image' -%}
{%- if block.settings.image-url != blank -%}
Image link
{%- endif -%}
{%- if block.settings.image != blank -%}
{%- liquid
if section.settings.desktop_layout == 'left'
assign large_block = forloop.first
else
assign large_block = forloop.last
endif
assign grid_space_desktop = settings.spacing_grid_horizontal | divided_by: 2 | append: 'px'
assign grid_space_mobile = settings.spacing_grid_horizontal | divided_by: 4 | append: 'px'
-%}
{%- if large_block -%}
{%- capture sizes -%}
{% if section.blocks.size == 1 -%}(min-width: {{ settings.page_width }}px) calc({{ settings.page_width }}px - 100px){% else %}(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - 100px) * 2 / 3 - {{ grid_space_desktop }}){% endif %},
{% if section.blocks.size == 1 -%}(min-width: 750px) calc(100vw - 100px){% else %}(min-width: 750px) calc((100vw - 100px) * 2 / 3 - {{ grid_space_desktop }}){% endif %},
{% if section.blocks.size == 2 and section.settings.mobile_layout == 'collage' -%}calc((100vw - 30px) / 2){% else %}calc(100vw - 30px){% endif %}
{%- endcapture -%}
{{
block.settings.image
| image_url: width: 3200
| image_tag:
sizes: sizes,
widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
}}
{%- else -%}
{%- capture sizes -%}
(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - 100px) * 1 / 3 - {{ grid_space_desktop }}),
(min-width: 750px) calc((100vw - 100px) * 1 / 3 - {{ grid_space_desktop }}),
{% if section.settings.mobile_layout == 'collage' %}calc((100vw - 30px) / 2 - {{ grid_space_mobile }}){% else %}calc(100vw - 30px){% endif %}
{%- endcapture -%}
{{
block.settings.image
| image_url: width: 3200
| image_tag:
sizes: sizes,
widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
}}
{%- endif -%}
{%- else -%}
{{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- when 'product' -%}
{%- assign placeholder_image = 'product-apparel-' | append: placeholder_image_index -%}
{% render 'card-product',
card_product: block.settings.product,
media_aspect_ratio: 'adapt',
show_secondary_image: block.settings.second_image,
extend_height: true,
placeholder_image: placeholder_image
%}
{%- when 'collection' -%}
{%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
{% render 'card-collection',
card_collection: block.settings.collection,
media_aspect_ratio: 'adapt',
columns: 2,
extend_height: true,
wrapper_class: section.settings.card_styles,
placeholder_image: placeholder_image
%}
{%- when 'video' -%}
{%- endcase -%}
{%- endfor -%}
{% schema %}
{
"name": "t:sections.collage.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"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": "column",
"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": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info",
"default": "background-1"
},
{
"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": "url",
"id": "image-url",
"label": "Image link"
}
]
},
{
"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"
}
]
}
],
"max_blocks": 3,
"presets": [
{
"name": "t:sections.collage.presets.name",
"blocks": [
{
"type": "image"
},
{
"type": "product"
},
{
"type": "collection"
}
]
}
]
}
{% endschema %}