I’m hoping someone can point me in the right direction.
I’m using the Studio theme and would like to customise the Quick Add button that appears on my collection and search pages.
At the moment, the button position varies depending on the length of the product title, which makes the collection page look a little uneven. Ideally, I’d like all of the Quick Add buttons to sit in a uniform location on every product card and be the same width as the product card itself.
I’d also like to change the colour of the Quick Add button to better match my store branding.
I’ve included a couple of photos for reference. My store is the one with the white Quick Add buttons. The second image shows the general layout and positioning I’m hoping to achieve, with the button spanning the width of the product card and sitting consistently across all listings. I would like a similar look, but in a different colour that matches my branding.
I have very minimal experience making code changes, so any help, guidance, or examples would be greatly appreciated.
Thank you so much for your help! I really appreciate you taking the time to look into this for me.
The code you provided for the alignment has worked really well, and all of the quick add buttons are now lining up evenly across the collection page, which is exactly what I was hoping for.
The colour change code has partially worked - it has changed the colour of the button, but it has also changed the shape of the button and the original black border is still showing around it. I was hoping to have the button colour changed while keeping the cleaner style shown in my example image.
I was also hoping to make the quick add buttons the same width as the product card/listing, similar to the example photo I attached in my original post. At the moment, the buttons are still narrower than the product listing itself.
I have very limited experience editing code, so any further guidance would be greatly appreciated.
Hey there! This is what you can do to customize the Quick Add buttons on collection and search product cards on your theme :
Duplicate your theme
Go to Online Store > Themes > click on ⋯ > Duplicate. Please remember not to edit your live theme directly.
Open Custom CSS
In the Theme Editor, go to Theme settings > Custom CSS and paste the below code :
/* Pin card body to flex column so button anchors to the bottom */
.card__information {
display: flex;
flex-direction: column;
height: 100%;
}
/* Title grows to fill space, pushing button down */
.card__heading {
flex-grow: 1;
}
/* Full-width, brand-color Quick Add button */
.card__footer .quick-add__submit,
.card-information__wrapper .quick-add__submit {
width: 100%;
display: block;
background-color: #2a6496; /* ← your brand hex */
color: #ffffff;
border: none;
margin-top: auto;
}
Swap in your brand color
Replace the value #2a6496 with your actual hex value and add a :hover rule with a darker shade or as per your requirements.
Verify with DevTools
Right-click on a ‘Quick Add’ button > Inspect > Confirm .quick-add__submit and .card__information - be sure to match your theme’s actual class names, they can vary between versions. Adjust the selectors if required and then save and publish.
I would like to make the button the same width as the product listing like as shown in the image below and I would like to remove the black border from the button as well as have a similar shape to the image below.
