How to install PartsPal Collections on your navigation

It is important to have a navigation bar on your Shopify website. Making sure your customers can search products by category can increase the purchase conversion rate. This article will show you how to check your inventory categories in PartsPal and how to create a navigation bar on your Shopify website using category links.

How PartsPal categorizes your parts

Before we start, you should know how PartsPal categorize your parts .

  1. When you import your parts into PartsPal inventory with part numbers, PartsPal will match the part number with its internal database. Once the match is successful, the status of your parts would turn to ‘Complete’.

  1. Each complete part will be assigned to a category by PartsPal automatically.

For example, if you upload a part with its part number 44-FF007 into PartsPal inventory, PartsPal will automatically recognize this part for being a fuel filter after searching in its internal database. Then PartsPal automatically assign this part to a category level following a sequence from specific to general: Fuel Filter - Filters - Air and Fuel Delivery.

You can browse categories of all levels by clicking Category Filter.

  1. PartsPal also generates a unique URL for each category level. The URL is automatically created under your Shopify website domain.

You can find the category URL by heading to Inventory Manager > Clicking on any complete part > Clicking on Sales Channels in the product preview which shows on the right > Clicking Category.

  1. Once you clicked on it, products under the most specific category level will show up.

  1. You can even browse products at any category level simply by clicking on related category class.

For example, you can view the All Category page by clicking All in the category section, and view products under Emission Control category by clicking Emission Control.

After knowing about how PartsPal generate categories and category links, you can now start creating a navigation bar on your Shopify website.

Create 'Browse All' button

  1. Log in to your Shopify account - Click Online Store - Click Themes - Click Customize in your current theme (reminder: the default theme is Debut)

  1. In the customize theme page, you can see all sections of your website homepage are on the left side bar.

If you want to create Browse All button in the first section, just click Image with text overlay

  1. Name the Button label as 'Browse All'. Go to your All Category Page, copy the URL of your All Category Page, and paste it into Button link. Then click Save.

(The URL of your All Category Page is made up by your Shopify website address plus a suffix /a/partspal/home. So you can quickly access to your All Category Page either by PartsPal or by typing in browser for example www.yourstorename/a/partspal/home

Create navigation bar in the header

This can be done by editing Menu on Shopify.

  1. Log in to your Shopify account - Click Online Store - Click Themes - Click Customize in your current theme (reminder: the default theme is Debut)
  2. Click Header section from the left sidebar.
  3. Click Edit Menu

  1. You can customize your menu items by either deleting existing menus or add new menu items.

If you want to create a part category - such as emission control - as a menu item, click Add menu item, put Emission Control in the name and paste the page link below (for getting the category link, refer to step 5 of How PartsPal categorize your parts).

Then you can keep creating a sub-category. Menu items can be dragged and rearranged to sub-menu items by clicking and long pressing the dots on the left.

Click Save when finish editing menu. All menu items will be shown as navigation on website header.

View Requested Parts

PartsPal has a customer recovery feature which allows your customers to request a part if you do not have it in stock.This ensures that you have a potential customers' details and also gives you useful data.

To view your parts requested head over to PartsPal App > Stock Control > Part Request

Applying PartsPal features to only certain pages

If you are selling other products besides auto parts on your store, you may want to only displaying the vehicle selector, fitment check and part info on product pages that are auto parts specific.

Firstly, add in the code snippets from this tutorial as normal.

Adding Vehicle YMM to Shopify Using PartsPal Code Snippets

To do so, you could have to add a modification to the code in "product-template.liquid"

  1. Replace the vehicle selector from

{% c-block language="Javascript" %}

{% include 'product-vehicle-selector' %}
{% c-block-end %}

to

{% c-block language="Javascript" %}
{% for c in product.collections %}
   {% if c.handle == "auto-car-parts" %}
<h1>Choose your vehicle</h1>
   {% include 'product-vehicle-selector' %}
   {% endif %}
{% endfor %}
{% c-block-end %}

  1. Replace the fitment checker from

{% c-block language="Javascript"  %}

{% include 'product-fitment-check' %}
{% c-block-end %}

to

{% c-block language="Javascript"  %}

{% for c in product.collections %}
   {% if c.handle == "auto-car-parts" %}
   {% include 'product-fitment-check' %}
   {% endif %}
{% endfor %}
{% c-block-end %}

  1. Replace the part info from


{% c-block language="Javascript"  %}

{% include 'product-part-info' %}
{% c-block-end %}

to

{% c-block language="Javascript"  %}

{% for c in product.collections %}
    {% if c.handle == "auto-car-parts" %}
    {% include 'product-part-info' %}
    {% endif %}

{% endfor %}
{% c-block-end %}

Whats happening in the code?

The code is search for collections that are tagged with auto-car-parts, and if it is, then inserts the vehicle selector, fitment check and part info to the product page.

Customising Vehicle Selector

The vehicle selector (Year Make Model filter) inherits styling such as color and font from your live theme. However, if you would like make small customisations, you can add some code to bypass the styling.

Developer skill required - Intermediate

Start by heading over to the developer area by selecting Edit Code.

Select the "home-vehicle-selector.liquid" section code.

Scroll down to the bottom, and you will see the stylesheet section.

{% c-block language="Javascript" %}

{% stylesheet %}
{% endstylesheet %}
{% c-block-end %}

This is where you will insert the custom code that you want to customise the vehicle selector.

Example

In this example, the font size is increased to 18 pixels (font-size: 18px !important;), the border thickness is set to 2 pixels (border-width: 2px), the border colour is set to dark turquoise (border-color: #00badb), and the border colour for disabled fields set to dark grey (border-color: #d1d1d1).

To choose your own colour, you can go to https://www.google.com/search?q=colour picker and copy the hex code (it should look like #00badb). To get the hex code from a colour on a website, this is a great Google Chrome extension: https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka.


{% c-block language="Javascript" %}

{% stylesheet %}
select, .mat-form-field-outline-start, .mat-form-field-outline-end, .mat-form-field-outline-gap {
   border-color: #00badb !important;
}

.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-outline-gap {
   /* Keep the gap transparent for the title of the field */
   border-top-color: transparent !important;
}

select, .mat-input-element {
   font-size: 18px !important;
}

.mat-form-field-outline-start, .mat-form-field-outline-end, .mat-form-field-outline-gap {
   border-width: 2px !important;
}

.mat-form-field-disabled .mat-form-field-outline-start {
   border-color: #d1d1d1 !important;
}

.mat-form-field-disabled .mat-form-field-outline-end {
   border-color: #d1d1d1 !important;
}

.mat-form-field-disabled .mat-form-field-outline-gap {
   border-color: #d1d1d1 !important;
}
{% endstylesheet %}
{% c-block-end %}

How to make a Brand Page

Introduction

A common feature wanted by auto parts store is to make a brand page.

The method that comes to mind to do so is to put brands into collections then to display these collections on a page. Shopify has a page which lists all your collections, but unfortunately doesn't allow you to have a page with just specific collections.

This is quite a common problem brought up in their community forums.

Solution

The reason why Shopify doesn't do so is because the "List Collection" page will different from theme to theme.

We would recommend that you get a theme that has custom-coded solution, or you can hire a developer to help you implement this. If you would like to implement this yourself, this guide may help you.https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952

The PartsPal onboarding team will help you set up this page under selected plans

Updating your brands.

Once the PartsPal has helped you set up your Brand page, you will be able to add your collections to the brand page.

Adding your brands to collections

Select Automated Collection type

Under Conditions - select "Product Vendor" "contains" "brand name"

PartsPal will automatically provide the brand name when your products are linked with GAPC.

Linking my products with GAPC

Updating your menu

Once you've created the collection, you will be able to add the brand to the page. To do so, head over to Navigation > BrandsAdd the collection you just created to the brand.