Changing Location of Quick Add on Collection page

Store Design
1

Hi there

I am keen to change my website’s ‘Quick Add’ button to the below. It is currently a large button underneath the product and not a small Cart symbol to the bottom right of the image.

https://www.thecoutureclub.com/collections/menswear < See here an example

Image 02-02-2024 at 17.28.jpg
Image 02-02-2024 at 17.28.jpg2940×483 36.3 KB

Does anyone know the code to enable this ?

I use the Dawn theme

Thanks,

2

Hello @Thirtyfirst

Please follow the steps below after logging into the admin:

  • Go to Online Store → Themes → Actions → Edit code.
  • Go to Assets folder → theme.css
  • Please add the following CSS at the bottom:
.quick-shop__trigger #quickbuy__icon
{
   width: 1.4em;
}
.quick-shop__trigger
{
top:5px;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.

3

Hi @WebDeskSolution

Thanks for taking the time to reply, however, my theme doesn’t seem to have ‘theme.css’ under the assets folder. is there any other way to do this ?

4

Hello @Thirtyfirst

We checked and it seems there is a theme.css file existing: https://prnt.sc/p3fdQmECGwIG

The other option is to add CSS to your theme.liquid file creates a style tag at the end of the body tag and adds the CSS to that tag it will resolve your issue.