BigCommerce Year Make Model Search App User Guide

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

Thank you for purchasing Year Make Model Search Bigcommerce App. If you have any difficulty with this App or you find an issue, please feel free to send us a message: bigcommerce@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 Bigcommerce App.

App Installation

Install our app and enjoy free trial >> Bigcommerce Year Make Model Search App

How to Show YMM on Frontend

1. Go to Admin >> Apps >> Year Make Model Search >> How to Use it.  Watch Video Guide >> How to setup BigCommerce Year Make Model Search App


2. Step-1: Upload Files in WebDAV Server

   We are uploading some necessary files for our app in your store's webdav. Please fill WebDAV details in textboxes and click the button to auto upload. (We are not storing below details to our database so you need to fill it every time when you click the button.) You can also delete or re-upload the folder from here, if you want.

   

3. Step-2: Create script for app in Script Manager

   Here, we will create script (name = YearMakeModel Script) in Script Manager directly to work our app in your store's frontend. You can remove or re-create the script using this step, too.

   

4. Step-3: Create a widget for Year Make Model Search box

   We will create widget and place in your current theme's header (below main menu) to display Year Make Model Searchbox in your store's frontend. (Here, widget will be placed automatically to your store front, so you don't need to drag and drop it using page builder in your store. In page builder, widget might not work, because we have created widget to directly place it for store front.)

   If you want to change the placement of Year Make Model Searchbox, you can set it using Step-3 in Manual Setup. If you changed your current theme or in any other cases, you can remove and/or re-create the widget from here,too.

   

5. NOTE: ** If you want to display ymm results in Custom Web Page then follow this Step-4 otherwise you can also display ymm results in Catalog Search Result Page of your store front.


6. Step-4: Create a webpage to display Ymm Results in our Product Result page

   This step will create a webpage (name = Product Result) in your store including our app short code to display results from Year Make Model Search. Once created and then if you don't want to set Custom result page for your ymm results, in that case you can delete Product Result page from here also.

   

7. Following steps will be needed if you have pro/plus plan :


8. Step-5: Copy Fitment Code by click on Copy to Clipboard.

   Fitment block will show information of Ymm search in all the Product pages such that products fit, don't fit or fit universally with your selected ymm values.

   

   From your Bigcommerce admin, click on Storefront >> My Themes and Select Advanced in your Current Active Theme. Click on Edit theme files.
   Go to >> templates >> components >> products >> product-view.html. Paste the shortcode from wherever you want to show fitment block. Please take a look of cornerstone theme file from where fitment block is placed in our demo.

   



9. Step-6: Copy Compatibility Chart Code by click on Copy to Clipboard.

   Compatibility chart will show a table with all ymm records that a product can be displayed in.

   

   From your Bigcommerce admin, click on Storefront >> My Themes and Select Advanced in your Current Active Theme. Click on Edit theme files.
   Go to templates >> components >> products >> product-view.html. Paste the shortcode from wherever you want to show compatibilty chart. Please take a look of cornerstone theme file from where compatibilty chart is placed in our demo.

   

Show/Hide Ymm in Frontend

1. Go to Admin >> Apps >> Year Make Model >>How to Use It


2. You can show/hide ymm searchbox in your store's frontend.

   

Update Store Details

1. Go to Admin >> Apps >> Year Make Model >>How to Use It


2. Year Make Model is using your Store URL to connect with your store. Once you change your store domain, make sure to update your Store URL from here. Click on Update Button and check the updated details. It will update your store domain on our server as well as Product Result page's short code and YearMakeModel Scripts from script manager. But still the app is not working properly then, Please go to YMM app >> How to use tab >> Follow Step-2 and Step-4. Delete and Re-create Script and webpage accordingly. If you want to do it manually, go to our Manual setup >> Enter your new url >> Go to Step-2 and then Step-4 again to make the app working properly.

   

Manage Fields

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


2. From here, You can manage Multiple Dropdowns as per your requirement.



3. 

Add YMM

1. Go to Admin >> Apps >> Year Make Model 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 >> How to add ymm records in Year Make Model Search Application

3. Also, You can Assign selected products to YMM record easily just follow the steps listed in below window:

   

Manage YMM

1. Go to Admin >> Apps >> Year Make Model Search >> Manage YMM. Watch Video Guide here.

2. 

   • Speed up mode is added to make the app to work faster then earlier. It will use static Html when you are turning on Speed Up mode. Watch Video Guide here.

     Select "Off" when you are working on staging/development environment.
     In production environment (when you make your site live) set this to "On", by doing this it will generate Static YMM HTML Code for your Year Make Model dropdowns.
     Please note that this will decrease page load time and help you to speed up your site.

     

   • Dropdown search is available here so you can search and manage your ymm records easily.
   • You can also search records as per assigned Product name/sku.

   

   • You can view all assigned products for a specific ymm record just from table.
   • You can check each ymm record search for frontend by clicking the button in Product list popup.

   

Optimization for Your Ymm Records

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


2. Click on the button Click Me in Ymm Data Optimization section to check duplicates of your added ymm records. Watch Video Guide here.


3. • Optimization will check and delete duplicate records from all ymm records.
   • The page loading time in frontend will decrease due to adequate number of records.

   

Customizable Design for Ymm Searchbox

Go to Admin >> Apps >> Year Make Model Search >> Manage Ymm Design to customize Searchbox design what you wish. Watch Video Guide here.

• At the top, you can see preview of Searchbox that will be appear in frontend.
• You can manage different colors, background, texts and many other.
• You can set required fields for frontend that will restrict to select number of fields for search.
• Now, you can manage field labels from here.

Customizable Design for Product Result Page

Go to Admin >> Apps >> Year Make Model Search >> Manage Product Result Page to customize Result Page design what you wish. Watch Video Guide here.

• You need to put html code of grid.html (My themes > Edit theme files > templates > components > products > grid.html) and card.html (My themes > Edit theme files > templates > components > products > card.html) from your theme templates to display products same as your theme.
• You can manage title, title text, pagination values and column per row from here.
• Product Result page will have Product filtering (Faceted search) same like your category pages have. You can display Category, Brand, Price, Rating and Other filters (Has free shipping, Is featured and In stock) in left sidebar.
• You can display price filter in three different modes, Default (Manual), Automatic Range Slider and Manual + Range Slider.
• You can set app disable message for Product result page.
• There is one more setting to set number for array chunks to get rid of url's length exceeds limit issue. We will use this number to get number of products from Bigcommerce api.
• If you have applied tax and/or any discount rules in your store products, then you need to manage some settings from here to display calculated pricing.

Fitment Configuration

Go to Admin >> Apps >> Year Make Model Search >> Fitment Configuration to show fitment data on your product pages. Watch Video Guide here. (This video will show about how to use our Fitment feature with all settings explained.)

• You can show/hide Fitment Block and also display fitment badges on Custom Product Result page.
• If you want to track/get the information that from which Fitment search the order is placed by your customers, then this might help you. You need to have a textbox in all your products and then ymm app will show the ymm search values automatically in it. And it will also send to Cart and to Order details.
• Ymm text seperator will be used to seperate ymm values which are searched.
• The other settings includes text and font colors of fitment block displaying "confirm fit", "does not fit" or "universal fit".
• You can also customize html of all three fitment blocks and displayed as per your requirements.
• Here, One more feature included to exclude products using product ids when you don't want to show Fitment Block on specific products.

Compatibility Chart

Go to Admin >> Apps >> Year Make Model Search >> Compatibility Chart to show chart of all compatible data in product page. Watch Video Guide here. (This video will show about how to use our Compatibility Chart feature with all settings explained.)

• You can show/hide Compatibility Chart with specific ymm fields and limit number of records to be displayed in table.
• Chart table settings include customizable html along with text and background colors.
• Here, you can display Year field with range values like 1990-1998. Universal products will be displayed with a compatiblity message in table and it can also be customized in app admin.

Year Make Model App in Your Store Front

• Once you followed all the steps properly, You will see new look of ymm in your store.
• Now, product result page has title text with searched ymm dropdowns, product filters (faceted search) and proper view of your store products.



• (New) If you have plus/pro plan then you will also be able to show fitment data and compatibility chart in your product pages. It will look like below images. You will have all the features of plus/pro in our year make model app's 7 day trial period.

Bulk Product Assign

1. Go to Admin >> Apps >> Year Make Model Search >> Bulk Product Assign. From Here, You can assign Products in Bulk to Multiple YMM Rows quickly. Watch Video Guide here.


2. Now you can append/assign new product list to selected ymm rows.
   • Assign New Product List (Remove already assigned products) option will assign newly selected products and remove already assigned old product list for selected ymm rows
   • Append New product List (Do not remove already assigned products) option will append the newly selected products to already assigned old product list for selected ymm rows
3. For Bulk Assign, Just follow the steps mentioned in below window:



4. 

Universal Products

1. Go to Admin >> Apps >> Year Make Model Search >> Universal Products
   IMPORTANT! (  Go to Admin >> Apps >> Year Make Model Search >> Manage YMM Fields and make sure, you have Selected Web Page With Custom Template option by Year Make Model Advance Search Result Page to show Universal products with your search results. )



2. From Here, You can add set of Products to any Search Results.Watch Video Guide here.
   
   For Assign Universal Products, Just follow the steps mentioned in below:
   
   
   1. Step-1: Select "Yes" from Use Universal Products in search dropdown option.
   
   
   2. Step-2: You can choose whether to Display Universal Products as First or Last from Display Universal Products by Dropdown.
   
   
   3. Step-3: Assign your Universal Products by Select Products from Leftside box and then Click on right arrow to move Products into selected list.
   
   
   4. Step-4: After Step-3 click on Save button.
   
   

3. 

Import/Export

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


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



3. 

Create YMM Dropdown values CSV

1. Go to Admin >> Apps >> Year Make Model Search >> Import/Export. Watch Video Guide here.


2. You can create a CSV file that will fetch YMM Dropdown values from your store Products. For that, your products must have YMM dropdown values within Custom fields. You can upload downloaded csv file using Import section to Ymm app. Please enter custom field name according to its Ymm Dropdown Label and then after you can create CSV file easily.



3. 

How to download YMM Sample CSV?

1. Go to Admin >> Apps >> Year Make Model Search >> Import/Export >> Import YMM Dropdown Values CSV. Watch Video Guide here.


2. Click on Help icon right Import YMM CSV file Databutton. From here, You can Download Sample CSV then Modify / Add entries in it.


3. 

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 Export YMM CSV OR Download Sample CSV by just click on button. Watch Video Guide here.


2. Please read below Instructions carefully before Import CSV:
   

1. Please DONOT change/delete CSV Column Ordering/Column Names.


2. If you enter year range in csv file for import, please make sure to select "Csv contains Year range values". You need to enter range with '-'. For example, 2001-2010.


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


4. You can get Store Product Ids Export Product CSV Section.


5. You must have to keep Product Ids as First Column in your CSV and Enter Product Ids with "|" (separated by pipe) like snapshot.

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

1. Step-1: Export All Product Ids in a CSV file. You can export Not Assigned Product Ids also. It will include all the product ids which are not assigned to Ymm records in our app. so further you can manage them easily. Watch Video Guide here
   
   
2. Step-2: Now Next step is to Assign Product IDs to YMM rows in CSV file. It is simple process. Just open your CSV file which is generated in Step-1 and Find your product name 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:

   



3. Step-3: After Prepared Final YMM CSV with assigned Product Ids then Import your YMM CSV.

Import Rows Options

You can Import YMM Rows using below options ( Watch Video Guide here):

1. 1. Csv contains year range like 2001-2010 will import YMM Rows with each Year value of the range which you have entered in csv file
   Note : when you select this option, you need to select Field which will contain Range value in Your CSV.


2. 2. File was exported using the 'Update Rows' template will only update YMM Rows. (It prevents insertion of duplicate rows and updates rows as per changes made in Your CSV.)
   Download CSV Sample for Update YMM Dropdown Values


3. 3. Bulk Insert option will be deleted all previous records and your new csv data will be insert. So, please be careful & take Backup by Export YMM Records CSV first.


4. 4. Append Rows will Import New Records


5. 5. Delete Rows will delete Records from app. The records which are added in csv file will be deleted using this option. Csv file must contain "Ymm Id" as first column. You will get it by update rows in Export CSV.



6. 

Export YMM CSV

1. You can Export YMM Rows by Click on Export YMM CSV.


2. You can select Bulk Update template or Default template for CSV file.
   • If you want to update YMM rows then you can export CSV file using Bulk update template. After changes, you can import this CSV file and it will update the YMM rows which are changed. Note : Do not change/update YMM Id column in CSV file.
   • Default template CSV file will not include Ymm Id column and so it will not be used for Update YMM Rows, if you re-import this csv file (with changes), it will insert the new YMM Rows



3. 

Export Product CSV

1. You can Export Products by Click on Export Product CSV. The product csv will contain Product Id, Product SKU, Product Name and Product URL only.


2. The product csv will help you add the product ids to import ymm data using CSV file.


3. You can export Not Assigned Product Ids also. It will include all the product ids which are not assigned to Ymm records in our app. so further you can manage them easily.



4. 

Uninstall App

There are two things that have to be done manually in your store admin:

• Uninstall the app from admin section

1. Go to Apps > My Apps

2. Click Uninstall.



3. The app will be removed from the My Apps section of the App Marketplace and the Apps bar in your control panel.



• Remove our application template code and files from your store.

  Step-1:  Remove "ymmapp" folder from your store's webdav section content folder.

  Step-2:  Remove the code from Theme Files >> templates >> components >> common >> header.html OR from other file in which you applied this code.

  You need to find following code in your theme files and remove it.

  
  

  Step-3:  If you created "Product Result" web page then Delete it.

  Step-4:  If you had plus/pro plan then please remove code from from Theme Files >> templates >> components >> products >> product-view.html.

  
  

  
  

• If you Uninstall our app after Subscribing in PayPal then you must follow below steps:

  Step-1:  Login to your PayPal Account.

  Step-2:  Go to  Settings.

  Step-3:  Click Payments.

  Step-4:  Under "Preapproved payments", click Manage preapproved payments.

  Step-5:  Select the merchant whose agreement you want to cancel and click Cancel.

  Step-6:  Click Cancel Profile to confirm your request.

  If you have any questions then Click Here to find more details on the PayPal site or feel free to Contact Us.

Customer Support

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

Please add our email bigcommerce@capacitywebsolutions.com to your address book to ensure our response email is not 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

1. PHP
2. Silex Framework
3. PDO
4. Bigcommerce Stencil
5. Angular JS
6. jQuery Library