Recipe Card Templates

Recipe Kit has four card designs. All four are on every plan, including free, and you can switch between them at any time without touching a single recipe.

The four designs

Classic

Banner image across the top, then the recipe details stacked underneath in full-width sections.

Best for posts where the recipe photo is the hero and you want it big.

Compact

The image sits inline beside the recipe details rather than above them, and the whole card is denser.

Best for long blog posts where the recipe is one part of a bigger article and you do not want it taking over the page.

Card

A two-column grid with a border around the card. Ingredients in one column, directions in the other.

Best for recipes with a lot of ingredients, where a side-by-side layout saves the reader scrolling back and forth.

Card Vertical

A single column with dividers between each section.

Best for narrow theme layouts and for recipes read mostly on a phone, where two columns would collapse anyway.

Image sizing

All four designs crop the recipe image to a 3:2 landscape frame, anchored to the centre of the photo. One image size works for every design, so switching designs never means re-cropping your photos.

Upload at 1200 x 800 pixels. See the Recipe Kit image size guide for the full detail.

Choosing a design

During onboarding

The setup wizard shows all four with a live preview of a sample recipe. Click one and carry on.

Any time after

1. Open Recipe Kit and go to Settings
2. Find Design
3. Click a design to preview it
4. Save

Every recipe on your store updates to the new design at once. There is nothing to change per recipe.

What each design shows

All four render the same recipe data. Nothing is hidden on one design and shown on another.

Always shown: recipe title, image, ingredients, directions.

Shown when you have filled them in: description, prep, cook and total time, servings, author, cuisine, category, equipment, nutrition, recipe notes, rating stars, video, custom fields.

Interactive elements: print, share, ratings, click to check, servings adjuster, Cook Mode, and Add to Cart on Advanced and Enterprise plans.

Customizing a design

Every design picks up:

• Accent colour, used on borders, section headings, icons and buttons
• Card border, on or off, in Settings > Features
• Custom CSS, for anything else

See Customizing the Recipe Card for the settings, and Custom CSS Styling for the class names to target.

Mobile

All four designs are responsive and reflow on their own for tablet and phone widths. Two-column layouts collapse to one column on narrow screens. There is nothing to configure.

Previewing before you commit

The design picker in Settings shows a live preview with sample content. To see a design with your own recipe in your own theme, switch to it and load a real blog post. Switching back takes one click and changes nothing about your recipes.

What's next

• Customizing the Recipe Card - Accent colour, border and feature toggles
• Custom CSS Styling - Class reference for your own CSS
• Recipe Kit image size guide - Getting the image crop right