PageSourceSearch

https://clickstera.com/tools/blog-product-card-generator

html clickstera.com collected 2026-10-06 22:06:14 UTC 62,418 bytes, 3 lines download raw bytes

1<!DOCTYPE html><!--J2evtaALhdMJuVuyVPCbf--><html lang="en" class="inter_e276b41e-module__sVt06W__variable"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/83afe278b6a6bb3c-s.p.3a6ba036.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" imageSrcSet="/_next/image?url=%2Fclickstera_logo.png&amp;w=256&amp;q=75 1x, /_next/image?url=%2Fclickstera_logo.png&amp;w=384&amp;q=75 2x"/><link rel="preload" as="image" href="https://maximumhealthproducts.com/cdn/shop/files/Max_Slim_Green_12_1__92079.jpg?v=1772821909&amp;width=1346"/><link rel="stylesheet" href="/_next/static/chunks/45f4f3384ae2bf04.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/70fb222166c044d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/a0875222f3b417a0.js"/>
1<script src="/_next/static/chunks/5954e0d5d312cb67.js" async=""></script>
1<script src="/_next/static/chunks/902d0d3d704e855b.js" async=""></script>
1<script src="/_next/static/chunks/d702a24e2b6c48fa.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-9a8c4e7dd38a6b7c.js" async=""></script>
1<script src="/_next/static/chunks/ca94d505fb116ed2.js" async=""></script>
1<script src="/_next/static/chunks/f5fe132fdab0aed0.js" async=""></script>
1<script src="/_next/static/chunks/ff1a16fafef87110.js" async=""></script>
1<script src="/_next/static/chunks/bf1f6d5df2e9b1a8.js" async=""></script>
1<script src="/_next/static/chunks/0c0e032c0b2c3265.js" async=""></script>
1<link rel="preload" href="https://www.googletagmanager.com/gtm.js?id=GTM-T39K6P3Q" as="script"/><meta name="next-size-adjust" content=""/><title>Shopify Blog Product Card Generator - Clickstera | Clickstera</title><meta name="description" content="Generate beautiful, mobile-responsive product cards for your Shopify blog articles. Enter your product details and copy a single block of HTML + CSS to embed anywhere."/><link rel="manifest" href="/manifest.webmanifest"/><link rel="icon" href="/favicon.ico?favicon.0b3bf435.ico" sizes="256x256" type="image/x-icon"/><link rel="icon" href="/icon.png"/><link rel="apple-touch-icon" href="/icon.png"/>
1<script src="/_next/static/chunks/a6dad97d9634a72d.js" noModule=""></script>
1</head><body class="inter_e276b41e-module__sVt06W__className antialiased"><div hidden=""><!--$--><!--/$--></div><div class="flex min-h-screen flex-col"><header class="border-b border-slate-200 bg-white"><div class="mx-auto flex max-w-6xl items-center justify-between gap-4 px-6 py-4"><a class="shrink-0" aria-label="Clickstera home" href="/"><img alt="Clickstera" width="168" height="40" decoding="async" data-nimg="1" class="h-14 w-auto" style="color:transparent" srcSet="/_next/image?url=%2Fclickstera_logo.png&amp;w=256&amp;q=75 1x, /_next/image?url=%2Fclickstera_logo.png&amp;w=384&amp;q=75 2x" src="/_next/image?url=%2Fclickstera_logo.png&amp;w=384&amp;q=75"/></a><nav aria-label="Primary navigation" class="hidden items-center gap-8 md:flex"><div class="relative"><button type="button" class="inline-flex items-center gap-1 text-sm font-medium text-slate-700 transition hover:text-blue-700" aria-haspopup="true" aria-expanded="false">Services<svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.51a.75.75 0 01-1.08 0l-4.25-4.51a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path></svg></button><div class="absolute left-1/2 top-full z-30 w-[min(92vw,520px)] -translate-x-1/2 pt-2 transition duration-200 pointer-events-none invisible opacity-0"><div class="rounded-2xl border border-slate-200 bg-slate-100/95 p-4 shadow-2xl shadow-slate-300/40 backdrop-blur"><div class="grid grid-cols-1 gap-1"><a class="group/item flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-slate-700 transition hover:bg-white hover:text-blue-700" href="/services/amazon-advertising"><span class="shrink-0 rounded-lg border border-blue-100 bg-blue-50 p-1.5 text-blue-700 transition group-hover/item:border-blue-200 group-hover/item:bg-blue-100"><span></span></span><span class="leading-5">Amazon Advertising</span></a><a class="group/item flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-slate-700 transition hover:bg-white hover:text-blue-700" href="/services/meta-advertising"><span class="shrink-0 rounded-lg border border-blue-100 bg-blue-50 p-1.5 text-blue-700 transition group-hover/item:border-blue-200 group-hover/item:bg-blue-100"><span></span></span><span class="leading-5">Meta Advertising</span></a><a class="group/item flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-slate-700 transition hover:bg-white hover:text-blue-700" href="/services/google-advertising"><span class="shrink-0 rounded-lg border border-blue-100 bg-blue-50 p-1.5 text-blue-700 transition group-hover/item:border-blue-200 group-hover/item:bg-blue-100"><span></span></span><span class="leading-5">Google Advertising</span></a><a class="group/item flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-slate-700 transition hover:bg-white hover:text-blue-700" href="/services/walmart-advertising"><span class="shrink-0 rounded-lg border border-blue-100 bg-blue-50 p-1.5 text-blue-700 transition group-hover/item:border-blue-200 group-hover/item:bg-blue-100"><span></span></span><span class="leading-5">Walmart Advertising</span></a><a class="group/item flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-slate-700 transition hover:bg-white hover:text-blue-700" href="/services/ai-creative-services"><span class="shrink-0 rounded-lg border border-blue-100 bg-blue-50 p-1.5 text-blue-700 transition group-hover/item:border-blue-200 group-hover/item:bg-blue-100"><span></span></span><span class="leading-5">AI Creative Services</span></a></div><div class="mt-2 border-t border-slate-200 pt-2"><a class="flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-semibold text-blue-700 transition hover:bg-white hover:text-blue-600" href="/services"><span class="shrink-0 rounded-lg border border-blue-100 bg-blue-50 p-1.5 text-blue-700"><span></span></span>Explore all services</a></div></div></div></div><div class="relative"><button type="button" class="inline-flex items-center gap-1 text-sm font-medium text-slate-700 transition hover:text-blue-700" aria-haspopup="true" aria-expanded="false">Tools<svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.51a.75.75 0 01-1.08 0l-4.25-4.51a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path></svg></button><div class="absolute left-1/2 top-full z-30 w-[min(92vw,300px)] -translate-x-1/2 pt-2 transition duration-200 pointer-events-none invisible opacity-0"><div class="rounded-2xl border border-slate-200 bg-slate-100/95 p-4 shadow-2xl shadow-slate-300/40 backdrop-blur"><div class="grid grid-cols-1 gap-1"><a class="group/item flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-slate-700 transition hover:bg-white hover:text-blue-700" href="/tools/acos-calculator"><span class="shrink-0 rounded-lg border border-blue-100 bg-blue-50 p-1.5 text-blue-700 transition group-hover/item:border-blue-200 group-hover/item:bg-blue-100"><span></span></span><span class="leading-5">Free ACoS Calculator</span></a><a class="group/item flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-slate-700 transition hover:bg-white hover:text-blue-700" href="/tools/ppc-bid-calculator"><span class="shrink-0 rounded-lg border border-blue-100 bg-blue-50 p-1.5 text-blue-700 transition group-hover/item:border-blue-200 group-hover/item:bg-blue-100"><span></span></span><span class="leading-5">PPC Bid Calculator</span></a><a class="group/item flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-slate-700 transition hover:bg-white hover:text-blue-700" href="/tools/keyword-matching-tool"><span class="shrink-0 rounded-lg border border-blue-100 bg-blue-50 p-1.5 text-blue-700 transition group-hover/item:border-blue-200 group-hover/item:bg-blue-100"><span></span></span><span class="leading-5">Keyword Matching Tool</span></a><a class="group/item flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-slate-700 transition hover:bg-white hover:text-blue-700" href="/tools/blog-product-card-generator"><span class="shrink-0 rounded-lg border border-blue-100 bg-blue-50 p-1.5 text-blue-700 transition group-hover/item:border-blue-200 group-hover/item:bg-blue-100"><span></span></span><span class="leading-5">Blog Product Card Generator</span></a></div></div></div></div><a class="text-sm font-medium text-slate-700 transition hover:text-blue-700" href="/case-studies">Case Study</a><a class="text-sm font-medium text-slate-700 transition hover:text-blue-700" href="/pricing">Pricing</a><a class="text-sm font-medium text-slate-700 transition hover:text-blue-700" href="/blog">Blog</a><a class="text-sm font-medium text-slate-700 transition hover:text-blue-700" href="/faq">FAQ</a></nav><div class="hidden items-center gap-2 md:flex"><a class="inline-flex items-center justify-center rounded-none border-2 border-blue-600 bg-blue-600 px-3.5 py-1.5 text-sm font-semibold text-white shadow-sm transition hover:border-blue-700 hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" href="/book-call">
1Book a Call</a></div><div class="relative md:hidden"><button type="button" aria-expanded="false" aria-haspopup="true" aria-label="Open menu" class="flex cursor-pointer list-none items-center justify-center rounded-lg p-1.5 text-slate-700 transition hover:bg-slate-50"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5l7 7l7 -7M12 12h0M5 19l7 -7l7 7"><animate fill="freeze" attributeName="d" dur="0.4s" values="M5 5l7 7l7 -7M12 12h0M5 19l7 -7l7 7;M5 5l7 0l7 0M5 12h14M5 19l7 0l7 0"></animate></path></svg></button><div class="absolute right-0 top-full z-30 mt-2 w-72 rounded-2xl border border-slate-200 bg-white p-4 shadow-xl hidden"><p class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Services</p><ul class="space-y-1"><li><a class="group/item flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-blue-700" href="/services"><span></span>All Services</a></li><li><a class="group/item flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-blue-700" href="/services/amazon-advertising"><span></span>Amazon Advertising</a></li><li><a class="group/item flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-blue-700" href="/services/meta-advertising"><span></span>Meta Advertising</a></li><li><a class="group/item flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-blue-700" href="/services/google-advertising"><span></span>Google Advertising</a></li><li><a class="group/item flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-blue-700" href="/services/walmart-advertising"><span></span>Walmart Advertising</a></li><li><a class="group/item flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-blue-700" href="/services/ai-creative-services"><span></span>AI Creative Services</a></li></ul><div class="my-3 h-px bg-slate-200"></div><p class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Tools</p><ul class="space-y-1"><li><a class="group/item flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-blue-700" href="/tools/acos-calculator"><span></span>Free ACoS Calculator</a></li><li><a class="group/item flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-blue-700" href="/tools/ppc-bid-calculator"><span></span>PPC Bid Calculator</a></li><li><a class="group/item flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-blue-700" href="/tools/keyword-matching-tool"><span></span>Keyword Matching Tool</a></li><li><a class="group/item flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-blue-700" href="/tools/blog-product-card-generator"><span></span>Blog Product Card Generator</a></li></ul><div class="my-3 h-px bg-slate-200"></div><ul class="space-y-1"><li><a class="block rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-blue-700" href="/case-studies">Case Study</a></li><li><a class="block rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-blue-700" href="/pricing">Pricing</a></li><li><a class="block rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-blue-700" href="/blog">Blog</a></li><li><a class="block rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-blue-700" href="/faq">FAQ</a></li></ul><a class="mt-3 inline-flex w-full items-center justify-center rounded-none border-2 border-blue-600 bg-blue-600 px-3.5 py-2 text-sm font-semibold text-white shadow-sm transition hover:border-blue-700 hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" href="/book-call">
1Book a Call</a></div></div></div></header><div class="flex-1"><!--$?--><template id="B:0"></template><main class="mx-auto flex w-full max-w-6xl flex-1 items-center justify-center px-6 py-16"><div class="w-full max-w-xl rounded-3xl border border-blue-200 bg-blue-50/50 p-8 text-center shadow-sm" aria-busy="true" aria-live="polite"><div class="mx-auto inline-flex items-center gap-3 rounded-full border border-blue-200 bg-white px-4 py-2 text-sm font-medium text-blue-800"><span class="inline-flex h-4 w-4 animate-spin rounded-full border-2 border-blue-700 border-t-transparent"></span>Loading page...</div><div class="mx-auto mt-6 h-8 w-3/4 animate-pulse rounded-xl bg-blue-100"></div><div class="mx-auto mt-3 h-4 w-full animate-pulse rounded-full bg-blue-100"></div><div class="mx-auto mt-2 h-4 w-10/12 animate-pulse rounded-full bg-blue-100"></div></div></main><!--/$--></div><footer class="border-t border-blue-100 bg-linear-to-b from-blue-50 to-white"><div class="mx-auto max-w-6xl px-6 pb-8 pt-12"><div class="grid gap-10 md:grid-cols-[1.4fr_2fr]"><div><a class="inline-flex" aria-label="Clickstera home" href="/"><img alt="Clickstera" loading="lazy" width="168" height="40" decoding="async" data-nimg="1" class="h-10 w-auto" style="color:transparent" srcSet="/_next/image?url=%2Fclickstera_logo.png&amp;w=256&amp;q=75 1x, /_next/image?url=%2Fclickstera_logo.png&amp;w=384&amp;q=75 2x" src="/_next/image?url=%2Fclickstera_logo.png&amp;w=384&amp;q=75"/></a><p class="mt-4 max-w-sm text-sm leading-6 text-blue-800">Clickstera helps e-commerce and D2C brands scale profitably across Amazon, Walmart, Google, and Meta with performance-first marketing systems.</p><a class="mt-5 inline-flex items-center justify-center rounded-xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-blue-500" href="/book-call">Book a Call</a><ul class="mt-6 flex flex-wrap items-center gap-3"><li><a href="https://www.linkedin.com/company/clickstera" target="_blank" rel="noopener noreferrer" class="inline-flex rounded-lg text-blue-700 transition hover:text-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500" aria-label="Clickstera on LinkedIn"><span></span></a></li><li><a href="https://www.instagram.com/clickstera/" target="_blank" rel="noopener noreferrer" class="inline-flex rounded-lg text-blue-700 transition hover:text-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500" aria-label="Clickstera on Instagram"><span></span></a></li></ul></div><div class="grid gap-8 sm:grid-cols-3"><section><h2 class="text-sm font-semibold uppercase tracking-wider text-blue-900">Services</h2><ul class="mt-4 space-y-2"><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/services">All Services</a></li><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/services/amazon-advertising">Amazon Advertising</a></li><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/services/meta-advertising">Meta Advertising</a></li><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/services/google-advertising">Google Advertising</a></li><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/services/walmart-advertising">Walmart Advertising</a></li><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/services/ai-creative-services">AI Creative Services</a></li></ul></section><section><h2 class="text-sm font-semibold uppercase tracking-wider text-blue-900">Company</h2><ul class="mt-4 space-y-2"><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/about">About Us</a></li><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/case-studies">Case Studies</a></li><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/blog">Blog</a></li><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/faq">FAQ</a></li></ul></section><section><h2 class="text-sm font-semibold uppercase tracking-wider text-blue-900">Tools</h2><ul class="mt-4 space-y-2"><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/tools/acos-calculator">Free ACoS Calculator</a></li><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/tools/ppc-bid-calculator">PPC Bid Calculator</a></li><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/tools/keyword-matching-tool">Keyword Matching Tool</a></li><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/tools/blog-product-card-generator">Blog Product Card Generator</a></li></ul></section><section><h2 class="text-sm font-semibold uppercase tracking-wider text-blue-900">Resources</h2><ul class="mt-4 space-y-2"><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/book-call">
1Book a Call</a></li><li><a class="text-sm text-blue-700 transition hover:text-blue-500" href="/pricing">Pricing</a></li></ul></section></div></div><div class="mt-10 border-t border-blue-100 pt-5 text-sm text-blue-700"><p>© <!-- -->2026<!-- --> Clickstera. All rights reserved.</p></div></div></footer></div><button type="button" aria-label="Back to top" class="fixed bottom-26 right-10 z-40 inline-flex h-11 w-11 items-center justify-center rounded-full border border-blue-300 bg-blue-700 text-white shadow-lg transition duration-200 hover:bg-blue-600 pointer-events-none translate-y-3 opacity-0"><span></span></button><a class="fixed bottom-6 right-6 z-50 rounded-full border border-blue-600 bg-blue-600 px-5 py-4 text-[1rem] font-semibold leading-tight text-white shadow-lg shadow-blue-900/25 transition-colors hover:border-blue-500 hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500" href="/book-call">Book a Call</a><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$-->
1<script>requestAnimationFrame(function(){$RT=performance.now()});</script>
1<script src="/_next/static/chunks/a0875222f3b417a0.js" id="_R_" async=""></script>
1<div hidden id="S:0"><main class="relative overflow-hidden bg-white text-blue-950"><div class="pointer-events-none absolute inset-0"><div class="absolute inset-0 bg-linear-to-b from-blue-50 via-white to-blue-50/35"></div><div class="absolute -left-28 top-8 h-72 w-72 rounded-full bg-blue-500/12 blur-2xl"></div><div class="absolute -right-24 top-56 h-80 w-80 rounded-full bg-cyan-400/10 blur-2xl"></div><div class="absolute -bottom-40 left-1/3 h-96 w-96 rounded-full bg-indigo-500/10 blur-2xl"></div></div><section class="relative mx-auto max-w-6xl px-6 pb-8 pt-20 md:pb-10 md:pt-24"><div class="flex flex-wrap items-start gap-x-3 gap-y-1"><h1 class="text-2xl font-bold tracking-tight text-blue-950 md:text-3xl">Shopify Blog Product Card Generator</h1><span class="mt-1 inline-flex shrink-0 rounded-full border border-blue-200 bg-blue-50 px-3 py-0.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-blue-700">Free Tool</span></div><p class="mt-2 max-w-3xl text-sm leading-6 text-blue-700">Create a responsive product card for any Shopify blog article. Fill in your details, preview, and copy a single block of HTML + CSS.</p><div class="mt-3 flex flex-wrap items-center gap-2 text-xs text-blue-600"><span class="inline-flex items-center gap-1.5 rounded-full border border-blue-100 bg-blue-50/70 px-3 py-1 font-medium"><span class="text-blue-400">●</span> Shopify Blogs</span><span class="inline-flex items-center gap-1.5 rounded-full border border-blue-100 bg-blue-50/70 px-3 py-1 font-medium"><span class="text-blue-400">●</span> HTML + CSS</span><span class="inline-flex items-center gap-1.5 rounded-full border border-blue-100 bg-blue-50/70 px-3 py-1 font-medium"><span class="text-blue-400">●</span> Fully Responsive</span></div></section><section class="relative mx-auto max-w-6xl px-6 pb-16"><div class="space-y-8"><div class="grid gap-8 lg:grid-cols-[1fr_1.2fr] lg:items-start"><div class="rounded-3xl border border-blue-200/80 bg-white/90 p-8 shadow-lg shadow-blue-100/60 backdrop-blur-sm lg:sticky lg:top-24"><h2 class="text-xl font-semibold tracking-tight text-blue-950">Product Card Details</h2><p class="mt-1 text-sm text-blue-600">Fill in the fields below — previews update live.</p><div class="mt-6 space-y-5"><div><label for="product-image" class="block text-sm font-medium text-blue-950">Product Image URL</label><input id="product-image" type="text" placeholder="https://your-store.myshopify.com/cdn/shop/..." class="mt-1.5 w-full rounded-xl border border-blue-200 bg-white px-4 py-3 text-sm text-blue-950 outline-none transition placeholder:text-blue-300 focus:border-blue-400 focus:ring-2 focus:ring-blue-100" value="https://maximumhealthproducts.com/cdn/shop/files/Max_Slim_Green_12_1__92079.jpg?v=1772821909&amp;width=1346"/></div><div><label for="product-title" class="block text-sm font-medium text-blue-950">Product Title</label><input id="product-title" type="text" placeholder="e.g. Maximum Slim Original" class="mt-1.5 w-full rounded-xl border border-blue-200 bg-white px-4 py-3 text-sm text-blue-950 outline-none transition placeholder:text-blue-300 focus:border-blue-400 focus:ring-2 focus:ring-blue-100" value="Maximum Slim Original"/></div><div><label for="product-desc" class="block text-sm font-medium text-blue-950">Product Description</label><textarea id="product-desc" rows="3" placeholder="Short description of your product..." class="mt-1.5 resize-none w-full rounded-xl border border-blue-200 bg-white px-4 py-3 text-sm text-blue-950 outline-none transition placeholder:text-blue-300 focus:border-blue-400 focus:ring-2 focus:ring-blue-100">Science-backed formula to support metabolism, curb appetite, and help you reach your goals faster.</textarea></div><div><div><label for="product-url" class="block text-sm font-medium text-blue-950">Product / CTA Link</label><input id="product-url" type="text" placeholder="https://your-store.myshopify.com/products/..." class="mt-1.5 w-full rounded-xl border border-blue-200 bg-white px-4 py-3 text-sm text-blue-950 outline-none transition placeholder:text-blue-300 focus:border-blue-400 focus:ring-2 focus:ring-blue-100" value="https://maximumhealthproducts.com/collections/all-weight-loss"/></div><p class="mt-1.5 text-xs leading-relaxed text-blue-600">Shop buttons use your URL plus tracking:<!-- --> <code class="rounded bg-blue-50 px-1 py-0.5 text-[11px] text-blue-900">ref=blog_product_card</code>,<!-- --> <code class="rounded bg-blue-50 px-1 py-0.5 text-[11px] text-blue-900">utm_source=blog</code>,<!-- --> <code class="rounded bg-blue-50 px-1 py-0.5 text-[11px] text-blue-900">utm_medium=product_card</code>,<!-- --> <code class="rounded bg-blue-50 px-1 py-0.5 text-[11px] text-blue-900">utm_campaign=shopify_blog</code> <!-- -->(only added if those keys are not already in the link).</p></div><div class="grid grid-cols-2 gap-4"><div><label for="eyebrow-text" class="block text-sm font-medium text-blue-950">Eyebrow Text</label><input id="eyebrow-text" type="text" placeholder="Featured Product" class="mt-1.5 w-full rounded-xl border border-blue-200 bg-white px-4 py-3 text-sm text-blue-950 outline-none transition placeholder:text-blue-300 focus:border-blue-400 focus:ring-2 focus:ring-blue-100" value="Featured Product"/></div><div><label for="cta-text" class="block text-sm font-medium text-blue-950">Button Text</label><input id="cta-text" type="text" placeholder="Shop Now →" class="mt-1.5 w-full rounded-xl border border-blue-200 bg-white px-4 py-3 text-sm text-blue-950 outline-none transition placeholder:text-blue-300 focus:border-blue-400 focus:ring-2 focus:ring-blue-100" value="Shop Now →"/></div></div><div class="grid grid-cols-3 gap-4"><div class="min-w-0">
1<label for="eyebrow-color" class="block text-sm font-medium text-blue-950">Eyebrow</label><div class="mt-1.5 flex items-center gap-2"><div class="relative h-9 w-9 shrink-0 overflow-hidden rounded-md border border-blue-200"><input id="eyebrow-color" type="color" class="absolute -inset-1 h-11 w-11 cursor-pointer border-0 p-0" value="#3a7d5c"/></div><input type="text" class="min-w-0 flex-1 rounded-lg border border-blue-200 bg-white px-2.5 py-2 text-xs text-blue-950 outline-none transition placeholder:text-blue-300 focus:border-blue-400 focus:ring-2 focus:ring-blue-100" value="#3a7d5c"/></div></div><div class="min-w-0"><label for="btn-color" class="block text-sm font-medium text-blue-950">Button</label><div class="mt-1.5 flex items-center gap-2"><div class="relative h-9 w-9 shrink-0 overflow-hidden rounded-md border border-blue-200"><input id="btn-color" type="color" class="absolute -inset-1 h-11 w-11 cursor-pointer border-0 p-0" value="#111111"/></div><input type="text" class="min-w-0 flex-1 rounded-lg border border-blue-200 bg-white px-2.5 py-2 text-xs text-blue-950 outline-none transition placeholder:text-blue-300 focus:border-blue-400 focus:ring-2 focus:ring-blue-100" value="#111111"/></div></div><div class="min-w-0"><label for="btn-hover-color" class="block text-sm font-medium text-blue-950">Btn Hover</label><div class="mt-1.5 flex items-center gap-2"><div class="relative h-9 w-9 shrink-0 overflow-hidden rounded-md border border-blue-200"><input id="btn-hover-color" type="color" class="absolute -inset-1 h-11 w-11 cursor-pointer border-0 p-0" value="#3a7d5c"/></div><input type="text" class="min-w-0 flex-1 rounded-lg border border-blue-200 bg-white px-2.5 py-2 text-xs text-blue-950 outline-none transition placeholder:text-blue-300 focus:border-blue-400 focus:ring-2 focus:ring-blue-100" value="#3a7d5c"/></div></div></div></div><button type="button" class="mt-6 inline-flex items-center gap-1.5 rounded-xl border border-blue-200 px-5 py-2.5 text-sm font-semibold text-blue-700 transition hover:border-blue-300 hover:bg-blue-50"><span></span>Reset</button></div><div class="space-y-6"><div class="rounded-3xl border bg-white/90 p-6 shadow-lg shadow-blue-100/60 backdrop-blur-sm transition sm:p-8 border-blue-400 ring-2 ring-blue-200"><div class="mb-4 flex items-center justify-between"><p class="text-sm font-semibold text-blue-950">Classic Horizontal</p><div class="flex items-center gap-2"><button type="button" title="Switch to dark mode" class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold shadow-sm transition bg-white text-blue-700 ring-1 ring-blue-200 hover:bg-blue-50"><span></span>Light</button><button type="button" class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold shadow-sm transition bg-white text-blue-700 ring-1 ring-blue-200 hover:bg-blue-50"><span></span>Copy Code</button></div></div><div style="font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, sans-serif"><div style="display:flex;align-items:center;border:1.5px solid #e8e8e8;border-radius:16px;overflow:hidden;background:#fff" class="flex-col sm:flex-row"><div style="background:#f7f7f5;display:flex;align-items:center;justify-content:center;padding:20px;align-self:stretch" class="w-full flex-none sm:w-45 sm:flex-[0_0_180px]"><img src="https://maximumhealthproducts.com/cdn/shop/files/Max_Slim_Green_12_1__92079.jpg?v=1772821909&amp;width=1346" alt="Maximum Slim Original" style="width:130px;height:130px;object-fit:contain;display:block"/></div><div style="flex:1;padding:24px 28px 24px 24px;border-left:1.5px solid #e8e8e8" class="border-l-0! border-t-[1.5px]! sm:border-t-0! sm:border-l-[1.5px]!"><p style="font-size:11px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:#3a7d5c;margin:0 0 8px">Featured Product</p><h3 style="font-size:18px;font-weight:700;color:#111;margin:0 0 10px;line-height:1.3">Maximum Slim Original</h3><p style="font-size:14px;color:#555;line-height:1.6;margin:0 0 20px">Science-backed formula to support metabolism, curb appetite, and help you reach your goals faster.</p><a href="https://maximumhealthproducts.com/collections/all-weight-loss?ref=blog_product_card&amp;utm_source=blog&amp;utm_medium=product_card&amp;utm_campaign=shopify_blog" target="_blank" rel="noopener noreferrer" style="display:inline-block;background:#111111;color:#fff;font-size:13px;font-weight:600;letter-spacing:0.04em;padding:10px 22px;border-radius:8px;text-decoration:none;transition:background 0.18s">Shop Now →</a></div></div></div></div><div class="rounded-3xl border bg-white/90 p-6 shadow-lg shadow-blue-100/60 backdrop-blur-sm transition sm:p-8 border-blue-200/80"><div class="mb-4 flex items-center justify-between"><p class="text-sm font-semibold text-blue-950">Centered Stack</p><div class="flex items-center gap-2"><button type="button" title="Switch to dark mode" class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold shadow-sm transition bg-white text-blue-700 ring-1 ring-blue-200 hover:bg-blue-50"><span></span>Light</button><button type="button" class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold shadow-sm transition bg-white text-blue-700 ring-1 ring-blue-200 hover:bg-blue-50"><span></span>Copy Code</button></div></div><div style="font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, sans-serif;max-width:420px;margin:0 auto"><div style="border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 4px 24px rgba(0,0,0,.08);text-align:center"><div style="background:#f7f7f5;padding:32px;display:flex;align-items:center;justify-content:center"><img src="https://maximumhealthproducts.com/cdn/shop/files/Max_Slim_Green_12_1__92079.jpg?v=1772821909&amp;width=1346" alt="Maximum Slim Original" style="width:160px;height:160px;object-fit:contain;display:block"/></div><div style="padding:28px 32px 32px"><p style="font-size:11px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:#3a7d5c;margin:0 0 10px">Featured Product</p><h3 style="font-size:20px;font-weight:700;color:#111;margin:0 0 12px;line-height:1.3">Maximum Slim Original</h3><p style="font-size:14px;color:#555;line-height:1.6;margin:0 0 24px">Science-backed formula to support metabolism, curb appetite, and help you reach your goals faster.</p><a href="https://maximumhealthproducts.com/collections/all-weight-loss?ref=blog_product_card&amp;utm_source=blog&amp;utm_medium=product_card&amp;utm_campaign=shopify_blog" target="_blank" rel="noopener noreferrer" style="display:inline-block;background:#111111;color:#fff;font-size:13px;font-weight:600;letter-spacing:0.04em;padding:12px 32px;border-radius:50px;text-decoration:none;transition:background 0.18s">Shop Now →</a></div></div></div></div><div class="rounded-3xl border bg-white/90 p-6 shadow-lg shadow-blue-100/60 backdrop-blur-sm transition sm:p-8 border-blue-200/80"><div class="mb-4 flex items-center justify-between"><p class="text-sm font-semibold text-blue-950">Accent Card</p><div class="flex items-center gap-2"><button type="button" title="Switch to dark mode" class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold shadow-sm transition bg-white text-blue-700 ring-1 ring-blue-200 hover:bg-blue-50"><span></span>Light</button><button type="button" class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold shadow-sm transition bg-white text-blue-700 ring-1 ring-blue-200 hover:bg-blue-50"><span></span>Copy Code</button></div></div><div style="font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, sans-serif"><div style="display:flex;align-items:center;border-left:4px solid #3a7d5c;border-radius:12px;overflow:hidden;background:#fafafa" class="flex-col-reverse sm:flex-row"><div style="flex:1;padding:24px 20px 24px 28px"><p style="font-size:11px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:#3a7d5c;margin:0 0 6px">Featured Product</p><h3 style="font-size:17px;font-weight:700;color:#111;margin:0 0 8px;line-height:1.3">Maximum Slim Original</h3><p style="font-size:13px;color:#555;line-height:1.5;margin:0 0 16px">Science-backed formula to support metabolism, curb appetite, and help you reach your goals faster.</p><a href="https://maximumhealthproducts.com/collections/all-weight-loss?ref=blog_product_card&amp;utm_source=blog&amp;utm_medium=product_card&amp;utm_campaign=shopify_blog" target="_blank" rel="noopener noreferrer" style="display:inline-block;background:#111111;color:#fff;font-size:12px;font-weight:600;letter-spacing:0.04em;padding:8px 20px;border-radius:6px;text-decoration:none;transition:background 0.18s">Shop Now →</a></div><div style="display:flex;align-items:center;justify-content:center;padding:16px;align-self:stretch" class="w-full flex-none pt-5 pb-0 sm:w-37.5 sm:flex-[0_0_150px] sm:pt-4 sm:pb-4"><img src="https://maximumhealthproducts.com/cdn/shop/files/Max_Slim_Green_12_1__92079.jpg?v=1772821909&amp;width=1346" alt="Maximum Slim Original" style="width:110px;height:110px;object-fit:contain;display:block;border-radius:12px"/></div></div></div></div></div></div><div class="rounded-3xl border border-blue-200/80 bg-white/90 p-8 shadow-lg shadow-blue-100/60 backdrop-blur-sm"><div class="flex flex-wrap items-center justify-between gap-3"><div><p class="text-xs font-semibold uppercase tracking-[0.18em] text-blue-600">Generated Code —<!-- --> <!-- -->Classic Horizontal</p><p class="mt-1 text-sm text-blue-700">Copy and paste this into your Shopify blog article&#x27;s HTML editor.</p></div><div class="flex items-center gap-3"><div class="flex overflow-hidden rounded-xl border border-blue-200"><button type="button" class="px-3.5 py-2 text-xs font-semibold transition bg-blue-600 text-white">Classic Horizontal</button><button type="button" class="px-3.5 py-2 text-xs font-semibold transition bg-white text-blue-700 hover:bg-blue-50">Centered Stack</button><button type="button" class="px-3.5 py-2 text-xs font-semibold transition bg-white text-blue-700 hover:bg-blue-50">Accent Card</button></div><button type="button" class="inline-flex items-center gap-1.5 rounded-xl border border-blue-200 px-4 py-2 text-xs font-semibold text-blue-700 transition hover:border-blue-300 hover:bg-blue-50"><span></span>Readable</button><button type="button" class="inline-flex items-center gap-1.5 rounded-xl px-5 py-2.5 text-sm font-semibold text-white transition bg-blue-600 hover:bg-blue-500"><span></span>Copy Code</button></div></div><pre class="mt-4 max-h-80 overflow-auto rounded-xl border border-blue-100 bg-slate-950 p-5 text-xs leading-5 text-slate-300"><code>&lt;!-- SHOPIFY-BLOG-PRODUCT-CARD:START --&gt;&lt;div class=&quot;sbpc-wrap&quot;&gt;&lt;div class=&quot;sbpc-card&quot;&gt;&lt;div class=&quot;sbpc-img-col&quot;&gt;&lt;img class=&quot;sbpc-img&quot; alt=&quot;Maximum Slim Original&quot; src=&quot;https://maximumhealthproducts.com/cdn/shop/files/Max_Slim_Green_12_1__92079.jpg?v=1772821909&amp;amp;width=1346&quot;&gt;&lt;/div&gt;&lt;div class=&quot;sbpc-body&quot;&gt;&lt;p class=&quot;sbpc-eyebrow&quot;&gt;Featured Product&lt;/p&gt;&lt;h3 class=&quot;sbpc-title&quot;&gt;Maximum Slim Original&lt;/h3&gt;&lt;p class=&quot;sbpc-desc&quot;&gt;Science-backed formula to support metabolism, curb appetite, and help you reach your goals faster.&lt;/p&gt;&lt;a class=&quot;sbpc-btn&quot; href=&quot;https://maximumhealthproducts.com/collections/all-weight-loss?ref=blog_product_card&amp;amp;utm_source=blog&amp;amp;utm_medium=product_card&amp;amp;utm_campaign=shopify_blog&quot;&gt;Shop Now →&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;style&gt;.sbpc-wrap{margin:2.5rem auto;max-width:720px;font-family:-apple-system,BlinkMacSystemFont,&#x27;Segoe UI&#x27;,sans-serif}.sbpc-card{display:flex;align-items:center;gap:0;border:1.5px solid #e8e8e8;border-radius:16px;overflow:hidden;background:#fff}.sbpc-img-col{flex:0 0 180px;width:180px;background:#f7f7f5;display:flex;align-items:center;justify-content:center;padding:20px;align-self:stretch}.sbpc-img{width:130px;height:130px;object-fit:contain;display:block}.sbpc-body{flex:1;padding:24px 28px 24px 24px;border-left:1.5px solid #e8e8e8}.sbpc-eyebrow{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#3a7d5c;margin:0 0 8px}.sbpc-title{font-size:18px;font-weight:700;color:#111;margin:0 0 10px;line-height:1.3}.sbpc-desc{font-size:14px;color:#555;line-height:1.6;margin:0 0 20px}.sbpc-btn{display:inline-block;background:#111111;color:#fff!important;font-size:13px;font-weight:600;letter-spacing:.04em;padding:10px 22px;border-radius:8px;text-decoration:none!important;transition:background .18s}.sbpc-btn:hover{background:#3a7d5c;color:#fff!important}@media(max-width:560px){.sbpc-card{flex-direction:column}.sbpc-img-col{width:100%;flex:none;border-left:none;border-bottom:1.5px solid #e8e8e8;padding:24px}.sbpc-img{width:110px;height:110px}.sbpc-body{padding:20px;border-left:none}}&lt;/style&gt;&lt;!-- SHOPIFY-BLOG-PRODUCT-CARD:END --&gt;</code></pre></div></div></section><section class="relative mx-auto max-w-6xl px-6 pb-16"><h2 class="text-2xl font-semibold tracking-tight text-blue-950 md:text-3xl">How to use</h2><p class="mt-3 max-w-3xl text-sm leading-7 text-blue-800 md:text-base">Follow these three steps to add a product card inside any Shopify blog article.</p><div class="mt-8 grid gap-4 sm:grid-cols-3"><div class="rounded-2xl border border-blue-100 bg-blue-50/70 p-5"><span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 text-sm font-bold text-white">1</span>
1<h3 class="mt-3 text-base font-semibold text-blue-950">Fill in your product details</h3><p class="mt-2 text-sm leading-6 text-slate-700">Enter the product image URL, title, description, and call-to-action link. Customize colors to match your brand.</p></div><div class="rounded-2xl border border-blue-100 bg-blue-50/70 p-5"><span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 text-sm font-bold text-white">2</span><h3 class="mt-3 text-base font-semibold text-blue-950">Pick a card style &amp; copy</h3><p class="mt-2 text-sm leading-6 text-slate-700">Browse three distinct card styles — Classic Horizontal, Centered Stack, and Accent Card. Toggle dark mode on any card. Click the copy button on the one you like.</p></div><div class="rounded-2xl border border-blue-100 bg-blue-50/70 p-5"><span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 text-sm font-bold text-white">3</span><h3 class="mt-3 text-base font-semibold text-blue-950">Paste into your blog article</h3><p class="mt-2 text-sm leading-6 text-slate-700">In your Shopify admin, open the blog article editor, switch to the HTML view (&lt;&gt; icon), and paste the code wherever you want the card to appear.</p></div></div></section><section class="relative mx-auto max-w-6xl px-6 pb-16"><div class="rounded-3xl border border-blue-200/80 bg-white/90 p-8 shadow-sm backdrop-blur-sm md:p-12"><h2 class="text-2xl font-semibold tracking-tight text-blue-950 md:text-3xl">Tips for best results</h2><div class="mt-6 space-y-4 text-sm leading-7 text-blue-800 md:text-base"><div class="rounded-xl border border-blue-100 bg-blue-50/70 px-6 py-4"><p><strong>Use a square or portrait image.</strong> Product images look best when they have a transparent or solid white background and a 1:1 aspect ratio.</p></div><div class="rounded-xl border border-blue-100 bg-blue-50/70 px-6 py-4"><p><strong>Keep the description short.</strong> One to two sentences is ideal. The card is meant to catch attention, not replace the product page.</p></div><div class="rounded-xl border border-blue-100 bg-blue-50/70 px-6 py-4"><p><strong>Look for the<!-- --> <code class="rounded bg-slate-200 px-1.5 py-0.5 text-xs text-slate-700">SHOPIFY-BLOG-PRODUCT-CARD</code> <!-- -->comments.</strong> <!-- -->When you need to update or remove the card later, search the HTML for<!-- --> <code class="rounded bg-slate-200 px-1.5 py-0.5 text-xs text-slate-700">SHOPIFY-BLOG-PRODUCT-CARD:START</code> <!-- -->and<!-- --> <code class="rounded bg-slate-200 px-1.5 py-0.5 text-xs text-slate-700">SHOPIFY-BLOG-PRODUCT-CARD:END</code> <!-- -->to find the block quickly.</p></div></div></div></section><section class="relative border-t border-blue-100 bg-linear-to-b from-blue-50/70 to-white"><div class="mx-auto max-w-6xl px-6 py-14 md:py-16"><div class="rounded-3xl border border-blue-200 bg-white p-8 text-center shadow-sm md:p-12"><p class="text-sm font-semibold uppercase tracking-[0.2em] text-blue-700">Need help with Shopify content strategy?</p><h2 class="mt-3 text-3xl font-semibold tracking-tight text-blue-950 md:text-4xl">Let us drive more traffic to your store</h2><p class="mx-auto mt-4 max-w-2xl text-sm leading-7 text-blue-800 md:text-base">Our team can help you create high-converting blog content, optimize your product pages, and build a content strategy that turns readers into buyers.</p><div class="mt-7 flex flex-col justify-center gap-3 sm:flex-row"><a class="inline-flex items-center justify-center rounded-xl bg-blue-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-blue-500" href="/book-call">Book a Call</a><a class="inline-flex items-center justify-center rounded-xl border border-blue-200 px-6 py-3 text-sm font-semibold text-blue-800 transition hover:border-blue-300 hover:bg-blue-50" href="/services">Explore Our Services</a></div></div></div></section></main><!--$--><!--/$--></div>
1<script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0};
2$RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:0","S:0")</script>
2<script>(self.__next_f=self.__next_f||[]).push([0])</script>
2<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[5798,[\"/_next/static/chunks/ca94d505fb116ed2.js\",\"/_next/static/chunks/f5fe132fdab0aed0.js\"],\"default\"]\n3:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/bf1f6d5df2e9b1a8.js\"],\"default\"]\n4:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/bf1f6d5df2e9b1a8.js\"],\"default\"]\n5:I[16057,[\"/_next/static/chunks/ca94d505fb116ed2.js\",\"/_next/static/chunks/f5fe132fdab0aed0.js\"],\"default\"]\n6:I[39552,[\"/_next/static/chunks/ca94d505fb116ed2.js\",\"/_next/static/chunks/f5fe132fdab0aed0.js\"],\"default\"]\n7:I[50621,[\"/_next/static/chunks/ca94d505fb116ed2.js\",\"/_next/static/chunks/f5fe132fdab0aed0.js\"],\"default\"]\n8:I[19598,[\"/_next/static/chunks/ca94d505fb116ed2.js\",\"/_next/static/chunks/f5fe132fdab0aed0.js\"],\"GoogleTagManager\"]\n9:I[24856,[\"/_next/static/chunks/ca94d505fb116ed2.js\",\"/_next/static/chunks/f5fe132fdab0aed0.js\"],\"default\"]\na:\"$Sreact.suspense\"\nb:I[72272,[\"/_next/static/chunks/ca94d505fb116ed2.js\",\"/_next/static/chunks/f5fe132fdab0aed0.js\"],\"default\"]\nc:I[44503,[\"/_next/static/chunks/ca94d505fb116ed2.js\",\"/_next/static/chunks/f5fe132fdab0aed0.js\"],\"default\"]\n16:I[68027,[],\"default\"]\n:HL[\"/_next/static/chunks/45f4f3384ae2bf04.css\",\"style\"]\n:HL[\"/_next/static/chunks/70fb222166c044d8.css\",\"style\"]\n:HL[\"/_next/static/media/83afe278b6a6bb3c-s.p.3a6ba036.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script>
2<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"J2evtaALhdMJuVuyVPCbf\",\"c\":[\"\",\"tools\",\"blog-product-card-generator\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"tools\",{\"children\":[\"blog-product-card-generator\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/45f4f3384ae2bf04.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/70fb222166c044d8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/ca94d505fb116ed2.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/f5fe132fdab0aed0.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"inter_e276b41e-module__sVt06W__variable\",\"children\":[[\"$\",\"body\",null,{\"className\":\"inter_e276b41e-module__sVt06W__className antialiased\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex min-h-screen flex-col\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"div\",null,{\"className\":\"flex-1\",\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L5\",null,{}]]}],[\"$\",\"$L6\",null,{}],[\"$\",\"$L7\",null,{}]]}],[\"$\",\"$L8\",null,{\"gtmId\":\"GTM-T39K6P3Q\"}],[\"$\",\"$L9\",null,{\"clarityId\":\"v5umeqdunj\"}],[\"$\",\"$a\",null,{\"fallback\":null,\"children\":[\"$\",\"$Lb\",null,{\"pixelId\":\"1333178755380820\"}]}],[\"$\",\"$Lc\",null,{\"pixelId\":\"$undefined\"}]]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"main\",null,{\"className\":\"relative overflow-hidden bg-white text-blue-950\",\"children\":[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute inset-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute inset-0 bg-linear-to-b from-blue-50 via-white to-blue-50/35\"}],[\"$\",\"div\",null,{\"className\":\"absolute -left-28 top-8 h-72 w-72 rounded-full bg-blue-500/12 blur-2xl\"}],[\"$\",\"div\",null,{\"className\":\"absolute -right-24 top-56 h-80 w-80 rounded-full bg-cyan-400/10 blur-2xl\"}],[\"$\",\"div\",null,{\"className\":\"absolute -bottom-40 left-1/3 h-96 w-96 rounded-full bg-indigo-500/10 blur-2xl\"}]]}],[\"$\",\"section\",null,{\"className\":\"relative mx-auto max-w-6xl px-6 pb-8 pt-20 md:pb-10 md:pt-24\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-start gap-x-3 gap-y-1\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-2xl font-bold tracking-tight text-blue-950 md:text-3xl\",\"children\":\"Shopify Blog Product Card Generator\"}],[\"$\",\"span\",null,{\"className\":\"mt-1 inline-flex shrink-0 rounded-full border border-blue-200 bg-blue-50 px-3 py-0.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-blue-700\",\"children\":\"Free Tool\"}]]}],[\"$\",\"p\",null,{\"className\":\"mt-2 max-w-3xl text-sm leading-6 text-blue-700\",\"children\":\"Create a responsive product card for any Shopify blog article. Fill in your details, preview, and copy a single block of HTML + CSS.\"}],\"$Ld\"]}],\"$Le\",\"$Lf\",\"$L10\",\"$L11\"]}],[\"$L12\"],\"$L13\"]}],{}
2,null,false,false]},null,false,false]},null,false,false]},[\"$L14\",[],[]],false,false],\"$L15\",false]],\"m\":\"$undefined\",\"G\":[\"$16\",[]],\"S\":true}\n"])</script>
2<script>self.__next_f.push([1,"17:I[31363,[\"/_next/static/chunks/ca94d505fb116ed2.js\",\"/_next/static/chunks/f5fe132fdab0aed0.js\",\"/_next/static/chunks/0c0e032c0b2c3265.js\"],\"default\"]\n18:I[22016,[\"/_next/static/chunks/ca94d505fb116ed2.js\",\"/_next/static/chunks/f5fe132fdab0aed0.js\",\"/_next/static/chunks/0c0e032c0b2c3265.js\"],\"\"]\n19:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/bf1f6d5df2e9b1a8.js\"],\"OutletBoundary\"]\n1b:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/bf1f6d5df2e9b1a8.js\"],\"ViewportBoundary\"]\n1d:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/bf1f6d5df2e9b1a8.js\"],\"MetadataBoundary\"]\nd:[\"$\",\"div\",null,{\"className\":\"mt-3 flex flex-wrap items-center gap-2 text-xs text-blue-600\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1.5 rounded-full border border-blue-100 bg-blue-50/70 px-3 py-1 font-medium\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-blue-400\",\"children\":\"●\"}],\" Shopify Blogs\"]}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1.5 rounded-full border border-blue-100 bg-blue-50/70 px-3 py-1 font-medium\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-blue-400\",\"children\":\"●\"}],\" HTML + CSS\"]}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1.5 rounded-full border border-blue-100 bg-blue-50/70 px-3 py-1 font-medium\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-blue-400\",\"children\":\"●\"}],\" Fully Responsive\"]}]]}]\ne:[\"$\",\"section\",null,{\"className\":\"relative mx-auto max-w-6xl px-6 pb-16\",\"children\":[\"$\",\"$L17\",null,{}]}]\n"])</script>
2<script>self.__next_f.push([1,"f:[\"$\",\"section\",null,{\"className\":\"relative mx-auto max-w-6xl px-6 pb-16\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl font-semibold tracking-tight text-blue-950 md:text-3xl\",\"children\":\"How to use\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 max-w-3xl text-sm leading-7 text-blue-800 md:text-base\",\"children\":\"Follow these three steps to add a product card inside any Shopify blog article.\"}],[\"$\",\"div\",null,{\"className\":\"mt-8 grid gap-4 sm:grid-cols-3\",\"children\":[[\"$\",\"div\",\"1\",{\"className\":\"rounded-2xl border border-blue-100 bg-blue-50/70 p-5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 text-sm font-bold text-white\",\"children\":\"1\"}],[\"$\",\"h3\",null,{\"className\":\"mt-3 text-base font-semibold text-blue-950\",\"children\":\"Fill in your product details\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-6 text-slate-700\",\"children\":\"Enter the product image URL, title, description, and call-to-action link. Customize colors to match your brand.\"}]]}],[\"$\",\"div\",\"2\",{\"className\":\"rounded-2xl border border-blue-100 bg-blue-50/70 p-5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 text-sm font-bold text-white\",\"children\":\"2\"}],[\"$\",\"h3\",null,{\"className\":\"mt-3 text-base font-semibold text-blue-950\",\"children\":\"Pick a card style \u0026 copy\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-6 text-slate-700\",\"children\":\"Browse three distinct card styles — Classic Horizontal, Centered Stack, and Accent Card. Toggle dark mode on any card. Click the copy button on the one you like.\"}]]}],[\"$\",\"div\",\"3\",{\"className\":\"rounded-2xl border border-blue-100 bg-blue-50/70 p-5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 text-sm font-bold text-white\",\"children\":\"3\"}],[\"$\",\"h3\",null,{\"className\":\"mt-3 text-base font-semibold text-blue-950\",\"children\":\"Paste into your blog article\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-6 text-slate-700\",\"children\":\"In your Shopify admin, open the blog article editor, switch to the HTML view (\u003c\u003e icon), and paste the code wherever you want the card to appear.\"}]]}]]}]]}]\n"])</script>
2<script>self.__next_f.push([1,"10:[\"$\",\"section\",null,{\"className\":\"relative mx-auto max-w-6xl px-6 pb-16\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-3xl border border-blue-200/80 bg-white/90 p-8 shadow-sm backdrop-blur-sm md:p-12\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl font-semibold tracking-tight text-blue-950 md:text-3xl\",\"children\":\"Tips for best results\"}],[\"$\",\"div\",null,{\"className\":\"mt-6 space-y-4 text-sm leading-7 text-blue-800 md:text-base\",\"children\":[[\"$\",\"div\",null,{\"className\":\"rounded-xl border border-blue-100 bg-blue-50/70 px-6 py-4\",\"children\":[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Use a square or portrait image.\"}],\" Product images look best when they have a transparent or solid white background and a 1:1 aspect ratio.\"]}]}],[\"$\",\"div\",null,{\"className\":\"rounded-xl border border-blue-100 bg-blue-50/70 px-6 py-4\",\"children\":[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Keep the description short.\"}],\" One to two sentences is ideal. The card is meant to catch attention, not replace the product page.\"]}]}],[\"$\",\"div\",null,{\"className\":\"rounded-xl border border-blue-100 bg-blue-50/70 px-6 py-4\",\"children\":[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":[\"Look for the\",\" \",[\"$\",\"code\",null,{\"className\":\"rounded bg-slate-200 px-1.5 py-0.5 text-xs text-slate-700\",\"children\":\"SHOPIFY-BLOG-PRODUCT-CARD\"}],\" \",\"comments.\"]}],\" \",\"When you need to update or remove the card later, search the HTML for\",\" \",[\"$\",\"code\",null,{\"className\":\"rounded bg-slate-200 px-1.5 py-0.5 text-xs text-slate-700\",\"children\":\"SHOPIFY-BLOG-PRODUCT-CARD:START\"}],\" \",\"and\",\" \",[\"$\",\"code\",null,{\"className\":\"rounded bg-slate-200 px-1.5 py-0.5 text-xs text-slate-700\",\"children\":\"SHOPIFY-BLOG-PRODUCT-CARD:END\"}],\" \",\"to find the block quickly.\"]}]}]]}]]}]}]\n"])</script>
2<script>self.__next_f.push([1,"11:[\"$\",\"section\",null,{\"className\":\"relative border-t border-blue-100 bg-linear-to-b from-blue-50/70 to-white\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-6xl px-6 py-14 md:py-16\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-3xl border border-blue-200 bg-white p-8 text-center shadow-sm md:p-12\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm font-semibold uppercase tracking-[0.2em] text-blue-700\",\"children\":\"Need help with Shopify content strategy?\"}],[\"$\",\"h2\",null,{\"className\":\"mt-3 text-3xl font-semibold tracking-tight text-blue-950 md:text-4xl\",\"children\":\"Let us drive more traffic to your store\"}],[\"$\",\"p\",null,{\"className\":\"mx-auto mt-4 max-w-2xl text-sm leading-7 text-blue-800 md:text-base\",\"children\":\"Our team can help you create high-converting blog content, optimize your product pages, and build a content strategy that turns readers into buyers.\"}],[\"$\",\"div\",null,{\"className\":\"mt-7 flex flex-col justify-center gap-3 sm:flex-row\",\"children\":[[\"$\",\"$L18\",null,{\"href\":\"/book-call\",\"className\":\"inline-flex items-center justify-center rounded-xl bg-blue-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-blue-500\",\"children\":\"Book a Call\"}],[\"$\",\"$L18\",null,{\"href\":\"/services\",\"className\":\"inline-flex items-center justify-center rounded-xl border border-blue-200 px-6 py-3 text-sm font-semibold text-blue-800 transition hover:border-blue-300 hover:bg-blue-50\",\"children\":\"Explore Our Services\"}]]}]]}]}]}]\n"])</script>
2<script>self.__next_f.push([1,"12:[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0c0e032c0b2c3265.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n13:[\"$\",\"$L19\",null,{\"children\":[\"$\",\"$a\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@1a\"}]}]\n14:[\"$\",\"main\",\"l\",{\"className\":\"mx-auto flex w-full max-w-6xl flex-1 items-center justify-center px-6 py-16\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full max-w-xl rounded-3xl border border-blue-200 bg-blue-50/50 p-8 text-center shadow-sm\",\"aria-busy\":\"true\",\"aria-live\":\"polite\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mx-auto inline-flex items-center gap-3 rounded-full border border-blue-200 bg-white px-4 py-2 text-sm font-medium text-blue-800\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex h-4 w-4 animate-spin rounded-full border-2 border-blue-700 border-t-transparent\"}],\"Loading page...\"]}],[\"$\",\"div\",null,{\"className\":\"mx-auto mt-6 h-8 w-3/4 animate-pulse rounded-xl bg-blue-100\"}],[\"$\",\"div\",null,{\"className\":\"mx-auto mt-3 h-4 w-full animate-pulse rounded-full bg-blue-100\"}],[\"$\",\"div\",null,{\"className\":\"mx-auto mt-2 h-4 w-10/12 animate-pulse rounded-full bg-blue-100\"}]]}]}]\n15:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L1b\",null,{\"children\":\"$L1c\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L1d\",null,{\"children\":[\"$\",\"$a\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L1e\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script>
2<script>self.__next_f.push([1,"1c:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
2<script>self.__next_f.push([1,"1f:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/bf1f6d5df2e9b1a8.js\"],\"IconMark\"]\n1a:null\n1e:[[\"$\",\"title\",\"0\",{\"children\":\"Shopify Blog Product Card Generator - Clickstera | Clickstera\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Generate beautiful, mobile-responsive product cards for your Shopify blog articles. Enter your product details and copy a single block of HTML + CSS to embed anywhere.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"manifest\",\"href\":\"/manifest.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0b3bf435.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/icon.png\"}],[\"$\",\"link\",\"5\",{\"rel\":\"apple-touch-icon\",\"href\":\"/icon.png\"}],[\"$\",\"$L1f\",\"6\",{}]]\n"])</script>
2<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"046f0e534ea340dc9d06571c1378d236","r":1,"spa":2}' crossorigin="anonymous"></script>
2
3</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.