Custom Recipe Card Layout / Modification

Recipe Kit ships four card designs. If none of them is quite what you want, here are your options, cheapest first.

1. Try the other designs first

Classic, Compact, Card and Card Vertical lay the same recipe out very differently, and switching takes one click in Settings > Design. It is worth trying all four against a real recipe before assuming you need something custom. See Recipe Card Templates.

2. Change it with CSS

Most layout requests we get are achievable with custom CSS, which you paste into Settings > Add custom CSS with no theme edit and no developer.

Things CSS handles well:

  • Fonts, colours, spacing and borders
  • Hiding sections you do not want
  • Reordering sections, see How to change the order of your recipe card
  • Changing column widths, or collapsing two columns into one
  • Different rules on mobile

Custom CSS Styling has the full class reference. Custom CSS survives design switches and app updates, which is the main reason to prefer it over anything else on this page.

3. Ask us

Email [email protected] with a screenshot or a design reference of what you want.

Basic styling changes and section swaps we are usually happy to do for you at no charge. For larger custom work we can quote you, depending on our availability. Tell us what you are after and we will tell you honestly whether it is a five-minute CSS snippet or a real project.

Enterprise plans include custom recipe card styling help as part of the plan.

4. Hire a developer

Any developer comfortable with CSS can work from the class reference in Custom CSS Styling. Point them at it. The card renders in the normal page rather than inside a shadow root or an iframe, so ordinary CSS applies and their usual browser tooling works.

A note on editing the widget files directly

Older versions of Recipe Kit installed recipekit.liquid and recipekit.scss.liquid into your theme, and some stores customized those files directly.

We do not recommend that any more, and it is not how current installs work. The current widget loads from our CDN and updates itself, so you get new features and fixes automatically. A theme file you have edited by hand cannot do that. It freezes at the version you edited, misses every fix, and someone has to hand-merge each new field we add.

If you are still on a hand-edited copy and want to move to the current widget, see Upgrading to New Recipe Kit Widget. Get in touch first if you want help carrying your customizations across as CSS.

What's next

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us