Custom Recipe Card Layout / Modification
Recipe Kit currently comes with 3 great looking recipe card designs, but if you are looking for a custom recipe layout, you have a few options on how to move forward.
1. Ask us for layout help!
Email us with a screenshot, or design reference of what you are looking to implement on your store.
Depending on how custom the layout is, it may be something that the Recipe Kit team can help to implement on your store. We are happy to help with basic styling changes and swapping of sections, but anything beyond the simple stuff may not be in our capacity to help with.
If you have an advanced custom design, depending on our time availability, we may be able to offer to build it into your store for a cost. Our hourly development rate is $65 USD, and we can give you a cost estimate according to your requirements.
In some cases, though, we won't have the capacity to help out; in which case you will want to check out the option below.
2. Hire a developer to help out
If you have a developer on your team, they can read the information laid out below on how to modify the recipe card layout themselves.
Note: Modifying the recipekit.liquid file means you will not be able to use Recipe Kit's auto-updating feature to get access to new features. Your developer will need to add in a new feature themselves. For example: if we release a new recipe field, your developer will have to add that new field into your custom design code.
Also, please remember that clicking 'Update Recipe Kit' in the App Settings page of the application will over-write all of your changes to the recipekit.liquid and recipekit.scss.liquid files. Do not click this button if you have made custom changes.
1. Understanding recipekit.liquid file
Recipe Kit's main layout lives in the recipekit.liquid snippet file in your Shopify theme (Snippets folder).
If you are familiar with Liquid, a quick glance of the file will make sense to you. All of the recipe data (ingredients, directions, information) is processed in the top quarter of the file.
All data originally comes from an article metafield. This means you can simply reference the metafield to grab specific information.
For example, to grab the recipe title, you can simply use {{ rk_mf.recipe_title }}, etc.
Most custom recipe designs will likely be based on top of an existing design. Pick a design that you like best, and then find that design's code in the recipekit.liquid file.
Modify the Liquid / HTML as needed; click Save; and you are good to go!
2. recipekit.scss.liquid file
All the Recipe Kit card styles live in the Assets > recipekit.scss.liquid file.
You can modify this file if you feel like changing styles to fit your site. The same rule applies as the recipekit.liquid file - modifying this file means that if you click 'Update Recipe Kit Code' in the App Settings page, your changes will be over-written.
To remedy this, I'd suggest adding any of your custom recipe card design styles into your theme's CSS file; this file will never be touched by Recipe Kit, so it will stay put forever.