Re: Wrong image in multicolumn Dawn theme

Why are the wrong images displaying in my multicolumn Dawn theme?

kaysat
Tourist
7 0 2

Hi everyone, I've come across a strange error.

I have a multicolumn section on my home page and it is displaying a different image to the image I upload. I launched the website in October 2022 and the images in my multicolumn were correct. I had a look at my website today and all my images had changed.. I went into customize my theme and reupload the correct pictures and the correct picture is displayed on the "column" section (right-hand side) but the picture in the multicolumn on my website is wrong.

I have deleted the multicolumn section and readded it from scratch and the pictures still revert to the wrong pictures.

What is going on here and how do I fix it? It was showing the correct picture how months and now it has changed. 

Thanks for your help

 

shopify wrong multicolumn.png

Replies 6 (6)

Jivan_Suhagiya
Shopify Partner
602 83 129

Hi @kaysat ,
Is image source hard-coded?
Can you please share code of file sections/multicolumn.liquid

If helpful then please Like and Accept Solution.
Email: suhagiyajivan1992@gmail.com
Skype: jivan.suhagiya
First kind of Checkout Reminder APP: https://apps.shopify.com/checkout-reminder
kaysat
Tourist
7 0 2

Hi @Jivan_Suhagiya I haven't changed the default settings in the Dawn theme in the multicolumn section and certainly haven't changed anything since the error occurred (I set the shop up and haven't edited much since then)

But here is the multicolumn.liquid code:

{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>

{%- 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">
{%- unless section.settings.title == blank -%}
<div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin">
<h2 class="title {{ section.settings.heading_size }}">
{{ section.settings.title | escape }}
</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 }}" {{ block.shopify_attributes }}>
<div class="multicolumn-card content-container">
{%- 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 %}>
<img
class="multicolumn-card__image"
srcset="{%- if block.settings.image.width >= 275 -%}{{ block.settings.image | image_url: width: 275 }} 275w,{%- endif -%}
{%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
{%- if block.settings.image.width >= 710 -%}{{ block.settings.image | image_url: width: 710 }} 710w,{%- endif -%}
{%- if block.settings.image.width >= 1420 -%}{{ block.settings.image | image_url: width: 1420 }} 1420w,{%- endif -%}
{{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
src="{{ block.settings.image | image_url: width: 550 }}"
sizes="(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %},
(min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %},
calc(100vw - 30px)"
alt="{{ block.settings.image.alt }}"
height="{{ block.settings.image.height }}"
width="{{ block.settings.image.width }}"
loading="lazy"
>
</div>
</div>
{%- endif -%}
<div class="multicolumn-card__info">
{%- if block.settings.title != blank -%}
<h3>{{ block.settings.title | escape }}</h3>
{%- endif -%}
{%- if block.settings.text != blank -%}
<div class="rte">{{ block.settings.text }}</div>
{%- endif -%}
{%- if block.settings.link_label != blank -%}
<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">&nbsp;{% render 'icon-arrow' %}</span></a>
{%- 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>
</div>

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

 

Where can I find the file sections code?

Jivan_Suhagiya
Shopify Partner
602 83 129

there is no image source hard-coded
this will require to detail checking by login to store

If helpful then please Like and Accept Solution.
Email: suhagiyajivan1992@gmail.com
Skype: jivan.suhagiya
First kind of Checkout Reminder APP: https://apps.shopify.com/checkout-reminder
Jivan_Suhagiya
Shopify Partner
602 83 129

can you please share theme preview url where you added this section?

If helpful then please Like and Accept Solution.
Email: suhagiyajivan1992@gmail.com
Skype: jivan.suhagiya
First kind of Checkout Reminder APP: https://apps.shopify.com/checkout-reminder
kaysat
Tourist
7 0 2

@Jivan_Suhagiya  this is the preview link from my theme code. Is this what you are referring to? 

https://theaussieseedshed.au/?_ab=0&_fd=0&_sc=1

Thank you for looking into this 

Jivan_Suhagiya
Shopify Partner
602 83 129

can you please share code from index.json file?

If helpful then please Like and Accept Solution.
Email: suhagiyajivan1992@gmail.com
Skype: jivan.suhagiya
First kind of Checkout Reminder APP: https://apps.shopify.com/checkout-reminder