My store is using an aura theme, and the address is https://eu.nakyangyarn.com/
The cookie policy is not perfect and is protected, and the password is ‘aaa123’.
I would like to set the picture to look zoomed in when I click on all the images in the multicolumn section at the bottom of all the product pages.
I’ve tried to add code, but I don’t know where I can add it to all the images in the section at once.
onclick="window.open(this.src)"
I would appreciate it if you could let me know other ways besides onclick code.
Below is part of multicolomn.liquid.
Please let me know where and what to add to make all images clickable!
{%- liquid
assign options = section.settings
assign section_spacing_top = options.section_spacing_top
assign section_spacing_bottom = options.section_spacing_bottom
assign color_scheme = options.color_scheme
assign title = options.title
assign text = options.text
assign column_alignment = options.column_alignment
assign show_column_background = options.show_column_background
assign content_alignment = options.content_alignment
assign btn_text = options.btn_text
assign btn_url = options.btn_url
assign btn_style = options.btn_style
assign desktop_content_spacing = options.desktop_content_spacing | divided_by: 10.0
assign mobile_content_spacing = options.mobile_content_spacing | divided_by: 10.0
assign container_size = options.container_size
assign body_size = options.body_size
assign heading_size = options.heading_size
assign column_body_size = options.column_body_size
assign column_heading_size = options.column_heading_size
assign desktop_layout = options.desktop_layout
assign mobile_layout = options.mobile_layout
assign desktop_columns = options.desktop_columns
assign laptop_columns = desktop_columns | minus: 1
assign tablet_columns = desktop_columns | minus: 2
assign desktop_carousel_percent_width = 100.0
assign laptop_carousel_percent_width = 100.0
assign tablet_carousel_percent_width = 100.0
assign show_navigation_on_hover = options.show_navigation_on_hover
assign autoplay_mode = options.autoplay_mode
assign autoplay_interval = options.autoplay_interval
assign desktop_space_between_cards = options.desktop_space_between_cards | times: 0.1
assign mobile_space_between_cards = options.mobile_space_between_cards | times: 0.1
-%}
{% capture css %}
{% style %}
.section-{{section.id}}{
--gsc-space-between-cards: {{mobile_space_between_cards}}rem;
--gsc-columns: 1;
--gsc-content-spacing: {{ mobile_content_spacing }}rem;
--gsc-section-spacing-top: {{ section_spacing_top }}px;
--gsc-section-spacing-bottom: {{ section_spacing_bottom }}px;
}
{% for block in section.blocks %}
.block-{{ block.id }} {
--gsc-image-width: {{ block.settings.mobile_image_width }}%;
--gsc-img-ratio: {{ block.settings.image_ratio | times: 100 }}%;
--gsc-icon-size: {{ block.settings.icon_size }}px;
}
{% endfor %}
@media {% render 'media-queries', screen: 'md' %} {
.section-{{ section.id }}{
--gsc-space-between-cards: {{ desktop_space_between_cards }}rem;
--gsc-columns: {{ desktop_columns }};
--gsc-content-spacing: {{ desktop_content_spacing }}rem;
--gsc-slide-width: {{ desktop_carousel_percent_width | times: 1.00 | divided_by: desktop_columns }}%;
}
{% for block in section.blocks %}
.block-{{ block.id }} {
--gsc-image-width: {{ block.settings.desktop_image_width }}%;
}
{% endfor %}
}
{% if desktop_columns == 3 %}
@media screen and (min-width: 768px) and (max-width: 1016px) {
.section-{{ section.id }} {
--gsc-slide-width: {{ laptop_carousel_percent_width | times: 1.00 | divided_by: laptop_columns }}%;
}
}
{% endif %}
{% if desktop_columns > 3 %}
@media screen and (min-width: 880px) and (max-width: 1016px) {
.section-{{ section.id }} {
--gsc-slide-width: {{ laptop_carousel_percent_width | times: 1.00 | divided_by: laptop_columns }}%;
}
}
@media screen and (min-width: 768px) and (max-width: 880px) {
.section-{{ section.id }} {
--gsc-slide-width: {{ tablet_carousel_percent_width | times: 1.00 | divided_by: tablet_columns }}%;
}
}
{% endif %}
{% endstyle %}
{% endcapture %}
{% render 'inline-css-minifier', css: css %}
<div class='multicolumn section section-{{ section.id }} color-{{ color_scheme }}'>
<div class='multicolumn__container container container--{{ container_size }} section-spacing'>
{%- if title != blank or text != blank -%}
<div class='multicolumn__content-wrap multicolumn__content-wrap--align-{{ content_alignment }}'>
<div class='multicolumn__content'>
{%- if title != blank -%}
<h5 class='{{ heading_size }}'>{{ title }}</h5>
{%- endif -%}
{%- if text != blank -%}
<div class='rte multicolumn__text body-font-weight-from-global-settings {{ body_size }}'>
{{ text }}
</div>
{%- endif -%}
</div>
</div>
{%- endif -%}
{%- if section.blocks.size > 0 -%}
<div class='multicolumn__desktop-content'>
{% if desktop_layout == 'grid' %}
<div class='card-grid multicolumn__card-grid {% if show_column_background == false %} multicolumn__card-grid--with-additional-between-row-space {% endif %}'>
{%- for block in section.blocks -%}
{%- liquid
assign image = block.settings.image
assign video = block.settings.video
assign title = block.settings.title
assign text = block.settings.text
assign link_text = block.settings.link_text
assign link_url = block.settings.link_url
assign icon = block.settings.icon
assign custom_icon_image = block.settings.custom_icon_image
-%}
<div
class='multicolumn__column card-grid__item block-{{ block.id }} multicolumn__column--align-{{ column_alignment }} {% if show_column_background == false %}multicolumn__column--transparent{% endif %}'
{{ block.shopify_attributes }}
>
{% if link_text == blank and link_url != blank %}
<a
{% if link_url != blank %}
href='{{ link_url }}'
{% endif %}
class='multicolumn__column-link-overlay unstyled-link'
aria-label='{{ title }}'
></a>
{% endif %}
{% if block.type == 'column' %}
<div class='multicolumn__column-media multicolumn__column-media--image'>
<div class='multicolumn__column-image-wrap'>
<div class='shape shape--nature'>
{%- if video != blank -%}
{% render 'video-with-alt',
video: video,
class: 'image multicolumn__column-image',
autoplay: true,
loop: true,
muted: true,
controls: false,
loading: 'lazy'
%}
{%- elsif image != blank -%}
<img
{% render 'image-attributes', image: image, class: 'image multicolumn__column-image' %}
>
{%- else -%}
{{
'image'
| placeholder_svg_tag: 'image multicolumn__column-image multicolumn__column-image-placeholder'
}}
{%- endif -%}
</div>
</div>
</div>
{% elsif block.type == 'column_with_icon' %}
<div class='multicolumn__column-media multicolumn__column-media--icon'>
{%- if custom_icon_image != blank -%}
<img
{% render 'image-attributes',
image: custom_icon_image,
size: 'small',
class: 'multicolumn__column-icon'
%}
>
{%- elsif icon != 'none' -%}
{% render 'icon-pack', icon: icon, class: 'multicolumn__column-icon' %}
{%- endif -%}
</div>
{% endif %}
<div class='multicolumn__details'>
<div class='multicolumn__column-title {{ column_heading_size }}'>{{ title }}</div>
<div class='rte multicolumn__column-text body-font-weight-from-global-settings {{ column_body_size }}'>
{{ text }}
</div>
{%- if link_text != blank -%}
<a
class='link multicolumn__column-link'
{% if link_url != blank %}
href='{{ link_url }}'
{% endif %}
aria-label='{{ link_text }}'
>
<span class='link__text'>{{ link_text }}</span>
{% render 'icon', icon_name: 'link-chevron', class: 'link__chevron' %}
</a>
{%- endif -%}
</div>
</div>
{%- endfor -%}
</div>
{% elsif desktop_layout == 'carousel' %}
<carousel-component
class='card-carousel multicolumn__card-carousel {% if show_navigation_on_hover %} card-carousel--navigation-on-hover {% endif %}'
data-section-id='{{ section.id }}'
{% if mobile_layout == 'carousel' %}
data-breakpoints='
{
"(max-width: 768px)": { "dragFree": true },
"(min-width: 768px)": { "dragFree": false }
}
'
{% endif %}
{% if autoplay_mode == 'one_at_time' %}
data-animation-type='one_at_time'
data-autoplay-interval='{{autoplay_interval}}'
{% endif %}
{% if autoplay_mode == 'seamless' %}
data-loop
data-drag-free
data-animation-type='seamless'
data-autoplay-interval='{{autoplay_interval}}'
{% endif %}
data-contain-scroll='trimSnaps'
with-stop-on-hover
data-draggable
data-align='start'
data-axis='x'
>
<carousel-btn
class='carousel-btn card-carousel__carousel-btn card-carousel__carousel-btn--prev multicolumn__card-carousel-btn'
data-scroll-direction='prev'
tabindex='0'
>
{% render 'icon', icon_name: 'chevron', class: 'carousel-btn__icon x-flip' %}
</carousel-btn>
<div
class='card-carousel__viewport embla multicolumn__card-carousel-viewport {% if show_column_background == false %} multicolumn__card-carousel-viewport--transparent-columns{% else %} multicolumn__card-carousel-viewport--colored-columns{% endif %}'
data-carousel-viewport
>
<div class='card-carousel__container' data-carousel-container>
{%- for block in section.blocks -%}
{%- liquid
assign image = block.settings.image
assign video = block.settings.video
assign title = block.settings.title
assign text = block.settings.text
assign link_text = block.settings.link_text
assign link_url = block.settings.link_url
assign icon = block.settings.icon
assign custom_icon_image = block.settings.custom_icon_image
-%}
<div class='card-carousel__slide block-{{ block.id }}' {{ block.shopify_attributes }}>
<div class='multicolumn__column multicolumn__column--align-{{ column_alignment }} {% if show_column_background == false %}multicolumn__column--transparent{% endif %}'>
{%- if link_text == blank and link_url != blank -%}
<a
{% if link_url != blank %}
href='{{ link_url }}'
{% endif %}
class='multicolumn__column-link-overlay unstyled-link'
aria-label='{{ title }}'
></a>
{%- endif -%}
{% if block.type == 'column' %}
<div class='multicolumn__column-media multicolumn__column-media--image'>
<div class='multicolumn__column-image-wrap'>
<div class='shape shape--nature'>
{%- if video != blank -%}
{% render 'video-with-alt',
video: video,
class: 'image multicolumn__column-image',
autoplay: true,
loop: true,
muted: true,
controls: false,
loading: 'lazy'
%}
{%- elsif image != blank -%}
<img
{% render 'image-attributes',
image: image,
class: 'image multicolumn__column-image'
%}
>
{%- else -%}
{{
'image'
| placeholder_svg_tag: 'image multicolumn__column-image multicolumn__column-image-placeholder'
}}
{%- endif -%}
</div>
</div>
</div>
{% elsif block.type == 'column_with_icon' %}
<div class='multicolumn__column-media multicolumn__column-media--icon'>
{%- if custom_icon_image != blank -%}
<img
{% render 'image-attributes',
image: custom_icon_image,
size: 'small',
class: 'multicolumn__column-icon'
%}
>
{%- elsif icon != 'none' -%}
{% render 'icon-pack', icon: icon, class: 'multicolumn__column-icon' %}
{%- endif -%}
</div>
{% endif %}
<div class='multicolumn__details'>
<div class='multicolumn__column-title {{ column_heading_size }}'>{{ title }}</div>
<div class='rte multicolumn__column-text body-font-weight-from-global-settings {{ column_body_size }}'>
{{ text }}
</div>
{%- if link_text != blank -%}
<a
class='link multicolumn__column-link'
{% if link_url != blank %}
href='{{ link_url }}'
{% endif %}
aria-label='{{ link_text }}'
>
<span class='link__text'>{{ link_text }}</span>
{% render 'icon', icon_name: 'link-chevron', class: 'link__chevron' %}
</a>
{%- endif -%}
</div>
</div>
</div>
{%- endfor -%}
</div>
</div>
<carousel-btn
class='carousel-btn card-carousel__carousel-btn card-carousel__carousel-btn--next multicolumn__card-carousel-btn'
data-scroll-direction='next'
tabindex='0'
>
{% render 'icon', icon_name: 'chevron', class: 'carousel-btn__icon' %}
</carousel-btn>
</carousel-component>
{% endif %}
</div>
<div class='multicolumn__mobile-content'>
{% if mobile_layout == 'one-column-grid' %}
<div class='card-grid multicolumn__card-grid {% if show_column_background == false %} multicolumn__card-grid--with-additional-between-row-space {% endif %}'>
{%- for block in section.blocks -%}
{%- liquid
assign image = block.settings.image
assign video = block.settings.video
assign title = block.settings.title
assign text = block.settings.text
assign link_text = block.settings.link_text
assign link_url = block.settings.link_url
assign icon = block.settings.icon
assign custom_icon_image = block.settings.custom_icon_image
-%}
<div
class='multicolumn__column card-grid__item block-{{ block.id }} multicolumn__column--align-{{ column_alignment }} {% if show_column_background == false %}multicolumn__column--transparent{% endif %}'
{{ block.shopify_attributes }}
>
{% if link_text == blank and link_url != blank %}
<a
{% if link_url != blank %}
href='{{ link_url }}'
{% endif %}
class='multicolumn__column-link-overlay unstyled-link'
aria-label='{{ title }}'
></a>
{% endif %}
{% if block.type == 'column' %}
<div class='multicolumn__column-media multicolumn__column-media--image'>
<div class='multicolumn__column-image-wrap'>
<div class='shape shape--nature'>
{%- if video != blank -%}
{% render 'video-with-alt',
video: video,
class: 'image multicolumn__column-image',
autoplay: true,
loop: true,
muted: true,
controls: false,
loading: 'lazy'
%}
{%- elsif image != blank -%}
<img
{% render 'image-attributes', image: image, class: 'image multicolumn__column-image' %}
>
{%- else -%}
{{
'image'
| placeholder_svg_tag: 'image multicolumn__column-image multicolumn__column-image-placeholder'
}}
{%- endif -%}
</div>
</div>
</div>
{% elsif block.type == 'column_with_icon' %}
<div class='multicolumn__column-media multicolumn__column-media--icon'>
{%- if custom_icon_image != blank -%}
<img
{% render 'image-attributes',
image: custom_icon_image,
size: 'small',
class: 'multicolumn__column-icon'
%}
>
{%- elsif icon != 'none' -%}
{% render 'icon-pack', icon: icon, class: 'multicolumn__column-icon' %}
{%- endif -%}
</div>
{% endif %}
<div class='multicolumn__details'>
<div class='multicolumn__column-title {{ column_heading_size }}'>{{ title }}</div>
<div class='rte multicolumn__column-text body-font-weight-from-global-settings {{ column_body_size }}'>
{{ text }}
</div>
{%- if link_text != blank -%}
<a
class='link multicolumn__column-link'
{% if link_url != blank %}
href='{{ link_url }}'
{% endif %}
aria-label='{{ link_text }}'
>
<span class='link__text'>{{ link_text }}</span>
{% render 'icon', icon_name: 'link-chevron', class: 'link__chevron' %}
</a>
{%- endif -%}
</div>
</div>
{%- endfor -%}
</div>
{% elsif mobile_layout == 'carousel' %}
<carousel-component
class='card-carousel multicolumn__card-carousel {% if show_navigation_on_hover %} card-carousel--navigation-on-hover {% endif %}'
data-section-id='{{ section.id }}'
{% if mobile_layout == 'carousel' %}
data-breakpoints='
{
"(max-width: 768px)": { "dragFree": true },
"(min-width: 768px)": { "dragFree": false }
}
'
{% endif %}
{% if autoplay_mode == 'one_at_time' %}
data-animation-type='one_at_time'
data-autoplay-interval='{{autoplay_interval}}'
{% endif %}
{% if autoplay_mode == 'seamless' and mobile_layout contains 'carousel' %}
data-loop
data-drag-free
data-animation-type='seamless'
data-autoplay-interval='{{autoplay_interval}}'
{% endif %}
data-contain-scroll='trimSnaps'
with-stop-on-hover
data-draggable
data-align='start'
data-axis='x'
>
<carousel-btn
class='carousel-btn card-carousel__carousel-btn card-carousel__carousel-btn--prev multicolumn__card-carousel-btn'
data-scroll-direction='prev'
tabindex='0'
>
{% render 'icon', icon_name: 'chevron', class: 'carousel-btn__icon x-flip' %}
</carousel-btn>
<div
class='card-carousel__viewport embla multicolumn__card-carousel-viewport {% if show_column_background == false %} multicolumn__card-carousel-viewport--transparent-columns{% else %} multicolumn__card-carousel-viewport--colored-columns{% endif %}'
data-carousel-viewport
>
<div class='card-carousel__container' data-carousel-container>
{%- for block in section.blocks -%}
{%- liquid
assign image = block.settings.image
assign video = block.settings.video
assign title = block.settings.title
assign text = block.settings.text
assign link_text = block.settings.link_text
assign link_url = block.settings.link_url
assign icon = block.settings.icon
assign custom_icon_image = block.settings.custom_icon_image
-%}
<div class='card-carousel__slide block-{{ block.id }}' {{ block.shopify_attributes }}>
<div class='multicolumn__column multicolumn__column--align-{{ column_alignment }} {% if show_column_background == false %}multicolumn__column--transparent{% endif %}'>
{%- if link_text == blank and link_url != blank -%}
<a
{% if link_url != blank %}
href='{{ link_url }}'
{% endif %}
class='multicolumn__column-link-overlay unstyled-link'
aria-label='{{ title }}'
></a>
{%- endif -%}
{% if block.type == 'column' %}
<div class='multicolumn__column-media multicolumn__column-media--image'>
<div class='multicolumn__column-image-wrap'>
<div class='shape shape--nature'>
{%- if video != blank -%}
{% render 'video-with-alt',
video: video,
class: 'image multicolumn__column-image',
autoplay: true,
loop: true,
muted: true,
controls: false,
loading: 'lazy'
%}
{%- elsif image != blank -%}
<img
{% render 'image-attributes',
image: image,
class: 'image multicolumn__column-image'
%}
>
{%- else -%}
{{
'image'
| placeholder_svg_tag: 'image multicolumn__column-image multicolumn__column-image-placeholder'
}}
{%- endif -%}
</div>
</div>
</div>
{% elsif block.type == 'column_with_icon' %}
<div class='multicolumn__column-media multicolumn__column-media--icon'>
{%- if custom_icon_image != blank -%}
<img
{% render 'image-attributes',
image: custom_icon_image,
size: 'small',
class: 'multicolumn__column-icon'
%}
>
{%- elsif icon != 'none' -%}
{% render 'icon-pack', icon: icon, class: 'multicolumn__column-icon' %}
{%- endif -%}
</div>
{% endif %}
<div class='multicolumn__details'>
<div class='multicolumn__column-title {{ column_heading_size }}'>{{ title }}</div>
<div class='rte multicolumn__column-text body-font-weight-from-global-settings {{ column_body_size }}'>
{{ text }}
</div>
{%- if link_text != blank -%}
<a
class='link multicolumn__column-link'
{% if link_url != blank %}
href='{{ link_url }}'
{% endif %}
aria-label='{{ link_text }}'
>
<span class='link__text'>{{ link_text }}</span>
{% render 'icon', icon_name: 'link-chevron', class: 'link__chevron' %}
</a>
{%- endif -%}
</div>
</div>
</div>
{%- endfor -%}
</div>
</div>
<carousel-btn
class='carousel-btn card-carousel__carousel-btn card-carousel__carousel-btn--next multicolumn__card-carousel-btn'
data-scroll-direction='next'
tabindex='0'
>
{% render 'icon', icon_name: 'chevron', class: 'carousel-btn__icon' %}
</carousel-btn>
</carousel-component>
{% elsif mobile_layout == 'slideshow' %}
<carousel-component
class='carousel multicolumn__card-carousel'
data-section-id='{{ section.id }}'
{% if mobile_layout == 'carousel' %}
data-breakpoints='
{
"(max-width: 768px)": { "dragFree": true },
"(min-width: 768px)": { "dragFree": false }
}
'
{% endif %}
{% if autoplay_mode == 'one_at_time' %}
data-animation-type='one_at_time'
data-autoplay-interval='{{autoplay_interval}}'
{% endif %}
{% if autoplay_mode == 'seamless' and mobile_layout contains 'carousel' %}
data-loop
data-drag-free
data-animation-type='seamless'
data-autoplay-interval='{{autoplay_interval}}'
{% endif %}
data-contain-scroll='trimSnaps'
with-stop-on-hover
data-draggable
data-align='start'
data-axis='x'
>
<div
class='carousel__viewport embla multicolumn__card-carousel-viewport {% if show_column_background == false %} multicolumn__card-carousel-viewport--transparent-columns{% else %} multicolumn__card-carousel-viewport--colored-columns{% endif %}'
data-carousel-viewport
>
<div class='carousel__container' data-carousel-container>
{%- for block in section.blocks -%}
{%- liquid
assign image = block.settings.image
assign video = block.settings.video
assign title = block.settings.title
assign text = block.settings.text
assign link_text = block.settings.link_text
assign link_url = block.settings.link_url
assign icon = block.settings.icon
assign custom_icon_image = block.settings.custom_icon_image
-%}
<div class='carousel__slide block-{{ block.id }}' {{ block.shopify_attributes }}>
<div class='multicolumn__column multicolumn__column--align-{{ column_alignment }} {% if show_column_background == false %}multicolumn__column--transparent{% endif %}'>
{%- if link_text == blank and link_url != blank -%}
<a
{% if link_url != blank %}
href='{{ link_url }}'
{% endif %}
class='multicolumn__column-link-overlay unstyled-link'
aria-label='{{ title }}'
></a>
{%- endif -%}
{% if block.type == 'column' %}
<div class='multicolumn__column-media multicolumn__column-media--image'>
<div class='multicolumn__column-image-wrap'>
<div class='shape shape--nature'>
{%- if video != blank -%}
{% render 'video-with-alt',
video: video,
class: 'image multicolumn__column-image',
autoplay: true,
loop: true,
muted: true,
controls: false,
loading: 'lazy'
%}
{%- elsif image != blank -%}
<img
{% render 'image-attributes',
image: image,
class: 'image multicolumn__column-image'
%}
>
{%- else -%}
{{
'image'
| placeholder_svg_tag: 'image multicolumn__column-image multicolumn__column-image-placeholder'
}}
{%- endif -%}
</div>
</div>
</div>
{% elsif block.type == 'column_with_icon' %}
<div class='multicolumn__column-media multicolumn__column-media--icon'>
{%- if custom_icon_image != blank -%}
<img
{% render 'image-attributes',
image: custom_icon_image,
size: 'small',
class: 'multicolumn__column-icon'
%}
>
{%- elsif icon != 'none' -%}
{% render 'icon-pack', icon: icon, class: 'multicolumn__column-icon' %}
{%- endif -%}
</div>
{% endif %}
<div class='multicolumn__details'>
<div class='multicolumn__column-title {{ column_heading_size }}'>{{ title }}</div>
<div class='rte multicolumn__column-text body-font-weight-from-global-settings {{ column_body_size }}'>
{{ text }}
</div>
{%- if link_text != blank -%}
<a
class='link multicolumn__column-link'
{% if link_url != blank %}
href='{{ link_url }}'
{% endif %}
aria-label='{{ link_text }}'
>
<span class='link__text'>{{ link_text }}</span>
{% render 'icon', icon_name: 'link-chevron', class: 'link__chevron' %}
</a>
{%- endif -%}
</div>
</div>
</div>
{%- endfor -%}
</div>
</div>
{%- if section.blocks.size > 1 -%}
<carousel-dots
class='solid-dots-carousel multicolumn__solid-dots-carousel'
data-contain-scroll='keepSnaps'
data-align='center'
data-axis='x'
>
<div class='solid-dots-carousel__viewport embla' data-carousel-viewport>
<div class='solid-dots-carousel__container' data-carousel-container>
{%- for block in section.blocks -%}
<carousel-dot
class='solid-dots-carousel__solid-dot {% if forloop.index == 1 %}is-primary{% endif %}'
tabindex='0'
data-dot-index='{{ forloop.index0 }}'
>
<div class='solid-dots-carousel__solid-dot-circle'></div>
</carousel-dot>
{%- endfor -%}
</div>
</div>
</carousel-dots>
{%- endif -%}
</carousel-component>
{% endif %}
</div>
{%- endif -%}
{%- if btn_text != blank -%}
<a
class='btn btn--{{ btn_style }} multicolumn__btn'
{% if btn_url != blank %}
href='{{ btn_url }}'
{% endif %}
aria-label='{{ btn_text }}'
>
{{- btn_text -}}
</a>
{%- endif -%}
</div>
</div>
