• PartsPal Team

Adding Vehicle YMM to Shopify using PartsPal Code Snippets

Updated: Oct 7

Adding code a code snippet to Shopify will allow PartsPals 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


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

There are some optional code to include if you would like some changes:


1. Disable the VIN search mode You can disable the VIN search mode, defaulting it to the YMM search immediately. To do so, add ,disableVin:true, to the end of the script

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

2. Adding custom colors to the YMM selector theme

If you have a custom theme color scheme, you can add the code theme: 'theme_value' here. Otherwise if required, we may be able to help you add this manually.


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

Homepage YMM Snippet


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



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





2. You can change the html according to your theme.

3. Go to your Shopify Theme Editor, click add a section, you'll see the vehicle-selector under PartsPal category. You'll be able to config the vehicle selector's behaviour based on the config interface.



Product Page YMM Snippet


1. Create snippets: 


  • product-vehicle-selector

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

  • product-fitment-check

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

  • product-part-info

<ngx-element class="parts-pal theme_ford" selector="part-info"></ngx-element>
Double check that you've created these 3 under snippets, not sections.


2. Find "product-template.liquid"


3. Insert the vehicle selector to the place you want

{% include 'product-vehicle-selector' %}


4. Insert the fitment checker to the place you want

{% include 'product-fitment-check' %}


5. Insert the part info to the place you want

{% include 'product-part-info' %}








141 views

Navigation

Solutions

Applications

Links

Integrations