Custom CSS Styling

For advanced customization, Recipe Kit supports custom CSS to style any aspect of your recipe cards.

Adding Custom CSS

Go to Settings
Find Add custom CSS
Enter your CSS rules
Save changes

CSS applies immediately to all recipe cards on your store.

CSS Class Reference

Main Container

Selector

Element

#rk

Root container

.rk_container

Main wrapper

.rk_card

Card container

.rk_design

Design wrapper

Template Classes

Each template has a unique class on the container:

Class

Template

.rk_sunny

Sunny

.rk_uptown

Uptown

.rk_modern

Column

.rk_modern_vertical

Row

Layout Classes

Class

Element

.rk_grid

Grid layout

.rk_column

Grid column

.rk_primary

Primary content column

.rk_secondary

Secondary section

.rk_details

Details area

.rk_image

Image container

.rk_actions

Action buttons area

Typography Classes

Class

Element

.rk_heading

Recipe title

.rk_column_heading

Section headers (Ingredients, Directions)

.rk_description

Recipe description

.rk_meta

Metadata labels (Prep Time, etc.)

.rk_subheading

Author subtitle

Ingredient Classes

Class

Element

.rk_ingredients

Ingredients section

.rk_ingredient__item

Individual ingredient row

.rk_ingredient__item--quantity

Quantity value

.rk_ingredient__item--unit

Measurement unit

.rk_ingredient__item--ingredient

Ingredient text

.rk_has_link

Ingredient with product link

Direction Classes

Class

Element

.rk_directions

Directions section

.recipe-preparation

Directions ordered list

.rk_direction_image

Step image

Button Classes

Class

Element

.rk_atc_btn

Add to Cart button

.rk_rfc_btn

Remove from Cart button

.rk_atc_all

Add All to Cart button

.rk_print

Print button

.rk_social

Social sharing container

Nutrition Classes

Class

Element

.rk_nutrition_card

Nutrition card container

.rk_nutrition_field

Individual nutrition item

.rk_nutrition_linear

Linear layout

.rk_nutrition_vertical

Vertical layout

.rk_nutrition_horizontal

Horizontal layout

Interactive Classes

Class

Element

.user_checked

Checked ingredient/step

.is_in_cart

Item in cart indicator

.rk_rating

Rating container

.rk-cook-mode-wrapper

Cook mode toggle

Common Customizations

Adjust Card Width

#rk {
  max-width: 800px;
}

Change Font

.rk_container {
  font-family: 'Your Font', sans-serif;
}

Customize Title

.rk_heading {
  font-size: 28px;
  font-weight: 700;
}

Style Ingredients

.rk_ingredient__item {
  padding: 8px 0;
  border-bottom: 1px dotted #ddd;
}

Button Styling

.rk_atc_btn {
  background-color: #228B22;
  color: white;
  border-radius: 4px;
}

Hide Elements

/* Hide print button */
.rk_print {
  display: none;
}

/* Hide nutrition section */
.rk_nutrition_card {
  display: none;
}

Mobile Responsive CSS

Use media queries for mobile-specific styles:

@media (max-width: 768px) {
  .rk_heading {
    font-size: 22px;
  }

  #rk {
    padding: 16px;
  }
}

Tips

Use browser developer tools to inspect elements and find class names
If styles don't apply, try adding !important or use more specific selectors
Test on both desktop and mobile

What's Next?

Customizing the Recipe Card - Basic settings
Recipe Card Templates - Template options