Customized Multicolumn with Video Option

Customized Multicolumn with Video Option

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All  Shopify 2.0 FREE themes  themes only. Works from lower version to version 11

We customized the multi-column that would have a pop up to display more related images. You will need to create a page and upload your images. 

You can check the demo store here. Password: made4uo

Customized Multicolumn with video option

What you are buying:

  • Modified multi-column that has a pop-up
  • Pop-up will be from a page link
  • Able to add a video instead of image
  • Autoplay and hide controls available options for video
  • Options to have different image ration in every block

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. 

To start:

1. Create a page. From your Admin page, go to Online store > Pages > Add a page

2. The title of the page will be used as your page link but this will not appear in the customized multi-column. Add the images in the content area by clicking the "insert image" icon, and make sure to click SAVE.

3. We need to edit the code of the theme. From your Admin page, go to Online store > Themes > Actions > Edit Code

4. Under the section folder, create a section, you can name it whatever you want.

5. Replaced the default code with the code below. Then click SAVE

{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{%- style -%}
  preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: none;
  }
  .preview--active {
    display: block !important;
  }
  .preview--container {
    position: relative;
    background: rgba(0, 0, 0, 0.7);
    width: 100vw;
    height: 100vh;
    display: flex;
  }
  .preview--button {
    position: absolute;
    right: clamp(20px, 5vw, 100px);
    top: 50px;
    width: 70%;
    display: flex;
    margin: auto;
    justify-content: flex-end;
    cursor: pointer;
  }
  .preview--button span {
    cursor: pointer;
    background: #fff;
    color: #000;
    width: 25px;
    aspect-ratio: 1;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    transition: scale 0.5s ease;
  }
  .preview--button span:hover {
    scale: 1.2;
  }
  .preview--wrapper {
    width: 71%;
    height: 80%;
    display: block;
    margin: auto;
    overflow: auto;
    align-self: center;
    background: white;
    padding: 2rem;
  }
  @media only screen and (min-width: 1200px) {
    .preview--wrapper::-webkit-scrollbar {
      width: 5px;
    }
    .preview--wrapper::-webkit-scrollbar-track {
      background: transparent;
    }
    .preview--wrapper::-webkit-scrollbar-thumb {
      background: #888;
    }
  }
  @media only screen and (max-width: 481px) {
    .preview--wrapper {
      width: 95%;
    }
  }
  .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 class="multicolumn color-{% if section.settings.color_scheme %}{{ section.settings.color_scheme }}{% else %}{{ section.settings.color_scheme_old }}{% endif %}  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{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
    {% if settings.animations_reveal_on_scroll %}
      data-cascade
    {% endif %}
  >
    {%- 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 -%}
    <slider-component class="slider-mobile-gutter">
      <ul
        class="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 = ' multicolumn-list__item--empty' -%}
          {%- endif -%}
 
          <li
            id="Slide-{{ section.id }}-{{ forloop.index }}"
            class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}{{ empty_column }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            {{ block.shopify_attributes }}
            {% if settings.animations_reveal_on_scroll %}
              data-cascade
              style="--animation-order: {{ forloop.index }};"
            {% endif %}
          >
            <div class="multicolumn-card content-container">
              {%- if block.settings.image != blank or block.settings.video_link != blank -%}
                {% if block.settings.image_ratio == 'adapt' or block.settings.image_ratio == 'circle' %}
                  {% assign spaced_image = true %}
                {% endif %}
                <div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
                  <div
                    class="media media--transparent media--{{ block.settings.image_ratio }}"
                    {% if block.settings.image_ratio == 'adapt' %}
                      style="padding-bottom: {% if highest_ratio %}{{ 1 | divided_by: highest_ratio | times: 100 }}{% else %}133{% endif %}%;"
                    {% endif %}
                  >
                    {% if block.settings.video_link != blank %}
                      <video
                        width="320"
                        height="240"
                        {% unless block.settings.hide_controls %}
                          controls
                        {% endunless %}
                        {% if block.settings.video_autoplay %}
                          autoplay muted
                        {% endif %}
                        {% unless block.settings.image_ratio == 'adapt' %}
                          style="object-fit: cover"
                        {% endunless %}
                      >
                        <source src="{{ block.settings.video_link }}" type="video/mp4">
                        <source src="{{ block.settings.video_link }}" type="video/ogg">
                        Your browser does not support the video tag.
                      </video>
                    {% else %}
                      {%- 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: 'multicolumn-card__image'
                      }}
                    {% endif %}
                  </div>
                </div>
              {%- endif -%}
              <div class="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 -%}
                  {% if block.settings.page != blank %}
                    <page-preview>
                      <button class="link animate-arrow" data-page-id="{{ block.id }}">
                        {{ block.settings.link_label | escape -}}
                        <span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
                      </button>
                    </page-preview>
                  {% else %}
                    <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 -%}
                {%- endif -%}
              </div>
            </div>
          </li>
        {%- endfor -%}
      </ul>
      {%- if show_mobile_slider -%}
        <div class="slider-buttons no-js-hidden medium-hide">
          <button
            type="button"
            class="slider-button slider-button--prev"
            name="previous"
            aria-label="{{ 'general.slider.previous_slide' | t }}"
          >
            {% render 'icon-caret' %}
          </button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ section.blocks.size }}</span>
          </div>
          <button
            type="button"
            class="slider-button slider-button--next"
            name="next"
            aria-label="{{ 'general.slider.next_slide' | t }}"
          >
            {% render 'icon-caret' %}
          </button>
        </div>
      {%- endif -%}
    </slider-component>
    <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>
  {% for block in section.blocks %}
    <preview-modal class="hide-preview" data-block="{{ block.id }}">
      <div class="preview--container">
        <div class="preview--button">
          <span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              focusable="false"
              role="presentation"
              class="icon icon-close"
              fill="none"
              viewBox="0 0 18 17"
            >
              <path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor">
            </svg>
          </span>
        </div>
        <div class="preview--wrapper">
          {{ block.settings.page.content }}
        </div>
      </div>
    </preview-modal>
  {% endfor %}
</div>
 
{% schema %}
{
  "name": "Customize Multicolumn",
  "class": "section",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "Multicolumn",
      "label": "t:sections.multicolumn.settings.title.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "select",
      "id": "image_width",
      "options": [
        {
          "value": "third",
          "label": "t:sections.multicolumn.settings.image_width.options__1.label"
        },
        {
          "value": "half",
          "label": "t:sections.multicolumn.settings.image_width.options__2.label"
        },
        {
          "value": "full",
          "label": "t:sections.multicolumn.settings.image_width.options__3.label"
        }
      ],
      "default": "full",
      "label": "t:sections.multicolumn.settings.image_width.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
        },
        {
          "value": "circle",
          "label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.multicolumn.settings.image_ratio.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 3,
      "label": "t:sections.multicolumn.settings.columns_desktop.label"
    },
    {
      "type": "select",
      "id": "column_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.multicolumn.settings.column_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.multicolumn.settings.column_alignment.options__2.label"
        }
      ],
      "default": "left",
      "label": "t:sections.multicolumn.settings.column_alignment.label"
    },
    {
      "type": "select",
      "id": "background_style",
      "options": [
        {
          "value": "none",
          "label": "t:sections.multicolumn.settings.background_style.options__1.label"
        },
        {
          "value": "primary",
          "label": "t:sections.multicolumn.settings.background_style.options__2.label"
        }
      ],
      "default": "primary",
      "label": "t:sections.multicolumn.settings.background_style.label"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Button label",
      "label": "t:sections.multicolumn.settings.button_label.label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "t:sections.multicolumn.settings.button_link.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "background-1"
    },
    {
      "type": "select",
      "id": "color_scheme_old",
      "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 (For older version ONLY)"
    },
    {
      "type": "header",
      "content": "t:sections.multicolumn.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.multicolumn.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.multicolumn.settings.columns_mobile.options__2.label"
        }
      ],
      "default": "1",
      "label": "t:sections.multicolumn.settings.columns_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "t:sections.multicolumn.blocks.column.name",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.multicolumn.blocks.column.settings.image.label"
        },
        {
          "type": "select",
          "id": "image_ratio",
          "options": [
            {
              "value": "adapt",
              "label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
            },
            {
              "value": "portrait",
              "label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
            },
            {
              "value": "square",
              "label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
            },
            {
              "value": "circle",
              "label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
            }
          ],
          "default": "adapt",
          "label": "t:sections.multicolumn.settings.image_ratio.label"
        },
        {
          "type": "header",
          "content": "Video Settings"
        },
        {
          "type": "url",
          "id": "video_link",
          "label": "Video link",
          "info": "Leave blank to use image"
        },
        {
          "type": "checkbox",
          "id": "video_autoplay",
          "label": "Video autoplay",
          "info": "If checked, video will be muted."
        },
        {
          "type": "checkbox",
          "id": "hide_controls",
          "label": "Hide controls"
        },
       {
          "type": "header",
          "content": "Column Settings"
        },
        {
          "type": "inline_richtext",
          "id": "title",
          "default": "Column",
          "label": "t:sections.multicolumn.blocks.column.settings.title.label"
        },
        {
          "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": "t:sections.multicolumn.blocks.column.settings.text.label"
        },
        {
          "type": "text",
          "id": "link_label",
          "label": "t:sections.multicolumn.blocks.column.settings.link_label.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.multicolumn.blocks.column.settings.link.label"
        },
        {
          "id": "page",
          "type": "page",
          "label": "Page",
           "info": "Leave blank to use link instead"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.multicolumn.presets.name",
      "blocks": [
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        }
      ]
    }
  ]
}
{% endschema %}

6. Next, go to the Asset folder and open the global.js. Then paste the code below at the very end of the file. Make sure to SAVE.

class PagePreview extends HTMLElement {
  constructor() {
    super();
    this.button = this.querySelector("button");
    this.button.addEventListener("click", this.clickListener.bind(this));
    this.previewBox = document.querySelectorAll("preview-modal");
  }
 
  closeListener() {
    this.previewBox.forEach(preview => preview.classList.remove("preview--active"));
    document.body.style.overflow = "unset";
  }
 
  clickListener(e) {
    const pageData = e.currentTarget.dataset.pageId;
    document.querySelector(`preview-modal[data-block="${pageData}"]`).classList.add('preview--active');
 
    this.closeBtn = document.querySelector(".preview--active span");
    this.closeBtn.addEventListener("click", this.closeListener.bind(this));
  }
}
customElements.define("page-preview", PagePreview);

7. To add this section to your template. Click the three dots on your top left hand corner, then "Customized Theme"

8. Add a section, and look for "Customized Multicolumn"

Copied!
Voltar para o blogue

Deixe um comentário