How can I alter the placement and design of collection list buttons in the Dawn theme?

[Decor3]

Hello!

I am using the Dawn theme and i was just wondering how i can change this button my collection list;

to be in the middle of each image (collection) and how i can change it to a button like this

I am also wondering how i can change all the buttons on my store to become more rounded like for example this one;

Thank you!

[PageFly-Richard]

Hi @Decor3 ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

.collage__item .card__heading a {
	 padding: 10px 20px;
	 background: #000;
	 color: #fff;
	 display: inline-block;
}
 .button {
	 border-radius: 10px !important;
}
 .button:before, .button:after {
	 border-radius: 10px !important;
}

I hope it would help you
Best regards,

Richard | PageFly

[Decor3]

My buttons are rounded now, thank you! But i am also wondering how i can move the buttons on specfiic collections or multicolumsn so that they look like this:

On the container or image.

[Decor3]

Also, the “Buy now” button isnt rounded but the add to cart one is?

The

quantity button is also not rounded but instead a box. How do i fix this thanks.

[PageFly-Richard]

Hi @Decor3 ,

Sorry for the late reply.

Also, the “Buy now” button isnt rounded but the add to cart one is?> >

> > The> > > > quantity button is also not rounded but instead a box. How do i fix this thanks.

=> I checked it looks like you have solved it, right?

My buttons are rounded now, thank you! But i am also wondering how i can move the buttons on specfiic collections or multicolumsn so that they look like this:

=> Do you want like this?

Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

.collection-list__item .card__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    text-align: center;
}
.collection-list__item .card__heading {
    background: #fff;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
}

I hope it would help you
Best regards,

Richard | PageFly

[Decor3]

Thank you so much! I am practically indebted to you guys at pagefly at this point! Works perfectly every time.

Just wondering, if i wanted to move it downwards like in this picture

what would i have to do. Basically make the rounded button hang off of the container

[PageFly-Richard]

Hi @Decor3 ,

You can use below code in base.css file:

.collection-list__item .card__content {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    text-align: center;
}
.collection-list__item .card__heading {
    background: #fff;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
}

I hope it would help you
Best regards,

Richard | PageFly

[Decor3]

Thank you! It works perfectly. Just one last question: I figured out how to change the backgrund color of the buttons but how do i change the text color inside it to black?

My color palette:

[Decor3]

to white***

[PageFly-Richard]

Hi @Decor3 ,

You can try below code:

.collection-list__item .card__heading a {
    color: #fff !important;
}

I hope it would help you
Best regards,

Richard | PageFly

[Tomeliss]

the collection lists arent clickable trought mobile now. Is it possisble to fix that?