Adding PartsPal Code to your Shopify

Adding code a code snippet 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.

Preparation

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

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

<script type="text/javascript">
window.PARTSPAL_APP_CONFIGS = {
 baseUrl: '/a/partspal',
 storeAlias: '{{shop.permanent_domain}}',
 theme:"theme_ford",
 metaUrl:"<https://proxy.partly.parts/shopify/>",
 assetUrl:"<https://cdn.partly.parts/assets/shopify/>"
};
</script>
{% c-block-end %}

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

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

<script type="text/javascript" src="[<https://cdn.partly.parts/assets/shopify/script-loader.js>](<https://cdn.partly.parts/assets/shopify/script-loader.js>)"></script>
{% c-block-end %}

Homepage YMM Snippet

  1. Create a new section called "home-vehicle-selector"

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

<section class="container">
<br>
<h3>CHOOSE YOUR VEHICLE</span></h3>
<ngx-element
class="parts-pal theme_ford"
selector="home-vehicle-selector"
data-additional-selector="{{section.settings.additionalSelector}}"
       data-additional-selector-label="Categories"
data-layout="{{section.settings.layout}}"
data-role="{{section.settings.buttonRole}}"
>
</ngx-element>
</section>

{% schema %}
 {
   "name": "Vehicle Selector",
   "settings": [
   {
     "id": "layout",
     "type": "select",
     "label": "Layout",
     "options":[
     { "value": "vertical", "label": "Vertical"},
     { "value": "horizontal", "label": "Horizontal"}
     ],
     "default":"horizontal"
   },
   {
     "id": "additionalSelector",
     "type": "select",
     "label": "Additional selector",
     "options":[
     { "value": "categories", "label": "Categories"},
     { "value": "default", "label": "None"}
     ],
     "default":"default"
   },
   {
     "id": "buttonRole",
     "type": "select",
     "label": "Role",
     "options":[
     { "value": "navigation", "label": "Navigation"},
     { "value": "partrequest", "label": "Get a Quote"}
     ],
     "default":"navigation"
   }
   ],
"presets": [
   {
     "name": "Vehicle Selector",
     "category": "PartsPal"
   }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
{% c-block-end %}


Product Page YMM Snippet

  1. Create snippets:
  • product-vehicle-selector

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

<ngx-element class="parts-pal theme_ford" selector="product-vehicle-selector"></ngx-element>
{% c-block-end %}

  • product-fitment-check

{% c-block language="Javascript" }

<ngx-element class="parts-pal theme_ford" selector="fitment-check"></ngx-element>
{% c-block-end %}

  • product-part-info

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

<ngx-element class="parts-pal theme_ford" selector="part-info"></ngx-element>
{% c-block-end%}

Double check that you've created these 3 under snippets, not sections.

  1. Find "product-template.liquid"
  2. Insert the vehicle selector into the HTML wherever you want it to show

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

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

  1. Insert the fitment checker into the HTML wherever you want it to show

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

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

  1. Insert the part info into the HTML wherever you want it to show

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

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

Creating and Importing your inventory from Shopify

If you already have parts in your Shopify inventory like this:

And you want to import your Shopify inventory to PartsPal inventory, just simply go to

Shopify App store, add PartsPal App to your Shopify account, and your Shopify inventory will be automatically imported to your PartsPal inventory once the PartsPal connection is done.

Now if you enter PartsPal APP via Shopify, you will see your Shopify inventory is already in your PartsPal account.

PartsPal will automatically push updates to Shopify once a day, if you made changes of your inventory on PartsPal. You can also manually update changes to accelerate this process, by heading to PartsPal App > Settings >Apps, click Shopify in Installed apps.

In the window popped up, select all items as Push to Shopify Only under Sync Settings, and click Manually Push Products to Shopify under Manual Actions. Then all updates are pushed to Shopify immediately.

In contrast, if you made some inventory changes via Shopify, and want to push updates  to PartsPal, you need to select Copy from Shopify Only under Sync Settings and click Manually Copy Products From Shopify under Manual Actions.

If you still have any questions, you can reach out at support@parts-pal.com

Setting up Request Quote Form for Shopify

PartsPal Get Quote Form is a good way to keep customers even if you don't have the part available online. This tutorial guides you through installing the form on your Shopify homepage.

Step 1: Install the PartsPal app

Head over here to Shopify app store PartsPal listing.

Step 2: Insert code

If you have already install your code, skip to Step 4.

You will have to install a few snippets of code. If you have difficulties doing so, you can reach out to the team at support@parts-pal.com

Head over 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

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

<script type="text/javascript">
  window.PARTSPAL_APP_CONFIGS = { baseUrl: '/a/partspal', storeAlias: '{{shop.permanent_domain}}' };
</script>
{% c-block-end %}

Create a new section called "home-vehicle-selector"

Replace the code with this


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

<section class="page-width">
<h3>CHOOSE <span class="highlight">YOUR VEHICLE</span></h3>
<ngx-element class="parts-pal theme_ford" data-additional-selector="{{section.settings.additionalSelector}}"
       data-layout="{{section.settings.layout}}"
data-role="{{section.settings.buttonRole}}"
data-fitment-mode="{{section.settings.fitmentMode}}"
selector="home-vehicle-selector"></ngx-element>
</section>

{% schema %}
 {
   "name": "Vehicle Selector",
   "settings": [
   {
     "id": "layout",
     "type": "select",
     "label": "Layout",
     "options":[
     { "value": "vertical", "label": "Vertical"},
     { "value": "horizontal", "label": "Horizontal"}
     ],
     "default":"vertical"
   },
   {
     "id": "additionalSelector",
     "type": "select",
     "label": "Layout",
     "options":[
     { "value": "categories", "label": "Categories"},
     { "value": "default", "label": "Default"}
     ],
     "default":"default"
   },
   {
     "id": "buttonRole",
     "type": "select",
     "label": "Role",
     "options":[
     { "value": "navigation", "label": "Navigation"},
     { "value": "partrequest", "label": "Get a Quote"}
     ],
     "default":"navigation"
   },
   {
     "id": "fitmentMode",
     "type": "select",
     "label": "Fitment Mode",
     "options":[
     { "value": "1", "label": "YMM"},
     { "value": "5", "label": "YMM + Full Vehicle"},
     { "value": "3", "label": "YMM + Engine"},
     { "value": "7", "label": "YMM + Full Vehicle + Engine"},
     { "value": "15", "label": "YMM + Full Vehicle + Engine + Vehicle Config"}
     ],
     "default":"1"
   }
   ],
"presets": [
   {
     "name": "Vehicle Selector",
     "category": "PartsPal"
   }
 ]
 }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
{% c-block-end %}

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

<script type="text/javascript">
  window.PARTSPAL_APP_CONFIGS = { baseUrl: '/a/partspal', storeAlias: '{{shop.permanent_domain}}' };
</script>
{% c-block-end %}

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

<script type="text/javascript">
  window.PARTSPAL_APP_CONFIGS = { baseUrl: '/a/partspal', storeAlias: '{{shop.permanent_domain}}' };
</script>
{% c-block-end %}

Step 3: Activate the PartsPal section

Head back to customize your theme. Select "add section".

If you installed the code correctly, you should be able to see the PartsPal Vehicle Selector section. Select that, and arrange it to where you want it.

Step 4: Change settings

Finally, there are settings that you can customize.

Select the role as "Get a Quote", and the other settings to your preference.

If you still have any questions, you can reach out at support@parts-pal.com

Publishing Parts to Shopify

Once your products are Completed, they will be ready to be Published on your sales channel. To do so, head over to your Inventory Manager

Tip: If you have a large inventory, use the Filter to filter for products that are Complete but not yet Published.

Select all the parts that you want to publish.

In the actions menu - 3 dots dropdown, select Sales Channel, and click Publish.

Tip: To speed up the process of Publishing a large inventory, you can browse by more products per page. The default is 40 products, but you can make changes by up to 400 products. Note that the inventory manager will slow down when you do so.