Shopify themes, liquid, logos, and UX
Hi I'm using dawn theme and I have already hide the text in product-card. So then users can't click to go to products; how can I make the image clickable?
This is my web page:
https://bcnsurfschool.es/collections/clases-de-surf
Next to the hero banner You can see the 2 product-cards I want to make clickable.
The idea is to do it just like is done in the next section; but I made it using custom liquid
Solved! Go to the solution
This is an accepted solution.
Hi @NachoBCN12
You can solve it by removing display: none; code you added and change code like this
.card__content {
/* display: none; */
grid-template-rows: minmax(0,1fr) max-content minmax(0,1fr);
padding: 1rem;
width: 100%;
flex-grow: 1;
opacity: 0;
margin: 0px;
padding: 0px !important;
height: 0px;
}
- Helpful? Like and Accept a solution. - Donate: Buy coffee ☕- or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now
This is an accepted solution.
Hi @NachoBCN12
You can solve it by removing display: none; code you added and change code like this
.card__content {
/* display: none; */
grid-template-rows: minmax(0,1fr) max-content minmax(0,1fr);
padding: 1rem;
width: 100%;
flex-grow: 1;
opacity: 0;
margin: 0px;
padding: 0px !important;
height: 0px;
}
- Helpful? Like and Accept a solution. - Donate: Buy coffee ☕- or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now
Thank you very much, it works!!
Can you also think of how to put the product title text within the image?
I was thinking of putting the text in the same image; the problem is that when changing the language, it won't allow me to translate it....
Thanks again!
Hi @NachoBCN12
This is David at SalesHunterThemes.
In this case try to replace your custom code, with this code.
.card__content {
grid-template-rows: minmax(0,1fr) max-content minmax(0,1fr);
padding: 1rem;
width: 100%;
flex-grow: 1;
position: absolute!important;
opacity: 0;
z-index: 999;
height: 100%;
}
We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.
Try our Electro theme Free! (Now at Black Friday price)
User | RANK |
---|---|
210 | |
168 | |
70 | |
55 | |
53 |
Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023