Custom CSS styling

The layout picker and accent color cover most stores. When you need something they do not, you can target any part of the recipe card with your own CSS. This article lists the class names, shows tested examples, and covers what to do when CSS is not enough.

Custom CSS is free on every plan.

Where to add your CSS

For every recipe card on your store

1. Open Recipe Kit and go to Settings.
2. Scroll to the bottom of the design card, under Features, and click Custom CSS.
3. Paste your rules into the field.
4. Click Save.

The field holds up to 50,000 characters. If Recipe Kit cannot read your CSS, it shows "Not a valid css" and will not save until you fix it.

For one placement only

1. In Shopify admin, go to Online Store > Themes and click Customize.
2. Open the template that holds the card, for example Blog posts > Default blog post.
3. Click the Recipe Kit block.
4. Under Advanced, paste your rules into Custom CSS.
5. Click Save.

Rules in the block apply only where that block is placed. They load after the rules from Settings, so they win when both set the same thing.

Write rules that stick

The card's own styles start with #rk_parent, and a few use !important. A rule that starts with a bare class, such as .rk_heading, loses to them and appears to do nothing.

Start your rules with #rk_parent #rk_design. Two ids beat the card's own rules without needing !important:

#rk_parent #rk_design .rk_heading {
  font-size: 28px;
}

The Add to Cart buttons are the exception. Their background color is set with !important, so your rule needs it too (see Restyle the Add to Cart button below).

Card structure

On the current widget, the card nests like this:

<div id="rk_parent" class="rk_widget_root">
  <div id="rk"></div>
  <div id="rk_design" class="rk_hero_card">
    <div class="rk_container">
      <div class="rk_card">
        <!-- the recipe -->
      </div>
    </div>
  </div>
</div>

Design classes

The design class sits on #rk_design. Use it to style one design only.

.rk_modern matches both Card and Card Vertical. To target Card alone, use .rk_modern_column.

The accent color variable

Your accent color is available as a CSS custom property, so you can reuse it inside the card rather than typing a hex value:

#rk_parent #rk_design .rk_description {
  border-left: 3px solid var(--design-colour);
  padding-left: 12px;
}

Header and layout

Ingredients

Directions

Buttons and cart

Nutrition

Interactive parts

When a reader turns Cook Mode on, #rk_parent gains the class .rk-cook-mode-active.

Other sections

On Classic, Compact, Card and Card Vertical the notes are a plain .rk_column whose heading has the id rk-notes.

Section ids

Each section heading carries an id you can link to or use in a selector: #rk-recipe (the title), #rk-ingredients, #rk-equipment, #rk-directions, #rk-notes, #rk-video, #rk-faqs and #rk-nutrition. The link inside each heading has the class .rk_anchor_link.

Common changes

Each of these was checked on all six designs.

Set the card width

#rk_parent {
  max-width: 800px;
  margin: 0 auto;
}

Change the font

Use a font your theme already loads, or the reader's browser falls back to its default.

#rk_parent,
#rk_parent * {
  font-family: Georgia, serif;
}

Restyle the title

#rk_parent #rk_design .rk_heading {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

Add lines between ingredients

#rk_parent #rk_design .rk_ingredients li {
  padding: 8px 0;
  border-bottom: 1px dotted #ddd;
}

Restyle the Add to Cart button

The button uses your accent color, so change Accent Color first if that is all you need. To give the button its own color:

#rk_parent #rk_design .rk_atc_btn {
  background: #228b22 !important;
  color: #fff;
  border-radius: 4px;
}

#rk_parent #rk_design .rk_atc_btn:hover {
  background: #1e7a1e !important;
}

Hide something

/* Hide the Print button */
#rk_parent #rk_design .rk_print {
  display: none;
}

/* Hide the nutrition facts and their heading */
#rk_parent #rk-nutrition,
#rk_parent .rk_nutrition_column {
  display: none;
}

/* Hide the video inside the card */
#rk_parent #rk_video {
  display: none;
}

Style one design only

This changes section headings on the Card design and leaves the other five alone:

#rk_parent #rk_design.rk_modern_column .rk_column_heading {
  text-transform: none;
}

Phone-only rules

@media (max-width: 749px) {
  #rk_parent #rk_design .rk_heading {
    font-size: 22px;
  }
}

Hero and Editorial also adjust to the width of the card itself, not only the screen, so check them in a narrow theme column as well as on a phone.

Reorder sections

This moves the video up, between the recipe header and the ingredients, on every design:

#rk_parent #rk_design .rk_card {
  display: flex;
  flex-direction: column;
}

#rk_parent #rk_design.rk_hero_card .rk_card {
  display: grid;
}

#rk_parent #rk_design .rk_card > * {
  order: 3;
}

#rk_parent #rk_design .rk_card > .rk_hero,
#rk_parent #rk_design .rk_card > .rk_header,
#rk_parent #rk_design .rk_card > .rk_stat_card,
#rk_parent #rk_design .rk_card > .rk_controls_bar {
  order: 1;
}

#rk_parent #rk_design .rk_card > #rk_video {
  order: 2;
}

The same pattern moves any of the card's main sections, which are the direct children of .rk_card: #rk_video, .rk_body, #rk-nutrition with .rk_nutrition_column, .rk_faqs, and the notes. Give the section you want higher a lower order number. Ingredients and directions sit inside .rk_body, so they move together.

Change the card in Cook Mode

#rk_parent.rk-cook-mode-active #rk_design .rk_directions li {
  font-size: 24px;
}

Printing

Custom CSS does not reach the print page. When a reader clicks Print, Recipe Kit opens a separate print page with its own layout. Set what it shows under Print page defaults in Settings. See Printing recipes.

On the original widget

If your theme still uses the original pasted-in snippet (recipekit.liquid), the card is built differently. Hero and Editorial do not exist there, and neither do these classes: .rk_recipe_actions, .rk_action_btn, .rk_share_btn, .rk_share_dialog, .rk_qty_stepper, .rk_unit_toggle, .rk_serving_adjuster, .rk_checkbox, .rk_checked, .rk_direction_content, .rk_step_label, .rk_note, .rk_main_col and .rk_cart_actions. #rk_parent and #rk_design are there, so rules built on them still apply to the classes the two widgets share. Upgrading to the new Recipe Kit widget shows how to move over.

Tips

• Use your browser's element inspector on a live recipe card. It shows exactly which classes are on the element you are looking at.
• The card renders in the normal page, not in a shadow root or an iframe, so your theme's CSS reaches it too. If a rule does not stick, the card's own rule or your theme's is winning. Check that the rule starts with #rk_parent #rk_design.
• Switching to another design keeps your custom CSS, but rules scoped to one design class stop matching. Check your rules after switching.

When CSS is not enough

Try the other designs first

Hero, Editorial, Classic, Compact, Card and Card Vertical lay the same recipe out very differently, and switching takes one click under Layout in Settings. Try them against a real recipe before planning anything custom. See Recipe card templates.

Ask us

Email [email protected] with a screenshot or a design reference of what you want. We often make small styling changes and section swaps for you. For larger custom work we can give you a quote, depending on availability. We will tell you honestly whether it is a five-minute CSS snippet or a real project.

Hire a developer

Any developer comfortable with CSS can work from this article with their usual browser tools.

Do not edit the widget files by hand

Older versions of Recipe Kit installed recipekit.liquid and recipekit.scss.liquid into your theme, and some stores edited those files directly. The current widget comes with the app and updates itself, so you get new features and fixes automatically. A theme file edited by hand freezes at the version you edited and misses every fix after it. If you are on a hand-edited copy, move to the current widget with Upgrading to the new Recipe Kit widget, and contact support first if you want help carrying your changes across as CSS.

What's next

• Customizing the recipe card covers the built-in settings, no CSS needed.
• Recipe card templates describes the six designs.
• Printing recipes explains the print page and its defaults.