Custom Multicolumn with Image Viewer

Custom Multicolumn with Image Viewer

Compatibility: All Shopify Theme (design might vary).

The Multicolumn with Image Slider Viewer is a versatile web component that combines a multicolumn layout with a dynamic image slider. It allows you to present multiple columns of content alongside an interactive image slider, enhancing the visual appeal and user experience of your website. With customizable options and responsive design, it seamlessly integrates into your site, providing an engaging and organized way to showcase various types of information.

You can open the the pop-up slider by clicking the image of the multicolumn slider. This images are file links from you Admin page > Content > Files.

You can check the demo store here. Password: made4uo

What are Custom Multicolumn with Image Viewer?

In the context of Shopify stores, a "Custom Multicolumn with Image Viewer" refers to a functionality that enhances how you showcase your products. Here's a breakdown:

  • Functionality: It allows you to display multiple product images in a clean, multi-column layout. Often, these columns are accompanied by an "image viewer" feature.

  • Benefits:

    • Improved Product Presentation: Customers can see your products from various angles and in more detail, leading to a better understanding of what they're considering buying.
    • Enhanced User Experience: Navigating through multiple images is easier with an image viewer, creating a more engaging browsing experience.
    • Potential Sales Boost: A clearer and more comprehensive product presentation can build customer confidence and potentially lead to higher conversion rates.

  • Implementation:

    • Purchased Code (Common): Often, this functionality is achieved through purchased code snippets or apps that integrate with your Shopify theme.
    • Theme Integration: The purchased solution likely requires some integration with your theme's code files.

Why Use a Custom Multicolumn Image Viewer?

This functionality offers several advantages for showcasing your products on Shopify:

  • Improved Product Presentation: Go beyond the standard single product image. Display multiple images in a clean, organized layout, allowing customers to view your products from various angles and in more detail.
  • Enhanced User Experience: Customers can easily navigate through the product images using a user-friendly interface, potentially leading to a more engaging and informative browsing experience.
  • Potential Sales Boost: A clearer and more comprehensive product presentation can increase customer confidence and potentially lead to higher conversion rates.

Additional Consideration:

  • Code Editing Expertise: While the purchased code simplifies the process, some technical knowledge or developer assistance might be required for theme file modifications.
  • Theme Compatibility: Ensure the purchased code is compatible with your specific Shopify theme.
  • Mobile Optimization: Verify that the multicolumn image viewer functions correctly on mobile devices for optimal user experience across all platforms.

By incorporating the "Custom Multicolumn with Image Viewer" functionality, you can potentially elevate your product presentations, enhance customer experience, and create a more compelling shopping environment on your Shopify store.

What you are buying:

  • Add multicolumn with image slider viewer section
  • Add multiple images from your files

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

[]

Steps on how to add Custom Multicolumn with Image Viewer

Step #1. Open your code editor

From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code

Step #2. Create a new section file

In Section folder, create a new section, name it whatever you want, then replace the default code with the code below. Make sure to SAVE.

{{ 'custom-multicolumn.css' | asset_url | stylesheet_tag }}
{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}
{%- liquid
  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
  assign show_mobile_slider = false
  if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
    assign show_mobile_slider = true
  endif
-%}
<div
  style="--button-color: {{ section.settings.button_color }}; --button-background: {{ section.settings.button_background }}"
  class="custom-multicolumn color-{{ section.settings.color_scheme }} gradient{% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background-{{ section.settings.background_style }}{% endunless %}{% if section.settings.title == blank %} no-heading{% endif %}"
>
  <div class="page-width section-{{ section.id }}-padding isolate">
    {%- unless section.settings.title == blank -%}
      <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin">
        <h2 class="title inline-richtext {{ section.settings.heading_size }}">
          {{ section.settings.title }}
        </h2>
        {%- if section.settings.button_label != blank and show_mobile_slider -%}
          <a href="{{ section.settings.button_link }}" class="link underlined-link large-up-hide">
            {{- section.settings.button_label | escape -}}
          </a>
        {%- endif -%}
      </div>
    {%- endunless -%}
    <div class="slider-mobile-gutter">
      <ul
        class="custom-multicolumn-list contains-content-container grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop{% if show_mobile_slider %} slider slider--mobile grid--peek{% endif %}"
        id="Slider-{{ section.id }}"
        role="list"
      >
        {%- liquid
          assign highest_ratio = 0
          for block in section.blocks
            if block.settings.image.aspect_ratio > highest_ratio
              assign highest_ratio = block.settings.image.aspect_ratio
            endif
          endfor
        -%}
        {%- for block in section.blocks -%}
          {%- assign empty_column = '' -%}
          {%- if block.settings.image == blank
            and block.settings.title == blank
            and block.settings.text == blank
            and block.settings.link_label == blank
          -%}
            {%- assign empty_column = ' custom-multicolumn-list__item--empty' -%}
          {%- endif -%}
          <li
            id="Slide-{{ section.id }}-{{ forloop.index }}"
            class="custom-multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}{{ empty_column }}"
            {{ block.shopify_attributes }}
          >
            <div class="custom-multicolumn-card content-container">
              <image-viewer class="image-viewer--box">
                {%- if block.settings.image != blank -%}
                  {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %}
                    {% assign spaced_image = true %}
                  {% endif %}
                  <div class="custom-multicolumn-card__image-wrapper custom-multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} custom-multicolumn-card-spacing{% endif %}">
                    <label
                      for="multi-media-{{ block.id }}"
                      class="media media--transparent media--{{ section.settings.image_ratio }}"
                      {% if section.settings.image_ratio == 'adapt' %}
                        style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
                      {% endif %}
                    >
                      {%- liquid
                        assign number_of_columns = section.settings.columns_desktop
                        assign number_of_columns_mobile = section.settings.columns_mobile
                        assign grid_space_desktop = number_of_columns | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
                        assign grid_space_tablet = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
                        assign grid_space_mobile = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | divided_by: 2 | plus: 30 | append: 'px'
                        if section.settings.image_width == 'half'
                          assign image_width = 0.5
                        elsif section.settings.image_width == 'third'
                          assign image_width = 0.33
                        else
                          assign image_width = 1
                        endif
                      -%}
                      {% capture sizes %}
                      (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ grid_space_desktop }}) * {{ image_width }} /  {{ number_of_columns }}),
                      (min-width: 990px) calc((100vw - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}),
                      (min-width: 750px) calc((100vw - {{ grid_space_tablet }}) * {{ image_width }} / {{ number_of_columns_mobile }}),
                      calc((100vw - {{ grid_space_mobile }}) * {{ image_width }} / {{ number_of_columns_mobile }})
                    {% endcapture %}
                      {{
                        block.settings.image
                        | image_url: width: 3200
                        | image_tag:
                          loading: 'lazy',
                          widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200',
                          sizes: sizes,
                          class: 'custom-multicolumn-card__image'
                      }}
                    </label>
                    <input
                      type="radio"
                      class="multi-image--input"
                      id="multi-media-{{ block.id }}"
                      name="multi-media-{{ section.id }}"
                    >
                    {% if block.settings.multi_images_links != blank %}
                      <div class="multi-media--container">
                        <div>
                          <span data-input="multi-media-{{ block.id }}">✕</span>
                          {% assign multi_images = block.settings.multi_images_links | strip_html | split: ',' %}
                          <button
                            name="previous"
                            {{ multi_images.size }}
                            {% if multi_images.size < 2 %}
                              disabled
                            {% endif %}
                          >
                            ❮
                          </button>
                          <ul>
                            {% for image_link in multi_images %}
                              <li class="multi-media--wrapper">
                                <img src="{{ image_link }}">
                              </li>
                            {% endfor %}
                          </ul>
                          <button
                            name="next"
                            {% if multi_images.size < 2 %}
                              disabled
                            {% endif %}
                          >
                            ❯
                          </button>
                        </div>
                      </div>
                    {% endif %}
                  </div>
                {%- endif -%}
                <div class="custom-multicolumn-card__info">
                  {%- if block.settings.title != blank -%}
                    <h3 class="inline-richtext">{{ block.settings.title }}</h3>
                  {%- endif -%}
                  {%- if block.settings.text != blank -%}
                    <div class="rte">{{ block.settings.text }}</div>
                  {%- endif -%}
                  {%- if block.settings.link_label != blank -%}
                    <a
                      class="link animate-arrow"
                      {% if block.settings.link == blank %}
                        role="link" aria-disabled="true"
                      {% else %}
                        href="{{ block.settings.link }}"
                      {% endif %}
                    >
                      {{- block.settings.link_label | escape -}}
                      <span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span></a
                    >
                  {%- endif -%}
                </div>
              </image-viewer>
            </div>
          </li>
        {%- endfor -%}
      </ul>
    </div>
    <div class="center{% if show_mobile_slider %} small-hide medium-hide{% endif %}">
      {%- if section.settings.button_label != blank -%}
        <a
          class="button button--primary"
          {% if section.settings.button_link == blank %}
            role="link" aria-disabled="true"
          {% else %}
            href="{{ section.settings.button_link }}"
          {% endif %}
        >
          {{ section.settings.button_label | escape }}
        </a>
      {%- endif -%}
    </div>
  </div>
</div>
{% schema %}
{
  "name": "Multicolumn image viewer",
  "class": "section image-viewer",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "Multicolumn",
      "label": "Multicolumn"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "Small"
        },
        {
          "value": "h1",
          "label": "Medium"
        },
        {
          "value": "h0",
          "label": "Large"
        }
      ],
      "default": "h1",
      "label": "Heading size"
    },
    {
      "type": "select",
      "id": "image_width",
      "options": [
        {
          "value": "third",
          "label": "One-third width of column"
        },
        {
          "value": "half",
          "label": "Half width of column"
        },
        {
          "value": "full",
          "label": "Full width of colum"
        }
      ],
      "default": "full",
      "label": "Image width"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "Adapth to image"
        },
        {
          "value": "portrait",
          "label": "Portrait"
        },
        {
          "value": "square",
          "label": "Square"
        },
        {
          "value": "circle",
          "label": "Circle"
        }
      ],
      "default": "adapt",
      "label": "Image ratio"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 3,
      "label": "Number of columns on desktop"
    },
    {
      "type": "select",
      "id": "column_alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        }
      ],
      "default": "left",
      "label": "Column alignment"
    },
    {
      "type": "select",
      "id": "background_style",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "primary",
          "label": "Show as column background"
        }
      ],
      "default": "primary",
      "label": "Secondary background"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Button label",
      "label": "Section button label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Section button link"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        }
      ],
      "default": "background-1",
      "label": "Color scheme"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button text color",
      "default": "#fff"
    },
    {
      "type": "color",
      "id": "button_background",
      "label": "Button background",
      "default": "#000"
    },
    {
      "type": "header",
      "content": "Mobile layout"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "1 column"
        },
        {
          "value": "2",
          "label": "2 columns"
        }
      ],
      "default": "1",
      "label": "Number of columns on mobile"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "Column",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "inline_richtext",
          "id": "title",
          "default": "Column",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "Description"
        },
        {
          "type": "text",
          "id": "link_label",
          "label": "Link label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        },
         {
          "type": "richtext",
          "id": "multi_images_links",
          "default": "<p>https://cdn.shopify.com/s/files/1/0578/8903/0244/files/made4uo.gif?v=1681747466,https://cdn.shopify.com/s/files/1/0578/8903/0244/files/made4uo.gif?v=1681747466</p>",
          "label": "Image links from your website files",
          "info": "Separate links with comma. Get the links in your [Admin > Content > Files](https:\/\/admin.shopify.com)"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Multicolumn image viewer",
      "blocks": [
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        }
      ]
    }
  ]
}
{% endschema %}

Step #3. Create CSS file

Go to Asset folder, and create a CSS file name "custom-multicolumn", then paste the code below. Make sure to SAVE.

.open-image-viewer main {
  z-index: 5;
}
.open-image-viewer
  .shopify-section:not(.image-viewer:has(image-viewer.image-viewer-open))
  > * {
  z-index: -99999;
  position: relative;
}
.multi-media--container {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10;
  top: 0;
  left: 0;
  display: none;
  justify-content: center;
  align-items: center;
}
.multi-image--input:checked + .multi-media--container {
  display: flex;
}
body.open-image-viewer {
  overflow: hidden;
}
.multi-media--container ul {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: scroll;
  flex-direction: row;
  -ms-overflow-style: auto;
  scrollbar-width: auto;
  padding-inline-start: 0;
  margin-inline-start: 0;
  padding-left: 0;
}
.multi-media--container ul::-webkit-scrollbar {
  height: 0.4rem;
  width: 0.4rem;
  display: none;
}
.multi-media--container span {
  position: absolute;
  top: 5rem;
  right: 5rem;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--button-background);
  font-size: 40px;
}
image-viewer input {
  display: none;
}
.multi-media--container button {
  width: 50px;
  height: 50px;
  margin: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  box-shadow: none;
  cursor: pointer;
}
.multi-media--container button:disabled {
  cursor: not-allowed;
  visibility: hidden;
}
.multi-media--container button {
  color: var(--button-color);
  background: var(--button-background);
}
.multi-media--container button:hover {
  background: #fffc;
}
.multi-media--wrapper {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  margin: auto;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.multi-media--wrapper img {
  width: 100%;
  height: auto;
  max-width: 1000px;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  margin: auto;
}
.multi-media--container div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 1rem;
}
.custom-multicolumn .title {
  margin: 0;
}
.custom-multicolumn.no-heading .title {
  display: none;
}
.custom-multicolumn .title-wrapper-with-link {
  margin-top: 0;
}
@media screen and (max-width: 749px) {
  .custom-multicolumn .title-wrapper-with-link {
    margin-bottom: 3rem;
  }
  .custom-multicolumn .page-width {
    padding-left: 0;
    padding-right: 0;
  }
}
.custom-multicolumn-card__image-wrapper--third-width {
  width: 33%;
}
.custom-multicolumn-card__image-wrapper--half-width {
  width: 50%;
}
.custom-multicolumn-list__item.center
  .custom-multicolumn-card__image-wrapper:not(
    .custom-multicolumn-card__image-wrapper--full-width
  ),
.custom-multicolumn-list__item:only-child {
  margin-left: auto;
  margin-right: auto;
}
.custom-multicolumn .button {
  margin-top: 1.5rem;
}
@media screen and (min-width: 750px) {
  .custom-multicolumn .button {
    margin-top: 4rem;
  }
}
.custom-multicolumn-list {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}
.custom-multicolumn-list__item:only-child {
  max-width: 72rem;
}
.custom-multicolumn-list__item--empty {
  display: none;
}
.custom-multicolumn:not(.background-none) .custom-multicolumn-card {
  background: rgb(var(--color-background));
  height: 100%;
}
.custom-multicolumn.background-primary .custom-multicolumn-card {
  background: rgb(var(--color-background))
    linear-gradient(
      rgba(var(--color-foreground), 0.04),
      rgba(var(--color-foreground), 0.04)
    );
}
.custom-multicolumn-list h3 {
  line-height: calc(1 + 0.5 / max(1, var(--font-heading-scale)));
}
.custom-multicolumn-list h3,
.custom-multicolumn-list p {
  margin: 0;
}
.custom-multicolumn-card-spacing {
  padding-top: 2.5rem;
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}
.custom-multicolumn-card__info > :nth-child(2) {
  margin-top: 1rem;
}
.custom-multicolumn-list__item.center .media--adapt,
.custom-multicolumn-list__item .media--adapt .custom-multicolumn-card__image {
  width: auto;
}
.custom-multicolumn-list__item.center .media--adapt img {
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 749px) {
  .custom-multicolumn-list {
    margin: 0;
    width: 100%;
  }
  .custom-multicolumn-list:not(.slider) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media screen and (min-width: 750px) {
  .custom-multicolumn-list.slider,
  .custom-multicolumn-list.grid--4-col-desktop {
    padding: 0;
  }
  .custom-multicolumn-list__item,
  .grid--4-col-desktop .custom-multicolumn-list__item {
    padding-bottom: 0;
  }
  .background-none .grid--2-col-tablet .custom-multicolumn-list__item {
    margin-top: 4rem;
  }
}
.background-none .custom-multicolumn-card-spacing {
  padding: 0;
  margin: 0;
}
.custom-multicolumn-card__info {
  padding: 2.5rem;
}
.background-none .custom-multicolumn-card__info {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.background-none .slider .custom-multicolumn-card__info {
  padding-bottom: 0;
}
.background-none
  .custom-multicolumn-card__image-wrapper
  + .custom-multicolumn-card__info {
  padding-top: 2.5rem;
}
.background-none .slider .custom-multicolumn-card__info {
  padding-left: 0.5rem;
}
.background-none
  .slider
  .custom-multicolumn-card__image-wrapper
  + .custom-multicolumn-card__info {
  padding-left: 1.5rem;
}
.background-none
  .custom-multicolumn-list:not(.slider)
  .center
  .custom-multicolumn-card__info {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
@media screen and (max-width: 749px) {
  .background-none .slider .custom-multicolumn-card__info {
    padding-bottom: 1rem;
  }
  .custom-multicolumn.background-none .slider.slider--mobile {
    margin-bottom: 0rem;
  }
}
@media screen and (min-width: 750px) {
  .background-none .custom-multicolumn-card__image-wrapper {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
  .background-none .custom-multicolumn-list .custom-multicolumn-card__info,
  .background-none
    .custom-multicolumn-list:not(.slider)
    .center
    .custom-multicolumn-card__info {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.custom-multicolumn-card {
  position: relative;
  box-sizing: border-box;
}
.custom-multicolumn-card
  > .custom-multicolumn-card__image-wrapper--full-width:not(
    .custom-multicolumn-card-spacing
  ) {
  border-top-left-radius: calc(
    var(--text-boxes-radius) - var(--text-boxes-border-width)
  );
  border-top-right-radius: calc(
    var(--text-boxes-radius) - var(--text-boxes-border-width)
  );
  overflow: hidden;
}
.custom-multicolumn.background-none .custom-multicolumn-card {
  border-radius: 0;
}
.custom-multicolumn-card__info .link {
  text-decoration: none;
  font-size: inherit;
  margin-top: 1.5rem;
}
.custom-multicolumn-card__info .icon-wrap {
  margin-left: 0.8rem;
  white-space: nowrap;
}
@media screen and (min-width: 990px) {
  .custom-multicolumn-list__item--empty {
    display: list-item;
  }
}

 

Step #4. Add javascript code

n the same folder, Asset, find the theme.js or global.js (your main javascript file for your theme). Add the code below at the very end of the file, then SAVE.

class ImageViewer extends HTMLElement {
  constructor() {
    super();
    this.slider = this.querySelector("ul");
    this.slideItems = this.querySelectorAll("li");
    this.buttons = this.querySelectorAll("button");
    this.closeSpan = this.querySelector("span");
    if (this.closeSpan)
      this.closeSpan.addEventListener("click", this.closeModal.bind(this));
    this.inputs = this.querySelectorAll("input");
    this.inputs.forEach((e) =>
      e.addEventListener("click", this.inputOpen.bind(this))
    );
    this.buttons.forEach((e) =>
      e.addEventListener("click", this.buttonClicked.bind(this))
    );
    if (this.slider != null) {
      const e = new ResizeObserver((e) => this.init());
      e.observe(this.slider);
      this.slider.addEventListener("scroll", this.update.bind(this));
    }
  }
  init() {
    this.slideItems.clientWidth = this.slideItems.clientWidth;
  }
  update() {
    const e =
      Math.round(this.slider.scrollLeft / this.slideItems[0].clientWidth) + 1;
    const t = this.slideItems.length;
    t == e
      ? (this.querySelector('button[name="next"]').disabled = true)
      : (this.querySelector('button[name="next"]').disabled = false);
    e == 1
      ? (this.querySelector('button[name="previous"]').disabled = true)
      : (this.querySelector('button[name="previous"]').disabled = false);
  }
  inputOpen(e) {
    const t = e.currentTarget;
    e;
    t.checked == true
      ? document.body.classList.add("open-image-viewer")
      : document.body.classList.remove("open-image-viewer");
    this.classList.add("image-viewer-open");
  }
  closeModal(e) {
    document.body.classList.remove("open-image-viewer");
    const t = e.currentTarget.dataset.input;
    const s = this.querySelector(`#${t}`);
    s.checked = false;
    this.classList.remove("image-viewer-open");
  }
  buttonClicked(e) {
    const t =
      e.currentTarget.name === "next"
        ? this.slider.scrollLeft + this.slideItems[0].clientWidth
        : this.slider.scrollLeft - this.slideItems[0].clientWidth;
    this.slider.scrollTo({ left: t });
  }
}
customElements.define("image-viewer", ImageViewer);
 

Step #5. Customize theme

Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Add a section named "Multicolumn image viewer section". Make sure to SAVE once you are done customizing.

 

To have the images in pop up:

1. From you Admin page, go to Content, then Files

2. Click the link,File link to get the image links. 

3. In your Theme editor, find the Multicolumn image view and click the block or Column. 

4. Place the image links inside the Image links from your website file and make sure to separate with comma (,) and no space in between.

Conclusion

By incorporating this feature, you can transform your product presentations, enhance customer experience, and potentially create a more compelling shopping environment on your Shopify store. So, ditch the static image and let your products shine with a multicolumn makeover!

2 comments

Hi Nevena Ljubinkovic You should have a hover. If the code is not working, please contact us using “Chat with Made4Uo” for prompt reply.

Made4Uo •

I don’t have the hover?!

Nevena Ljubinkovic •

Leave a comment