Recipe Card Templates

Recipe Kit offers four professionally designed templates to display your recipes. Choose the one that best matches your store's aesthetic.

Available Templates

Sunny

Best for: Bright, welcoming food blogs and stores

• Aspect Ratio: 1:1 (square) or 2:3 (portrait)
• Style: Warm, friendly, approachable
• Features:
  • Rounded corners
  • Soft shadows
  • Prominent image display
  • Clear ingredient/direction sections

Uptown

Best for: Modern, sophisticated brands

• Aspect Ratio: 16:9 (landscape)
• Style: Clean, elegant, minimal
• Features:
  • Sharp lines
  • Generous white space
  • Typography-focused design
  • Professional appearance

Column

Best for: Content-rich recipe pages (Most Popular)

• Aspect Ratio: 16:9 (landscape)
• Style: Organized, comprehensive, traditional
• Features:
  • Two-column layout
  • All information visible
  • Perfect for detailed recipes
  • Balanced image and text

Row

Best for: Horizontal layouts and compact displays

• Aspect Ratio: 16:9 (landscape)
• Style: Streamlined, efficient, compact
• Features:
  • Horizontal orientation
  • Space-efficient design
  • Works well in sidebars
  • Image on one side, content on other

Choosing a Template

During Onboarding

1. Complete initial setup
2. At the design step, preview all templates
3. Click to select your preferred design
4. Continue setup

After Setup

1. Go to Settings
2. Find Recipe Card Design
3. Preview templates
4. Select a new design
5. Save changes

Template Availability

All four templates are available on all plans:

Template Components

All templates display:

Required Elements

• Recipe title
• Main image
• Ingredients list
• Directions

Optional Elements (if provided)

• Description
• Prep/cook/total time
• Servings
• Author
• Cuisine type
• Equipment list
• Nutrition information
• Recipe notes
• Rating stars
• Video

Interactive Elements

• Add to Cart buttons (Advanced plan)
• Print button
• Share button
• Click-to-check ingredients

Customization Options

All Templates

• Primary color (borders, accents)
• Enable/disable design border (Column, Row)
• Custom CSS for advanced styling

Per-Recipe

Individual recipes use your selected template by default, but you can preview how each recipe looks in different templates.

Mobile Responsiveness

All templates are fully responsive and automatically adjust for:

• Desktop (full layout)
• Tablet (optimized spacing)
• Mobile (stacked, scrollable)

No additional configuration needed for mobile displays.

Previewing Templates

Before committing to a template:

1. Create or open a recipe
2. Click Preview
3. View how your content displays
4. Try different templates
5. Choose the best fit

Changing Templates

You can change templates anytime:

1. Go to Settings > Design
2. Select a new template
3. Save

Note: All recipes automatically update to the new template. No need to edit individual recipes.

What's Next?

• Customizing the Recipe Card - Brand customization
• Custom CSS Styling - Advanced styling options
• Add to Cart Button - Configure shopping features