Dawn theme quick view

[Millie03]

Hello,

Can anybody please tell me how to add Quick View to my products? Apparently the Dawn theme has the option but I can't find it anywhere. Thanks in advance.

[PageFly-Victor · Accepted solution]

Hi @Millie03 

This is Victor from PageFly - Shopify Page Builder App

I have checked the Dawn theme settings but unfortunately, the Dawn theme doesn't have the Quick View options yet.
In this case, if you want to implement it in your Products, i suggest you can hire an expert or developer to do that ( because this is required a lot of custom code  )
The other way is you can choose another theme that already has that option or you can use 3rd app to add that 

Hope this can help you solve the issue 

Best regards,

Victor | PageFly

[allylowe]

In theme customization, under product grid, you can select to enable it.

[b3atcraft]

add the following code in card-product.liquid under the div class= Card-inner:

<modal-opener data-modal="#QuickAdd-{{ card_product.id }}">
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit-image"
aria-haspopup="dialog"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
data-product-url="{{ card_product.url }}"
>{%- render 'loading-spinner' -%}
<img
src="https://cdn.shopify.com/s/files/1/0643/7670/1168/files/qw.png?v=1699974610"
alt="{{ 'products.product.add_to_cart' | t }}"
>

</button>
</modal-opener>
<style>
.quick-add__submit-image {
position: absolute;
bottom: -10%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 20 !important;
display: block;
background: none;
height: 40px; /* Adjust the size as needed */
text-align: center; /* Center the icon */
line-height: 40px; /* Center the icon */
border-radius: 100px;
border: none;
visibility: hidden;
}

.quick-add__submit-image img {
width: 60%;
height: auto;
opacity: 0.7;
transition: opacity 0.3s ease-in-out;
border-radius: 100px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.quick-add__submit-image:hover img {
opacity: 1; /* Adjust the opacity as needed */
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border-radius: 100px;
}

.card-wrapper:hover .quick-add__submit-image {
visibility: visible;
}
</style>
<quick-add-modal id="QuickAdd-{{ card_product.id }}" class="quick-add-modal">
<div
role="dialog"
aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}"
aria-modal="true"
class="quick-add-modal__content global-settings-popup"
tabindex="-1"
>
<button
id="ModalClose-{{ card_product.id }}"
type="button"
class="quick-add-modal__toggle"
aria-label="{{ 'accessibility.close' | t }}"
>
{% render 'icon-close' %}
</button>
<div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info"></div>
</div>
</quick-add-modal>

This is the result:

 

you can replace the url for the image hosted on your server and have included the original image should you decide to use it. Just update the link once you uploaded it on your website.