(Dawn) How to edit/design quick add button onto the featured products images

Store Design
1

I am trying to add a quick add button to my featured collection on my homepage like the following example below. I would like to also make the button round, with the text “add”.

3423432.PNG
3423432.PNG1224×422 9.47 KB

2

Hi @friendlyrobot19 welcome to the Shopify Community,

Well according to the screenshot you need to do that with some custom coding. If you have coding skills then i will guide you step by step.

Thanks

3

Can you please share your store’s URL?

4

https://95d536-88.myshopify.com/ *keycode to enter is “www”

5

Hello @friendlyrobot19

Follow the steps

  1. Go to Online Store > Theme > Edit Code > card-product.liquid file
  2. Now Search for ‘quick-add’
  3. Copy the complete div and remove it from there like below

oscprofessional_0-1721905659186.png
oscprofessional_0-1721905659186.png1353×520 32.6 KB

  1. Now need to add the copied section in the ‘card__inner’ div like below

oscprofessional_1-1721905768207.png
oscprofessional_1-1721905768207.png1334×567 40.3 KB

  1. Add the css code in ‘quick-add.css’ file at the end
    .card__inner .quick-add__submit {
    width: auto;
    min-width: unset;
    margin-left: auto;
    }

  2. The output will look like this.

oscprofessional_2-1721905942179.png
oscprofessional_2-1721905942179.png1309×420 108 KB

Thanks

6

Hello, my card-product.liquid code doesn’t line up to yours, nor can I find the line that should be removed. Can you please instruct me further? My store information is below:

https://95d536-88.myshopify.com/

keycode to enter is “www”