Shopify themes, liquid, logos, and UX
I've tried a few other suggestions in editing the code, but none of them seemed to work for our theme SUPPLY.02
Here's a few screenshots.. how do we clean this up and tighten up the product by moving the Title closer to the Image, and removing the space under the item. We are trying to use the Osaria media player, and it made the current justification worse.
site is : https://earcave.com
Solved! Go to the solution
This is an accepted solution.
Hi @madmosaic ,
This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.
While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:
1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file
3. Paste below code before </body>:
<style>
a.product-grid-item, .product-grid-item {
margin-bottom: unset;
}
.product-grid-image {
margin-bottom: 5px !important
}
</style>
Best regards,
Anthony
This is an accepted solution.
Try this one for then.
Same instruction.
span.h1.medium--left {
margin: 0px !important;
}
.product-grid-image {
height: 185px !important;
}
.grid-item.small--one-half.medium--one-fifth.large--one-fifth p {
margin-top: 25px;
}
And Save.
Result:
Hi @madmosaic
TRy this one.
.product-grid-image {
margin-bottom: 12px;
}
.grid-item.small--one-half.medium--one-fifth.large--one-fifth p {
margin-bottom: 5px;
}
.grid-item {
padding-left: 10px;
}
thank you for your reply, how would you move the product closer to the product below it?
This is an accepted solution.
Try this one for then.
Same instruction.
span.h1.medium--left {
margin: 0px !important;
}
.product-grid-image {
height: 185px !important;
}
.grid-item.small--one-half.medium--one-fifth.large--one-fifth p {
margin-top: 25px;
}
And Save.
Result:
this worked too ! thank you for your time
This is an accepted solution.
Hi @madmosaic ,
This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.
While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:
1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file
3. Paste below code before </body>:
<style>
a.product-grid-item, .product-grid-item {
margin-bottom: unset;
}
.product-grid-image {
margin-bottom: 5px !important
}
</style>
Best regards,
Anthony
excellent! that worked!
Hello I can't seem to make it work on my theme
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025