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.
User | RANK |
---|---|
197 | |
179 | |
83 | |
60 | |
47 |
Transform this holiday season into a shopping spree. Plus, learn how to effortlessly open ...
By Jasonh Dec 8, 2023Make 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, 2023