USER GUIDE

On behalf of S.M Unique Web Technologies (Shopify Apps Developer), we would like to thank you for purchasing this App.

If you've any questions, please do not hesitate to contact us at >> smuniquewebtechnologies@gmail.com.

We are very keen to help & We'll try our best to provide a quick & efficient solution. We're believing in Quality work

Please add our email: smuniquewebtechnologies@gmail.com to your address book to ensure our reply email isn't marked as spam mail.

We will try our best to reply your emails as soon as possible.

All credits go to my Mummy & Papa, who encouraged & motivated me.


Thank you very much,
SM Unique Web Technologies

Introduction

Shopify "Quick Variants View" app provides below key benefits:

  • Let customers preview product information and add necessary items to cart right from the quick view window on a collection page.
  • Speed up catalog browsing process to provide customers with positive shopping experience.
  • Quick & easy listing of variants into tabular format, which resulted in more sales.

App Pricing

1. Click here to visit our Shopify App >> Quick Variants View

2. Click on Add app button.

Note: $31.99 USD billed once at the time of installation and its not refundable. There is not any free trial for this App.

Quick Variants View

Shopify "Quick Variants View" will display all variants of the product into tabular format.

This App provides ease to customers and resulted in more sales.

Click here for Live Demo

No Image Available

General Settings:

Go to Admin >> Apps >> Quick Variants View >> General Settings

From Here, You can Manage various settings of Quick Variants View easily. Also, You can revert old settings by click on Reset Settings button.

No Image Available

Language Translation:

Go to Online Stores >> Themes >> Click on "Edit Languages" from "Actions" dropdown of live theme.

No Image Available

Then you'll see "Sm variant qv app" section just like below screenshot:

Here, you can enter texts for the Quick variants view app then click on "Save" button at top right corner!

No Image Available

Theme Integration (Automatic Installation Steps):

Go to Admin >> Apps >> Quick Variants View >> Theme Integration.

No Image Available

i. One Click Install: Select Theme in which you want to Install App Files & Click on "Install App Files" button.

If you're using Shopify Free Themes then it will automatically display a "Quick View" button on the front-end.

But if you're using a Custom theme then you'll need to just paste "Quick View Template Code" in a theme file, that is rendering products on the collection page.

Custom THEME Steps:

We can't say the exact folder & filename as every theme has different files and structures. But we can give you an insight so you can find the file.

Open templates/collection.liquid OR  sections/collection-template.liquid file.

Then Find for the line:

{% for product in collection.products %}
                                    

There is "include" code after the above line like below screenshot:

No Image Available

Once you have found this piece of code, you will see a file name included in there. You will need to locate the file with the name shown there.

For instance, in the above image, you will want to go to: product-card-grid.liquid OR product-grid-item.liquid for Products Grid view Or/And product-card-list.liquid
for Products List view.

Add the code below to the new file you had just opened: product-card-grid.liquid OR product-grid-item.liquid OR product-card-list.liquid.

You've to paste below template code to display "Quick View" button on the front-end.

{%- comment -%} Quick View App Shortcode Starts Here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture quick_view_content -%}{%- render "sm-quickview-button" -%}{%- endcapture -%}
{%- unless quick_view_content contains "Liquid error" -%}{%- render "sm-quickview-button", product: product -%}{%- endunless -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}	
                                    

NOTE: No worries, if you can't locate the exact file, you can feel free to contact us at any time by drop an email at >> smuniquewebtechnologies@gmail.com.

IMPORTANT! When you'll change your store theme, after app installation, please re-install app files using "One Click Install" section to make it working.

ii. One Click Uninstall: Select Theme from which you want to uninstall App Files & Click on "Uninstall App Files" button.

Manual Installation Steps for Shopify Free Themes OR Custom Theme

Steps to be followed for displaying "Quick view" button on the front-end:

Step-1: Go to our App >> General Settings section then set "Yes" for "Enable App" just like below screenshot:

No Image Available

Step-2: Go to our App >> Theme Integration section then follow below screenshot:

No Image Available

Step-3: After downloading ZIP, extract it in your PC.

Step-4: Go to Online Stores >> Themes >> Click on Edit Code of your Theme, just like below screenshot:

No Image Available

Step-5: Go to Templates folder then click on "Add a new template" then choose template as "product" and enter file name as: "sm-quickview".

Then after click on "Create template" button.

No Image Available

Then after paste corresponding file: "product.sm-quickview.liquid" contents from Downloaded ZIP and click on "save" button at top right corner!

Step-6: Go to Snippets folder then click on "Add a new snippet" then enter file name as: "sm-quickview-button".

Then after click on "Create snippet" button.

No Image Available

Then after paste corresponding file: "sm-quickview-button.liquid" contents from Downloaded ZIP and click on "save" button at top right corner!

Step-7: Go to Snippets folder then click on "Add a new snippet" then enter file name as: "sm-quickview-init".

Then after click on "Create snippet" button.

No Image Available

Then after paste corresponding file: "sm-quickview-init.liquid" contents from Downloaded ZIP and click on "save" button at top right corner!

Step-8: Go to Snippets folder then click on "Add a new snippet" then enter file name as: "sm-quickview-popup".

Then after click on "Create snippet" button.

No Image Available

Then after paste corresponding file: "sm-quickview-popup.liquid" contents from Downloaded ZIP and click on "save" button at top right corner!

Step-9: Go to Assets folder then choose file i.e. sm_qv_install.js and click on "Upload asset" button.

Then after similarly, upload 2 more files i.e. sm_qv_loader.gif, sm-quickview.css.

No Image Available

Step-10: Go to Layout folder then open file i.e. theme.liquid and paste below code before closing head tag just like below screenshot:

{%- comment -%} Quick View App Shortcode Starts Here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- if product.url or collection.url or template == "index" or template == "search" -%}
{%- capture quick_view_script_content -%}{%- render "sm-quickview-init" -%}{%- endcapture -%}
{%- unless quick_view_script_content contains "Liquid error" -%}{%- render "sm-quickview-init" -%}{%- endunless -%}
{%- endif -%}
{%- endif -%}
{%- comment -%} Quick View App Script Ended Here {%- endcomment -%}	
                                    

No Image Available

Step-11: Go to Layout folder then open file i.e. theme.liquid and paste below code before closing body tag just like below screenshot:

{%- comment -%} Quick View Modal Starts Here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- if product.url or collection.url or template == "index" or template == "search" -%}
{%- capture quick_view_script_content -%}{%- render "sm-quickview-popup" -%}{%- endcapture -%}
{%- unless quick_view_script_content contains "Liquid error" -%}{%- render "sm-quickview-popup" -%}{%- endunless -%}
{%- endif -%}
{%- endif -%}
{%- comment -%} Quick View Modal Ended Here {%- endcomment -%}
                                    

No Image Available

Step-12: Go to "Locales" folder then click on "en.default.json" file or choose your locale json file then please add below language shortcode at the end of file.

!Important: Add below code at the end of JSON File before closing curly brace ("}") but please put comma(,) first.

"sm_variant_qv_app": {
    "quick_view_text": "Quick View",
    "sale_text": "Sale",
    "new_text": "New",
    "soldout_text": "Soldout",
    "vendor_text": "Vendor",
    "product_type_text": "Type",
    "sku_text": "SKU",
    "product_details_link_text": "View full product details",
    "price_range_text": "Price Range",
    "save_text": "Save",
    "close_btn_text": "Close",
    "product_name_text": "Product Name",
    "product_image_text": "Product Image",
    "product_price_text": "Product Price",
    "qty_text": "Quantity",
    "subtotal_text": "Subtotal",
    "add_to_cart_btn_text": "Add to Cart",
    "in_stock_text": "In Stock",
    "view_cart_text": "View Cart",
    "checkout_text": "Checkout",
    "continue_shopping_text": "Continue Shopping",
    "maximum_stock_text": "There are only %item_count items left in a stock.",
    "no_items_added_to_cart_text": "Sorry! no items were added to cart, please fill Quantity field first then after click on Add to cart.",
    "too_many_items_in_cart_text": "You can't add more %item_name to the cart.",
    "all_items_are_added_in_cart_text": "All %item_count %item_name are in your cart.",
    "items_added_to_cart_successfully_text": "%item_count items are added to cart successfully.",
    "item_added_to_cart_successfully_text": "%item_count item is added to cart successfully."
}
                                    

Help Screenshot:

No Image Available

Step-13: This step is solely based on your theme structure. Because every theme has different files & structures, so we can't presume the exact file name & folder.

We've provided exact file names with folder names for "Shopify Free Themes" below.

But for a custom theme, you'll need to identify, which is the file that rendering products on the collection page, if you can't then no worries,
you can feel free to contact us by drop an email at >>
smuniquewebtechnologies@gmail.com

DEBUT THEME:

Go to Snippets folder then open files i.e. product-card-grid.liquid, product-card-list.liquid and paste below template code at the end of the file.

{%- comment -%} Quick View App Shortcode Starts Here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture quick_view_content -%}{%- render "sm-quickview-button" -%}{%- endcapture -%}
{%- unless quick_view_content contains "Liquid error" -%}{%- render "sm-quickview-button", product: product -%}{%- endunless -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}	
                                    

Help screenshot:

No Image Available

Minimal THEME:

i. Collection Page: Go to Snippets folder then open file i.e. product-grid-item.liquid and paste below template code before closing div at the end of the file.

{%- comment -%} Quick View App Shortcode Starts Here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture quick_view_content -%}{%- render "sm-quickview-button" -%}{%- endcapture -%}
{%- unless quick_view_content contains "Liquid error" -%}{%- render "sm-quickview-button", product: product -%}{%- endunless -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}	
                                    

Help screenshot for the Collection page:

No Image Available

ii. Search Page: Go to Snippets folder then open file i.e. search-result.liquid and paste below template code before closing div at the end of the file.

{%- comment -%} Quick View App Shortcode Starts Here {%- endcomment -%}
{%- if item.object_type == "product" -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture quick_view_content -%}{%- render "sm-quickview-button" -%}{%- endcapture -%}
{%- unless quick_view_content contains "Liquid error" -%}{%- render "sm-quickview-button", product: item -%}{%- endunless -%}
{%- endif -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}	
                                    

Help screenshot for the Search page:

No Image Available

Brooklyn THEME:

Go to Snippets folder then open file i.e. product-grid-item.liquid and paste below template code before closing div at the end of the file.

{%- comment -%} Quick View App Shortcode Starts Here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture quick_view_content -%}{%- render "sm-quickview-button" -%}{%- endcapture -%}
{%- unless quick_view_content contains "Liquid error" -%}{%- render "sm-quickview-button", product: product -%}{%- endunless -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}	
                                    

Help screenshot:

No Image Available

Narrative THEME:

Go to Snippets folder then open file i.e. product-card.liquid and paste below template code before closing div at the end of the file.

{%- comment -%} Quick View App Shortcode Starts Here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture quick_view_content -%}{%- render "sm-quickview-button" -%}{%- endcapture -%}
{%- unless quick_view_content contains "Liquid error" -%}{%- render "sm-quickview-button", product: product -%}{%- endunless -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}	
                                    

Help screenshot:

No Image Available

Venture THEME:

Go to Snippets folder then open file i.e. product-card.liquid and paste below template code at the end of the file.

{%- comment -%} Quick View App Shortcode Starts Here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture quick_view_content -%}{%- render "sm-quickview-button" -%}{%- endcapture -%}
{%- unless quick_view_content contains "Liquid error" -%}{%- render "sm-quickview-button", product: product -%}{%- endunless -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}	
                                    

Help screenshot:

No Image Available

Boundless THEME:

i. Collection Page: Go to Snippets folder then open file i.e. product-grid-item.liquid and paste below template code before closing last div.

{%- comment -%} Quick View App Shortcode Starts Here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture quick_view_content -%}{%- render "sm-quickview-button" -%}{%- endcapture -%}
{%- unless quick_view_content contains "Liquid error" -%}{%- render "sm-quickview-button", product: product -%}{%- endunless -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}	
                                    

Help screenshot:

No Image Available

ii. Search Page: Go to Sections folder then open file i.e. search-template.liquid and paste below template code just like help screenshot.

{%- comment -%} Quick View App Shortcode Starts Here {%- endcomment -%}
{%- if item.object_type == "product" -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture quick_view_content -%}{%- render "sm-quickview-button" -%}{%- endcapture -%}
{%- unless quick_view_content contains "Liquid error" -%}{%- render "sm-quickview-button", product: item -%}{%- endunless -%}
{%- endif -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}
                                    

Help screenshot:

No Image Available

Simple THEME:

Go to Snippets folder then open file i.e. product-grid-item.liquid and paste below template code before closing last div.

{%- comment -%} Quick View App Shortcode Starts Here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture quick_view_content -%}{%- render "sm-quickview-button" -%}{%- endcapture -%}
{%- unless quick_view_content contains "Liquid error" -%}{%- render "sm-quickview-button", product: product -%}{%- endunless -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}	
                                    

Help screenshot:

No Image Available

Supply THEME:

i. Collection Page: Go to Snippets folder then open files i.e. product-grid-item.liquid, product-list-item.liquid and paste below template code
before closing last div
.

{%- comment -%} Quick View App Shortcode Starts Here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture quick_view_content -%}{%- render "sm-quickview-button" -%}{%- endcapture -%}
{%- unless quick_view_content contains "Liquid error" -%}{%- render "sm-quickview-button", product: product -%}{%- endunless -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}	
                                    

Help screenshot:

No Image Available

ii. Search Page: Go to Snippets folder then open file i.e. search-result-grid.liquid and paste below template code before closing last div.

{%- comment -%} Quick View App Shortcode Starts Here {%- endcomment -%}
{%- if item.object_type == "product" -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture quick_view_content -%}{%- render "sm-quickview-button" -%}{%- endcapture -%}
{%- unless quick_view_content contains "Liquid error" -%}{%- render "sm-quickview-button", product: item -%}{%- endunless -%}
{%- endif -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}	
                                    

Help screenshot:

No Image Available

Express THEME:

Go to Snippets folder then open file i.e. product-card-list.liquid and paste below template code at the end of the file.

{%- comment -%} Quick View App Shortcode Starts Here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture quick_view_content -%}{%- render "sm-quickview-button" -%}{%- endcapture -%}
{%- unless quick_view_content contains "Liquid error" -%}{%- render "sm-quickview-button", product: product -%}{%- endunless -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}	
                                    

Help screenshot:

No Image Available

Custom THEME:

We can't say the exact folder & filename as every theme has different files and structures. But we can give you an insight so you can find the file.

Open templates/collection.liquid OR  sections/collection-template.liquid file.

Then Find for the line:

{% for product in collection.products %}
                                    

There is "include" code after the above line like below screenshot:

No Image Available

Once you have found this piece of code, you will see a file name included in there. You will need to locate the file with the name shown there.

For instance, in the above image, you will want to go to: product-card-grid.liquid OR product-grid-item.liquid for Products Grid view Or/And product-card-list.liquid
for Products List view.

Add the code below to the new file you had just opened: product-card-grid.liquid OR product-grid-item.liquid OR product-card-list.liquid.

You've to paste below template code to display "Quick View" button on the front-end.

{%- comment -%} Quick View App Shortcode Starts Here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture quick_view_content -%}{%- render "sm-quickview-button" -%}{%- endcapture -%}
{%- unless quick_view_content contains "Liquid error" -%}{%- render "sm-quickview-button", product: product -%}{%- endunless -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}	
                                    

NOTE: No worries, if you can't locate the exact file, you can feel free to contact us at any time by drop an email at >> smuniquewebtechnologies@gmail.com.

Manual Uninstallation Steps:

Step-1: Go to Online Store >> Themes and Select your Current Active Theme then Delete below files from specific folders one by one:

 templates/product.sm-quickview.liquid

 snippets/sm-quickview-button.liquid

 snippets/sm-quickview-init.liquid

 snippets/sm-quickview-popup.liquid

 assets/sm-quickview.css

 assets/ sm_qv_install.js

 assets/sm_qv_loader.gif

Step-2:

i. Remove app`s script code added before closing head tag from your active theme`s layout folder file i.e. theme.liquid. Just like below screenshot >>

No Image Available

ii. Remove app`s modal code added before closing body tag from your active theme`s layout folder file i.e. theme.liquid. Just like below screenshot >>

No Image Available

Step-3: Go to Online Store >> Themes >> Select your Current Active Theme >> Locales folder >> and open this file: en.default.json.

Remove "sm_variant_qv_app" whole JSON array from the file then click on "save" button at top right corner. Just like below screenshot >>

No Image Available