Hello, I want to make this main “Sheetmask” image clickable in collage feature my website. Can anybody help? Thank you.
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 %}