Description: turn Store page to Masonry layout.
You can use code to Store Page Header Injection
<style>
:root {
--masonry-columns-mobile: 2;
--masonry-columns-desktop: 4;
--masonry-gap-mobile: 15px;
--masonry-gap-desktop: 45px;
--masonry-overlay-bg: rgba(255, 255, 255, 0.75);
}
img.grid-item-image.grid-item-additional-image {
display: none !important;
}
.product-masonry {
animation: fadein 1s 0.15s backwards;
display: block !important;
grid-template-columns: none !important;
}
.product-masonry .product-list-item {
margin-bottom: var(--masonry-gap-mobile) !important;
break-inside: avoid;
transition: all 0.3s ease;
height: auto !important;
position: relative !important;
padding-bottom: 0 !important;
box-sizing: border-box !important;
}
.product-masonry .product-list-item:first-child {
margin-top: 0 !important;
}
.product-masonry .product-list-item .product-list-image-wrapper {
position: relative !important;
overflow: hidden;
width: 100%;
margin: 0;
line-height: 0;
padding-bottom: 0 !important;
}
.product-masonry .product-list-item .grid-image-wrapper {
position: relative !important;
top: auto !important;
left: auto !important;
bottom: auto !important;
right: auto !important;
width: 100% !important;
height: auto !important;
padding-bottom: 0 !important;
aspect-ratio: unset !important;
}
.product-masonry .product-list-item img.grid-image-cover {
width: 100% !important;
height: auto !important;
display: block !important;
position: static !important;
object-fit: cover !important;
}
.product-masonry .product-list-item .product-list-item-meta {
position: absolute !important;
background: var(--masonry-overlay-bg);
padding: 15px;
border-top: none;
top: 0 !important;
left: 0 !important;
width: calc(100% - 30px);
height: calc(100% - 30px);
align-items: center;
justify-content: center !important;
row-gap: 0px !important;
margin-top: 0px !important;
}
@keyframes fadein {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 767px) {
.product-masonry {
column-count: var(--masonry-columns-mobile) !important;
column-gap: var(--masonry-gap-mobile) !important;
column-fill: balance;
padding: 0 10px;
}
.product-masonry .product-list-item {
margin-bottom: var(--masonry-gap-mobile) !important !important;
display: inline-block !important;
width: 100% !important;
}
}
@media (min-width: 768px) {
.product-masonry {
column-count: var(--masonry-columns-desktop) !important;
column-gap: var(--masonry-gap-desktop) !important;
column-fill: balance;
padding: 0 20px;
}
.product-masonry .product-list-item {
margin-bottom: var(--masonry-gap-desktop) !important;
display: inline-block !important;
width: 100% !important;
}
}
.product-masonry .product-list-item .product-list-item-link {
display: block;
text-decoration: none;
color: inherit;
}
</style>
<script>
(function(){function initProductMasonry(container,options={}){container.classList.add('product-masonry');const items=[...container.querySelectorAll('.product-list-item')];items.forEach((item,index)=>{const imageWrapper=item.querySelector('.grid-image-wrapper');const img=item.querySelector('img[data-src], img[src]');if(img&&imageWrapper){item.style.height='auto';item.style.position='relative';item.style.paddingBottom='0';imageWrapper.style.position='relative';imageWrapper.style.top='auto';imageWrapper.style.left='auto';imageWrapper.style.bottom='auto';imageWrapper.style.right='auto';imageWrapper.style.width='100%';imageWrapper.style.height='auto';imageWrapper.style.paddingBottom='0';img.style.position='static';img.style.width='100%';img.style.height='auto';img.style.objectFit='cover';img.style.display='block'}
item.style.animationDelay=(index*0.05)+'s'});if(options.shuffle){const shuffled=items.sort(()=>Math.random()-0.5);shuffled.forEach(item=>container.appendChild(item))}
setTimeout(()=>{items.forEach(item=>{item.style.opacity='1';item.style.transform='translateY(0)'})},100)}
function initProductMasonryPlugin(options={}){const defaultOptions={shuffle:!1,selector:'.product-list-container, [data-product-list-layout="grid"]'};const config=Object.assign(defaultOptions,options);let containers=[];containers=[...document.querySelectorAll(config.selector)];containers.forEach(container=>{if(!container.classList.contains('product-masonry')){initProductMasonry(container,config)}})}
function domReady(callback){if(document.readyState==='interactive'||document.readyState==='complete'){callback()}else{document.addEventListener('DOMContentLoaded',callback)}}
function ajaxReady(callback){const ajaxBody=document.querySelector('body[data-ajax-loader]');if(ajaxBody){const observer=new MutationObserver(mutations=>{if(mutations[0].attributeName==='data-ajax-loader'&&ajaxBody.getAttribute('data-ajax-loader')==='loaded'){callback()}});observer.observe(ajaxBody,{attributes:!0})}else{window.addEventListener('mercury:load',callback)}}
function init(options={}){domReady(()=>initProductMasonryPlugin(options));ajaxReady(()=>initProductMasonryPlugin(options));window.addEventListener('load',()=>{setTimeout(()=>initProductMasonryPlugin(options),100)});window.addEventListener('resize',()=>{setTimeout(()=>initProductMasonryPlugin(options),200)})}
window.productMasonry={init};setTimeout(()=>{console.log('Product Masonry: Starting auto init...');init()},100)})()
</script>
To change number of Columns, space between items, overlay color, adjust these.
