About this block
A section of 3 product cards, each with a square photo, name, price and a Buy now button. It's a quick way to sell a few items without setting up a full store. Link each button to a checkout page, such as a Stripe Payment Link, and you can take orders right away.
When to use it
- Selling a handful of products, like merch, prints or gift cards.
- Featuring best sellers on a homepage, with each button going to the product's page.
- A launch page for a few new items.
- Any site that takes payment through checkout links rather than a cart.
What's inside
- A small accent eyebrow, an h2 heading and a short line of copy. They're centred on phones and left-aligned from tablet width up.
- 3 cards on your lightest surface colour, each with a thin border and a soft shadow, so they stand out from the section background.
- Each card has a square photo, an h3 product name, a price in your primary colour and a full-width Buy now button with a cart icon.
- One column on phones, 3 columns from tablet width up.
How to customize it
- Create a Stripe Payment Link for each product and paste it into that card's Buy now button.
- Use photos with the same background and framing so the cards look like a set.
- Duplicate a card to add a 4th product, then change the grid to 4 columns or let it wrap to a new row.
- Change the button text to fit how you sell: "Order now", "Book" or "Buy tickets".
Questions
- How do I take payments with this?
- Point each Buy now button at a checkout page, such as a Stripe Payment Link or a Shopify Buy Button link. The visitor pays there and Stripe or Shopify handles the receipt.
- Can it pull products in from my store automatically?
- This section uses cards you fill in by hand. For a catalog that updates itself from your products, use one of the storefront product grid sections instead.
- What image size works best?
- Square photos at least 600 by 600px. The cards crop every photo to a square, so keep the product near the centre.