Move Quick Add Button Over Image Dawn Theme

[Jaclyn2]

Hello!

I’d like to be able to move the quick add button over on top of the product images instead of below them. I want the quick add buttons to also only be visible when you hover over the image.

Currently, the quick add button is located below the price and is visible, I want it to be at the bottom of each product image on top of the product image and only be visible when you hover over the product.

[lunaworks]

What theme are you using and also do you have coding skills?

[Kani]

Hi @Jaclyn2

• From your Shopify admin, go to Online Store > Themes.
• Find the theme you want to edit, and then click Actions > Edit code.
• Click the quick-add.css asset file.
• paste the following code at last

.quick-add {
    position: absolute;
    margin-bottom: 0;
    bottom: 73px;
    width: 100%;
}

@media screen and (min-width: 750px) {
  .quick-add {
    bottom: 82px;
  }
}

• Click Save.

[Jaclyn2]

This code successfully moved the quick add button to the bottom of the product image, but how do you get it to only show when your mouse hovers over the product?

[Kani]

oh sorry some mistake.

pls use this css code

.quick-add {
    position: absolute;
    margin-bottom: 0;
    bottom: 73px;
    width: 100%;
    display: none;
}
.grid__item:hover .quick-add {
  display: block;
}
@media screen and (min-width: 750px) {
  .quick-add {
    bottom: 82px;
  }
}

[Jaclyn2]

Great! That worked perfect!

[Jiozx]

Hi @Kani

How do I remove the on:hover effect from mobile browsers? I have tried a few things but none of them worked.

[Kani]

Hi @Jiozx

Please share your url at first. But you can try this.

@media screen and (min-width: 750px) {
  .quick-add {
    position: absolute;
    margin-bottom: 0;
    bottom: 82px;
    width: 100%;
    display: none;
  }
  .grid__item:hover .quick-add {
    display: block;
  }
}

[Jiozx]

I asked for a code that disables the hover effect on mobile. But it doesn’t matter now, I changed theme.

[Lincai]

Hi Kani,

I also used this code and it worked, but in my case, the button shows below the image when I hover it with my mouse. Is there a way to fix this?

[PaulaVicedo]

Hello Kani.

I am trying to do the same and this answer you gave to Jaclyn2 worked for me but I would also like the button to be less longer and to be centered just like in the following image (thats another website, not mine).

Besides, I have seen that the position of the button in my page varies a little bit depending on if I am accessing the products collections from the home page, or from the products menu page directly, they even change their position among the products displayed on the home screen and I do not know why cause I am using the css code as you put it in here as you instructed. Could you please help me clarify these two questions? Thanks.

Right now I am working on a duplicate of my theme cause I do not want to mess it up.

[lunaworks]

Do you have different widths for each image? And also do you have position:relative for all the parent elements?

[Mabelle]

Hello, thank you for your help. I try the 1st code it worked, but i have an issue with this code : to hide the hover button from mobile

Can you help? thank you

website url : daccachestore.com