Note:

If you have the new Shopify 2.0 theme, you can add PartsPal's snippets without having to add code here
How to add PartsPal's snippets to your Shopify theme


Adding vehicle selector and compatibility checker code snippets to Shopify will allow PartsPal's fitment system to be displayed on a Shopify website.

The tutorial video on this page shows how this is done. The PartsPal team can help to implement this if any difficulties are encountered.

This can be tricky as different themes might have the code installed in different places, and there may be 3rd party apps that conflict with PartsPal, so we would recommend you save a backup theme if you are attempting this yourself.

  1. Enabling Partly's functions

  2. Adding PartsPal snippets to your theme

    1. Home vehicle selector

    2. Collection page

    3. Product page

  3. Adding PartsPal snippets to your theme (North America version)

    1. Home vehicle selector

    2. Collection page

    3. Product page

  4. Create smart collection

  5. Styling and adding classes

  6. Search page

We recommend that you first duplicate your current theme as a backup


Enable Partly's functions

Start by heading to the code editor. You can do so by selecting "Theme actions" then "Edit Code".

Find "theme.liquid", insert the following code in <head> to enable PartsPal functions

<link rel="stylesheet" type="text/css" href="https://cdn.partly.com/assets/shopify/en/preload.css" media="all" />

<script type="text/javascript">
window.PARTSPAL_APP_CONFIGS = {
baseUrl: '/a/partspal',
metaUrl:'https://cdn.partly.com/shopify/',
shopifyStoreVer: '1',
storeAlias: '{{shop.permanent_domain}}',
styles: {
colorPrimary: "#f49e0c"
}
};
</script>

And in the same "theme.liquid" insert this code just before the end of the <body>

<script type="text/javascript" src="https://cdn.partly.com/assets/shopify/en/script-loader.js?v1"></script>

Adding PartsPal snippets to your theme

Homepage vehicle selector

Create a new section called "home-vehicle-selector" and add this snippet to it

<ngx-element class="parts-pal" selector="home-vehicle-definition-selector" data-skip-category-selection="1"></ngx-element>

{% schema %}
{
"name": "Vehicle Selector",
"presets": [
{"name": "Vehicle Selector",
"category": "PartsPal"}
]
}
{% endschema %}

PartsPal collection page

Create a new template for collection called "partspal" and add these three snippets

<ngx-element class="parts-pal" selector="browse-core"></ngx-element> <ngx-element class="parts-pal" selector="browse-vehicle-definition-selector"></ngx-element><ngx-element class="parts-pal" selector="collections-page-content"></ngx-element> 

Product page
Find your product page template. This may differ from theme to theme, but its commonly under "product-template.liquid".

Add the follow snippets to the relevant place on your product page


1. Product vehicle selector

<ngx-element class="parts-pal" selector="product-vehicle-definition-selector"></ngx-element>

2. Fitment check

<ngx-element class="parts-pal" selector="fitment-check"></ngx-element>


3. Part info table

<ngx-element class="parts-pal" selector="part-info"></ngx-element>


Adding PartsPal snippets to your theme (North America version)

North American snippets are different due to the different type of fitment data used (config fitment vs defined fitment)


Homepage vehicle selector

Create a new section called "home-vehicle-selector" and add this snippet to it

<ngx-element class="parts-pal" selector="home-vehicle-selector"></ngx-element>

PartsPal Collection Page

Create a new template for collection called "partspal" and add these three snippets

<ngx-element class="parts-pal" selector="browse-core"></ngx-element
<ngx-element class="parts-pal" selector="browse-vehicle-selector"></ngx-element>
<ngx-element class="parts-pal" selector="collections-page-content"></ngx-element>

Product Page

Find your product page template. This may differ from theme to theme, but its commonly under "product-template.liquid".

Add the follow snippets to the relevant place on your product page

1. Product vehicle selector

<ngx-element class="parts-pal" selector="product-vehicle-selector"></ngx-element>

2. Fitment check

<ngx-element class="parts-pal" selector="fitment-check"></ngx-element>


3. Part info table

PartsPal Part Info

<ngx-element class="parts-pal" selector="part-config-fitment-table"></ngx-element>


Create a smart collection

Title: Partspal

  • Condition: Product Tag is equal to partspal

  • Click Edit website SEO

  • Url and handle: partspal

  • Theme templates (on the right side): select collections.partspal


Styling and adding classes

You may notice that the default elements may extend to the edge of the screen. This is because there are no classes added to it.

To reduce any impact to the site speed, you will want to use an existing class for your theme. This will differ for theme, but may be "page-width" or "container" or "boxed" for example

<section class="page-width">
<ngx-element class="parts-pal" selector="home-vehicle-selector"></ngx-element>
</section>


Search Page

create snippets: partspal-search-page.liquid

<div style="padding-bottom:12px;padding-top:24px;"> 
<ngx-element class="parts-pal" selector="search-header"></ngx-element>
</div>

<div style="padding-bottom:24px;">
<hr style="padding:0; margin:0;"/>
</div>

<div style="padding-bottom: 24px;">

<!-- To use MMY selector, use below instead--> <!-- <ngx-element class="parts-pal" selector="browse-vehicle-selector"> </ngx-element> -->
<ngx-element class="parts-pal" selector="browse-vehicle-definition-selector"> </ngx-element>
</div>

<div style="padding-bottom:24px">
<ngx-element class="parts-pal" selector="collections-page-content"></ngx-element>
</div>
  • find search-template.liquid

  • Locate something like <div class="container"

  • Wrap it’s children element with {% comment %} and {% endcomment %}

  • Insert after {% endcomment %}

{% render "partspal-search-page" %}
Did this answer your question?