How to install PartsPal Get Quote Form on 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

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

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

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

Replace the code with this

<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 %}

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.