Place paid product cards in shopping search while distinguishing them from organic results.
<div class="results"><div class="query">SEARCH / DESK LAMP</div><div class="row paid"><span class="tile"></span><div><small>SPONSORED</small><b>ARC TASK LIGHT</b></div><strong>$39</strong></div><div class="row"><span class="tile soft"></span><div><small>RESULT 01</small><b>STUDIO LIGHT</b></div><strong>$35</strong></div><div class="row"><span class="tile cool"></span><div><small>RESULT 02</small><b>FOCUS LIGHT</b></div><strong>$42</strong></div></div>.results{width:min(88%,480px);font:800 clamp(10px,max(1.6vmin,1vw),13px)/1.15 sans-serif}.query{padding:clamp(6px,1.6vmin,12px);border:1px solid var(--line);color:var(--muted);letter-spacing:.1em}.row{display:flex;align-items:center;gap:clamp(6px,1.5vmin,12px);padding:clamp(5px,1.2vmin,10px);border-bottom:1px solid var(--line);background:var(--surface)}.row>div{display:grid;gap:3px;flex:1}.row small{font-size:clamp(10px,max(1.1vmin,1vw),12px);color:var(--muted)}.row.paid small{color:var(--accent)}.row strong{color:var(--accent)}.tile{flex:none;width:clamp(24px,7vmin,48px);aspect-ratio:1;background:linear-gradient(135deg,var(--accent),var(--accent-3))}.tile.soft{background:var(--accent-3)}.tile.cool{background:var(--line)}.paid{animation:rank 4s ease-in-out infinite}@keyframes rank{0%,12%{transform:translateY(55%);opacity:.55}35%,85%{transform:none;opacity:1}100%{transform:translateY(55%);opacity:.55}}Sponsored products are paid product placements within shopping search or browse results. Teams can connect impressions, clicks, and orders at the item level.
The demo moves a labeled sponsored card to the top of a result list. A larger bid cannot fix an irrelevant product: check the query, listing, availability, and price together.
Use it to increase discovery of a specific item when shoppers reveal purchase intent.