• Levi Fawcett

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.


User flow




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

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


18 views0 comments

Navigation

Solutions

Applications

Links

Integrations

Customers