Shopify enterprise and custom development
Updated: Dec 3, 2020
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.
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 www.storename.com/a/partspal/home/vehicle/make-model-year ,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 www.storename.com/a/partspal/browse/category/vehicle/make-model-year . 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
API 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
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