Hi all,
Hope someone can help out with this as I am running in circles, Ive made some progress but I do find other things that need fixing as a consequence of the codes I am trying to implement to fix the CLS in my collection pages.
The content weirdly loads from bottom to top causing anything that is " RELATIVE " to shift from bottom to top until it set in its position which causes CLS. A fix I know is to give whatever is pushing the content min-height or similar so there is a predetermined height for it and thus avoid CLS. It does work however because that is also a responsive grid setting a min-height at one VIEWPORT width doesnt solve the issue at another viewport width.
So what I’ve done is I’ve adjusted my liquid code a little bit and added a javascript to theme to tackle this.
The code is below as follows :
This is my main-collection-product-grid.liquid - the code below is modified by me, Ive tried to implement the logic of the padding top and bottom lines so that it multiplies an integer that gives a min-height or similar to pages where we have different product counts.
{%- 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;
}
/* Initial min-height for the medium expected element */
.min-height-small {
min-height: {{ 610 | times: 1.393 | round: 0 }}px;
}
/* Initial min-height for the medium expected element */
.min-height-medium {
min-height: {{ 1100 | times: 1.5 | round: 0 }}px;
}
/* Initial min-height for the largest expected element */
.min-height-large {
min-height: {{ 1350 | times: 1.44444 | round: 0 }}px;
}
{%- endstyle -%}
This so far is working and it’s setting the correct classes based on product count. To make this better I went step further and wanted to make this min-height dynamic so I added a piece of javascript that would adjust the min-height dynamically between viewport breakpoints I have for my website. I’ve started working from my screen size 2048px 21.5 inch iMac down to mobile below 450px.
With these 2 pieces of code my min-height gets set based on product count and it assigned classes as such you see in the codes which then give an initial min-height which is then dynamically reduced as you resize the viewport size.
This to an extent is fixing the issue, there is no CLS, I can only see it in dev tools under very slow 3g simulation but its a hit and miss, sometimes its there sometimes it isnt. General usage of the site is pretty fast and I can barely see any CLS in these pages but I am not sure if I ve done this correctly. Maybe this is too much code and there is simpler solution.
The issue I have with this one is that I have filters in the pages and so if the page starts with > 8 products as per the link https://f424af-2.myshopify.com/collections/ready-to-wear then it gives it the class min-height-large, with initial height of 1950px and then starts reducing it down as you resize the browser. And if I click on the filters and select an option that changes the product count to 1 or similar then it maintains that initial height of 1950px and doesnt register the change on the page to set a different class which should be min-height-small.
In reality I am writing this so that someone can shed some light into this and whether there is actually another approach of setting min-heights to dynamic containers like the product grid because those products are dynamically injected there, at least thats what I think as it takes time to download them and doesnt know the height until the content is there.
If there is a simpler solution of providing min-height to the product collection page product grid please please help me out. I am looking for the responsive solution.
{% if template contains ‘collection’ %}
{% endif %}