Use this API to display BGS grades on your Shopify product pages or any website. Looks up from CSV first, then BGS public API, then pop report.
Lookup grades by cert number. Returns sub-grades, final grade, and population data when available.
{
"certNumber": "0018668318",
"setName": "2024 Bandai One Piece CCG...",
"playerName": "Sengoku SP",
"finalGrade": "9.5",
"tier": "Gem Mint",
"subGrades": {
"centering": "9.5",
"corners": "9.5",
"surface": "10",
"edges": "9.5"
},
"source": "csv"
}
Advanced lookup with set name and player name (scrapes pop report live).
{ "certNumber": "0018668318", "setName": "...", "playerName": "..." }
Add this to a Shopify page or product template. Replace YOUR_API_URL with your server's public URL. Includes a header, subtitle, search field, and grade display card.
<style>
.bgs-widget { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 500px; margin: 0 auto; }
.bgs-widget h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 4px; }
.bgs-widget .bgs-subtitle { font-size: 0.85rem; color: #666; margin: 0 0 16px; }
.bgs-search { display: flex; gap: 8px; margin-bottom: 16px; }
.bgs-search input {
flex: 1; padding: 10px 14px; font-size: 0.95rem; border: 2px solid #ddd;
border-radius: 8px; outline: none; transition: border-color 0.2s;
}
.bgs-search input:focus { border-color: #7c3aed; }
.bgs-search button {
padding: 10px 20px; font-size: 0.95rem; font-weight: 600; border: none;
background: #7c3aed; color: #fff; border-radius: 8px; cursor: pointer;
}
.bgs-search button:hover { background: #6d28d9; }
.bgs-search button:disabled { background: #aaa; cursor: not-allowed; }
.bgs-result { display: none; border: 2px solid #e5e7eb; border-radius: 12px; padding: 20px; }
.bgs-result.active { display: block; }
.bgs-card-name { font-size: 1.05rem; font-weight: 700; margin-bottom: 2px; }
.bgs-set-name { font-size: 0.82rem; color: #888; margin-bottom: 12px; }
.bgs-final { text-align: center; margin: 12px 0; }
.bgs-final .bgs-grade-val { font-size: 2.5rem; font-weight: 800; color: #7c3aed; }
.bgs-final .bgs-grade-lbl { font-size: 0.8rem; color: #888; }
.bgs-tier { text-align: center; margin-top: 4px; display: none; }
.bgs-tier.active { display: block; }
.bgs-tier span {
display: inline-block; padding: 3px 12px; border-radius: 12px;
font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.bgs-tier-black-label { background: #fef3c7; color: #92400e; }
.bgs-tier-pristine { background: #d1fae5; color: #065f46; }
.bgs-tier-gem-mint { background: #dbeafe; color: #1e40af; }
.bgs-tier-mint { background: #e0e7ff; color: #3730a3; }
.bgs-tier-default { background: #f3f4f6; color: #374151; }
.bgs-subs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.bgs-sub { background: #f3f4f6; border-radius: 8px; padding: 10px 4px; }
.bgs-sub .val { font-size: 1.2rem; font-weight: 700; }
.bgs-sub .lbl { font-size: 0.65rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.bgs-error { color: #dc2626; font-size: 0.85rem; margin-top: 8px; display: none; }
.bgs-error.active { display: block; }
</style>
<div class="bgs-widget">
<h2>BGS Grade Lookup</h2>
<p class="bgs-subtitle">Enter a BGS cert number to view the grade breakdown</p>
<div class="bgs-search">
<input type="text" id="bgs-cert-input" placeholder="Cert / serial number...">
<button id="bgs-search-btn">Search</button>
</div>
<div class="bgs-error" id="bgs-error"></div>
<div class="bgs-result" id="bgs-result">
<div class="bgs-card-name" id="bgs-player"></div>
<div class="bgs-set-name" id="bgs-set"></div>
<div class="bgs-final">
<div class="bgs-grade-val" id="bgs-grade"></div>
<div class="bgs-grade-lbl">Final Grade</div>
</div>
<div class="bgs-tier" id="bgs-tier"><span id="bgs-tier-badge"></span></div>
<div class="bgs-subs">
<div class="bgs-sub"><div class="val" id="bgs-c">-</div><div class="lbl">Centering</div></div>
<div class="bgs-sub"><div class="val" id="bgs-co">-</div><div class="lbl">Corners</div></div>
<div class="bgs-sub"><div class="val" id="bgs-s">-</div><div class="lbl">Surface</div></div>
<div class="bgs-sub"><div class="val" id="bgs-e">-</div><div class="lbl">Edges</div></div>
</div>
</div>
</div>
<script>
(function() {
var API = 'YOUR_API_URL';
var input = document.getElementById('bgs-cert-input');
var btn = document.getElementById('bgs-search-btn');
var result = document.getElementById('bgs-result');
var error = document.getElementById('bgs-error');
var tierEl = document.getElementById('bgs-tier');
var tierBadge = document.getElementById('bgs-tier-badge');
var tierClasses = {
'Black Label': 'bgs-tier-black-label',
'Pristine': 'bgs-tier-pristine',
'Gem Mint': 'bgs-tier-gem-mint',
'Mint': 'bgs-tier-mint'
};
function lookup() {
var cert = input.value.trim();
if (!cert || !/^\d+$/.test(cert)) return;
cert = cert.padStart(10, '0');
input.value = cert;
btn.disabled = true;
btn.textContent = 'Searching...';
error.className = 'bgs-error';
result.className = 'bgs-result';
tierEl.className = 'bgs-tier';
fetch(API + '/api/certs/' + cert)
.then(function(r) { return r.json().then(function(d) { return { ok: r.ok, data: d }; }); })
.then(function(res) {
if (!res.ok || !res.data.finalGrade) {
error.textContent = res.data.error || 'Cert not found.';
error.className = 'bgs-error active';
result.className = 'bgs-result';
return;
}
var d = res.data;
document.getElementById('bgs-player').textContent = d.playerName;
document.getElementById('bgs-set').textContent = d.setName + ' \u2014 Cert #' + d.certNumber;
document.getElementById('bgs-grade').textContent = d.finalGrade;
document.getElementById('bgs-c').textContent = d.subGrades.centering || '-';
document.getElementById('bgs-co').textContent = d.subGrades.corners || '-';
document.getElementById('bgs-s').textContent = d.subGrades.surface || '-';
document.getElementById('bgs-e').textContent = d.subGrades.edges || '-';
if (d.tier) {
tierBadge.textContent = d.tier;
tierBadge.className = tierClasses[d.tier] || 'bgs-tier-default';
tierEl.className = 'bgs-tier active';
} else {
tierEl.className = 'bgs-tier';
}
result.className = 'bgs-result active';
})
.catch(function() {
error.textContent = 'Failed to connect to grade API.';
error.className = 'bgs-error active';
})
.finally(function() { btn.disabled = false; btn.textContent = 'Search'; });
}
btn.addEventListener('click', lookup);
input.addEventListener('keydown', function(e) { if (e.key === 'Enter') lookup(); });
})();
</script>