Copy the code below and paste it into a Custom HTML block on your Shopify product page (works with any theme editor or PageFly).
<!-- CarPlay Vehicle Selector - Paste into Shopify Custom HTML Block -->
<style>
.vs-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 520px; margin: 0 auto; }
.vs-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #888; margin-bottom: 6px; }
.vs-select { width: 100%; padding: 12px 16px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 15px; background: #fff; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; margin-bottom: 14px; }
.vs-select:focus { outline: none; border-color: #2563eb; }
.vs-select:disabled { background-color: #f5f5f5; cursor: not-allowed; color: #bbb; }
.vs-result { padding: 16px; border-radius: 10px; margin-top: 6px; font-size: 14px; display: none; }
.vs-result.compatible { background: #f0fdf4; border: 2px solid #22c55e; color: #166534; display: block; }
.vs-result.incompatible { background: #fef2f2; border: 2px solid #ef4444; color: #991b1b; display: block; }
.vs-result strong { display: block; font-size: 16px; margin-bottom: 4px; }
.vs-result .vs-system { font-size: 13px; color: #555; margin-top: 4px; }
</style>
<div class="vs-wrap">
<label class="vs-label" for="vs-brand">Car Brand</label>
<select class="vs-select" id="vs-brand" onchange="vsSelectBrand(this.value)">
<option value="">Select Brand...</option>
</select>
<label class="vs-label" for="vs-model">Model</label>
<select class="vs-select" id="vs-model" disabled onchange="vsSelectModel(this.value)">
<option value="">Select Model...</option>
</select>
<label class="vs-label" for="vs-year">Year</label>
<select class="vs-select" id="vs-year" disabled onchange="vsSelectYear(this.value)">
<option value="">Select Year...</option>
</select>
<div class="vs-result" id="vs-result"></div>
</div>
<script>
var VS_DATA = {
"BMW": {
"1 Series": {"2011":["CIC"],"2012":["NBT"],"2013":["NBT"],"2014":["NBT"],"2015":["NBT"],"2016":["NBT"],"2017":["NBT"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"2 Series": {"2014":["NBT"],"2015":["NBT"],"2016":["NBT"],"2017":["NBT"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"3 Series": {"2005":["CCC"],"2006":["CCC"],"2007":["CCC"],"2008":["CCC"],"2009":["CIC"],"2010":["CIC"],"2011":["CIC"],"2012":["CIC"],"2013":["NBT"],"2014":["NBT"],"2015":["NBT"],"2016":["NBT"],"2017":["EVO"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"4 Series": {"2013":["NBT"],"2014":["NBT"],"2015":["NBT"],"2016":["NBT"],"2017":["NBT"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"5 Series": {"2005":["CCC"],"2006":["CCC"],"2007":["CCC"],"2008":["CCC"],"2010":["CIC"],"2011":["CIC"],"2012":["CIC"],"2013":["NBT"],"2014":["NBT"],"2015":["NBT"],"2016":["NBT"],"2017":["NBT"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"6 Series": {"2011":["NBT"],"2012":["NBT"],"2013":["NBT"],"2014":["NBT"],"2015":["NBT"],"2016":["NBT"],"2017":["NBT"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"7 Series": {"2009":["CIC"],"2010":["CIC"],"2011":["CIC"],"2012":["CIC"],"2013":["NBT"],"2014":["NBT"],"2015":["NBT"],"2016":["NBT"],"2017":["EVO"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"X1": {"2010":["CIC"],"2011":["CIC"],"2012":["CIC"],"2013":["NBT"],"2014":["NBT"],"2015":["NBT"],"2016":["NBT"],"2017":["EVO"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"X3": {"2011":["CIC"],"2012":["CIC"],"2013":["NBT"],"2014":["NBT"],"2015":["NBT"],"2016":["EVO"],"2017":["EVO"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"X4": {"2013":["NBT"],"2014":["NBT"],"2015":["NBT"],"2016":["EVO"],"2017":["EVO"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"X5": {"2005":["CCC"],"2006":["CCC"],"2007":["CCC"],"2008":["CCC"],"2010":["CIC"],"2011":["CIC"],"2012":["CIC"],"2013":["CIC"],"2014":["NBT"],"2015":["NBT"],"2016":["NBT"],"2017":["EVO"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"X6": {"2005":["CCC"],"2006":["CCC"],"2007":["CCC"],"2008":["CCC"],"2010":["CIC"],"2011":["CIC"],"2012":["CIC"],"2013":["CIC"],"2014":["NBT"],"2015":["NBT"],"2016":["NBT"],"2017":["EVO"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"M2": {"2015":["NBT"],"2016":["NBT"],"2017":["EVO"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"M3": {"2009":["CIC"],"2010":["CIC"],"2011":["CIC"],"2012":["CIC"],"2013":["CIC"],"2014":["NBT"],"2015":["NBT"],"2016":["NBT"],"2017":["EVO"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"M4": {"2014":["NBT"],"2015":["NBT"],"2016":["NBT"],"2017":["EVO"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"M5": {"2011":["CIC"],"2012":["CIC"],"2013":["CIC"],"2014":["NBT"],"2015":["NBT"],"2016":["NBT"],"2017":["EVO"],"2018":["EVO"],"2019":["EVO"],"2020":["EVO"]},
"Z4": {"2009":["CIC"],"2010":["CIC"],"2011":["CIC"],"2012":["CIC"],"2013":["CIC"],"2014":["CIC"],"2015":["CIC"],"2016":["CIC"]}
},
"Mercedes": {
"A-Class": {"2013":["NTG 4.5"],"2014":["NTG 4.5"],"2015":["NTG 4.5"],"2016":["NTG 5.0"],"2017":["NTG 5.0"],"2019":["NTG 6.0"],"2020":["NTG 6.0"],"2021":["NTG 6.0"]},
"C-Class": {"2008":["NTG 4.0"],"2009":["NTG 4.0"],"2010":["NTG 4.0"],"2011":["NTG 4.5"],"2012":["NTG 4.5"],"2013":["NTG 4.5"],"2014":["NTG 4.5"],"2015":["NTG 5.0"],"2016":["NTG 5.0"],"2017":["NTG 5.0"],"2019":["NTG 5.5"],"2020":["NTG 5.5"]},
"E-Class": {"2008":["NTG 4.0"],"2009":["NTG 4.0"],"2010":["NTG 4.0"],"2011":["NTG 4.0"],"2012":["NTG 4.5"],"2013":["NTG 4.5"],"2014":["NTG 4.5"],"2015":["NTG 4.5"],"2016":["NTG 5.5"],"2017":["NTG 5.5"],"2018":["NTG 5.5"],"2019":["NTG 5.5"],"2020":["NTG 6.0"]},
"S-Class": {"2006":["NTG 3.0"],"2007":["NTG 3.0"],"2008":["NTG 3.0"],"2009":["NTG 3.0"],"2010":["NTG 3.5"],"2011":["NTG 3.5"],"2012":["NTG 3.5"],"2014":["NTG 5.0"],"2015":["NTG 5.0"],"2016":["NTG 5.0"],"2017":["NTG 5.0"],"2018":["NTG 5.5"],"2019":["NTG 5.5"],"2020":["NTG 5.5"]},
"GLA": {"2013":["NTG 4.5"],"2014":["NTG 4.5"],"2015":["NTG 4.5"],"2016":["NTG 5.0"],"2017":["NTG 5.0"],"2020":["NTG 6.0"],"2021":["NTG 6.0"]},
"GLC": {"2015":["NTG 5.0"],"2016":["NTG 5.0"],"2017":["NTG 5.0"],"2020":["NTG 6.0"],"2021":["NTG 6.0"],"2022":["NTG 6.0"]},
"GLE": {"2015":["NTG 5.0"],"2016":["NTG 5.0"],"2017":["NTG 5.0"],"2020":["NTG 6.0"],"2021":["NTG 6.0"],"2022":["NTG 6.0"]},
"GLS": {"2015":["NTG 5.0"],"2016":["NTG 5.0"],"2017":["NTG 5.0"],"2020":["NTG 6.0"]},
"CLA": {"2013":["NTG 4.5"],"2014":["NTG 4.5"],"2015":["NTG 4.5"],"2016":["NTG 5.0"],"2017":["NTG 5.0"]},
"CLS": {"2013":["NTG 4.5"],"2014":["NTG 4.5"],"2015":["NTG 4.5"],"2016":["NTG 5.0"],"2017":["NTG 5.0"],"2020":["NTG 6.0"]},
"GLK": {"2008":["NTG 4.0"],"2009":["NTG 4.0"],"2010":["NTG 4.0"],"2011":["NTG 4.0"],"2013":["NTG 4.5"],"2014":["NTG 4.5"],"2015":["NTG 4.5"]},
"AMG GT": {"2017":["NTG 5.5"],"2018":["NTG 5.5"]}
},
"Audi": {
"A3": {"2014":["MIB"],"2015":["MIB"],"2016":["MIB"],"2017":["MIB"],"2018":["MIB"],"2019":["MIB"],"2020":["MIB"],"2021":["MIB3"],"2022":["MIB3"],"2023":["MIB3"]},
"A4": {"2008":["MMI 3G"],"2009":["MMI 3G"],"2010":["MMI 3G"],"2011":["MMI 3G"],"2012":["MMI 3G"],"2013":["MMI 3G"],"2014":["MMI 3G"],"2015":["MMI 3G"],"2016":["MMI 3G"],"2017":["MIB"],"2018":["MIB"],"2019":["MIB"],"2020":["MIB3"],"2021":["MIB3"],"2022":["MIB3"],"2023":["MIB3"]},
"A5": {"2008":["MMI 3G"],"2009":["MMI 3G"],"2010":["MMI 3G"],"2011":["MMI 3G"],"2012":["MMI 3G"],"2013":["MMI 3G"],"2014":["MMI 3G"],"2015":["MMI 3G"],"2016":["MMI 3G"],"2017":["MIB"],"2018":["MIB"],"2019":["MIB"],"2020":["MIB"],"2021":["MIB3"],"2022":["MIB3"],"2023":["MIB3"]},
"A6": {"2009":["MMI 3G"],"2010":["MMI 3G"],"2011":["MMI 3G"],"2012":["3G RMC"],"2013":["3G RMC"],"2014":["3G RMC"],"2015":["3G RMC"],"2016":["MMI 3G+"],"2017":["MMI 3G+"],"2018":["MMI 3G+"]},
"Q3": {"2013":["MMI 3G"],"2014":["MMI 3G"],"2015":["MMI 3G"],"2016":["MMI 3G"],"2017":["MMI 3G"],"2018":["MMI 3G"],"2019":["MIB3"],"2020":["MIB3"],"2021":["MIB3"],"2022":["MIB3"]},
"Q5": {"2010":["MMI 3G"],"2011":["MMI 3G"],"2012":["MMI 3G"],"2013":["MMI 3G"],"2014":["MMI 3G"],"2015":["MMI 3G"],"2016":["MMI 3G"],"2017":["MMI 3G"],"2018":["MIB"],"2019":["MIB"],"2020":["MIB"],"2021":["MIB3"],"2022":["MIB3"],"2023":["MIB3"]},
"Q7": {"2010":["MMI 3G"],"2011":["MMI 3G"],"2012":["MMI 3G"],"2013":["MMI 3G"],"2014":["MMI 3G"],"2015":["MMI 3G"],"2016":["MIB"],"2017":["MIB"],"2018":["MIB"]}
},
"Lexus": {
"ES": {"2012":["Joystick"],"2013":["Joystick"],"2014":["Joystick"],"2015":["Knob"],"2016":["Knob"],"2017":["Knob"],"2018":["Knob"],"2019":["Big Touch"],"2020":["Big Touch"],"2021":["Big Touch"],"2022":["Big Touch"]},
"RX": {"2015":["Knob"],"2016":["Knob"],"2017":["Knob"],"2018":["Knob"],"2019":["Big Touch"],"2020":["Big Touch"],"2021":["Big Touch"],"2022":["Big Touch"]},
"NX": {"2015":["Knob"],"2016":["Knob"],"2017":["Knob"],"2018":["Big Touch"],"2019":["Big Touch"],"2020":["Big Touch"],"2021":["Big Touch"]},
"IS": {"2014":["Knob"],"2015":["Knob"],"2016":["Knob"],"2017":["Joystick"],"2018":["Joystick"],"2019":["Joystick"]},
"GS": {"2012":["Joystick"],"2013":["Joystick"],"2014":["Joystick"],"2015":["Joystick"],"2016":["Joystick"],"2017":["Joystick"]},
"LS": {"2012":["Joystick"],"2013":["Joystick"],"2014":["Joystick"],"2017":["Big Touch"],"2018":["Big Touch"],"2019":["Big Touch"],"2020":["Big Touch"]},
"GX460": {"2014":["Joystick"],"2015":["Joystick"],"2016":["Joystick"],"2017":["Joystick"],"2018":["Joystick"],"2019":["Joystick"],"2020":["Joystick"],"2021":["Joystick"]},
"LX-570": {"2016":["Joystick"],"2017":["Joystick"],"2018":["Joystick"],"2019":["Joystick"],"2020":["Joystick"],"2021":["Joystick"]}
},
"Porsche": {
"911": {"2006":["PCM 3.0"],"2007":["PCM 3.0"],"2008":["PCM 3.0"],"2009":["PCM 3.0"],"2010":["PCM 3.0"],"2011":["PCM 3.0"],"2012":["PCM 3.1"],"2013":["PCM 3.1"],"2014":["PCM 3.1"],"2015":["PCM 3.1"],"2016":["PCM 4.0"],"2017":["PCM 4.0"],"2018":["PCM 4.0"]},
"Cayenne": {"2007":["PCM 3.0"],"2008":["PCM 3.0"],"2009":["PCM 3.0"],"2010":["CDR 3.1"],"2011":["CDR 3.1"],"2012":["CDR 3.1"],"2013":["PCM 3.1"],"2014":["PCM 3.1"],"2015":["PCM 3.1"],"2016":["PCM 4.0"]},
"Macan": {"2014":["PCM 3.1"],"2015":["PCM 3.1"],"2016":["PCM 3.1"],"2017":["PCM 4.0"]},
"Panamera": {"2010":["CDR 3.1"],"2011":["CDR 3.1"],"2012":["PCM 3.1"],"2013":["PCM 3.1"],"2014":["PCM 3.1"],"2015":["PCM 3.1"],"2016":["PCM 3.1"]}
},
"Jaguar": {
"XE": {"2016":["Harman 8in"],"2017":["Harman 8in"],"2018":["Harman 8in"]},
"XF": {"2010":["Bosch"],"2011":["Bosch"],"2012":["Bosch"],"2013":["Bosch"],"2014":["Bosch"],"2015":["Bosch"],"2016":["Harman 8in"],"2017":["Harman 8in"],"2018":["Harman 8in"]},
"F-Pace": {"2016":["Harman 8in"],"2017":["Harman 8in"],"2018":["Harman 8in"]},
"F-Type": {"2013":["Bosch"],"2014":["Bosch"],"2015":["Harman 8in"],"2016":["Harman 8in"],"2017":["Harman 8in"],"2018":["Harman 8in"]}
},
"Land Rover": {
"Range Rover": {"2013":["Bosch"],"2014":["Bosch"],"2015":["Bosch"],"2016":["Harman 10in"]},
"Range Rover Sport": {"2013":["Bosch"],"2014":["Bosch"],"2015":["Bosch"],"2016":["Bosch"]},
"Discovery": {"2015":["Bosch"],"2016":["Harman 8in"],"2017":["Harman 8in"],"2018":["Harman 8in"],"2019":["Harman 8in"]},
"Evoque": {"2012":["Bosch"],"2013":["Bosch"],"2014":["Bosch"],"2015":["Bosch"],"2017":["Harman 8in"],"2018":["Harman 8in"]}
},
"Volvo": {
"XC90": {"2018":["Vertical Screen"],"2019":["Vertical Screen"],"2020":["Vertical Screen"],"2021":["Vertical Screen"],"2022":["Vertical Screen"]},
"XC60": {"2015":["Internet"],"2016":["Internet"],"2017":["Internet"],"2018":["Vertical Screen"],"2019":["Vertical Screen"],"2020":["Vertical Screen"],"2021":["Vertical Screen"]},
"XC40": {"2018":["Vertical Screen"],"2019":["Vertical Screen"],"2020":["Vertical Screen"],"2021":["Vertical Screen"],"2022":["Vertical Screen"]},
"S60": {"2015":["Internet"],"2016":["Internet"],"2017":["Internet"],"2018":["Vertical Screen"],"2019":["Vertical Screen"],"2020":["Vertical Screen"],"2021":["Vertical Screen"]},
"S90": {"2018":["Vertical Screen"],"2019":["Vertical Screen"],"2020":["Vertical Screen"],"2021":["Vertical Screen"],"2022":["Vertical Screen"]},
"V60": {"2015":["Internet"],"2016":["Internet"],"2017":["Internet"],"2018":["Vertical Screen"],"2019":["Vertical Screen"],"2020":["Vertical Screen"]},
"V90": {"2018":["Vertical Screen"],"2019":["Vertical Screen"],"2020":["Vertical Screen"],"2021":["Vertical Screen"],"2022":["Vertical Screen"]}
}
};
function vsPopulateBrands() {
var sel = document.getElementById('vs-brand');
Object.keys(VS_DATA).forEach(function(b) {
var o = document.createElement('option'); o.value = b; o.text = b; sel.appendChild(o);
});
}
function vsSelectBrand(brand) {
var mSel = document.getElementById('vs-model');
var ySel = document.getElementById('vs-year');
mSel.innerHTML = '<option value="">Select Model...</option>';
ySel.innerHTML = '<option value="">Select Year...</option>';
ySel.disabled = true;
document.getElementById('vs-result').className = 'vs-result';
if (!brand) { mSel.disabled = true; return; }
Object.keys(VS_DATA[brand]).forEach(function(m) {
var o = document.createElement('option'); o.value = m; o.text = m; mSel.appendChild(o);
});
mSel.disabled = false;
}
function vsSelectModel(model) {
var brand = document.getElementById('vs-brand').value;
var ySel = document.getElementById('vs-year');
ySel.innerHTML = '<option value="">Select Year...</option>';
document.getElementById('vs-result').className = 'vs-result';
if (!model) { ySel.disabled = true; return; }
var years = Object.keys(VS_DATA[brand][model]).sort();
years.forEach(function(y) {
var o = document.createElement('option'); o.value = y; o.text = y; ySel.appendChild(o);
});
ySel.disabled = false;
}
function vsSelectYear(year) {
var brand = document.getElementById('vs-brand').value;
var model = document.getElementById('vs-model').value;
var result = document.getElementById('vs-result');
if (!year) { result.className = 'vs-result'; return; }
var systems = VS_DATA[brand] && VS_DATA[brand][model] && VS_DATA[brand][model][year];
if (systems && systems.length > 0) {
result.className = 'vs-result compatible';
result.innerHTML = '<strong>✅ Compatible with your vehicle!</strong>' +
year + ' ' + brand + ' ' + model +
'<div class="vs-system">System: ' + systems.join(' / ') + '</div>';
} else {
result.className = 'vs-result incompatible';
result.innerHTML = '<strong>❌ Not compatible</strong>Sorry, we don\'t have a module for this vehicle yet. Contact us for more info.';
}
}
vsPopulateBrands();
</script>📋 How to add to Shopify: