Shopify themes, liquid, logos, and UX
I'm looking for some help modifying the default button that appears over each image on the collection list page.
Currently it is a little white rectangle in the center of the image.
I'd like it to be at least twice the size and I'd like the button background to be soft/semi-transparent instead of opaque.
I'd also like the option to move it to the bottom left of the image.
If anyone can help it'd be appreciated!
-Lauren
Hi @larmellini,
Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.css and paste this at the bottom of the file:
.template-list-collections .collection-grid-item .hero__content__wrapper{
align-items: end !important;
justify-content: flex-start !important;
padding-left: var(--image-bottom) !important;
}
.template-list-collections .collection-grid-item .btn{
padding: 1.2rem !important;
background: #ffffff90 !important;
}
Hope it helps!
Thanks! That worked well.
Just so I understand, the part of the code you gave me that places the button on the bottom left is underlined below correct?
.template-list-collections .collection-grid-item .hero__content__wrapper{
align-items: end !important;
justify-content: flex-start !important;
padding-left: var(--image-bottom) !important;
So if I wanted to change it to the top right, I could revise it to read:
.template-list-collections .collection-grid-item .hero__content__wrapper{
align-items: end !important;
justify-content: flex-start !important;
padding-right: var(--image-top) !important;
is that correct?
Thanks!
Hi @larmellini,
You also need to change the code:
justify-content: flex-start !important;
=>
justify-content: flex-end !important;
Hope it is clear to you.
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
Hi @larmellini,
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024