Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
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 |
---|---|
126 | |
95 | |
78 | |
54 | |
46 |
Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022Shipping can be one of the most vital parts to set up and manage your business. Understand...
By Ollie Dec 16, 2022