All things Shopify and commerce
Hi everyone! Help a noob here.
The page currently looks like this:
I want it to look like this:
hovering the image will have the same effect as default (i.e. minor zoom in)
clicking the image will open the respective product.
I have looked into all liquid files and I have tried many methods but all of them have one or 2 things going wrong with it.
Can anyone please suggest anything?
Solved! Go to the solution
This is an accepted solution.
.card.card--standard.card--media {
position: relative;
}
.card__content {
position: absolute;
bottom: 40px;
left: 20px;
z-index: 2;
}
Try this, I think you should change the text colour to be lighter or add a background overlay to get more text contrast
Hi Younngsodsale,
I think your answer is leading wrong direction. For this task, We don't have to change product Images, We can use simple CSS to achieve this.
Hi DevNoob,
To do this you can use CSS, Since I don't have access to check your current theme configuration I will share an outline here,
For your product card wrapper add
.wrapper-class {
position : relative}
Then for the wrapper that holds the name and price add
child-wrapper {
position: absolute;
bottom:40px;
right:20px;
}
Change the wrapper classes as you need, if you need further assistance reach out to me. You can find my email address below.
Thanks for getting back Keshan97. I am customising the Basic Dawn Theme Config. I have not changed the product grid at all apart from the 2 columns for the product. I am a bit new with CSS but I will try and navigate through your suggestion now.
Devnoob, If you share your store preview URL, I can provide a more precise answer to this
That would be: https://fe0a26-ed.myshopify.com/collections/all
Many thanks for your help!
The store is password protected, Can you share the preview password: https://fe0a26-ed.myshopify.com/password
rireug
This is an accepted solution.
.card.card--standard.card--media {
position: relative;
}
.card__content {
position: absolute;
bottom: 40px;
left: 20px;
z-index: 2;
}
Try this, I think you should change the text colour to be lighter or add a background overlay to get more text contrast
Thank you so much Keshan97! This has worked!
I wish to be as good as you! might ask more questions if you don't mind. This is my first time building a shopify store design.
Thank you Keshan, this works really nicely. 🙂
However, the image itself is no longer clickable after using this code, only the title and price tags are actual links. Is there a way to get around this?
Hello Keshan,
Can you also help me do this?
Just want to add Badge/Product labels To Images On Collection Page/Featured Products?
I will show a example on how i want it to look.
Website: https://diversusoficialsite.myshopify.com/
Pass: diversusoficial
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024