Shopify Year Make Model Advance Search App User Guide

• App Version: 1.0.0
• Our Support Email: supportshpfy@capacitywebsolutions.com

Thank you for purchasing Year Make Model Advance Search Shopify App. If you have any difficulty with this App or you find an issue, please feel free to send us a message: supportshpfy@capacitywebsolutions.com

Below you will find the detailed documentation on how to use our App and we wish you have a great experience with our Shopify App.

App Installation

1. Click here to visit our Shopify App >> Year Make Model Advance Search

2. Click on Add app button.

Pricing Details: (Click Here)

For Online Store 2.0 Theme:

Show YMMbox / Compatible List on Frontend (Online Store 2.0 Theme)

For Basic plan users:

1. NOTE: If you're on Basic plan then only you can follow below listed steps or watch video guide by (click here)

2. 
   (A) Show YMM Searchbox:

3. Step-1: Go to Online Stores >> Live theme >> Theme Customize >> Theme Settings . Then Enable App embed i.e. YMM Script - Basic Plan and click on "Save" button at top right corner!
   

   
   

4. Step-2: You can display YMM searchbox on online store via "App Block" just by follow below screenshot then click on "Save" button at top right corner! You can drag and drop apps section at any spot where you want to display YMMBox on your website.
   

   
   

   NOTE: If you do not find our YMM app block for any pages of your theme and still you want to display ymm searchbox then no worries you can copy below YMMbox shortcode and paste it in your theme template file, where you want to display ymm searchbox. If you`re not sure how to do this then you can drop an email at >> supportshpfy@capacitywebsolutions.com

   Copy to Clipboard

   <!-- Start YMM short code --> {% if page.handle != "product-result" %} {%- capture the_snippet_content -%}{% render 'ymm-searchbox' %}{%- endcapture -%} {% unless the_snippet_content contains "Liquid error" %} {%- assign ymm_searchbox_use = "yes" -%} {%- assign searchbox_style = "horizontal" -%}<!-- eg. horizontal or vertical --> {%- assign searchbox_title = "Search By Year, Make and Model" -%} {% render 'ymm-searchbox', ymm_searchbox_use: ymm_searchbox_use, searchbox_style: searchbox_style, searchbox_title: searchbox_title %} {% endunless %} {% endif %} <!-- Ended YMM short code -->
   

For Pro or Premium plan users:

1. NOTE: If you're on Pro or Premium plan then only you can follow below listed steps or watch video guides >> How to display ymm searchbox via app block? and How to display ymm fitment details via app block?

2. 
   (A) Show YMM Searchbox:

3. Step-1: Go to Online Stores >> Live theme >> Theme Customize >> Theme Settings . Then Enable App embed i.e. YMM Script - Pro Plan and click on "Save" button at top right corner!
   

   
   

4. Step-2: You can display YMM searchbox on online store via "App Block" just by follow below screenshot then click on "Save" button at top right corner! You can drag and drop apps section at any spot where you want to display YMMBox on your website. It will also display "Fitment information" under ymm searchbox on product details page.
   

   
   

   NOTE: If you do not find our YMM app block for any pages of your theme and still you want to display ymm searchbox then no worries you can copy below YMMbox shortcode and paste it in your theme template file, where you want to display ymm searchbox. If you`re not sure how to do this then you can drop an email at >> supportshpfy@capacitywebsolutions.com

   Copy to Clipboard

   <!-- Start YMM short code --> {% if page.handle != "product-result" %} {%- capture the_snippet_content -%}{% render 'ymm-searchbox' %}{%- endcapture -%} {% unless the_snippet_content contains "Liquid error" %} {%- assign ymm_searchbox_use = "yes" -%} {%- assign searchbox_style = "horizontal" -%}<!-- eg. horizontal or vertical --> {%- assign searchbox_title = "Search By Year, Make and Model" -%} {% render 'ymm-searchbox', ymm_searchbox_use: ymm_searchbox_use, searchbox_style: searchbox_style, searchbox_title: searchbox_title %} {% endunless %} {% endif %} <!-- Ended YMM short code -->

5. 
   (B) Show YMM Compatible List (For Pro/Premium Plan Users):

6. NOTE: Please make sure to activate our App embed block first i.e. YMM Script - Pro Plan from Theme customize >> Theme settings section. You can also watch video guide by (click here)

7. If you want to "Display Compatibility Chart" on "Product details" page via "App Block" then you can go to Online Stores >> Live theme >> Theme customize then go to "Products" >> "Default Product" page from top dropdown then you`ll see "YMM Compatiblity Chart" app block just like below screenshot. You can add this app block anywhere and click on "Save" button at top right corner!
   
   

   
   

Modify YMM App Block:

1. Click on YMM app block to alter ymmbox title / style just like below screenshot:

2. 



3. Horizontal Style for YMM Search Box:
4. 


5. Vertical Style for YMM Search Box:
6. 

How to Edit YMM Searchbox Texts into my Language? (Online Store 2.0 Theme)

1. Go to Online Stores >> Live theme >> Theme Customize >> Theme Settings >> App embeds section then please open our App embed block either "YMM Script - Basic Plan" or "YMM Script - Pro Plan" by click on it then you can see several settings.

2. Here, you can alter Ymm app texts in your language then click on "Save" button at top right corner!
   

3. 

For Developers Customization (Online Store 2.0)

Do you want to customize our App in your Online Store 2.0 theme?

1. !IMPORTANT: First please make sure to make your theme LIVE in which YMM app files installed then only feature will work.

   
   

2. Go to Admin >> Apps >> Year Make Model Advance Search >> How to Use it. Then you can follow steps shown in below screenshot:

3. 
   

4. NOTE: By follow above listed steps, you can add/edit contents in our YMM app files in your live theme means you can customize our App by your own way or if you'll need any customizations help from our side then you can drop an email at >> supportshpfy@capacitywebsolutions.com

5. You can turn off or remove our app block(s), which you've set it in theme customizer section just like below screenshot or watch video guide by (click here)

6. 
   

7. Now, you can make use of our App's shortcode, please copy below shortcode and paste it where you want to show ymmbox on your website.

8. Copy to Clipboard

   <!-- Start YMM short code --> {% if page.handle != "product-result" %} {%- capture the_snippet_content -%}{% render 'ymm-searchbox' %}{%- endcapture -%} {% unless the_snippet_content contains "Liquid error" %} {%- assign ymm_searchbox_use = "yes" -%} {%- assign searchbox_style = "horizontal" -%}<!-- eg. horizontal or vertical --> {%- assign searchbox_title = "Search By Year, Make and Model" -%} {% render 'ymm-searchbox', ymm_searchbox_use: ymm_searchbox_use, searchbox_style: searchbox_style, searchbox_title: searchbox_title %} {% endunless %} {% endif %} <!-- Ended YMM short code -->
   

Design Customizations (Online Store 2.0)

Do you want to use your own CSS / styling for ymm app in your online store 2.0 theme?

1. Go to Online Stores >> Live theme >> Theme Customize >> Theme Settings > App embeds section then please open our App embed block i.e. YMM Script - Pro Plan or YMM Script - Basic Plan (depends on your chosen plan). Then at bottom of this page, you`ll see Design customizations section just like below screenshot:
   

2. Here, you can enter your own CSS wrapped in style type tag.
   

3. 
   

For Vintage Theme:

Show YMM on Frontend (Vintage Theme)

1. Go to Admin >> Apps >> Year Make Model Advance Search >> How to Use it >> App Configuration Steps


2. Step-1: Copy Template Code by click on Copy to Clipboard.


3. Step-2: Click on Go to Theme and Paste Template Code in your Current Active Theme.
   
   From your Shopify admin, click on Online Store >> Themes and Select your Current Active Theme.
   
   
   
   NOTE: You can Paste Template Code either in Layout/theme.liquid (It will show everywhere in store) OR Templates/index.liquid (It will show in Homepage only). Watch Video Guide (click here)
   
   

Show YMM Compatible List on Frontend (Vintage Theme)

For Pro or Premium plan users:

1. Go to Admin >> Apps >> Year Make Model Advance Search >> How to Use it >> App Configuration Steps


2. Step-1: Copy YMM Compatibility Chart Template Code by click on Copy to Clipboard.


3. Step-2: Click on Go to Theme and Paste Template Code in your Current Active Theme.
   
   From your Shopify admin, click on Online Store >> Themes and Select your Current Active Theme.
   
   
   
   NOTE:  Depending on your theme, exact template may differ. If you're not sure where to paste Template Code, please feel free to Contact Us
   
   You can Paste Template Code in your theme's product template file just like below screenshot:
   
   
   

Modify YMM Shortcode (Vintage Theme)

1. Go to Admin >> Apps >> Year Make Model Advance Search >> How to Use it >> App Configuration Steps


2. In Modify Template code section, You can Enter YMM Searchbox Title and Choose Searchbox Style.


3. NOTE: After Modify, You need to Re-paste template code if its already exists in your theme file.


4. 


5. Horizontal Style for YMM Search Box:
6. 


7. Vertical Style for YMM Search Box:
8. 

How to Edit YMM Searchbox Texts into my Language? (Vintage Theme)

1. Step-1: From your Shopify admin, click on Online Store >> Themes and Select your Current Active Theme.


2. Step-2: Go to Locales Folder and choose en.default.json file.
   
   Add below code at the end of JSON File before closing curly brace ("}") but please put comma(,) first.
    Copy to Clipboard
   "ymm_app": { "searchbox_title": "Search By Year,Make and Model", "search_button": "Search", "reset_button": "Reset", "no_results": "There are No Products found.", "product_pagetitle": "Products", "products": "Products", "product": "Product", "select_label":"Select", "none_txt": "None", "sale_lbl": "sale", "soldout_lbl": "soldout" }


3. 
   


4. Step-3:  Now Go to Online Store >> Themes >> Select your Current Active Theme and Click on "Edit Languages" like below snapshot:
   
   


5. Step-4:  You can see Ymm App section in your Language section here you can Enter Language Strings for YMM Searchbox like below snapshot:
   
   

Manage Fields

1. Go to Admin >> Apps >> Year Make Model Advance Search >>Manage Fields


2. From here, You can Manage Multiple Dropdowns as per your requirement. Watch Video Guide (click here)
   
3. 
   

Add YMM

1. Go to Admin >> Apps >> Year Make Model Advance Search >>Add YMM


2. From Here, You can ADD YMM values easily by Auto Suggestion feature, which suggest you about previous YMM values while adding a new record.
   
   >> Watch Video Guide (click here)
   
3. 
   Also, You can Assign selected products to YMM record easily just follow the steps listed in below window:
   

"Enable Year Range" (New Feature)

1. From "ADD YMM" section, now you can add year ranges such as: 2019-2021 too.


2. 

Manage YMM

1. Go to Admin >> Apps >> Year Make Model Advance Search >>Manage YMM


2. From Here, You can Manage YMM data by Edit / Delete / Search operations.


3. 
   

Speed Up Configuration (New Feature)

1. Go to Admin >> Apps >> Year Make Model Advance Search >> Manage YMM


2. (i) Optimize YMM Data:


3. 
   


4. You'll need to type "OPTIMIZE" command in given textbox then click on the "Submit" button to delete duplicate ymm records.


5. 
   



6. Question: What is the use of YMM data optimization?
   Answer: Optimization will check and delete duplicate records from all your ymm records and this will decrease loading time on the front-end, due to adequate number of records.




7. (ii) Speed Up Mode:


8. >> Watch Video Guide (click here)


9. From Here, You can turn "On/Off" for "Speed Up Mode Configuration", just like below screenshot:
10. 
    



11. *** IMPORTANT NOTE: If "Speed Up Mode" is set to "On" and you've made any changes in Year Make Model dropdowns (Like add,edit,delete or change in any other dropdown options or change front-end static texts like 'select','search','reset' etc. or if you've re-installed the APP recently) then you must Publish Static Year Make Model dropdowns again by click on 'Publish HTML' button inside 'Manage YMM' tab, so that your changes will reflect in frontend. If you're not sure for this then you can contact us at >> supportshpfy@capacitywebsolutions.com.




12. Question-1: Why to use "Speed Up Mode"?
    Answer: It provides seamless speed at time of page load means YMMbox dropdowns displayed much more faster than current.




13. Question-2: My customization work lost after I have used "Speed Up Mode" as "ON", what to do now?
    Answer: Yes, if you want to use the "Speed Up Mode" feature then it will upgrade our App files and if you/we have done customization prior for you then it will be lost. But no worries, we have kept older app files backup in your live theme. You can find backup files by go to snippets folder then please open this file i.e. "ymm-searchbox-old-cws-backup.liquid" and revert snippets/ymm-searchbox.liquid file contents with this backup file. You can still contact us if you want to speed-up YMM without losing customization work, we'll sort this out for you quickly! Don't hesitate to drop an email at > supportshpfy@capacitywebsolutions.com.

Bulk Product Assign

1. Go to Admin >> Apps >> Year Make Model Advance Search >> Bulk Product Assign


2. From Here, You can Bulk Assign Products quickly to Multiple YMM Rows.
   
   For Bulk Assign, Just follow the steps mentioned in below window:
3. 
   

Universal Products

Question: What is the use of Universal Products ?

Answer: Universal Products are very helpful to show it in every YMM Search result.

1. How to use Universal Products Option ?



2. Go to Admin >> Apps >> Year Make Model Advance Search >> Universal Products


3. Step-1: Choose option as Yes from dropdown.


4. Step-2: You can choose whether to Display Universal Products First or Last from Display Universal Products By option.


5. Step-3: Just Assign your Universal Products by Select Products from Leftside box and then Click on right arrow to move Products into selected list.


6. Step-4: Then click on Save Settings button.


7. *** NEW FEATURE: Now, you can "Download Universal Product Id(s)" in CSV format from here.


8. 
   

Import/Export

1. Go to Admin >> Apps >> Year Make Model Advance Search >> Import/Export


2. From here, You can Import/Export YMM Rows.


3. 

How to create YMM CSV from Sample CSV?

1. Go to Admin >> Apps >> Year Make Model Advance Search >> Import/Export


2. From here, You can Download Sample CSV then Modify / Add entries in it.


3. >> Watch Video Guide (click here)
   
4. 

How to Import YMM Rows with Product Id?

1. To Import YMM Records,You have to Upload CSV File here if you're not sure about CSV Format then Please click on Download Sample CSV button.


2. Please read below Instructions carefully before Import CSV:
   
   1. Please DONOT change/delete CSV Column Ordering/Columns.


3. 2. Whenever you Change/Add Fields. Please "Download Sample CSV" File to get latest fields and Ordering.


4. 3. You can refer Store Product Ids by Click on Export Product CSV Button.


5. 4. You must have to keep "Product Ids" as "First Column" in your CSV and Enter Product Ids as "~" (tilde sign) separated like snapshot.


6. IMPORTANT!  You must have to Enter "Product Id" in your YMM CSV not "Product SKU"



7. ---

   Please follow below steps for Assigning Product Ids in YMM Rows by CSV:

   ---

   2. Step-1: Export All Product Ids CSV by Click on Export Product CSV Button.
      
   
   
   3. Step-2: Now Next step is to Assign Product IDs to YMM rows in CSV file. It is simple process.Just open your Exported Products CSV file which is generated in Step-1 and Find your product name or product SKU then you will see Product ID in First column of it like below snapshot:
      
      Now just add it in YMM CSV file like below snapshot:
   
   
   4. Step-3: After Prepared Final YMM CSV with assigned Product Ids then Import your YMM CSV.

How to Insert Year Range Rows like - 2001-2010 ?

Question: What is the use of Year Range Feature?

Answer: It will allow you to import same Row for each year of range value means You do not have to add 10 YMM Rows in CSV for the year value which starts from 2001 to 2010, instead of it you just need to write one YMM row in which you have to put range value in your Year column like: 2001-2010.

Please follow below steps for Import Year Range Data:

1. Step-1: Download sample CSV just by click on button to get your Fields ordering.


2. Step-2: Then modify with your YMM range values.


3. Step-3: Save it!


4. Step-4: Select Enable Year Ranges option and Choose your Range Field which have "Year Range Data" for e.x: If Field name is: "My Year" then choose it from Dropdown.


5. Step-5: Then after Click on Upload button.




6. Year Range Feature CSV Template:



7. 

Note About Year Range Feature:

1. If you specify Year Range then it must be Numeric value only and it must be in four digit format YYYY otherwise it will be skipped.

2. If you have entered range value like 2002-2005 & Choose Wrong Range Field from Dropdown then it will add one YMM Row only with field value as "2002-2005" , not three rows for the years - 2002 to 2005.

Import Rows Option

1. You can Import YMM Rows either with Bulk Insert / Append Rows / Update Rows option.


2. 1. Bulk Insert option will Clear Old YMM Rows & Adding Whole New YMM Data.  (Click here to get details on How to Bulk Insert Rows)


3. 2. Append Rows option will Append (Add) Rows to existing YMM Rows, it doesn't Delete old YMM data. (Click here to get details on How to Append Rows)


4. 3. Update Rows option will allow you to update existing records. (Click here to get details on How to Update Rows)


5. 4. Delete Rows option will allow you to delete specific ymm records in bulk. (Click here to get details on How to Delete Rows)


6. 

How to Bulk Insert Rows?

1.  All Previous Records will be deleted by Bulk Insert option. So, please be careful & take Backup by Export YMM Records CSV first.



2. Step-1: Download sample csv file for Adding New Rows.


3. Step-2: Then Modify CSV for your New YMM values.


4. Step-3: To Assign Products to YMM Rows by CSV then just click on Export Products CSV button.


5. Step-4: Refer Product Id from exported products csv in your YMM rows just enter "~" tilde sign between Product Id if its multiple


6. Step-5: Save it & Upload your modified CSV just by:


7. - Choose your modified CSV file.


8. - Choose Bulk Insert option.


9. - If you have enter year ranges like: 2002-2005 then only you have to select "Enable Year range values" checkbox and choose your field that contains year range value from dropdown.


10. - Then after Click on Upload button.

How to Append (Add) Rows to existing YMM Rows?

1. Step-1: Download current Rows CSV from Export CSV section.


2. Step-2: Choose CSV Template as Bulk Insert/Append Rows from dropdown.


3. Step-3: Click on Export YMM CSV button then open your downloaded CSV.


4. Step-4: You can Add new Rows within this CSV.


5. Step-5: Upload your modified CSV just by:


6. - Choose your modified CSV file


7. - Choose Append Rows option


8. - If you have enter year ranges like: 2002-2005 then only you have to select "Enable Year range values" checkbox and choose your field that contains year range value from dropdown.


9. - Then after Click on Upload button.

How to Update Existing YMM Rows via CSV ?

1. Step-1: Download current Rows CSV from Export CSV section.


2. Step-2: Choose CSV Template as Update Rows/Delete Rows from dropdown.


3. Step-3: Then Click on Export YMM CSV button.


4. Step-4: Open your downloaded CSV.


5. Step-5: Update YMM Rows as per your need.


6. Warning!
   1. Please do not modify "Id" column value and also keep this column as it is.
   2. Update Rows will not work with year range value import.


7. Step-6: Upload this modified CSV from Import section just by


8. - Choose your modified CSV file.


9. - Choose Update Rows option from Import Rows by Dropdown.


10. - Then after Click on Upload button.




11. Update Rows CSV Format:



12. 

How to Delete Specific YMM Rows in bulk via CSV (New Feature)

1. Step-1: Go to Manage YMM tab first.


2. Step-2: Filter ymm records as per your need which you want to delete in bulk.


3. Step-3: Download YMM CSV file by choose option such as: "With Id Column" then click on the 'Download YMM CSV' button (This will generate csv file for your filtered ymm records).


4. Step-4: Go to Import/Export tab.


5. Step-5: Choose that downloaded ymm csv file to delete those ymm records of csv file in bulk.


6. Step-6: Choose import method such as: 'Delete Rows'.


7. Step-7: Click on the Upload File button.



8. Delete Rows CSV Format:



9. Warning!
   Please do not modify "Id" column value and also keep this column as it is.


10. 

Export YMM CSV

1. You can Export YMM Rows by choose CSV Template option such as either Bulk Insert/Append Rows OR Update Rows then after Click on Export YMM CSV button.


2. 

How to fix errors while Import YMM CSV into my Language?

1. This is caused by improper CSV format.Please use openoffice.org calc spreadsheet application and saving in UTF-8 format. OR Please use Google Doc for Convert Your CSV in UTF-8 format.


2. Please refer below section for more details on How to convert CSV file in UTF-8 format.

How to convert CSV file in UTF-8 format?

1. For Convert your file in UTF-8 please follow below steps:


2. Using Google Sheets:


3. Step-1:  Go to https://www.google.co.in/sheets/about/ login using your gmail account. Click on Blank.


4. Step-2:  Go to File -> Open and upload your file.


5. Step-3:  After upload your file File -> Download as -> Comma-seperated values (.csv, current sheet)


6. Step-4:  Your file will be start downloading.


7. Note: Don't forget to remove space from file name.

How to do App Code Uninstallation manually?

After App Uninstalled by Store Owner, Shopify does not permit us to access files on your store. So, You have to remove App code files manually from your Active Theme or Any Theme in which You had previously installed YMM APP Files.

NOTE: If you`re using Online Store 2.0 theme then you`ll need to delete these 2 files only from your theme those are: templates/page.ymm-custom.liquid & snippets/ymm-searchbox.liquid.

1. Step-1: From your Shopify admin, click on Online Store >> Themes and Select your Current Active Theme and Delete files one by one:
   
   • Folder: templates & Filename: page.ymm-custom.liquid
   • Folder: snippets & Filename: ymm-searchbox.liquid
   • Folder: snippets & Filename: ymm_fields.liquid (If it exists then only, as this file generated when 'Speed Up Mode' is set to 'ON'.)
   • Folder: snippets & Filename: ymm-compatible-list.liquid (If it exists then only, as this file generated if you're on "pro" or "premium" plan.)
   • Folder: assets & Filename: ymm-custompage.css
   • Folder: assets & Filename: ymm-custompage.js
   • Folder: assets & Filename: ymm-searchbox.css
   • Folder: assets & Filename: ymm-compatible.css (If it exists then only, as this file generated if you're on "pro" or "premium" plan.)
   • Folder: assets & Filename: loader.gif
   • Folder:assets & Filename: no_img.png
   • Folder: assets & Filename: ymm_exact_fit.png (If it exists then only, as this file generated if you're on "pro" or "premium" plan.)
   • Folder: assets & Filename: ymm_not_fit.png (If it exists then only, as this file generated if you're on "pro" or "premium" plan.)
   • Folder: assets & Filename: ymm_universal_fit.png (If it exists then only, as this file generated if you're on "pro" or "premium" plan.)
2. 
   
   
   
3. Step-2: From your Shopify admin, click on Online Store >> Pages and Delete "Product Result" Page(Custom YMM APP Page):
   

"Pro" Features:

(A) Fitment Match:

1. Fitment Match provides confirmation on product details page that a product matches ymm search criteria.


2. Frontend view:


3. i. When product fits for current ymm search:


4. 


5. ii. When product fits universally (if its universal product) for current ymm search:


6. 


7. iii. When product does not fit for current ymm search:


8. 


9. iv. You can also display "Fitment Badges" on the YMM result page like below:


10. 


11. Backend options:


12. Go to "How to Use it" tab then click on "Pro plan features" then you'll see options like below screenshot:


13. 


14. NOTE: This feature is available to users, who are on Pro or Premium plans only.

(B) Fitment Compatibility Chart:

1. Fitment Compatibility Chart displays all product fitment data that belongs to ymm search criteria on product details page.


2. Frontend view (Desktop):


3. 


4. Frontend view (Mobile):


5. 


6. On click of any "Year" will display next ymm data in mobile view like below screenshot along with "Go Back" button.


7. 


8. Backend Options:


9. Go to "How to Use it" tab then click on "Pro plan features" then you'll see options like below screenshot:


10. 


11. NOTE: This feature is available to users, who are on Pro or Premium plans only.

Customer Support

If you have any questions, please do not hesitate to contact us at supportshpfy@capacitywebsolutions.com.We are happy to help!

Please add our email: supportshpfy@capacitywebsolutions.com to your address book to ensure our response email isn’t marked as spam mail.

We will try our best to reply your emails as soon as possible , except weekends and National Holidays.

Thank you.
Capacity Web Solutions Team

Credits

• PHP
• Mysqli
• Angular JS
• jQuery Library
• Shopify API
• Shopify Theme Liquid