Shopify Enterprise and Custom Development

This page details the options surrounding some custom integrations. This includes

  • Optimized Shopify template
  • Direct API integrations
  • Custom theme development

Why we don't use Shopify Tag System

Shopify’s Tag system has a limit of 250 tags, which makes it an unsuitable option for filtering vehicles. For example, a simple product that fits 2 models and uses tags: Ford Fiesta 2001-2008, and Ford Focus 2003 - 2012 counts at 14 tags, and even then is only useful for extremely simple fitment.

High level overview

PartsPal vehicle filtering happens external to Shopify. When a vehicle selection is made, an API request is sent to PartsPal, which returns the new array of products matching the vehicle selected. A user interface is built into the theme to interact with this API.

User flow,h_802,al_c,q_90,usm_0.66_1.00_0.01/7b7693_cb9e20afee954d3cbfbee0d30b0b8363~mv2.webp

The Vehicle Selector is added to the homepage as a section. When the vehicle is added to the vehicle selector, the page is redirected to ,where the user is prompted to select the category. The categories are generated by PartsPal based on the parts. When the category selection is made, the page directs to . The vehicle filter is applied on this page. When a product is selected, it links back to the Shopify product page which has the PartsPal vehicle selector snippets applied.

Out of the box installation

The code installed on the theme’s code are:

  1. Theme.liquid - A snippet is added to <head> to activate PartsPal functions. The options that can be customised here are removing VIN decoder and adding theme/branding.
  2. Section - A section is created for the homepage vehicle selector
  3. Product page. There are 3 snippets added to the product page, the vehicle selector, vehicle compatibility and part information.

The code snippet and information can be found here.

Complex / custom installation


Direct API integration is available for custom developments. Integrating via the API let's you create custom vehicle selectors, delete / add vehicles to the garage, manually query parts, etc.

See our GraphQL API docs here

Custom themes

PartsPal uses Angular Material as for all themes. You can use CSS within Shopify templates to customize the look and feel of the material templates. For enterprises this can be added to a theme by our team. Structural or significant development is possible, however this is done by our in-house developers.

You can modify Shopify CSS in styles.scss.liquid

Accessing tags in Angular can be controlled through ng-deep