Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi everyone,
I changed multicolumn to have it slide on desktop by following this video https://www.youtube.com/watch?v=szkhN249qBY&t=612s
Now that worked great, but now I want to make the multicolumn section full width
Any tips?
Solved! Go to the solution
This is an accepted solution.
Hi @JeroenH,
Please go to multicolumn.liquid file and remove code 'page-width' here:
Hope it helps!
This is an accepted solution.
Hi @JeroenH,
Please go to multicolumn.liquid file and remove code 'page-width' here:
Hope it helps!
That did the trick indeed. Now I was wondering if there is an "infinite scroll" possibility on the multicolumn. now it stops after the last column but rather have it continue with the first one after it showed the last picture. Thanks in advance!
Hi @JeroenH,
Please send your site and if your site is password protected, please send me the password. I will check it.
Just sent you the login details. On a side, i noticed your solution on having a title and link inside the pictures here https://community.shopify.com/c/shopify-design/dawn-theme-multicolumns/td-p/1689569. That worked well, but I don't manage to combine this with a zoom effect on hover.
Hi, this solution helped me alot, I am using the dawn theme as well and wanted to make the multicolumn section full width.. i do have a mouseover card-overlay now that is not the correct width.. how do i make this full screen as well? my site is https://colosseumusa.myshopify.com/
Password is colo2400
and the code i think will need to change is in this section - im not sure what i need to change to make it full width like the columns
{%- 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 %}>
{%- capture 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){%- endcapture -%}
{{ block.settings.image | image_url: width: 1420 | image_tag:
loading: 'lazy',
sizes: sizes,
widths: '275, 550, 710, 1420',
class: 'multicolumn-card__image'
}}
<div class="color-overlay"></div>
</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"> {% render 'icon-arrow' %}</span></a>
{%- endif -%}
</div>
</div>
removed code page-width but it is only working for desktop not for mobile
From the video https://www.youtube.com/watch?v=szkhN249qBY&t=612s, it looks like you've added swipe functionality to your multi-column section on Shopify's Dawn theme. Now you want to make that section full width.
While the video focuses on making the multi-column section swipe on desktop, there isn't specific guidance on making it full width.