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
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"> {% 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"> {% 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"