Loading page...
Create a responsive product card for any Shopify blog article. Fill in your details, preview, and copy a single block of HTML + CSS.
Fill in the fields below — previews update live.
Shop buttons use your URL plus tracking: ref=blog_product_card, utm_source=blog, utm_medium=product_card, utm_campaign=shopify_blog (only added if those keys are not already in the link).
Classic Horizontal
Centered Stack
Accent Card
Generated Code — Classic Horizontal
Copy and paste this into your Shopify blog article's HTML editor.
<!-- SHOPIFY-BLOG-PRODUCT-CARD:START --><div class="sbpc-wrap"><div class="sbpc-card"><div class="sbpc-img-col"><img class="sbpc-img" alt="Maximum Slim Original" src="https://maximumhealthproducts.com/cdn/shop/files/Max_Slim_Green_12_1__92079.jpg?v=1772821909&width=1346"></div><div class="sbpc-body"><p class="sbpc-eyebrow">Featured Product</p><h3 class="sbpc-title">Maximum Slim Original</h3><p class="sbpc-desc">Science-backed formula to support metabolism, curb appetite, and help you reach your goals faster.</p><a class="sbpc-btn" href="https://maximumhealthproducts.com/collections/all-weight-loss?ref=blog_product_card&utm_source=blog&utm_medium=product_card&utm_campaign=shopify_blog">Shop Now →</a></div></div></div><style>.sbpc-wrap{margin:2.5rem auto;max-width:720px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',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}}</style><!-- SHOPIFY-BLOG-PRODUCT-CARD:END -->Follow these three steps to add a product card inside any Shopify blog article.
Enter the product image URL, title, description, and call-to-action link. Customize colors to match your brand.
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.
In your Shopify admin, open the blog article editor, switch to the HTML view (<> icon), and paste the code wherever you want the card to appear.
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.
Keep the description short. One to two sentences is ideal. The card is meant to catch attention, not replace the product page.
Look for the SHOPIFY-BLOG-PRODUCT-CARD comments. When you need to update or remove the card later, search the HTML for SHOPIFY-BLOG-PRODUCT-CARD:START and SHOPIFY-BLOG-PRODUCT-CARD:END to find the block quickly.
Need help with Shopify content strategy?
Our team can help you create high-converting blog content, optimize your product pages, and build a content strategy that turns readers into buyers.