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: $50.00 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

i. Quick View Popup:

No Image Available

ii. Product Variants Table on the product variant pages:

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.

i. General Settings: From here, you can manage various settings of Quick view popup and Product variants table.

No Image Available

ii. Quick View Popup Settings: From here, you can manage various specific settings for Quick view popup like: show/hide description in popup, show/hide product type and/or vendor, show/hide badges for instance: sale, soldout, new and also you can display product description upto specific number of words inside "Quick view Popup".

No Image Available

iii. Product variants table Settings: From here, you can manage various specific settings for product variants table on the product variant pages like: show/hide theme elements on the product variant pages such as: Add to cart button, Quantity box, Variants standard dropdowns or radio buttons for any theme by enter custom class/id selectors to hide these elements.

No Image Available

NOTE: If you're not sure how to hide theme elements when "Product variants table" will be displayed on the product variant pages then no worries you can drop us an email at >> smuniquewebtechnologies@gmail.com

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 for Vintage Themes):

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.

NOTE: Please ensure to set "Enable App" as "Yes" from the "General Settings Tab".

If you're using Shopify Free Vintage Themes such as: Debut, Venture, Supply, Express, Narrative, Boundless, Brooklyn, Simple, Minimal then it will automatically display "Quick View" button & "Product Variants table" on the front-end.

But if you're using a Custom theme then you'll need to just paste template codes in your appropriate theme files to display "Quick view" button on the products listing pages and also "Product variants table" on the product variant pages.

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.

i. To display "Quick View" buttons on Products listing pages:

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 need 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 -%}	
                                    

ii. To display "Product variants table" on the product variant pages:

We can't say the exact folder & filename as every theme has different files and structures. So you've to find template of your theme which rendering your product details page for instance: sections/product-template.liquid, templates/product.liquid etc.

Open sections/product-template.liquid file.

Then Find for the line:

{% endform %}
                                    

Then you've to paste below template code after this founded line.

{%- comment -%} Show "Variants table" on product page starts here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture var_tbl_content -%}{%- render "sm-prd-variants-tbl" -%}{%- endcapture -%}
{%- unless var_tbl_content contains "Liquid error" -%}
{%- unless product.has_only_default_variant -%}
{%- render "sm-prd-variants-tbl", product: product -%}
{%- endunless -%}
{%- endunless -%}
{%- endif -%}
{%- comment -%} Show "Variants table" on product page ends here {%- endcomment -%}
                                    

Help Screenshot:

No Image Available

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.

Theme Integration (Automatic Installation Steps for Online Store 2.0 Themes):

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.

NOTE: Please ensure to set "Enable App" as "Yes" from the "General Settings Tab". Then after please follow below listed steps one by one >>

Step-1: Go to Online Stores >> Current theme >> Theme Customize section. Enable App embed(s) i.e. "SM - Quick View Popup" & "SM - Quick View Script" then click on "Save" button at top right corner!

No Img Available

Step-2: 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: If you're using Shopify Free Online Store 2.0 Themes such as: Dawn, Colorblock, Ride, Sense, Studio, Refresh, Taste, Craft, Crave then it will automatically display "Quick View" button on the front-end.

But if you're using a Custom theme then you'll need to just paste template code in your appropriate theme file to display "Quick view" button on the products listing pages.

Custom THEME Step:

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 need 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 -%}	
                                    

Step-3: Setup "App Block" to display "Product Variants Table" on the product details page.

First Go to Online Stores >> Current theme >> Theme Customize section. Then follow below listed steps of screenshot:

No Img Available

Then you`ll see the Product details page in your theme customizer section. Either you can add an app block to display "Variants Table" within the existing section for instance: "Product information". For that, you can follow below listed steps of screenshot:

No Img Available

OR You can add the "APPS" section if it's not already added yet and add our App block as a separate section to display "Variants Table" that will span the whole section. For that, you can follow below listed steps of screenshot:

No Img Available

You can watch video guide for "How to display Variants table" via "App Block" by (click here)

 

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 Vintage Themes

For Shopify Free Vintage Themes OR Custom Theme


NOTE: Shopify free Vintage themes are: Debut, Venture, Supply, Express, Narrative, Boundless, Brooklyn, Simple, Minimal.

Steps need to follow for displaying "Quick view" button & "Product Variants table" 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 Snippets folder then click on "Add a new snippet" then enter file name as: "sm-prd-variants-tbl".

Then after click on "Done" button.

No Image Available

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

Step-10: 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.png, sm-quickview.css.

No Image Available

Step-11: 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.name == "index" or template.name == "search" or template.name == "cart" -%}
{%- 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-12: 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.name == "index" or template.name == "search" or template.name == "cart" -%}
{%- 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-13: 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-14: 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 Vintage Themes" below.

But for a custom theme, you'll need to identify files that will render products on the collection page as well as product template that will render product variants dropdowns with add to cart button on the product details pages, if you can't then no worries, you can feel free to contact us by drop an email at >> smuniquewebtechnologies@gmail.com

DEBUT THEME:

i. To display "Quick View" button:

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

ii. To display "Product variants table":

Go to Sections folder then open file i.e. product-template.liquid and paste below template code after closing form tag such as: </form> OR {% endform %}

{%- comment -%} Show "Variants table" on product page starts here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture var_tbl_content -%}{%- render "sm-prd-variants-tbl" -%}{%- endcapture -%}
{%- unless var_tbl_content contains "Liquid error" -%}
{%- unless product.has_only_default_variant -%}
{%- render "sm-prd-variants-tbl", product: product -%}
{%- endunless -%}
{%- endunless -%}
{%- endif -%}
{%- comment -%} Show "Variants table" on product page ends here {%- endcomment -%}
                                    

Help screenshot:

No Image Available

Minimal THEME:

i. To display "Quick View" button:

For 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

For 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

ii. To display "Product variants table":

Go to Sections folder then open file i.e. product-template.liquid and paste below template code after closing form tag such as: </form> OR {% endform %}

{%- comment -%} Show "Variants table" on product page starts here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture var_tbl_content -%}{%- render "sm-prd-variants-tbl" -%}{%- endcapture -%}
{%- unless var_tbl_content contains "Liquid error" -%}
{%- unless product.has_only_default_variant -%}
{%- render "sm-prd-variants-tbl", product: product -%}
{%- endunless -%}
{%- endunless -%}
{%- endif -%}
{%- comment -%} Show "Variants table" on product page ends here {%- endcomment -%}
                                    

Help screenshot:

No Image Available

Brooklyn THEME:

i. To display "Quick View" button:

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

ii. To display "Product variants table":

Go to Sections folder then open file i.e. product-template.liquid and paste below template code after closing form tag such as: </form> OR {% endform %}

{%- comment -%} Show "Variants table" on product page starts here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture var_tbl_content -%}{%- render "sm-prd-variants-tbl" -%}{%- endcapture -%}
{%- unless var_tbl_content contains "Liquid error" -%}
{%- unless product.has_only_default_variant -%}
{%- render "sm-prd-variants-tbl", product: product -%}
{%- endunless -%}
{%- endunless -%}
{%- endif -%}
{%- comment -%} Show "Variants table" on product page ends here {%- endcomment -%}
                                    

Help screenshot:

No Image Available

Narrative THEME:

i. To display "Quick View" button:

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

ii. To display "Product variants table":

Go to Snippets folder then open file i.e. product-form.liquid and paste below template code after closing form tag such as: </form> OR {% endform %}

{%- comment -%} Show "Variants table" on product page starts here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture var_tbl_content -%}{%- render "sm-prd-variants-tbl" -%}{%- endcapture -%}
{%- unless var_tbl_content contains "Liquid error" -%}
{%- unless product.has_only_default_variant -%}
{%- render "sm-prd-variants-tbl", product: product -%}
{%- endunless -%}
{%- endunless -%}
{%- endif -%}
{%- comment -%} Show "Variants table" on product page ends here {%- endcomment -%}
                                    

Help screenshot:

No Image Available

Venture THEME:

i. To display "Quick View" button:

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

ii. To display "Product variants table":

Go to Sections folder then open file i.e. product-template.liquid and paste below template code after closing form tag such as: </form> OR {% endform %}

{%- comment -%} Show "Variants table" on product page starts here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture var_tbl_content -%}{%- render "sm-prd-variants-tbl" -%}{%- endcapture -%}
{%- unless var_tbl_content contains "Liquid error" -%}
{%- unless product.has_only_default_variant -%}
{%- render "sm-prd-variants-tbl", product: product -%}
{%- endunless -%}
{%- endunless -%}
{%- endif -%}
{%- comment -%} Show "Variants table" on product page ends here {%- endcomment -%}
                                    

Help screenshot:

No Image Available

Boundless THEME:

i. To display "Quick View" button:

For 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

For 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

ii. To display "Product variants table":

Go to Sections folder then open file i.e. product-template.liquid and paste below template code after closing form tag such as: </form> OR {% endform %}

{%- comment -%} Show "Variants table" on product page starts here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture var_tbl_content -%}{%- render "sm-prd-variants-tbl" -%}{%- endcapture -%}
{%- unless var_tbl_content contains "Liquid error" -%}
{%- unless product.has_only_default_variant -%}
{%- render "sm-prd-variants-tbl", product: product -%}
{%- endunless -%}
{%- endunless -%}
{%- endif -%}
{%- comment -%} Show "Variants table" on product page ends here {%- endcomment -%}
                                    

Help screenshot:

No Image Available

Simple THEME:

i. To display "Quick View" button:

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. To display "Product variants table":

Go to Sections folder then open file i.e. product-template.liquid and paste below template code after closing form tag such as: </form> OR {% endform %}

{%- comment -%} Show "Variants table" on product page starts here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture var_tbl_content -%}{%- render "sm-prd-variants-tbl" -%}{%- endcapture -%}
{%- unless var_tbl_content contains "Liquid error" -%}
{%- unless product.has_only_default_variant -%}
{%- render "sm-prd-variants-tbl", product: product -%}
{%- endunless -%}
{%- endunless -%}
{%- endif -%}
{%- comment -%} Show "Variants table" on product page ends here {%- endcomment -%}
                                    

Help screenshot:

No Image Available

Supply THEME:

i. To display "Quick View" button:

For 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

For 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

ii. To display "Product variants table":

Go to Sections folder then open file i.e. product-template.liquid and paste below template code after closing form tag such as: </form> OR {% endform %}

{%- comment -%} Show "Variants table" on product page starts here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture var_tbl_content -%}{%- render "sm-prd-variants-tbl" -%}{%- endcapture -%}
{%- unless var_tbl_content contains "Liquid error" -%}
{%- unless product.has_only_default_variant -%}
{%- render "sm-prd-variants-tbl", product: product -%}
{%- endunless -%}
{%- endunless -%}
{%- endif -%}
{%- comment -%} Show "Variants table" on product page ends here {%- endcomment -%}
                                    

Help screenshot:

No Image Available

Express THEME:

i. To display "Quick View" button:

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

ii. To display "Product variants table":

Go to Snippets folder then open file i.e. product-form.liquid and paste below template code after closing form tag such as: </form> OR {% endform %}

{%- comment -%} Show "Variants table" on product page starts here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture var_tbl_content -%}{%- render "sm-prd-variants-tbl" -%}{%- endcapture -%}
{%- unless var_tbl_content contains "Liquid error" -%}
{%- unless product.has_only_default_variant -%}
{%- render "sm-prd-variants-tbl", product: product -%}
{%- endunless -%}
{%- endunless -%}
{%- endif -%}
{%- comment -%} Show "Variants table" on product page 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.

i. To display "Quick View" button:

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 -%}	
                                    

ii. To display "Product variants table":

Go to Sections folder then open file i.e. product-template.liquid and paste below template code after closing form tag such as: </form> OR {% endform %}

{%- comment -%} Show "Variants table" on product page starts here {%- endcomment -%}
{%- if shop.metafields.sm_variant_qv.enable_app == "yes" -%}
{%- capture var_tbl_content -%}{%- render "sm-prd-variants-tbl" -%}{%- endcapture -%}
{%- unless var_tbl_content contains "Liquid error" -%}
{%- unless product.has_only_default_variant -%}
{%- render "sm-prd-variants-tbl", product: product -%}
{%- endunless -%}
{%- endunless -%}
{%- endif -%}
{%- comment -%} Show "Variants table" on product page ends here {%- endcomment -%}
                                    

Help screenshot:

No Image Available

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 Installation Steps for Online Store 2.0 Themes

For Shopify Free Online Store 2.0 OR Custom Theme


NOTE: Shopify free Online Store 2.0 themes are: Dawn, Colorblock, Ride, Sense, Studio, Refresh, Taste, Craft, Crave.

Steps need to follow for displaying "Quick view" button & "Product Variants table" 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-prd-variants-tbl".

Then after click on "Done" button.

No Image Available

Then after paste corresponding file: "sm-prd-variants-tbl.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-language-translations".

Then after click on "Done" button.

No Image Available

Then after paste corresponding file: "sm-language-translations.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.

No Image Available

Step-10: 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-11: Go to Online Stores >> Current theme >> then open layout folder's file i.e. theme.liquid. Then please add below language short code before closing head tag and click on Save button at top right corner!

Help Screenshot

No Img Available

Step-12: Go to Online Stores >> Current theme >> Theme Customize section. Enable App embed(s) i.e. "SM - Quick View Popup" & "SM - Quick View Script" then click on "Save" button at top right corner!

No Img Available

Step-13: 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 -%}	
        

For Shopify Free Online Store 2.0 Themes: If you're using Shopify Free Online Store 2.0 Themes such as: Dawn (New Version), Colorblock, Ride, Sense, Studio, Refresh, Taste, Craft, Crave then you'll need to follow below steps to display "Quick View" button on the front-end.

Online Store 2.0 Themes such as: Dawn (New Version), Colorblock, Ride, Sense, Studio, Refresh, Taste, Craft, Crave:

Open snippets/card-product.liquid file.

Then Find for the line:

{% render 'price', product: card_product, price_class: '' %}
                                    

Then 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: card_product -%}{%- endunless -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}
	
                                    

Help Screenshot:

No Image Available

For Online Store 2.0 Themes such as Dawn (old version) theme:

Open snippets/product-card.liquid file.

Then you've to paste below template code at the end of file 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_card_product -%}{%- endunless -%}
{%- endif -%}
{%- comment -%} Quick View App Shortcode Ends Here {%- endcomment -%}
                                    

Help Screenshot:

No Image Available

Custom THEME Step:

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 need 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 -%}	
                                    

Step-14: Setup "App Block" to display "Product Variants Table" on the product details page.

First Go to Online Stores >> Current theme >> Theme Customize section. Then follow below listed steps of screenshot:

No Img Available

Then you`ll see the Product details page in your theme customizer section. Either you can add an app block to display "Variants Table" within the existing section for instance: "Product information". For that, you can follow below listed steps of screenshot:

No Img Available

OR You can add the "APPS" section if it's not already added yet and add our App block as a separate section to display "Variants Table" that will span the whole section. For that, you can follow below listed steps of screenshot:

No Img Available

 

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.

Manual Uninstallation Steps for Vintage Themes:

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.png

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

Manual Uninstallation Steps for Online Store 2.0 Themes:

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-language-translations.liquid

 assets/ sm_qv_install.js

Step-2:

Remove app`s language 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

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

Step-4: Go to Online Store >> Themes >> Select your Current Active Theme >> Theme Customize >> Theme Settings >> App Embeds.

Then please turn off our App's embeds blocks i.e. SM - Quick View Popup & SM - Quick View Script. Just like below screenshot >>

No Image Available

Step-5: Open product details page from your theme customizer section and remove our App block added i.e. SM - Variants Table then click on Save button at top right corner.

No Image Available

That's it! Now, visit your storefront.

NOTE: If you're not sure how to do above steps then you can simply drop an email at >> smuniquewebtechnologies@gmail.com