Update it with this one
{{- 'multicolumn.css' | asset_url | stylesheet_tag -}}
{%- liquid
assign section_heading = section.settings.heading
assign section_description = section.settings.description
assign columns_desktop = section.settings.columns_desktop
assign mobile_swipe = section.settings.mobile_swipe
assign image_ratio = section.settings.image_ratio
assign text_alignment = section.settings.text_alignment
assign disable_top_spacing = section.settings.disable_top_spacing
assign disable_bottom_spacing = section.settings.disable_bottom_spacing
case columns_desktop
when 2
assign columns_desktop_class = 'medium-6'
when 3
assign columns_desktop_class = 'medium-4'
when 4
assign columns_desktop_class = 'medium-3'
when 5
assign columns_desktop_class = 'medium-1/5'
endcase
-%}
<div class="multicolumn text-{{ text_alignment }}{% if mobile_swipe %} swipe-on-mobile{% endif %} section-spacing{% if disable_top_spacing %} section-spacing--disable-top{% endif %}{% if disable_bottom_spacing %} section-spacing--disable-bottom{% endif %}">
{% render 'section-header', section_heading: section_heading, section_description: section_description %}
<div class="multicolumn__inner">
<div class="row align-stretch">
{%- for block in section.blocks -%}
<div class="multicolumn__column small-12 {{ columns_desktop_class }} columns">
{% if block.settings.image != blank %}
{%- liquid
assign ratio = 1
if image_ratio == 'adapt'
assign ratio = block.settings.image.aspect_ratio
endif
-%}
{% if block.settings.link_label != blank %}
<a class="text-button" href="{{ block.settings.link }}">
{% endif %}
<figure class="multicolumn__image aspect-ratio aspect-ratio--{{ image_ratio }}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
{%- render 'responsive-image', image: block.settings.image, sizes: '407x0,814x0' -%}
</figure>
{% if block.settings.link_label != blank %}
</a>
{% endif %}
{% endif %}
{% if block.settings.title != blank %}
<h4 class="{{ block.settings.heading_size }}">{{ block.settings.title | newline_to_br }}</h4>
{% endif %}
{% if block.settings.text != blank %}
<div class="rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
{% endif %}
{% if block.settings.link_label != blank %}
<a class="text-button" href="{{ block.settings.link }}"><span>{{ block.settings.link_label }}</span></a>
{% endif %}
</div>
{%- endfor -%}
</div>
</div>
</div>
{% schema %}
{
"name": "Multicolumn",
"class": "section-multicolumn",
"settings": [
{
"type": "textarea",
"id": "heading",
"label": "Heading",
"default": "Multicolumn"
},
{
"type": "richtext",
"id": "description",
"label": "Description",
"default": "<p>Add a short description for this section</p>"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "Adapt to image"
},
{
"value": "portrait",
"label": "Portrait"
},
{
"value": "square",
"label": "Square"
},
{
"value": "circle",
"label": "Circle"
}
],
"default": "adapt",
"label": "Image ratio"
},
{
"type": "range",
"id": "columns_desktop",
"min": 2,
"max": 5,
"step": 1,
"default": 3,
"label": "Number of columns on desktop"
},
{
"type": "checkbox",
"id": "mobile_swipe",
"default": false,
"label": "Enable swipe on mobile"
},
{
"type": "select",
"id": "text_alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left",
"label": "Content alignment"
},
{
"type": "header",
"content": "Spacing"
},
{
"type": "checkbox",
"id": "disable_top_spacing",
"default": false,
"label": "Remove top spacing"
},
{
"type": "checkbox",
"id": "disable_bottom_spacing",
"default": false,
"label": "Remove bottom spacing"
}
],
"blocks": [
{
"type": "column",
"name": "Column",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "770 x 770 .jpg recommended."
},
{
"type": "text",
"id": "title",
"default": "Column",
"label": "Heading"
},
{
"type": "select",
"id": "heading_size",
"label": "Size",
"options": [
{
"value": "h1",
"label": "Extra Large"
},
{
"value": "h2",
"label": "Large"
},
{
"value": "h3",
"label": "Medium"
},
{
"value": "h4",
"label": "Small"
}
],
"default": "h4"
},
{
"type": "richtext",
"id": "text",
"default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
"label": "Description"
},
{
"type": "text",
"id": "link_label",
"label": "Link label"
},
{
"type": "url",
"id": "link",
"label": "Link"
}
]
}
],
"presets": [
{
"name": "Multicolumn",
"blocks": [
{
"type": "column"
},
{
"type": "column"
},
{
"type": "column"
}
]
}
],
"enabled_on": {
"templates": ["*"],
"groups": [
"header", "footer"
]
}
}
{% endschema %}
- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an
email if you are looking for quick fix or any customization
-
Email: guleriathakur43@gmail.com Skype: live:navrocks1- Try
GEMPAGES a great
page builder
