Jump to Recipe and Print buttons

The Recipe Bar block adds two buttons near the top of a blog post: Jump to Recipe and Print Recipe. A reader who arrives from Google wanting the recipe can skip your introduction in one tap instead of scrolling past it, or hitting back.

The Recipe Bar is free on every plan.

Add the Recipe Bar

1. In Shopify admin, go to Online Store > Themes and click Customize.
2. From the page menu at the top, choose Blog posts > Default blog post.
3. In the section that holds the post, click Add block.
4. Choose Recipe Bar from the apps list.
5. Drag it near the top of the post, usually just under the title or the featured image.
6. Click Save.

The Recipe Bar works on blog post templates only. It shows only on posts that have a recipe linked to them. Posts without one show nothing and leave no gap.

What the buttons do

Jump to Recipe scrolls the reader down to the recipe card.

Print Recipe opens the same print page as the Print button on the card, in a new tab. The reader picks what to include and prints from there. Printing recipes covers the print page and how to set its defaults.

Settings

Click the Recipe Bar block in the theme editor to see its settings:

Change the wording

To change the button text everywhere, open Recipe Kit, go to Settings, and edit Jump to Recipe and Print Recipe in the Translations & Labels card. Use this if you are translating your store, so the buttons match the rest of your card.

To change them on one template, fill in the button text fields on the block. They override your Recipe Kit labels for that placement only, in every language, so leave them blank if your store is translated.

Scroll somewhere other than the card

To land the reader somewhere else, put that element's id into Jump to Recipe anchor ID, without the #. It can be a heading you wrote in the post, or a part of the recipe card. For example, rk-ingredients lands on the ingredient list of the current widget. Custom CSS styling lists the other section ids.

Style it

The bar has the id recipe-buttons, and the buttons are jump-to-recipe and print-recipe. Paste rules like these into the block's Custom CSS field:

#recipe-buttons {
  gap: 12px;
  margin: 24px 0;
}

#recipe-buttons button {
  border-radius: 999px;
  padding: 10px 18px;
}

#recipe-buttons #print-recipe {
  display: none;
}

The last rule hides the Print Recipe button and keeps Jump to Recipe. Leave it out to keep both.

When to use it

Add it if your recipe posts have a real introduction before the card. If your posts are mostly the recipe itself, the buttons skip past almost nothing, and the card already has its own Print button.

What's next

• Installation guide covers adding the main recipe card block.
• Printing recipes covers the print page.
• Changing the text on your recipe card covers renaming the buttons everywhere.