Quick-view collection

Copy-paste a theme-editor section for product page - A product grid where every card has a quick-view button - opens a modal with image, price, variant picker and add-to-cart without leaving the page. The quick-view feature paid themes charge for.

Product pageTheme section Members sourceOS 2.0 themes

Live previewCustomize in playground

Shop the look

Merino cardigan

Rs 49.00

Linen overshirt

Rs 89.00

Canvas tote

Rs 35.00

Wool scarf

Rs 29.00

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.
2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.
3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.
4Open the theme editor, add the section to a template, and replace the example values using the section settings.
5Preview the storefront and test it on a phone-sized screen before publishing.
6Set the collection handle in the settings (find it on the collection page in admin).

quick-view-grid.liquid

1<gpl-qv class="gpl-qv">2  {%- if section.settings.heading != blank -%}<h2 class="gpl-qv__heading">{{ section.settings.heading | escape }}</h2>{%- endif -%}3  <div class="gpl-qv__grid">4    {%- assign col = section.settings.collection -%}5    {%- if col != blank and col.products.size > 0 -%}6      {%- for product in col.products limit: section.settings.limit -%}7        <div class="gpl-qv__card">8          <a class="gpl-qv__imgwrap" href="{{ product.url }}">9            {%- if product.featured_image -%}10              <img class="gpl-qv__img" src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.title | escape }}" width="400" height="400" loading="lazy">11            {%- endif -%}12            <button type="button" class="gpl-qv__btn" data-qv="{{ product.handle }}">Quick view</button>13          </a>14          <a class="gpl-qv__name" href="{{ product.url }}">{{ product.title }}</a>

Full source is for members

One payment - every snippet, guide and bundle

Get all-access

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.

2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.

3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.

4Open the theme editor, add the section to a template, and replace the example values using the section settings.

5Preview the storefront and test it on a phone-sized screen before publishing.

6Set the collection handle in the settings (find it on the collection page in admin).

quick-view-grid.liquid

1<gpl-qv class="gpl-qv">2  {%- if section.settings.heading != blank -%}<h2 class="gpl-qv__heading">{{ section.settings.heading | escape }}</h2>{%- endif -%}3  <div class="gpl-qv__grid">4    {%- assign col = section.settings.collection -%}5    {%- if col != blank and col.products.size > 0 -%}6      {%- for product in col.products limit: section.settings.limit -%}7        <div class="gpl-qv__card">8          <a class="gpl-qv__imgwrap" href="{{ product.url }}">9            {%- if product.featured_image -%}10              <img class="gpl-qv__img" src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.title | escape }}" width="400" height="400" loading="lazy">11            {%- endif -%}12            <button type="button" class="gpl-qv__btn" data-qv="{{ product.handle }}">Quick view</button>13          </a>14          <a class="gpl-qv__name" href="{{ product.url }}">{{ product.title }}</a>

Full source is for members

One payment - every snippet, guide and bundle

Get all-access