FROM CACHE - en_header
Shopify Design
Shopify themes, liquid, logos, and UX
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
- Shopify Community
- :
- Shopify Discussion
- :
- Shopify Design
- :
- Re: How to make all photos in a specific section clickable(zoom in)
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Re: How to make all photos in a specific section clickable(zoom in)
Solved
How to make all photos in a specific section clickable(zoom in)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-08-2024
09:10 PM
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>
Solved! Go to the solution
Labels:
- Labels:
-
CSS
-
HTML
-
third party themes
Accepted Solution (1)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-08-2024
11:26 PM
This is an accepted solution.
Hi @jihyun_55,
Maybe we suggest you add code below to end of code that you provided above:
<script>
document.querySelectorAll('.image.multicolumn__column-image').forEach(function(e){
e.addEventListener("click", function(){
window.open(e.getAttribute('src'));
});
})
</script>
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free. Github.com/eboost10
- ❤❤DONATE ❤❤Coffee tips
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free. Github.com/eboost10
- ❤❤DONATE ❤❤Coffee tips
Replies 8 (8)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-08-2024
11:26 PM
This is an accepted solution.
Hi @jihyun_55,
Maybe we suggest you add code below to end of code that you provided above:
<script>
document.querySelectorAll('.image.multicolumn__column-image').forEach(function(e){
e.addEventListener("click", function(){
window.open(e.getAttribute('src'));
});
})
</script>
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free. Github.com/eboost10
- ❤❤DONATE ❤❤Coffee tips
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free. Github.com/eboost10
- ❤❤DONATE ❤❤Coffee tips
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-09-2024
12:13 AM
Thank you! The code works fine.
By the way, the size of the file I uploaded is 800*800px, and when I click on the image and open it with a new tab, it's 160*160px. Can you tell me how I can solve this problem?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-09-2024
01:01 AM
Hi,
You can used code below:
<script>
document.querySelectorAll('.image.multicolumn__column-image').forEach(function(e){
e.addEventListener("click", function(){
window.open(e.getAttribute('src').replace('&width=160','&width=800'));
});
})
</script>
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free. Github.com/eboost10
- ❤❤DONATE ❤❤Coffee tips
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free. Github.com/eboost10
- ❤❤DONATE ❤❤Coffee tips
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-09-2024
02:18 AM
replace code is not working, still a new tab appears with 160px image. 😂
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-09-2024
02:30 AM
Hi,
I saw you added 800 instead 160
It should be code below
window.open(e.getAttribute('src').replace('&width=160','&width=800'));
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free. Github.com/eboost10
- ❤❤DONATE ❤❤Coffee tips
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free. Github.com/eboost10
- ❤❤DONATE ❤❤Coffee tips
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-10-2024
08:38 PM
Sorry, I set it to 160 and it still didn't work, so I tried changing it to 800 and forgot to fix it as it was. I tried changing it to 160 again now and it still shows up as a small image.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-10-2024
10:29 PM
Hi,
I saw it showing large image now. https://www.awesomescreenshot.com/video/26617817?key=d1005429021a1c5ff41f76e3ae2e13d3
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free. Github.com/eboost10
- ❤❤DONATE ❤❤Coffee tips
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free. Github.com/eboost10
- ❤❤DONATE ❤❤Coffee tips
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-10-2024
11:48 PM
Oh, I've confirmed that it's working normally. Thank you so much!
Can I ask you one more question? I want only the pictures on the product page to be clickable. Can I make multicolumn on the main page or other pages non-clickable?
Community Blog Articles
Automate store operations with Shopify Academy & Coding with Jan
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025
Highlighting our Members of April '25
Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025
Enhance a brand’s visibility with Shopify Academy's new SEO resources
Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025