Help modifying Collection List Button Pipeline Theme

[larmellini]

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

[LitCommerce]

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!

[larmellini]

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!

[LitCommerce]

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.

[LitCommerce]

Hi @larmellini,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.