Instructions for the SureFit BigCommerce YMM Module

These are basic and advanced instructions for how to use the SureFit BigCommerce YMM Module.

However, you CAN trial the module using the demonstration account information below.

TABLE OF CONTENTS

• Module Configuration & Support
• Fitment Pages
• Valid zones to place widgets
• How to edit Theme Files
• Customize your shop filters adding Custom Facets
• Hide the "My Garage" button
• Add Fitment Filter to Category Page
• Add Fits Your Vehicle and Year Make Model table to the product page
• Add Year Make Model filter to the Search Page

Module Configuration & Support

This app requires an existing SureDone account with the following to show your products:

• SureDone SureFit app installed and authorized.
• BigCommerce products imported to and/or created from SureDone.
• Fitment data loaded into SureDone.

The module will ask you for the SureDone ID, a 4 to 6 digit number. You can find it by visiting your SureDone Account ID.

You may also choose the primary color and modify margins and paddings.

If you don't have a SureDone account and would like a demonstration of this SureFit YMM module for BigCommerce, schedule a demo with us.

Fitment Pages

The fitment module requires 2 pages to work properly:

• One where the initial search is performed. It can be the home page, another existing page or a new page.
• A new page where the fitment search results are displayed.

Both pages will need the SureDone fitment module block installed and it is important that each page has the module only installed once.

For example, suppose you want to show the initial fitment search on the home page.

1. Go to the BigCommerce admin and customize your storefront.
2. On the Homepage add the SureDone Fitment block onto the page, dragging and dropping it.
   
   

   Don't add the block to global regions

   The fitment block module can be added on any place of the template except global regions. See the example image.

   
   
   
   
3. Click the added widget and update your SureDone ID. You can use 688015 as the ID to see demo data. Then click Publish.
   
   
   
   Next we need a page to display the results.
4. In your storefront admin navigate to Web Pages and then click on Create a Web Page. Configure it as follows:
   • Page type: Contains content created using the WYSIWYG editor below.
   • Page URL: Set this as /fitment/result (required).
   • Navigation Menu: We do not recommend showing this page in the navigation menu.
5. Go back to the BigCommerce admin to customize your storefront and select the page you just created.
6. Add the SureDone Fitment module onto the page and configure it like you did in step 1.

   Don't add the block to global regions

   The fitment block module can be added on any place of the template except global regions. See example image

7. All done!

Valid zones to place widgets

How to edit Theme Files

1. On the BigCommerce dashboard go to: Storefront > Themes
2. Click on Advanced
3. Make a copy of your current theme so you can edit it (if you already have a copy of it, skip this step)
4. Click on the 3 dots of the resulting theme (the copy you just created) and go to Edit Theme Files
5. The Bigcommerce theme editor should be opened

Customize your shop filters adding Custom Facets

1. Log in on SureDone app
2. Select the channel you want to modify from the link in the left sidebar, under Fitment.
   
   
   
   
3. You will see a list with all the fields that you can use as filters (Default filters can't be removed).
   
   
   
   
4. Select all the ones you want to show in your storefront. Your shop users will be able to use them to filter and search more precisely.
   
   
   
   
5. Once you have selected what you want, make sure you click the "Save changes" button.
6. If all went well now you need to reload so new facets can be stored correctly. For that purpose you can either:
   1. Relist all your products.
   2. Ask support to reload your fitment data
7. Once above step finishes. You should see on your storefront filters your new custom facets. For example add box width as custom facets:
   
   
   
   

Hide the "My Garage" button

1. Edit your theme files
2. Go to assets > scss > custom.scss
3. Add the following code:
   
   

   .sd-myGarageButton-Aside, .sd-myGarageButton-initialSearch {
       display: none !important
   }

   
   
   This code will remove the button from all pages
   
   
   
   
4. You may want to remove the button from only 1 place so you can do it as follows:

   
   

   .sd-myGarageButton-Aside {
   	display:none !important;
   }

   
   
   This code will remove the button from filters
   
   

   .sd-myGarageButton-initialSearch {
   	display:none !important;
   }

   
   
   

   This code will remove the button from the initial year make model dropdowns

   
   

5. Click Save and wait until deployed

   
   

6. Results:
   
   Before
   
   
   
   After
   
   
   
   
   
   
7. Click Save and wait until deployed

Add Fitment Filter to Category Page

1. Edit your theme files
2. Go to templates > pages > category.html
3. We need to hide Bigcommerce category page in order to replace it with fitment category page. So search for the html tag that takes care of that and add to the parent div an id equals to SD-CollectionPage. You also have to add style="display: none;" so our widget can find and show it.
   
   
   
   
   
4. Now we need to add a widget point of mount. For that add following code on categories.html right above the div of step 2:
   
   

   {{#if category.id}}
     <script>
       if (!window.shopData) window.shopData = {}
       if (!window.shopData.storefront) window.shopData.storefront = "bigcommerce"
       if (!window.shopData.suredoneID) window.shopData.suredoneID = SUREDONEID
       if (!window.sdFitmentData) window.sdFitmentData = {}
       window.sdFitmentData.category = "{{category.id}}"
       window.sdFitmentData.categoryName = "{{category.name}}"
     </script>
   {{/if}}
   <div id="sd-fitment-categories-root"></div>

   
   Please replace SUREDONEID with your SureDone id.
   
   
   
   
5. Lastly we need to load the widget on this page so paste following code: <script src="https://fitment.suredone.com/bundle.min.js"></script>
   
   
   

Add Fits Your Vehicle and Year Make Model table to the product page

1. Edit your theme files
2. Go to templates > pages > product.html
3. Above the line {{/partial}} paste the following code:
   
   

   {{#if product.sku}}
     <script>
       if (!window.shopData) window.shopData = { }
       if (!window.shopData.storefront) window.shopData.storefront = "bigcommerce"
       if (!window.shopData.suredoneID) window.shopData.suredoneID = SUREDONEID
       if (!window.sdFitmentData) window.sdFitmentData = { }
       window.sdFitmentData.sku = "{{ product.sku }}"
     </script>
   {{/if}}
   <script src="https://fitment.suredone.com/bundle.min.js"></script>

   
   Please replace SUREDONEID with your SureDone id.
   
   
4. Now we need to add the root of the fitment table and fit your vehicle where you want to show each component.
5. Go to templates > components > products > product-view.html
6. We want to show Fits your vehicle right below the product details So at the end of <section class="productView-details"> paste following code:
   
   

   <div id="sd-fitment-fyv-root"></div>
   
   

   
   
   
   
7. We want to show the table at the bottom of product view so on the next line of closing tag of <div class="productView"> paste following code:

   <div id="sd-fitment-chart-root"></div>

   
   
   
   

8. Click on save all files and go back to bigcommerce dashboard Theme: Storefront > Theme

9. On the copied theme, go to 3 dots and click on apply

Add Year Make Model filter to the Search Page

1. Edit your theme files
2. Go to templates > pages > search.html
3. We need to hide the Bigcommerce native search page in order to replace it with the fitment search page. So search for <section class="nav"> and add an id equals to SD-SearchNav (id="SD-SearchNav"). You also have to add style="display: none;" so our widget can handle it.

   Now search for <section class="page"> and do almost the same, this time add an id equals to SD-SearchPage (id="SD-SearchPage") and the style="display: none;" as well.

4. Now we need to add a widget point of mount. For that, add the following code right after the elements we were editing in the previous step (replace SUREDONEID with your SureDone id)
   
   

   <script>
     if (!window.shopData) window.shopData = {}
     if (!window.shopData.suredoneID) window.shopData.suredoneID = SUREDONEID
     if (!window.shopData.storefront) window.shopData.storefront = 'bigcommerce'
   </script>
   <div id="sd-fitment-search-page-root"></div>
   <script src="https://fitment.suredone.com/bundle.min.js"></script>
   
   

   
   
5. After all the changes, your search.html file should look like this:
   
   
   
   
6. Lastly, go to templates > components > search > product-listing.html, add the following code and click "Save & apply file".
   
   

   {{#each product_results.products}}
     <script>
       if (!window.sdFitmentData) window.sdFitmentData = {}
       if (!window.sdFitmentData.searchResultSKUs) window.sdFitmentData.searchResultSKUs = []
       window.sdFitmentData.searchResultSKUs.push('{{sku}}')
     </script>
   {{/each}}