Foldable Metal Divot Tool
/* ========================= AF APPLE-STYLE DARK MODE — DIVOT TOOL PDP (THEME-PROOF VARIANT SWITCH) Uses the same working framework as Stubby. ========================= */ :root{ - -bg-color:#000; --card-bg:#1c1c1e; --text-main:#f5f5f7; --text-muted:#86868b; --accent:#22c55e; --border:rgba(255,255,255,.10); } #af-divot-pdp.af-luxury-page{ background:var(--bg-color); color:var(--text-main); padding:60px 20px; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; } #af-divot-pdp *{ box-sizing:border-box; } #af-divot-pdp .af-container{ max-width:1000px; margin:0 auto; } #af-divot-pdp .af-eyebrow{ color:var(--accent); letter-spacing:.1em; text-transform:uppercase; font-weight:700; font-size:.75rem; margin:0 0 16px; text-align:center; } #af-divot-pdp .af-hero{ display:flex; flex-direction:column; align-items:center; margin-bottom:40px; } #af-divot-pdp .af-hero h1{ margin:0 0 20px; font-weight:700; line-height:1.1; font-size:clamp(2.3rem,5vw,3.6rem); letter-spacing:-.02em; background:linear-gradient(180deg,#fff,#a1a1aa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-align:center; } #af-divot-pdp .af-lead{ font-size:1.2rem; color:#fff; font-weight:600; text-align:center; margin:14px 0 10px; } #af-divot-pdp .af-lede{ margin:0 auto 24px; max-width:760px; color:var(--text-muted); font-size:1.1rem; text-align:center; line-height:1.6; } /* Executive summary */ #af-divot-pdp .af-exec-summary{ background:#151516; border:1px solid rgba(34,197,94,.30); border-radius:20px; padding:24px; margin:0 auto 26px; max-width:820px; text-align:left; } #af-divot-pdp .af-exec-summary strong{ display:block; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:8px; } #af-divot-pdp .af-exec-summary p{ margin:0; color:#d1d5db; font-size:1.05rem; line-height:1.6; } /* Interaction module */ #af-divot-pdp .af-hero-interaction{ background:rgba(28,28,30,.60); border:1px solid var(--border); border-radius:24px; padding:24px; margin:18px auto; max-width:560px; width:100%; backdrop-filter:blur(10px); text-align:center; } #af-divot-pdp .af-interaction-label{ font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:12px; font-weight:600; display:block; } /* Swatches */ #af-divot-pdp .af-swatch-row{ display:flex; justify-content:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; } #af-divot-pdp .af-swatch{ width:32px; height:32px; border-radius:50%; border:2px solid rgba(255,255,255,.20); cursor:pointer; transition:transform .2s,border-color .2s,box-shadow .2s; padding:0; background:#111; } #af-divot-pdp .af-swatch:hover{ transform:scale(1.1); border-color:#fff; } #af-divot-pdp .af-swatch[aria-selected="true"]{ border-color:rgba(34,197,94,.95); box-shadow:0 0 0 4px rgba(34,197,94,.18); } /* Divot tool swatch colors */ #af-divot-pdp .af-swatch[data-af-finish="Black"]{ background:#111; } #af-divot-pdp .af-swatch[data-af-finish="Silver"]{ background:linear-gradient(135deg,#c9c9c9,#6b7280); } #af-divot-pdp .af-swatch[data-af-finish="Gunmetal"]{ background:#374151; } #af-divot-pdp .af-swatch[data-af-finish="Blue"]{ background:#1e3a8a; } #af-divot-pdp .af-swatch[data-af-finish="Red"]{ background:#991b1b; } #af-divot-pdp .af-nudge{ text-align:center; margin-top:10px; color:var(--text-muted); font-size:.9rem; } /* Cards */ #af-divot-pdp .af-card{ background:var(--card-bg); border-radius:24px; padding:40px; margin:24px 0; border:1px solid var(--border); box-shadow:0 20px 40px rgba(0,0,0,.40); } #af-divot-pdp .af-h2{ margin:0 0 16px; font-size:1.8rem; line-height:1.2; font-weight:600; color:#fff; letter-spacing:-.01em; } #af-divot-pdp .af-muted{ color:var(--text-muted); font-size:1.05rem; margin:0 0 1rem; } #af-divot-pdp .af-bullets{ margin:0; padding-left:1.2rem; color:var(--text-muted); } #af-divot-pdp .af-bullets li{ margin:.8rem 0; } #af-divot-pdp .af-bullets li strong{ color:#fff; font-weight:600; } /* Chips */ #af-divot-pdp .af-chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; justify-content:center; } #af-divot-pdp .af-chip{ background:#2c2c2e; border:1px solid #3a3a3c; color:#e5e5e7; padding:8px 16px; border-radius:999px; font-size:.9rem; font-weight:500; } /* Buttons */ #af-divot-pdp .af-btn-wrap{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:16px; } #af-divot-pdp .af-btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 28px; border-radius:999px; font-weight:600; text-decoration:none; font-size:1rem; transition:all .2s ease; border:0; cursor:pointer; } #af-divot-pdp .af-btn-primary{ background:var(--accent); color:#000; border:1px solid var(--accent); } #af-divot-pdp .af-btn-primary:hover{ background:#16a34a; border-color:#16a34a; transform:translateY(-2px); } #af-divot-pdp .af-btn-secondary{ background:#2c2c2e; color:#fff; border:1px solid #3a3a3c; } #af-divot-pdp .af-btn-secondary:hover{ background:#3a3a3c; border-color:#48484a; transform:translateY(-2px); } /* Grid */ #af-divot-pdp .af-grid-2{ display:grid; grid-template-columns:1fr; gap:24px; } @media (min-width:768px){ #af-divot-pdp .af-grid-2{ grid-template-columns:1fr 1fr; } } /* FAQ */ #af-divot-pdp .af-faq{ border-top:1px solid #2c2c2e; padding:20px 0; } #af-divot-pdp .af-faq summary{ cursor:pointer; font-weight:600; color:#fff; font-size:1.1rem; list-style:none; display:flex; justify-content:space-between; align-items:center; } #af-divot-pdp .af-faq summary::-webkit-details-marker{ display:none; } #af-divot-pdp .af-faq summary::after{ content:"+"; font-weight:400; color:var(--text-muted); font-size:1.5rem; } #af-divot-pdp details[open] summary::after{ content:"−"; } #af-divot-pdp .af-faq div{ margin-top:12px; color:var(--text-muted); line-height:1.6; } On-Course Essentials • Pocket Safe • Foldable Metal Premium Foldable Divot Tool Test Verdict Most divot tools fail for a dumb reason: you don’t carry them. Fixed prongs jab your pocket, plastic bends on firm greens, and the tool ends up abandoned. This one is built around pocket-safe carry and confident repair: foldable deployment, solid metal leverage, and a routine that’s easy enough you’ll actually do it. Verdict: Buy it if you want a tool you’ll keep on you. Skip it if you’re committed to being “that guy” who uses a tee. Carry it every round. Repair marks without stabbing your leg. Proper green repair is the smallest habit with the biggest impact. The catch is brutal: you have to actually carry the tool. This one stays closed in your pocket and opens fast when you need it. Pick Your Finish Pick a finish. I’ll sync the variant and force the gallery to switch. Carry + Repair Lock in my setup See how it works Add to cart Tip: Pair with a magnetic towel system so you stop cleaning grooves with regret. Testing Standards Shop Divot Tools The problem isn’t ball marks. It’s friction. If carrying the tool is annoying, you won’t carry it. If it feels flimsy, you won’t trust it. Both lead to the same outcome: greens get wrecked and you look like you were raised by wolves. Foldable solves carry friction. Metal solves leverage friction. The rest is just you doing the smallest right thing for 10 seconds. Foldable Pocket Safe Metal Build Confident Leverage How it works Pocket-safe fold: prongs retract so nothing stabs or snags. Fast deployment: open it quickly so you actually use it. Repair logic: push turf inward toward the center, don’t pry upward. Close + carry: the best tool is the one still in your pocket on hole 14. Who it’s for Walkers: sits flat in-pocket without digging into your leg. Firm greens: metal leverage beats bending plastic. People with standards: you repair marks because you’re not a menace. Who it’s not for Freebie loyalists: if a tournament handout is “good enough,” keep it. Zero-change types: if you never repair marks, a tool won’t fix your values. Choose your setup Pick a finish above. Then add it to cart from the button in the hero module. Fast, clean, done. Add a Magnetic Towel Shop On-Course Systems Product FAQ Does the finish change the tool? No. Same tool. Same function. Pick based on visibility and preference. How do I repair a ball mark correctly? Insert just outside the mark, push turf inward toward the center from multiple angles, then smooth with a putter. Don’t pry upward. Why metal over plastic? Durability and leverage. Plastic tends to flex or snap when greens are firm. What pairs best with this? A magnetic towel system for groove cleaning and a Landing Pad for a consistent home base inside your bag between dividers. Fix the green. Respect the course. Pick a finish, add to cart, and stop pretending a tee is a divot tool. Shop Divot Tools Testing Standards { "@context":"https://schema.org", "@type":"FAQPage", "mainEntity":[ {"@type":"Question","name":"Does the finish change the tool?","acceptedAnswer":{"@type":"Answer","text":"No. Same tool and function. Choose based on visibility and preference."}}, {"@type":"Question","name":"How do I repair a ball mark correctly?","acceptedAnswer":{"@type":"Answer","text":"Insert just outside the mark, push turf inward toward the center from multiple angles, then smooth with a putter. Avoid prying upward."}}, {"@type":"Question","name":"Why metal over plastic?","acceptedAnswer":{"@type":"Answer","text":"Metal typically provides better durability and leverage, especially on firmer greens. Plastic can flex or snap under higher force."}}, {"@type":"Question","name":"What pairs best with this divot tool?","acceptedAnswer":{"@type":"Answer","text":"Pair it with a magnetic towel system for groove cleaning and a Landing Pad for a consistent home base inside your bag between dividers."}} ] } (function(){ const finishToVariantId = { "Black": "40559932932139", "Silver": "40559932964907", "Blue": "40970142777387", "Gunmetal": "40987345322027", "Red": "40987345354795" }; const finishToImage = { "Silver": "https://cdn.shopify.com/s/files/1/0555/0830/3915/files/Updated_Main_Image_53ee84b2-a667-4cbe-9b82-8dc4e30f7cd1.jpg?v=1765461229", "Red": "https://cdn.shopify.com/s/files/1/0555/0830/3915/files/Updated_Main_Image_f80e0dc3-5114-403f-b3ed-745988acaa86.jpg?v=1765461229", "Gunmetal": "https://cdn.shopify.com/s/files/1/0555/0830/3915/files/Updated_Main_Image_7dd024f1-ccc8-4e13-afb5-fbcbc0e1916a.jpg?v=1765461229", "Blue": "https://cdn.shopify.com/s/files/1/0555/0830/3915/files/Updated_Main_Image_c4d93332-f0a1-4151-9651-a12fbcba885d.png?v=1765461229", "Black": "https://cdn.shopify.com/s/files/1/0555/0830/3915/files/Updated_Main_Image.png?v=1765461229" }; const module = document.querySelector('#af-divot-pdp [data-af-variant-sync]'); if(!module) return; const status = module.querySelector('[data-af-status]'); const swatches = Array.from(module.querySelectorAll('[data-af-finish]')); const atcBtn = module.querySelector('[data-af-atc]'); function setStatus(msg){ if(status) status.textContent = msg; } function stripQuery(url){ return (url||'').split('?')[0]; } // Find native variant select OR radio inputs. const variantSelect = document.querySelector('form[action^="/cart/add"] select[name="id"]') || document.querySelector('form[action*="/cart/add"] select[name="id"]') || document.querySelector('select[name="id"]'); const variantRadios = Array.from(document.querySelectorAll('input[type="radio"][name="id"]')); // Find native theme Add to Cart const nativeAtc = document.querySelector('form[action^="/cart/add"] button[type="submit"], form[action^="/cart/add"] [type="submit"]') || document.querySelector('form[action*="/cart/add"] button[type="submit"], form[action*="/cart/add"] [type="submit"]') || document.querySelector('button[name="add"], button[type="submit"][name="add"]'); function setSelectedSwatch(finishLabel){ swatches.forEach(btn => btn.setAttribute('aria-selected', btn.dataset.afFinish === finishLabel ? 'true' : 'false')); } function setVariantById(variantId){ let didSet = false; if(variantSelect && variantSelect.options){ const opt = Array.from(variantSelect.options).find(o => String(o.value) === String(variantId)); if(opt){ variantSelect.value = opt.value; variantSelect.dispatchEvent(new Event('change', { bubbles:true })); didSet = true; } } if(!didSet && variantRadios.length){ const radio = variantRadios.find(r => String(r.value) === String(variantId)); if(radio){ radio.checked = true; radio.dispatchEvent(new Event('change', { bubbles:true })); didSet = true; } } return didSet; } // Keep search inside product area function getProductRoot(){ const addForm = document.querySelector('form[action^="/cart/add"], form[action*="/cart/add"]'); if(addForm) return addForm.closest('section, .shopify-section, main, body') || document; return document; } function clickGalleryItemByUrl(url){ const root = getProductRoot(); const target = stripQuery(url); const candidates = Array.from(root.querySelectorAll( 'button, a, img, source, [data-src], [data-zoom], [data-image], [href]' )); for(const el of candidates){ const attrs = [ el.getAttribute('src'), el.getAttribute('href'), el.getAttribute('data-src'), el.getAttribute('data-zoom'), el.getAttribute('data-image'), el.getAttribute('srcset') ].filter(Boolean); if(attrs.some(a => stripQuery(a).includes(target))){ const clickable = el.closest('button, a') || (el.tagName === 'BUTTON' || el.tagName === 'A' ? el : null); if(clickable){ clickable.click(); return true; } } } return false; } function bruteSwapActiveMedia(url, finishLabel){ const root = getProductRoot(); const imgCandidates = []; const activeWrappers = Array.from(root.querySelectorAll( '[aria-current="true"], .is-selected, .is-active, .active, [data-active="true"], [data-selected="true"]' )); activeWrappers.forEach(w => { imgCandidates.push(...Array.from(w.querySelectorAll('img'))); Array.from(w.querySelectorAll('picture source')).forEach(s => s.setAttribute('srcset', url)); }); if(imgCandidates.length === 0){ imgCandidates.push(...Array.from(root.querySelectorAll('img')).filter(i => { const s = (i.getAttribute('src') || ''); return s.includes('cdn.shopify.com') && !s.includes('logo') && !s.includes('icon'); }).slice(0,3)); } if(imgCandidates.length === 0) return false; imgCandidates.forEach(img => { img.src = url; img.removeAttribute('srcset'); img.removeAttribute('sizes'); const oldAlt = img.getAttribute('alt') || 'Foldable divot tool'; const baseAlt = oldAlt.split('—')[0].trim(); img.setAttribute('alt', baseAlt + ' — ' + finishLabel); }); return true; } function selectFinish(finishLabel){ const variantId = finishToVariantId[finishLabel]; const imgUrl = finishToImage[finishLabel]; setSelectedSwatch(finishLabel); // 1) Sync Shopify variant const ok = variantId ? setVariantById(variantId) : false; // 2) Force gallery switch if(imgUrl){ const clicked = clickGalleryItemByUrl(imgUrl); setTimeout(() => { if(clicked){ setStatus('Selected: ' + finishLabel + '.'); return; } const swapped = bruteSwapActiveMedia(imgUrl, finishLabel); setStatus(swapped ? ('Selected: ' + finishLabel + '.') : ('Selected: ' + finishLabel + '. (Gallery element not found in this theme.)') ); }, 80); } else { setStatus('Selected: ' + finishLabel + '.'); } if(!ok){ // Variant input not detected (theme oddity). Still keep finish selection for ATC fallback. setStatus('Selected: ' + finishLabel + '. (Variant control not found. ATC will use fallback link.)'); } } // Swatch clicks swatches.forEach(btn => btn.addEventListener('click', () => selectFinish(btn.dataset.afFinish))); // ATC button if(atcBtn){ atcBtn.addEventListener('click', () => { const selected = swatches.find(b => b.getAttribute('aria-selected') === 'true'); const finish = selected ? selected.dataset.afFinish : null; const variantId = finish ? finishToVariantId[finish] : null; // Prefer native theme ATC (best) if(nativeAtc){ nativeAtc.click(); return; } // Fallback: direct add by variant ID if(variantId){ window.location.href = '/cart/add?id=' + encodeURIComponent(variantId) + '&quantity=1'; return; } setStatus('Pick a finish first. Then add to cart.'); }); } // Default selection: Gunmetal (matches your “recommended” from earlier) selectFinish('Gunmetal'); })();
More you might like
Related
Foldable Metal Divot Tool
Related
Foldable Metal Divot Tool
Related
Foldable Metal Divot Tool
Related