• PartsPal Team

Adding Vehicle YMM to Shopify using PartsPal Code Snippets

Updated: 2 days ago

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


1. Create a new section called "enable-parts-pal".


{% schema %}

{

"name": "Enable PartsPal",

"settings": [],

"presets": [

{

"name": "Enable PartsPal",

"category": "PartsPal"

}

]

}

{% endschema %}


{% stylesheet %}

{% endstylesheet %}


{% javascript %}

window.PARTSPAL_CONFIG = { theme: 'theme_ford' };

{% endjavascript %}


2. Change configs as you wish 


  • With Theme

window.PARTSPAL_CONFIG = { theme: 'theme_ford' };


  • Without Theme

window.PARTSPAL_CONFIG = {};



Homepage YMM Snippet


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


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


{% schema %}

{

"name": "Vehicle Selector",

"settings": [],

"presets": [

{

"name": "Vehicle Selector",

"category": "PartsPal"

}

]

}

{% endschema %}


{% stylesheet %}

{% endstylesheet %}


{% javascript %}

{% endjavascript %}


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



Product Page YMM Snippet


1. Find "product.liquid", insert "{% section 'enable-parts-pal' %}" before "{% section 'product-template' %}"


2. 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>



4. Find "product-template.liquid"


5. Insert the vehicle selector to the place you want

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


6. Insert the fitment checker to the place you want

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


7. Insert the part info to the place you want

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



App Configs


1. Find "theme.liquid", insert the following code in head to disable Vin search


<script>

window.PARTSPAL_APP_CONFIGS = { disableVin: true };

</script>