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

Store Design

Topic summary

A user asks how to add Quick View functionality to products in Shopify’s Dawn theme. Initial responses clarify that Dawn doesn’t natively include Quick View in all versions, suggesting hiring a developer, using third-party apps, or selecting themes with built-in support.

Key Solutions Provided:

  • Theme Settings: One user notes Quick View can be enabled under “Product Grid” in theme customization settings
  • Custom Code Implementation: Multiple detailed code snippets are shared for adding Quick View and “Add to Cart” buttons to card-product.liquid, including CSS styling for hover effects and mobile responsiveness
  • GitHub Resource: A custom Quick View solution with add-to-cart options is shared via GitHub link

Common Issues & Fixes:

  • Users report errors like “modal.show is not a function” and broken Quick View buttons
  • Solutions include: enabling Quick Add in theme editor for each page, setting collection style to “card” in customization settings, and updating icon rendering code for Dawn 15.2+ (changed from icon-close.liquid to icon-close.svg)
  • Small visual bugs (squares appearing, buttons not hiding) are addressed with additional CSS tweaks

Ongoing Challenges:

Quick View functionality doesn’t automatically work on recommended products sections; solutions for this remain under discussion.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
4

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

{%- render 'loading-spinner' -%} {{ 'products.product.add_to_cart' | t }} .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:

Screenshot 2023-11-14 at 18.08.33.png
Screenshot 2023-11-14 at 18.08.33.png790×1056 222 KB

qw.png

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.