Shopify themes, liquid, logos, and UX
Can you help me with problem: I'd like to be able to arrange my products (sub-collections) in this way in the collection pages for the website https://lavieexotique.fr/collections/
Hey @Koureche,
This is the closest I can get.
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
div#infiniteScrollContainer {
display: grid !important;
grid-template-columns: repeat(5, auto) !important;
gap: 10px !important;
padding-left: 20px !important;
}
.grid__item.medium--six-twelfths.large--four-twelfths.flex.flex-fill {
width: 100% !important;
border-radius: 15px !important;
margin-bottom: 0 !important;
padding-left: 0 !important;
}
.collection_grid-image {
border-radius: 15px !important;
}
.collection_grid-item {
border-radius: 15px !important;
}
.collection_grid-inner {
top: unset !important;
bottom: 19px !important;
left: 15px !important;
padding: 0 !important;
width: fit-content !important;
}
body .collection_grid-text-wrapper {
background: transparent !important;
padding: 0 !important;
}
body .collection_grid-title {
font-size: 1rem !important;
filter: drop-shadow(1px 1px 3px black) !important;
}
@media only screen and (max-width: 989px) {
div#infiniteScrollContainer {
grid-template-columns: repeat(1, auto) !important;
padding-left: 20px !important;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Thanks a lot for your help, I tried your code, it worked but not the way I wanted, I would like only the sub collections to appear when clicking on the collection page : https://lavieexotique.fr/collections/delices-sucres for example I would like that it show only the sub collections that are "Chocolats", "Dattes" and "Fruits séchés" not the products.
Do you think it's possible 😕
Thanks in advance
Your message wasn't clear. You said you'd like to arrange the collections as the screenshot, so I assumed you wanted it to look like that.
The feature you are requesting does not have a simple short code solution, there's hours of work that needs to be done to do that.
In Canada, payment processors, like those that provide payment processing services t...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025