Hello!
I was wondering if there is a way to make the product titles and prices inside the images, at the bottom. Right now I have them outside the images and below them (both on mobile and desktop versions).
My theme is Stiletto, my website is https://winnerofficial.com/collections/ss-2024 and my password is y21.
Photo references:
How they look now:
How they should be:
Please add the following CSS code to assets/theme.css bottom of the file.
.product-item__meta {
position: absolute !important;
top: 70% !important;
margin: 0 auto !important;
width: 100% !important;
}
@media (min-width: 480px){
.product-item__meta {
position: absolute !important;
top: 80% !important;
margin: 0 auto !important;
width: 100% !important;
}
}
.product-item__inner { margin-bottom: 30px !important;}
Thanks!
Hi @martujv
Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.product-item__meta {
position: absolute;
top: 85%;
left: 0;
right: 0;
}
.collection__products {
grid-row-gap: 40px;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
@martujv , do this to fix it in 20 seconds:
.product-item__media + [class*='meta'] {
position: absolute;
bottom: -1px;
width: 100%;
background: white;
}
I have added a background to improve the readability, if you’d like to remove it you can delete the “background: white;” line.
If it helps you please click on the “like” button and mark this answer as a solution!
Thank you.
Kind regards,
Diego
