Remove link for banner & multicolumns & Change size on mobile for Craft theme

  1. I pasted a code (for both image-banner.liquid and multicolumn.liquid) to give links to images to banners and multicolumns (such as ‘NewArrival’, ‘Shirt’, ‘Pants’, etc.) so that people can be directed to different links by clicking. Yet, the code resulted in giving all banners / multicolumn photos links, even for other pages which is unnecessary. Is there any code that I can only link necessary banners and column photos, but keep other photos not linked to any?

  2. Also, I would like to change the size of the banners in the mobile view (want it to have a larger look on mobile). May I know where should the code be changed?

Sorry there are quite a lot of questions, please help if you have solutions :disappointed_face:

My website: https://studiowillows.com

pw: flilyi

1 Like

@studiowillows

yes please just remove link in theme setting if you no need for all banner

1 Like

Hi @studiowillows ,

Please send me the code you changed, I will help you add conditions to it.

1 Like

for the resizing matter, should I send you my “theme.css” code? Say for example, I would like to change the aspect ratio/ size of the second banner (as attached) for the mobile version as I think it looks too small for now.

My theme code:

{%- if settings.favicon != blank -%}

{%- endif -%}

{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}

{%- endunless -%} {{ page_title }} {%- if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%} {%- if current_page != 1 %} – Page {{ current_page }}{% endif -%} {%- unless page_title contains shop.name %} – {{ shop.name }}{% endunless -%}

{% if page_description %}

{% endif %}

{% render ‘meta-tags’ %}

{{ content_for_header }}

{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: ‘weight’, ‘bold’
assign body_font_italic = settings.type_body_font | font_modify: ‘style’, ‘italic’
assign body_font_bold_italic = body_font_bold | font_modify: ‘style’, ‘italic’
%}

{% style %}
{{ settings.type_body_font | font_face: font_display: ‘swap’ }}
{{ body_font_bold | font_face: font_display: ‘swap’ }}
{{ body_font_italic | font_face: font_display: ‘swap’ }}
{{ body_font_bold_italic | font_face: font_display: ‘swap’ }}
{{ settings.type_header_font | font_face: font_display: ‘swap’ }}

:root {
–font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
–font-body-style: {{ settings.type_body_font.style }};
–font-body-weight: {{ settings.type_body_font.weight }};
–font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};

–font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
–font-heading-style: {{ settings.type_header_font.style }};
–font-heading-weight: {{ settings.type_header_font.weight }};

–font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
–font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};

–color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
–color-shadow: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
–color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
–color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
–color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
–color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
–color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
–color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
–payment-terms-background-color: {{ settings.colors_background_1 }};

–gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
–gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};
–gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};
–gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};

–media-padding: {{ settings.media_padding }}px;
–media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
–media-border-width: {{ settings.media_border_thickness }}px;
–media-radius: {{ settings.media_radius }}px;
–media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
–media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
–media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
–media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
–media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};

–page-width: {{ settings.page_width | divided_by: 10 }}rem;
–page-width-margin: {% if settings.page_width == ‘1600’ %}2{% else %}0{% endif %}rem;

–card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
–card-corner-radius: {{ settings.card_corner_radius | divided_by: 13.0 }}rem;
–card-text-alignment: {{ settings.card_text_alignment }};
–card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
–card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
–card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
–card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
–card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
–card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
–card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;

–badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;

–popup-border-width: {{ settings.popup_border_thickness }}px;
–popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
–popup-corner-radius: {{ settings.popup_corner_radius }}px;
–popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
–popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
–popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
–popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;

–drawer-border-width: {{ settings.drawer_border_thickness }}px;
–drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
–drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
–drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
–drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
–drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;

–spacing-sections-desktop: {{ settings.spacing_sections }}px;
–spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;

–grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
–grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
–grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
–grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;

–text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
–text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
–text-boxes-radius: {{ settings.text_boxes_radius }}px;
–text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
–text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
–text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
–text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
–text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;

–buttons-radius: {{ settings.buttons_radius }}px;
–buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
–buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
–buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
–buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
–buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
–buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
–buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
–buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
–buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;

–inputs-radius: {{ settings.inputs_radius }}px;
–inputs-border-width: {{ settings.inputs_border_thickness }}px;
–inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
–inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
–inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
–inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
–inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
–inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
–inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;

–variant-pills-radius: {{ settings.variant_pills_radius }}px;
–variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
–variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
–variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
–variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
–variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
–variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

html {
box-sizing: border-box;
font-size: calc(var(–font-body-scale) * 62.5%);
height: 100%;
}

body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 0.6rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(–font-body-scale));
font-family: var(–font-body-family);
font-style: var(–font-body-style);
font-weight: var(–font-body-weight);
}

@media screen and (min-width: 750px) {
body {
font-size: 1.3rem;
}
}
{% endstyle %}

{{ ‘base.css’ | asset_url | stylesheet_tag }}

{%- unless settings.type_body_font.system? -%}

{%- endunless -%} {%- unless settings.type_header_font.system? -%} {%- endunless -%}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{% if content_for_header contains ‘rio.pwztag.com’ %}{% render ‘productwiz-rio’, product: product, shop: shop, installGuard: true %}{% endif %}

{{ "accessibility.skip_to_text" | t }}

{%- if settings.cart_type == ‘drawer’ -%}
{%- render ‘cart-drawer’ -%}
{%- endif -%}

{% section ‘announcement-bar’ %}
{% section ‘header’ %}

{{ content_for_layout }}

{% section ‘footer’ %}

  • {{ 'accessibility.refresh_page' | t }}
  • {{ 'accessibility.link_messages.new_window' | t }}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

@media only screen and (max-width: 750px) {
#shopify-section-166439211420524edc {height: 500px;}
}

But the link function of multicolumn was added from the multicolumn page. Say for example https://studiowillows.com/products/gladiator-slippers-1 for the “Model Size” below, the 4 columns are made of the multicolumn section. The 4 icons are not manually linked to any new links but still it is clickable and linked to pages. So I would like to see if I can only link multicolumns I need (like the bars on the homepage did), but keep other multicolumns non-clickable.

The code for multicolumn.liquid is as below now:

{{ ‘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
-%}

{%- unless section.settings.title == blank -%}

{{ section.settings.title | escape }}

{%- if section.settings.button_label != blank and show_mobile_slider -%} {{ section.settings.button_label | escape }} {%- endif -%}
{%- endunless -%}
    {%- 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 -%}
  • {%- if block.settings.image != blank -%} {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %} {% assign spaced_image = true %} {% endif %} {%- endif -%}
    {%- if block.settings.title != blank -%}

    {{ block.settings.title | escape }}

    {%- endif -%} {%- if block.settings.text != blank -%}
    {{ block.settings.text }}
    {%- endif -%} {%- if block.settings.link_label != blank -%} {{ block.settings.link_label | escape }} {% render 'icon-arrow' %} {%- endif -%}
  • {%- endfor -%}

{%- if show_mobile_slider -%}

{% render 'icon-caret' %}
1 / {{ 'general.slider.of' | t }} {{ section.blocks.size }}
{% render 'icon-caret' %}
{%- endif -%}
{%- if section.settings.button_label != blank -%} {{ section.settings.button_label | escape }} {%- endif -%}

{% schema %}
{
“name”: “t:sections.multicolumn.name”,
“class”: “section”,
“tag”: “section”,
“settings”: [
{
“type”: “text”,
“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”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.label”
},
{
“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”: “text”,
“id”: “title”,
“default”: “Column”,
“label”: “t:sections.multicolumn.blocks.column.settings.title.label”
},
{
“type”: “richtext”,
“id”: “text”,
“default”: “

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.

”,
“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”: “t:sections.multicolumn.presets.name”,
“blocks”: [
{
“type”: “column”
},
{
“type”: “column”
},
{
“type”: “column”
}
]
}
]
}
{% endschema %}

1 Like

@studiowillows

yes but make sure you have create separate that section for new name

May I know the code for separating section? and change in the multicolumn.liquid?

Hi @studiowillows ,

Please change all the code of multicolumn.liquid file, it will work fine

{{ 'section-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
-%}

{%- unless section.settings.title == blank -%}

## 
{{ section.settings.title | escape }}

{%- if section.settings.button_label != blank and show_mobile_slider -%}
{{ section.settings.button_label | escape }}
{%- endif -%}

{%- endunless -%}

{%- if section.settings.button_label != blank -%}

{{ section.settings.button_label | escape }}

{%- endif -%}

{% schema %}
{
"name": "t:sections.multicolumn.name",
"class": "section",
"tag": "section",
"settings": [
{
"type": "text",
"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": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label"
},
{
"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": "text",
"id": "title",
"default": "Column",
"label": "t:sections.multicolumn.blocks.column.settings.title.label"
},
{
"type": "richtext",
"id": "text",
"default": "

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.

",
"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": "t:sections.multicolumn.presets.name",
"blocks": [
{
"type": "column"
},
{
"type": "column"
},
{
"type": "column"
}
]
}
]
}
{% endschema %}

Super thanks! Do you have a way to solve my resizing problem in mobile version as well? :disappointed_face: as mentioned above! Thank you sooooo much for helping

Hi @studiowillows ,

Do you want it to look like this? Or upload another image for mobile?

Yes similar to this! I would like to see if I can give a size to the mobile version myself.

Hi @studiowillows ,

I checked and you changed it successfully?

if my previous answer can help you, please mark it as a solution. Thank you and good luck.

1 Like