Is it possible to add a custom background to the multicolumn cards rather than using the standard colour options? Thank you in advance.
1 Like
can you please share store url
1 Like
Hi @Connor_Bentley ,
Please change all code:
{{ '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;
}
}
.section-{{ section.id }}-padding .multicolumn-card {
background: {{ section.settings.background }} !important;
}
{%- 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": "color",
"id": "background",
"label": "Background color"
},
{
"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 %}
Hi @LitExtension ,
I have changed the whole code but nothing has changed, where do I add the asset url?
Hi @Connor_Bentley ,
After you change it you need to go to Customize > Multicolumn. I helped you add option for it, you just need to choose color, it will work fine.
Hope it is clear to you.
As discussed in our emails, I do not need a colour - I need a custom image background.
Please help as soon as possible.
Hi @Connor_Bentley ,
Please change all code:
{{ '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;
}
.section-{{ section.id }}-padding .multicolumn-card {
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: 50% 50% !important;
}
@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"
},
{
"type": "image_picker",
"id": "background",
"label": "Background"
}
]
}
],
"presets": [
{
"name": "t:sections.multicolumn.presets.name",
"blocks": [
{
"type": "column"
},
{
"type": "column"
},
{
"type": "column"
}
]
}
]
}
{% endschema %}
I have added an option for each block for you to upload a background image.
Hope it helps!
1 Like
Works perfect, thank you!
1 Like
Is it possible to add an image to the backgound of the container - not the individual columns?
Where do you apply this code in settings?
you should replace it with multicolumn.liquid
just tried it and worked for me 
Hi, is this code usable for changing the colors or just to insert a background image.. I have pasted it and it gives me only option for background image… Hope you can help me out. Thankyou in advance