Meraki Apps
Home
Support

Meraki Quickview Documentation

⚠ You need to go through this process only once for every theme you want to use Quickview feature on!

Let Meraki Apps do it

If you want to avoid hassle of doing it yourself, just add us (contact@meraki-apps.com) as a staff member. Here is a youtube video of how to do that. We will get every thing setup in less than 12 hours without any extra charges.

Do it yourself

If you decided to setup the app yourself, you might find this video tutorial usefull.

Step 1

The theme.liquid file

in theme.liquid file copy the snippet below and paste it just above the closing head tag </head>.

{% include 'qv-scripts' %}

in the same file (theme.liquid) paste the html code below, directly after the body tag <body

<div class="quick-view-overlay" style="overflow-x: hidden;"></div>

Congratulation Step 1 is over!!!

🎉[Fireworks explode, glittery paper rains from above]🎉

Step 2

The collection template file

Go to your collection template in templates folder. find where you loop over the collection products (It depends on your theme. You can search for {% for product in collection.products %}).

Once you found the loop, inside the first element in that loop paste the code below.

{% include 'qv-button' %}

Yes, i know it could be a bit intimidating if you are not familiar with web development, but hey, you can check this video tutorial, also you can contact us anytime for help, please do not hesitate.


If the product element, first element in the for loop (again it depends on your theme), has a class attribute add the class value below to it, like this:

< ... class="qv-grid-item ..." ...

qv-grid-item

in the product element, find the image of the product and add the data attribute below to it like this:

<img data-slide-number="{{product.featured_image.position}}" ....

data-slide-number="{{product.featured_image.position}}"

if the product image has a class attribute add the class below to it, like this:

<img ... class="item_cart_img ..." ...

item_cart_img

In the header you might have a cart icon with cart items count in it, In case you have it (You can search for cart.item_count), add this class value (below) to it. like this:

<span ... class="qv-cart-count ..." ...>{{ cart.item_count }}</span>

qv-cart-count

Please if you got stuck refer to this video tutorial it might help, and/or get in touch with us :)

Uninstall

If you want to uninstall Meraki Quickview follow the instructions below:

1. Disable Meraki Quickview for All themes you enabled it on, from the user interface of the application

enable/disable setting toggle

2. After disabling Meraki Quickview, uninstall the app from the Apps page of shopify admin

Uninstall button from Apps page