Solved

How to make all photos in a specific section clickable(zoom in)

jihyun_55
Excursionist
15 1 1

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>

 

Accepted Solution (1)

EBOOST
Shopify Partner
835 229 256

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

https://www.eboosttech.net

EBOOST
DONATE ❤❤

View solution in original post

Replies 8 (8)

EBOOST
Shopify Partner
835 229 256

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

https://www.eboosttech.net

EBOOST
DONATE ❤❤
jihyun_55
Excursionist
15 1 1

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?

EBOOST
Shopify Partner
835 229 256

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

https://www.eboosttech.net

EBOOST
DONATE ❤❤
jihyun_55
Excursionist
15 1 1

replace code is not working, still a new tab appears with 160px image. 😂

EBOOST
Shopify Partner
835 229 256

Hi,

I saw you added 800 instead 160

EBOOST_0-1712644065810.png

 

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

https://www.eboosttech.net

EBOOST
DONATE ❤❤
jihyun_55
Excursionist
15 1 1

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.

EBOOST
Shopify Partner
835 229 256

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

https://www.eboosttech.net

EBOOST
DONATE ❤❤
jihyun_55
Excursionist
15 1 1

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?