{"product_id":"autodealer-car-dealerships-advertising-window-sides-of-cars-diy-install-easy-to-peel-stick-re-use","title":"Autodealer-Car Dealerships - Advertising - Window - Sides of Cars - DIY Install - Easy To Peel \u0026 Stick \u0026 Re-use","description":"\u003cdiv id=\"dealerStickerBuilder\" class=\"dealer-builder\"\u003e\n\n  \u003cdiv class=\"dealer-card\"\u003e\n    \u003cdiv class=\"dealer-header\"\u003e\n      \u003cdiv\u003e\n        \u003ch2\u003eCustomize Your Dealer Sticker\u003c\/h2\u003e\n        \u003cp\u003eType any offer, choose the suffix, and select your size.\u003c\/p\u003e\n      \u003c\/div\u003e\n      \u003cbutton type=\"button\" id=\"resetSticker\"\u003eReset\u003c\/button\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"sticker-preview-box\"\u003e\n      \u003cdiv id=\"stickerPreview\" class=\"sticker-preview\"\u003e\n\n        \u003c!-- Background art layer --\u003e\n        \u003cimg class=\"sticker-bg\" src=\"{{%20'dealer-sticker-classic-blank.png'%20|%20file_url%20}}\" alt=\"Dealer sticker background\"\u003e\n\n        \u003c!-- Editable text layer --\u003e\n        \u003cdiv class=\"sticker-text-layer\"\u003e\n          \u003cspan id=\"offerPrefix\"\u003e$\u003c\/span\u003e\n          \u003cspan id=\"mainOfferText\"\u003e1500\u003c\/span\u003e\n          \u003cspan id=\"suffixOfferText\"\u003eOFF\u003c\/span\u003e\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cp class=\"preview-note\"\u003e\n      Preview is for reference only. Final artwork will be adjusted before print.\n    \u003c\/p\u003e\n\n    \u003cdiv class=\"dealer-fields\"\u003e\n      \u003clabel\u003e\n        Sticker Text \/ Offer\n        \u003cinput id=\"offerInput\" type=\"text\" value=\"1500\" maxlength=\"12\" placeholder=\"1500\"\u003e\n        \u003csmall\u003eType the amount or main text.\u003c\/small\u003e\n      \u003c\/label\u003e\n\n      \u003clabel\u003e\n        Suffix\n        \u003cselect id=\"suffixInput\"\u003e\n          \u003coption value=\"OFF\" selected\u003eOFF\u003c\/option\u003e\n          \u003coption value=\"DOWN\"\u003eDOWN\u003c\/option\u003e\n          \u003coption value=\"CASH\"\u003eCASH\u003c\/option\u003e\n          \u003coption value=\"SPECIAL\"\u003eSPECIAL\u003c\/option\u003e\n          \u003coption value=\"\"\u003eNo suffix\u003c\/option\u003e\n        \u003c\/select\u003e\n        \u003csmall\u003eChoose what comes after the offer.\u003c\/small\u003e\n      \u003c\/label\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"dealer-option-group\"\u003e\n      \u003ch3\u003eSize\u003c\/h3\u003e\n      \u003cdiv class=\"size-buttons\" id=\"sizeButtons\"\u003e\n        \u003cbutton type=\"button\" class=\"active\" data-size=\"Large Windshield\" data-size-note='24\" x 6\"'\u003e\n          Large Windshield\u003cbr\u003e\n          \u003csmall\u003e24\" x 6\"\u003c\/small\u003e\n        \u003c\/button\u003e\n\n        \u003cbutton type=\"button\" data-size=\"Small Windshield\" data-size-note='18\" x 5\"'\u003e\n          Small Windshield\u003cbr\u003e\n          \u003csmall\u003e18\" x 5\"\u003c\/small\u003e\n        \u003c\/button\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cinput type=\"hidden\" id=\"propOffer\" name=\"properties[Sticker Text \/ Offer]\" value=\"1500\"\u003e\n    \u003cinput type=\"hidden\" id=\"propSuffix\" name=\"properties[Suffix]\" value=\"OFF\"\u003e\n    \u003cinput type=\"hidden\" id=\"propSize\" name=\"properties[Requested Size]\" value=\"Large Windshield\"\u003e\n\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.dealer-builder {\n  max-width: 1120px;\n  margin: 32px auto;\n  padding: 0 16px;\n  font-family: Arial, sans-serif;\n}\n\n.dealer-card {\n  background: #f6f6f6;\n  border-radius: 22px;\n  padding: 28px;\n  box-shadow: 0 12px 32px rgba(0,0,0,.07);\n}\n\n.dealer-header {\n  display: flex;\n  justify-content: space-between;\n  gap: 20px;\n  align-items: flex-start;\n}\n\n.dealer-header h2 {\n  margin: 0;\n  font-size: 30px;\n  line-height: 1.05;\n  color: #222;\n}\n\n.dealer-header p {\n  margin: 8px 0 0;\n  color: #444;\n}\n\n#resetSticker {\n  border: 1px solid #ccc;\n  background: white;\n  border-radius: 10px;\n  padding: 10px 15px;\n  font-weight: 700;\n  cursor: pointer;\n}\n\n.sticker-preview-box {\n  margin-top: 28px;\n  background: #fff;\n  border-radius: 18px;\n  padding: 16px;\n  overflow: hidden;\n}\n\n.sticker-preview {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 6 \/ 1.45;\n}\n\n.sticker-bg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n  pointer-events: none;\n}\n\n\/* Main editable text positioning *\/\n.sticker-text-layer {\n  position: absolute;\n  left: 8.8%;\n  right: 9%;\n  top: 48%;\n  transform: translateY(-50%) skewX(-8deg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 1.8vw;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n\/* Dollar sign *\/\n#offerPrefix {\n  font-family: Impact, \"Arial Black\", sans-serif;\n  font-size: clamp(42px, 8.5vw, 135px);\n  font-weight: 900;\n  line-height: .85;\n  color: #ffd900;\n  -webkit-text-stroke: 4px #111;\n  text-shadow:\n    4px 4px 0 #e00000,\n    8px 8px 0 #111,\n    0 -4px 0 rgba(255,255,255,.4);\n}\n\n\/* Main number\/text *\/\n#mainOfferText {\n  font-family: Impact, \"Arial Black\", sans-serif;\n  font-size: clamp(66px, 15vw, 215px);\n  font-weight: 900;\n  line-height: .85;\n  letter-spacing: -0.08em;\n  color: #ffd900;\n  -webkit-text-stroke: 6px #111;\n  text-shadow:\n    6px 6px 0 #e00000,\n    12px 12px 0 #111,\n    0 -6px 0 rgba(255,255,255,.45);\n}\n\n\/* Suffix text *\/\n#suffixOfferText {\n  font-family: Impact, \"Arial Black\", sans-serif;\n  font-size: clamp(42px, 9vw, 135px);\n  font-weight: 900;\n  line-height: .85;\n  letter-spacing: -0.04em;\n  color: white;\n  -webkit-text-stroke: 5px #003fae;\n  text-shadow:\n    5px 5px 0 #111,\n    10px 10px 0 #003fae;\n}\n\n.preview-note {\n  text-align: center;\n  font-size: 13px;\n  color: #555;\n  margin: 14px 0 26px;\n}\n\n.dealer-fields {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 18px;\n}\n\n.dealer-fields label {\n  display: flex;\n  flex-direction: column;\n  font-weight: 800;\n  gap: 8px;\n}\n\n.dealer-fields input,\n.dealer-fields select {\n  border: 1px solid #cfcfcf;\n  border-radius: 10px;\n  padding: 14px;\n  font-size: 16px;\n  background: white;\n}\n\n.dealer-fields small {\n  color: #555;\n  font-weight: 400;\n}\n\n.dealer-option-group {\n  margin-top: 26px;\n}\n\n.dealer-option-group h3 {\n  margin: 0 0 12px;\n  font-size: 16px;\n}\n\n.size-buttons {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n\n.size-buttons button {\n  background: white;\n  border: 1px solid #d4d4d4;\n  border-radius: 12px;\n  padding: 16px 10px;\n  font-weight: 800;\n  cursor: pointer;\n}\n\n.size-buttons button.active {\n  border-color: #1f66ff;\n  box-shadow: 0 0 0 2px rgba(31,102,255,.12);\n  color: #0648cc;\n}\n\n.size-buttons small {\n  font-weight: 500;\n  color: #555;\n}\n\n@media (max-width: 800px) {\n  .dealer-card {\n    padding: 20px;\n  }\n\n  .dealer-header {\n    flex-direction: column;\n  }\n\n  .dealer-fields,\n  .size-buttons {\n    grid-template-columns: 1fr;\n  }\n\n  .sticker-preview {\n    aspect-ratio: 5.4 \/ 1.6;\n  }\n\n  #offerPrefix {\n    -webkit-text-stroke: 2px #111;\n  }\n\n  #mainOfferText {\n    -webkit-text-stroke: 3px #111;\n  }\n\n  #suffixOfferText {\n    -webkit-text-stroke: 2px #003fae;\n  }\n}\n\u003c\/style\u003e\n\n\u003cscript\u003e\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  const offerInput = document.getElementById(\"offerInput\");\n  const suffixInput = document.getElementById(\"suffixInput\");\n\n  const offerPrefix = document.getElementById(\"offerPrefix\");\n  const mainOfferText = document.getElementById(\"mainOfferText\");\n  const suffixOfferText = document.getElementById(\"suffixOfferText\");\n  const textLayer = document.querySelector(\".sticker-text-layer\");\n\n  const propOffer = document.getElementById(\"propOffer\");\n  const propSuffix = document.getElementById(\"propSuffix\");\n  const propSize = document.getElementById(\"propSize\");\n\n  function hasDollarSign(value) {\n    return value.trim().startsWith(\"$\");\n  }\n\n  function cleanOffer(value) {\n    return value.replace(\"$\", \"\").trim();\n  }\n\n  function updateText() {\n    let rawValue = offerInput.value || \"1500\";\n    let suffix = suffixInput.value || \"\";\n\n    if (hasDollarSign(rawValue)) {\n      offerPrefix.style.display = \"inline-block\";\n      mainOfferText.textContent = cleanOffer(rawValue);\n    } else {\n      offerPrefix.style.display = \"inline-block\";\n      mainOfferText.textContent = rawValue;\n    }\n\n    suffixOfferText.textContent = suffix;\n\n    if (suffix === \"\") {\n      suffixOfferText.style.display = \"none\";\n      textLayer.style.gap = \"1vw\";\n    } else {\n      suffixOfferText.style.display = \"inline-block\";\n      textLayer.style.gap = \"1.8vw\";\n    }\n\n    const len = mainOfferText.textContent.length;\n\n    if (len \u003c= 4) {\n      mainOfferText.style.fontSize = \"clamp(66px, 15vw, 215px)\";\n    } else if (len \u003c= 7) {\n      mainOfferText.style.fontSize = \"clamp(54px, 11vw, 160px)\";\n    } else {\n      mainOfferText.style.fontSize = \"clamp(38px, 7vw, 105px)\";\n    }\n\n    propOffer.value = rawValue;\n    propSuffix.value = suffix;\n  }\n\n  function setActiveButton(group, button) {\n    group.querySelectorAll(\"button\").forEach(btn =\u003e btn.classList.remove(\"active\"));\n    button.classList.add(\"active\");\n  }\n\n  document.querySelectorAll(\"#sizeButtons button\").forEach(button =\u003e {\n    button.addEventListener(\"click\", function () {\n      propSize.value = this.dataset.size;\n      setActiveButton(document.getElementById(\"sizeButtons\"), this);\n    });\n  });\n\n  document.getElementById(\"resetSticker\").addEventListener(\"click\", function () {\n    offerInput.value = \"1500\";\n    suffixInput.value = \"OFF\";\n    propSize.value = \"Large Windshield\";\n\n    document.querySelectorAll(\"#sizeButtons button\").forEach(btn =\u003e btn.classList.remove(\"active\"));\n    document.querySelector('#sizeButtons button[data-size=\"Large Windshield\"]').classList.add(\"active\");\n\n    updateText();\n  });\n\n  offerInput.addEventListener(\"input\", updateText);\n  suffixInput.addEventListener(\"change\", updateText);\n\n  function injectPropertiesIntoShopifyForm() {\n    const productForm = document.querySelector('form[action*=\"\/cart\/add\"]');\n    if (!productForm) return;\n\n    const fields = [propOffer, propSuffix, propSize];\n\n    fields.forEach(field =\u003e {\n      const name = field.getAttribute(\"name\");\n      let existing = productForm.querySelector(`[name=\"${name}\"]`);\n\n      if (!existing) {\n        existing = document.createElement(\"input\");\n        existing.type = \"hidden\";\n        existing.name = name;\n        productForm.appendChild(existing);\n      }\n\n      existing.value = field.value;\n    });\n  }\n\n  document.addEventListener(\"submit\", function (event) {\n    if (event.target \u0026\u0026 event.target.matches('form[action*=\"\/cart\/add\"]')) {\n      updateText();\n      injectPropertiesIntoShopifyForm();\n    }\n  }, true);\n\n  updateText();\n});\n\u003c\/script\u003e","brand":"bluewoods brands","offers":[{"title":"Default Title","offer_id":45887079153862,"sku":null,"price":0.0,"currency_code":"USD","in_stock":false}],"url":"https:\/\/bluewoods-brands.myshopify.com\/products\/autodealer-car-dealerships-advertising-window-sides-of-cars-diy-install-easy-to-peel-stick-re-use","provider":"bluewoods brands","version":"1.0","type":"link"}