Recipe Bar (Jump to Recipe and Print buttons)
Recipe Bar is a small block you can add near the top of a blog post with two buttons: Jump to Recipe and Print Recipe.
It solves a specific annoyance. A reader arrives from Google wanting the recipe, and has to scroll past your introduction to reach it. Jump to Recipe takes them straight there, which keeps them on the page instead of hitting back.
Adding it
- Go to Online Store > Themes > Customize
- Select Blog posts > Default blog post from the page dropdown
- Click Add block in the main content section
- Select Recipe Bar from the app blocks list
- Drag it near the top of the post, usually just under the title or the featured image
- Click Save
Recipe Bar is a blog post block, so it only appears on article templates. It also only renders on posts that actually have a recipe linked to them. Posts without one show nothing, with no gap left behind.
Settings
| Setting | What it does |
|---|---|
| Jump to Recipe button text | Leave blank to use your store's translated label |
| Jump to Recipe anchor ID | Which element to scroll to, without the #. Leave blank to scroll to the recipe card |
| Print Recipe button text | Leave blank to use your store's translated label |
| Custom CSS | Style the bar and its buttons |
Changing the wording
Two ways, depending on scope:
Everywhere: set Jump to Recipe and Print Recipe in Settings > Translations & Labels in the Recipe Kit app. This is the right place if you are translating your store, since the buttons then match the rest of your card.
On one template: fill in the text fields on the block itself, which overrides the translation for that placement only.
Scrolling somewhere other than the recipe
By default the Jump button scrolls to the recipe card. If you want it to land somewhere else, for example on a "Jump to recipe" heading you have written yourself, put that element's ID into Jump to Recipe anchor ID, without the #.
Styling it
The bar and its two buttons can be restyled with the block's Custom CSS field:
#recipe-buttons {
display: flex;
gap: 12px;
margin: 24px 0;
}
#jump-to-recipe,
#print-recipe {
border-radius: 999px;
padding: 10px 18px;
}
Should you use it?
Worth adding if your recipe posts have a real introduction before the card. If your posts are mostly just the recipe, the buttons are scrolling a reader past almost nothing, and the recipe card already has its own Print button.
What's next
- Setting Up the Recipe Widget - The main recipe card block
- Recipe Printing Troubleshooting - When printing goes wrong
- Translating Recipe Cards - Renaming the buttons everywhere