Solved

Product Titles Inside The Images In Collection Page

martujv
Excursionist
46 1 11

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:

Captura de pantalla 2024-03-18 a las 13.35.35.png

 

How they should be:

8EA6EFE0-8742-4ECA-B013-57CD8304F0FE.JPEG

Accepted Solutions (3)

dmwwebartisan
Shopify Partner
12289 2547 3698

This is an accepted solution.

@martujv 

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Made4uo-Ribe
Shopify Partner
5378 1299 1589

This is an accepted solution.

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:

Made4uoRibe_0-1710780480484.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

diego_ezfy
Shopify Partner
2946 564 886

This is an accepted solution.

@martujv@martujv, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

.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.

diego_ezfy_0-1710782926138.pngdiego_ezfy_1-1710782933063.png

 


If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials.
Replace page builder apps w/ copy/paste snippets - no monthly fees, no slowing your site down. Use forever.

View solution in original post

Replies 3 (3)

dmwwebartisan
Shopify Partner
12289 2547 3698

This is an accepted solution.

@martujv 

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

Made4uo-Ribe
Shopify Partner
5378 1299 1589

This is an accepted solution.

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:

Made4uoRibe_0-1710780480484.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


diego_ezfy
Shopify Partner
2946 564 886

This is an accepted solution.

@martujv@martujv, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

.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.

diego_ezfy_0-1710782926138.pngdiego_ezfy_1-1710782933063.png

 


If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials.
Replace page builder apps w/ copy/paste snippets - no monthly fees, no slowing your site down. Use forever.