How can I add Quick View to products in the Dawn theme?

[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]

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:

{%- render 'loading-spinner' -%} .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;
}

{% render 'icon-close' %}

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.

[JayTank001]

You can also use my custom quick view code,I have also added add to cart with options, please check this and also review my code, thank you

Github link → https://github.com/JayTank001/shopify-custom-quickview-using-javascript

[leocstt]

very cool man, how to use this code?

[b3atcraft]

here is an update version of the code:

in code editor open the file card-product.liquid and find the following line

<div
class=“card__inner {% if settings.card_style == ‘standard’ %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == ‘standard’ %} ratio{% endif %}”
style=“–ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;”
>

the copy and paste the code below under this line

.quick-add__submit-text-cust, .quick-add-cart-button-cust { position: absolute; bottom: -5%; z-index: 20 !important; visibility: hidden; min-width: 45%; display: flex; justify-content: center; align-items: center; text-align: center; background: rgba(0, 0, 0, 1); height: 34px; border-radius: 17px; border: none; color: #fff; font-weight: 700; padding: 0 10px; cursor: pointer; opacity: 1; transition: background 0.3s ease-in-out; } .quick-add__submit-text-cust:hover, .quick-add-cart-button-cust:hover { opacity: 0.8; transform: translate3d(0, -2px, 0); } .quick-add__submit-text-cust span, .quick-add-cart-button-cust span { flex: 1; text-align: center; font-size: 12px; } @media (max-width: 767px) { .quick-add__submit-text-cust, .quick-add-cart-button-cust { visibility: visible; justify-content: center; border-radius: 50%; min-width: 36px; height: 36px; width: 36px; opacity: 0.8; } .quick-add__submit-text-cust span, .quick-add-cart-button-cust span { display: none; } .quick-add__submit-text-cust svg, .quick-add-cart-button-cust svg { margin: auto; } } .quick-add__submit-text-cust { left: 7px; } .quick-add-cart-button-cust { right: 7px; } .card-wrapper:hover .quick-add__submit-text-cust, .card-wrapper:hover .quick-add-cart-button-cust { visibility: visible; } #svg { margin: auto; } #lid-cust { animation: none; } #eye-cust { animation: none; } .quick-add__submit-text-cust:hover #lid-cust { animation: blink 0.4s 2; } .quick-add__submit-text-cust:hover #eye-cust { animation: squeeze 0.4s 2; } @keyframes blink { 60% { transform: none; animation-timing-function: ease-in; } 73% { transform: translateY(15px) scaleY(0); } 100% { animation-timing-function: ease-out; } } @keyframes squeeze { 60% { transform: none; animation-timing-function: ease-in; } 73% { transform: translateY(3px) scaleY(0.8); } 100% { animation-timing-function: ease-out; } } line.ver2-cust, line.hor2-cust { -webkit-transform-origin: 50px 50px; -moz-transform-origin: 50px 50px; -o-transform-origin: 50px 50px; -ms-transform-origin: 50px 50px; transform-origin: 50px 50px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; transition: all 700ms ease; } .quick-add-cart-button-cust:hover line.ver2-cust { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); stroke: #fff; } .quick-add-cart-button-cust:hover line.hor2-cust { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); stroke: #fff; } /* Hide if card-wrapper width is less than 200px */ @media (max-height: 200px) { .quick-add__submit-text-cust, .quick-add-cart-button-cust { display: none; } } Quick View {%- render 'loading-spinner' -%}

{% render 'icon-close' %}

{%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} {%- if card_product.selected_or_first_available_variant.available -%} Add to Cart {%- else -%} Sold Out {%- endif -%} {{ 'products.product.sold_out' | t }} {%- render 'loading-spinner' -%} {%- endform -%}

[leocstt]

Man It’s broken. When I hover the mouse it appears. But when I click it it clicks on the image (on the direct product page)

[b3atcraft]

check if you have placed it in the correct place. Also I forgot to mention you need to have Quick Add enabled on every page for it to work.

This you need to do in the theme editor.

[nicktrautman]

Thank you @b3atcraft ! Great add and works perfectly!

[honghong]

Hi @b3atcraft

Add to Cart works fine for me. But clicking the quick view button returns an error message “uncaught TypeError: modal.show is not a function”. Am I missing some scripts?

[b3atcraft]

The code works on Dawn 15.2 the only adjustment needed is the close icon as shopify moved to svg files.

Here is the complete code again that I use at https://perfumeszagzodiak.co.uk/

in code editor open the file card-product.liquid and find the following line

<div
class=“card__inner {% if settings.card_style == ‘standard’ %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == ‘standard’ %} ratio{% endif %}”
style=“–ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;”
>

the copy and paste the code below under this line

.quick-add__submit-text-cust, .quick-add-cart-button-cust {
position: absolute;
bottom: -5%;
z-index: 20 !important;
visibility: hidden;
min-width: 45%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: rgba(0, 0, 0, 1);
height: 34px;
border-radius: 17px;
border: none;
color: #fff;
font-weight: 700;
padding: 0 10px;
cursor: pointer;
opacity: 1;
transition: background 0.3s ease-in-out;
}
quick-add-modal__content-info-gradient.color.background-1 {
position: sricky !important;
}

.quick-add__submit-text-cust:hover, .quick-add-cart-button-cust:hover {
opacity: 0.8;
transform: translate3d(0, -2px, 0);
}
.quick-add__submit-text-cust span, .quick-add-cart-button-cust span {
flex: 1;
text-align: center;
font-size: 12px;
}
@media (max-width: 767px) {
.quick-add__submit-text-cust, .quick-add-cart-button-cust {
visibility: visible;
justify-content: center;
border-radius: 50%;
min-width: 36px;
height: 36px;
width: 36px;
opacity: 0.8;
}
.quick-add__submit-text-cust span, .quick-add-cart-button-cust span {
display: none;
}
.quick-add__submit-text-cust svg, .quick-add-cart-button-cust svg {
margin: auto;
}
}
.quick-add__submit-text-cust {
left: 7px;
}
.quick-add-cart-button-cust {
right: 7px;
}
.card-wrapper:hover .quick-add__submit-text-cust, .card-wrapper:hover .quick-add-cart-button-cust {
visibility: visible;
}
#svg {
margin: auto;
}
#lid-cust {
animation: none;
}
#eye-cust {
animation: none;
}
.quick-add__submit-text-cust:hover #lid-cust {
animation: blink 0.4s 2;
}
.quick-add__submit-text-cust:hover #eye-cust {
animation: squeeze 0.4s 2;
}
@keyframes blink {
60% {
transform: none;
animation-timing-function: ease-in;
}
73% {
transform: translateY(15px) scaleY(0);
}
100% {
animation-timing-function: ease-out;
}
}
@keyframes squeeze {
60% {
transform: none;
animation-timing-function: ease-in;
}
73% {
transform: translateY(3px) scaleY(0.8);
}
100% {
animation-timing-function: ease-out;
}
}
line.ver2-cust, line.hor2-cust {
-webkit-transform-origin: 50px 50px;
-moz-transform-origin: 50px 50px;
-o-transform-origin: 50px 50px;
-ms-transform-origin: 50px 50px;
transform-origin: 50px 50px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 700ms ease;
-moz-transition: all 700ms ease;
-ms-transition: all 700ms ease;
-o-transition: all 700ms ease;
transition: all 700ms ease;
}
.quick-add-cart-button-cust:hover line.ver2-cust {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
stroke: #fff;
}
.quick-add-cart-button-cust:hover line.hor2-cust {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
stroke: #fff;
}
/* Hide if card-wrapper width is less than 200px */
@media (max-height: 200px) {
.quick-add__submit-text-cust,
.quick-add-cart-button-cust {
display: none;
}
}

<button
id=“{{ product_form_id }}-submit”
type=“submit”
name=“add”
class=“quick-add__submit-text-cust”
aria-haspopup=“dialog”
aria-labelledby=“{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}”
data-product-url=“{{ card_product.url }}”
>
<svg id=“quick-add__submit-text-cust” width=“20” height=“20” viewBox=“0 0 30 30” version=“1.1” xmlns:xlink=“http://www.w3.org/1999/xlink”
xmlns=“http://www.w3.org/2000/svg”>












Quick View
{%- render ‘loading-spinner’ -%}



<div
role=“dialog”
aria-label=“{{ ‘products.product.choose_product_options’ | t: product_name: card_product.title }}”
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 }}”
>
{{- ‘icon-close.svg’ | inline_asset_content -}}

{%- form ‘product’,
card_product,
id: product_form_id,
class: ‘form’,
novalidate: ‘novalidate’,
data-type: ‘add-to-cart-form’
-%}
<input
type=“hidden”
name=“id”
value=“{{ card_product.selected_or_first_available_variant.id }}”
class=“product-variant-id”
{% if card_product.selected_or_first_available_variant.available == false %}
disabled
{% endif %}
>
<button
id=“{{ product_form_id }}-submit”
type=“submit”
name=“add”
class=“quick-add-cart-button-cust”
aria-haspopup=“dialog”
aria-labelledby=“{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}”
aria-live=“polite”
data-sold-out-message=“true”
{% if card_product.selected_or_first_available_variant.available == false %}
disabled
{% endif %}
>
<svg version=“1.1” id=“quick-add-cart-button-cust” xmlns=“http://www.w3.org/2000/svg” xmlns:xlink=“http://www.w3.org/1999/xlink” x=“0px” y=“0px”
width=“20px” height=“20px” viewBox=“0 0 100 100” enable-background=“new 0 0 100 100” xml:space=“preserve”>




{%- if card_product.selected_or_first_available_variant.available -%}
Add to Cart
{%- else -%}
Sold Out
{%- endif -%}


{{ ‘products.product.sold_out’ | t }}

{%- render ‘loading-spinner’ -%}

{%- endform -%}

[Sohiku]

Great !! Thanks ! How can we enable quick add for other pages like searched products & add product description in modal ?

[b3atcraft]

To enable quick view on any page just add a collection section and enable quick view for that section.
To show description make the following changes in quick-add.css

quick-add-modal .product__media-item:not(:first-child) {
display: block;
}
quick-add-modal .quick-add-hidden,
quick-add-modal .product__modal-opener:not(.product__modal-opener–image),
{
display: none;
}

quick-add-modal .slider.slider–mobile {
overflow: hidden;
}

[GJ6]

Hi there, Thanks for your help, I entered this code but now there is a little square in the top left corner of every product. Can you please help me with the code to remove this? See image

Also,

the Add to Car works but the quick view button does not work.

[GJ6]

Sorry, it is not on the product pages, just the “featured collect” on home page

[b3atcraft]

I think you haven’t enabled Quick view for that particular page. make sure you enable the Quick view in the theme editor for every page you will display a product grid. That should fix the issue with the Quick View button and I think the squares should disappear then too.

[Sohiku]

Hi b3atcraft, I found the solution! To fix the issue, you need to set the collection style to ‘card’ in the customization settings. Simply select a collection, and under theme settings, you’ll find the option to choose the ‘card’ style.

[Sohiku]

Hi B3atcraft, brother how can I hide the “add to cart” & “choose options” button displayed at the bottom of the product card after enabling quick add option?? Thanks for your help!

[b3atcraft]

add this to the code styling to hide the button:

.card–card .quick-add {
display: none !important;
}