Add to Cart on hover for Featured Collections - Dawn Theme

[neillistic]

I would like the “Add to Cart” button to appear only when hovering over products in Featured Collections on the homepage. Something similar to this:

I’m currently using Dawn Theme Ver 9.0.0

Website: whlsome.com

Please help!

Thank you!

[Uhrick]

Hello Neillistic

But how do you want it to function, like on the image? With the button going over the product card? Or it can be like it is currently on your store, but the button stays invisible but then it appears when hovered?

[neillistic]

Hi Uhrick,

I would like the button to be in the center of the product image (but only when hovering over the product card).

Thank you for your reply!

[Uhrick]

Ok, kinda tricky to explain through here, but let’s go.

Go to sales channels > online store > ‘…’ > edit code, look for the ‘card-product.liquid’ file.

find this block of code:

{%- if show_quick_add -%}
          
            {%- liquid
              assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
              assign qty_rules = false
              if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
                assign qty_rules = true
              endif
            -%}
            {%- if card_product.variants.size > 1 or qty_rules -%}
              
              
            {%- else -%}
              
            {%- endif -%}
          

        {%- endif -%}

prefer to do it from your own code, as I don’t remember if I already modified my theme.

You will remove this block of code from where it is, and you will insert it here

/* Insert HERE !!! */

        {%- if card_product.featured_media -%}
          

            

              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              

then, you will go to the file 'quick-add.css' and you will add this code at the end of it:

```markup
quick-add no-js-hidden {
display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

quick-add no-js-hidden:hover {
display: block;
}

I think it should work

[neillistic]

Getting an error while trying to save: Error saving snippets/card-product.liquid

[neillistic]

Sorry, I’m new to this.

[Uhrick]

This is not a screenshot of where you put the code. Could you show where you inserted the code?

[neillistic]

Please see the screenshots below for where the new code you provided was entered:

[Uhrick]

I’m a bit confused, nowhere in these screenshots appears the code

{%- if show_quick_add -%}

and it is the very first thing on the code I’ve provided to you, what code did you use?

[sproutboxdev]

Try this in base.css:

@media (min-width: 1367px) {
    .quick-add {
        position: absolute;
        bottom: 130px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .card-wrapper:hover .quick-add {
        opacity: 1;
    }
}