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?
