BigCommerce Year Make Model Search App User Guide


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.

Getting Started


This App is a handy tool to Search Products very quickly from large products database.

Year Make Model Search allows your customers to find products on your website by Year, Make, Model or any additional fields you have created with the help of this App.

Check Live Demo Here

Plans & Pricing

  • Standard Plan - $29.99/month
  • Plus Plan - $49.99/month
  • Pro Plan - $69.99/month
For more detailts, visit Plans & Pricing

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.

    Upload

  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.

    Script

  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.

    Widget

  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.

    Webpage

  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.

    Show/Hide Ymm in 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.

    Update Store Details


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. Manage Fields


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:

    Add YMM

Manage YMM


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

    • Manage YMM

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

      Speed Up Mode(New)

    • 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.
    • Manage YMM

    • 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.
    • Manage YMM

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.

    • 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.
    • Optimization

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.
  • Manage Ymm Design

    Manage Ymm Design

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.
  • Manage Product Result Page Manage Product Result Page Manage Product Result Page Manage Product Result Page

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.
  • Fitment Configuration Fitment Configuration Fitment Configuration Fitment Configuration Fitment Configuration

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.
  • Compatibility Chart Compatibility Chart Compatibility Chart

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.
  • Frontend Frontend Frontend

  • (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.
  • Confirm Fitment

    Don't Fitment

    Universal Fitment

    Compatibility Chart

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. Bulk Product Assign


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. Universal Products


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. Import/ExportImport/ExportImport/Export

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. Import/Export

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. Import/Export

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.

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

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:

    Copy Product Id

    Now just add it in YMM CSV file like below snapshot:

    How to Import YMM Rows


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

  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. Import Rows Option


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 YMM


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. Export Product CSV

Uninstall App


After uninstallation of our ymm app, We will keep your ymm data for one month in our system. After one month, All data will be removed from the system. This is because if you change your mind and want to reinstall and use our ymm app again so you will not need to import your ymm data and can use it immediately. We want to make sure that we will not misuse your personal details and keep it securely.

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.

    Uninstall Application

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

    My app section

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

    Uninstall Application Remove Template Code

    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.

    Uninstall Application Remove Template Code

    Uninstall Application Remove Template Code

  • 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 SettingsIcon 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