Shopify themes, liquid, logos, and UX
Hi!
I've duplicated a section from a customized theme in order to use it on a different page: the template for this section works fine on desktop but gives me issues on mobile.
Specifically, i can't understand why, on the duplicate section, when you tap on an event the pop-up doesnt work like it used to and you get all that white space between the image and the text (see screenshots below).
This is what it looks like on "mother" section:
This is what it looks like on the duplicated one:
Pages are:
https://mascaradeopera.com/pages/artist (mother section is the second one ie the one with the tabs)
https://mascaradeopera.com/pages/whats-on (child section, that doesnt work properly on mobile, is the second one again)
Here's the code to the duplicate section:
{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }} {{ 'component-slider.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 class="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{% 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 -%} <div class="tabs-buttons"> <ul> <li class="tab-active"> <a href="#future-events">{{ section.settings.button-1 }}</a> </li> <li class=""> <a href="#past-events">{{ section.settings.button-2 }}</a> </li> <li class=""> <a href="#suggested-events">{{ section.settings.button-3 }}</a> </li> <li class=""> <a href="#alumni-NO">{{ section.settings.button-4 }}</a> </li> <li class=""> <a href="#artists-achievements-NO">{{ section.settings.button-5 }}</a> </li> </ul> </div> <div class="tabs-stage"> <div id="future-events" class="tab_block"> <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 -%} {% if block.type == 'column' %} <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"> <a class="Click-here" href="#Slide-{{ forloop.index }}"> {%- if block.settings.image != blank -%} {% if section.settings.image_ratio == 'adapt' or section.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--{{ 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: 'multicolumn-card__image' }} </div> </div> {%- endif -%} <div class="multicolumn-card__info"> {%- if block.settings.title != blank -%} <h3 class="inline-richtext"> {{ block.settings.title | newline_to_br }} </h3> {%- endif -%} {% comment %} {%- if block.settings.text != blank -%} <div class="rte"> {{ block.settings.text }} </div> {%- endif -%} {% endcomment %} </div> </a> </div> </li> {%- endif -%} {%- 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">{% if section.blocks.block > 1 %}{{ section.blocks.size }}{% else %}1{% endif %}</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> <div id="past-events" class="tab_block" style="display:none;"> <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 -%} {% if block.type == 'column-1' %} <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"> <a class="Click-here" href="#Slide-{{ forloop.index }}"> {%- if block.settings.image != blank -%} {% if section.settings.image_ratio == 'adapt' or section.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--{{ 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: 'multicolumn-card__image' }} </div> </div> {%- endif -%} <div class="multicolumn-card__info"> {%- if block.settings.title != blank -%} <h3 class="inline-richtext"> {{ block.settings.title | newline_to_br }} </h3> {%- endif -%} {% comment %} {%- if block.settings.text != blank -%} <div class="rte"> {{ block.settings.text }} </div> {%- endif -%} {% endcomment %} </div> </a> </div> </li> {%- endif -%} {%- 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">{% if section.blocks.block > 1 %}{{ section.blocks.size }}{% else %}1{% endif %}</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> <div id="suggested-events" class="tab_block" style="display:none;"> <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 -%} {% if block.type == 'column-2' %} <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"> <a class="Click-here" href="#Slide-{{ forloop.index }}"> {%- if block.settings.image != blank -%} {% if section.settings.image_ratio == 'adapt' or section.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--{{ 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: 'multicolumn-card__image' }} </div> </div> {%- endif -%} <div class="multicolumn-card__info"> {%- if block.settings.title != blank -%} <h3 class="inline-richtext"> {{ block.settings.title | newline_to_br }} </h3> {%- endif -%} {% comment %} {%- if block.settings.text != blank -%} <div class="rte"> {{ block.settings.text }} </div> {%- endif -%} {% endcomment %} </div> </a> </div> </li> {%- endif -%} {%- 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">{% if section.blocks.block > 1 %}{{ section.blocks.size }}{% else %}1{% endif %}</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> <div id="alumni-NO" class="tab_block" style="display:none;"> <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 -%} {% if block.type == 'column-3' %} <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"> <a class="Click-here" href="#Slide-{{ forloop.index }}"> {%- if block.settings.image != blank -%} {% if section.settings.image_ratio == 'adapt' or section.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--{{ 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: 'multicolumn-card__image' }} </div> </div> {%- endif -%} <div class="multicolumn-card__info"> {%- if block.settings.title != blank -%} <h3 class="inline-richtext"> {{ block.settings.title | newline_to_br }} </h3> {%- endif -%} {% comment %} {%- if block.settings.text != blank -%} <div class="rte"> {{ block.settings.text }} </div> {%- endif -%} {% endcomment %} </div> </a> </div> </li> {%- endif -%} {%- 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">{% if section.blocks.block > 1 %}{{ section.blocks.size }}{% else %}1{% endif %}</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> <div id="artists-achievements-NO" class="tab_block" style="display:none;"> <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 -%} {% if block.type == 'column-4' %} <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"> <a class="Click-here" href="#Slide-{{ forloop.index }}"> {%- if block.settings.image != blank -%} {% if section.settings.image_ratio == 'adapt' or section.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--{{ 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: 'multicolumn-card__image' }} </div> </div> {%- endif -%} <div class="multicolumn-card__info"> {%- if block.settings.title != blank -%} <h3 class="inline-richtext"> {{ block.settings.title | newline_to_br }} </h3> {%- endif -%} {% comment %} {%- if block.settings.text != blank -%} <div class="rte"> {{ block.settings.text }} </div> {%- endif -%} {% endcomment %} </div> </a> </div> </li> {%- endif -%} {%- 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">{% if section.blocks.block > 1 %}{{ section.blocks.size }}{% else %}1{% endif %}</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> </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> <div class="custom-model-main"> <div class="custom-model-inner"> <div class="close-btn">×</div> <div class="custom-model-wrap"> <div class="pop-up-content-wrap"> <div class="faculty-details"> {%- for block in section.blocks -%} <div class="faculty-block-details" id="Slide-{{ forloop.index }}"> {%- 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 -%} {%- if block.settings.image != blank -%} {% if section.settings.image_ratio == 'adapt' or section.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--{{ 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: 'multicolumn-card__image' }} </div> </div> {%- endif -%} <div class="multicolumn-card__info"> {%- if block.settings.title != blank -%} <h3 class="inline-richtext"> {{ block.settings.title | newline_to_br }} </h3> {%- endif -%} {%- if block.settings.text != blank -%} <div class="rte"> {{ block.settings.text }} </div> {%- endif -%} </div> </div> {%- endfor -%} </div> </div> </div> </div> <div class="bg-overlay"></div> </div> {% schema %} { "name": "ABZ Whats ON 2", "class": "section abz-faculty-team", "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-1", "label": "Future Events" }, { "type": "text", "id": "button-2", "label": "Past Events" }, { "type": "text", "id": "button-3", "label": "Suggested Events" }, { "type": "text", "id": "button-4", "label": "ABZ Artist Legacy" }, { "type": "text", "id": "button-5", "label": "ABZ Artist Legacy" }, { "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": "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": "Future Events Column", "settings": [ { "type": "image_picker", "id": "image", "label": "t:sections.multicolumn.blocks.column.settings.image.label" }, { "type": "textarea", "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" } ] }, { "type": "column-1", "name": "Past Events Column", "settings": [ { "type": "image_picker", "id": "image", "label": "t:sections.multicolumn.blocks.column.settings.image.label" }, { "type": "textarea", "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" } ] }, { "type": "column-2", "name": "Suggested Events Column", "settings": [ { "type": "image_picker", "id": "image", "label": "t:sections.multicolumn.blocks.column.settings.image.label" }, { "type": "textarea", "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" } ] } ], "presets": [ { "name": "ABZ What's on 2", "blocks": [ { "type": "column" }, { "type": "column" }, { "type": "column" } ] } ] } {% endschema %}
Can you help me sort this out?
Thank you so much in advance!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025