Shopify themes, liquid, logos, and UX
Hi all,
@oscprofessional
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 -%}
<div class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }}
{% if collection.products_count > 8 %}
min-height-large
{% elsif collection.products_count > 4 %}
min-height-medium
{% else %}
min-height-small
{% endif %}
">
{%- paginate collection.products by section.settings.products_per_page -%}
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' %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const scalingFactors = {
small: 850 / 2048,
medium: 1650 / 2048,
large: 1950 / 2048
};
function updateMinHeight(className, baseMinHeight, scalingFactor, columnAdjustments) {
const currentWidth = window.innerWidth;
let newMinHeight;
if (currentWidth >= 1201) {
// Maintain 4 columns
newMinHeight = currentWidth * scalingFactor;
} else if (currentWidth >= 990) {
// Adjust for 3 columns
newMinHeight = currentWidth * scalingFactor * columnAdjustments.threeColumns;
} else {
// Adjust for 2 columns
newMinHeight = currentWidth * scalingFactor * columnAdjustments.twoColumns;
}
newMinHeight = Math.max(newMinHeight, baseMinHeight); // Ensure it doesn't fall below the base min-height
// Apply the calculated min-height to all elements with the specified class name
const elements = document.querySelectorAll(className);
elements.forEach(function(element) {
element.style.minHeight = `${newMinHeight}px`;
});
}
// Run the function for each class on initial load
updateMinHeight('.min-height-small', 580, scalingFactors.small, { threeColumns: 1.41, twoColumns: 3.90 });
updateMinHeight('.min-height-medium', 1100, scalingFactors.medium, { threeColumns: 2.08, twoColumns: 4 });
updateMinHeight('.min-height-large', 1350, scalingFactors.large, { threeColumns: 2.014, twoColumns: 3.608 });
// Re-run the function whenever the window is resized
window.addEventListener('resize', function() {
updateMinHeight('.min-height-small', 580, scalingFactors.small, { threeColumns: 1.41, twoColumns: 3.90 });
updateMinHeight('.min-height-medium', 1100, scalingFactors.medium, { threeColumns: 2.08, twoColumns: 4 });
updateMinHeight('.min-height-large', 1350, scalingFactors.large, { threeColumns: 2.014, twoColumns: 3.608 });
});
});
</script>
{% endif %}
Anybody gonna help with this please?
Would appreciate the direction or perhaps even a sit down on how to do this would be great!
Thank you in advance
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025