Shopify themes, liquid, logos, and UX
As the question says, I would like the links to my collections overlay, perhaps as buttons, instead of appearing as text under each image. I don't see a customization option in the template editor, but maybe I'm missing something. Here is a screenshot of another store - this is how I would like mine to look, but with slightly larger text.
Or, barring that, I would like to have some control over how the text links appear under my collection images. It's too large now. Thank you!
Solved! Go to the solution
This is an accepted solution.
Hi @CapitalC
Try this one.
.collection-list-wrapper .card__content {
position: absolute;
bottom: 10px;
}
.collection-list-wrapper .card__heading a {
color: white;
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
This is an accepted solution.
Hi @CapitalC
Try this one.
.collection-list-wrapper .card__content {
position: absolute;
bottom: 10px;
}
.collection-list-wrapper .card__heading a {
color: white;
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Thank you!
Is there something I can add to the code to right-justify the overlaid text?
Yes, replace on this code. I aslo remove the arrow.
.collection-list-wrapper .card__content {
position: absolute;
bottom: 10px;
}
.collection-list-wrapper .card__heading a {
color: white;
}
.collection-list-wrapper .card__heading {
text-align: right;
padding-right: 5px;
}
.collection-list-wrapper .card__heading span.icon-wrap {
display: none;
}
And Save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
That works, thank you. One more thing: Is there a line that I can add to put a translucent background just behind the text, so be sure it shows over any color in the photo? Maybe like an 80% black highlight behind?
Do you mean like this?
If it is, add this one same instruction.
.collection-list-wrapper h3.card__heading {
background-color: rgba(0, 0, 0, 0.7);
width: fit-content;
}
.collection-list-wrapper .card__information {
justify-self: end;
}
.collection-list-wrapper .card__heading {
padding-left: 5px;
}
And Save.
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024