Recipe Card Template
What does this code do?
This code snippet will allow you to add printable recipe cards to your Squarespace Website.
Note 1: This code snippet involves quite a bit of customization. If you are building a website that will contain a lot of recipe cards, it may be more beneficial to invest in a Recipe Card Generator such as this one. (That is not an affiliate link.)
Note 2: When adding your recipes, it is also a good idea to add Schema Markup at the bottom of each post so that your recipe will show up in Search Engines. You can find out more about this here.
Video Tutorial
Code Snippets
Copy and paste this code into Settings > Advanced > Footer
<!-- Print Button for Recipe Card --> <script> (function () { var recipeButtons = document.querySelectorAll(".recipe-print"); for (var i = 0; i < recipeButtons.length; i++) { var recipeButton = recipeButtons[i]; recipeButton.onclick = function () { var recipe = this.closest(".recipe-card").innerHTML; var stylesheets = document.querySelectorAll('[rel="stylesheet"]'); var a = window.open("", "Print-Window"); a.document.open(); a.document.write("<html><head>"); for (i = 0; i < stylesheets.length; i++) { var style = stylesheets[i].href; a.document.write( '<link rel="stylesheet" href="' + style + '" type="text/css"/>' ); } a.document.write("</head><body><div class='recipe-card'>"); a.document.write(recipe); a.document.write("</div><p>© 2021 YOUR BUSINESS HERE</p></body></html>"); a.document.close(); setTimeout(function(){ a.print() }, 500); }; } })(); </script>
Then customize the Copyright with your business name.
Copy and paste this code into Design > Custom CSS
/* Recipe Card */ .recipe-card { border: 2px solid black; /*border arround card */ padding: 20px; margin: 20px; } .recipe-card h2, .recipe-card h3 { margin: 2rem 0 !important; } .recipe-card p { margin: 1rem 0 !important; } .recipe-top { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: center; border-bottom: 2px solid black; /* border above title */ } .recipe-servings *{ display: inline-block; padding: 10px; } .recipe-title { text-align: center; margin: 1rem 0; } .recipe-intro { text-align: center; font-style: italic; margin-left: auto !important; margin-right: auto !important; } .recipe-timing { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; align-items: center; border-top: 2px dotted black; /*border above timings */ border-bottom: 2px dotted black; /*border below timings */ text-transform: uppercase; } .recipe-nutrition-content { display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap; text-align: center; } .recipe-nutrition-info { min-width: 100px; margin: 1rem auto !important; } .recipe-nutrition-info p{ margin: 0 !important; }
Copy and paste this code into a Code Block on your site where you would like the recipe card to be.
<div class="recipe-card"> <div class="recipe-top"> <div class="recipe-servings"> <p>Yield: 8</p> <p>Author: Rebecca Grace</p> </div> <div class="recipe-print"> <div class="sqs-block button-block sqs-block-button"> <input type="button" class="sqs-block-button-element--small sqs-block-button-element" value="Print Recipe" onClick="printCard(this)"> </div> </div> </div> <div class="recipe-title"> <h2>This is the title.</h2> </div> <div class="recipe-intro"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue velit, commodo eget tempor interdum, ornare eu massa. Phasellus vitae dui quis tortor ultrices dictum. Nulla velit nunc, dapibus non nulla non, malesuada cursus leo. Duis tempus egestas dolor et gravida.</p> </div> <div class="recipe-timing"> <p>Prep Time: 20 min</p> <p>Cook Time: 30 min</p> <p>Total Time: 50 min</p> </div> <div class="recipe-ingredients"> <h3>Ingredients:</h3> <ul> <li>ingredient 1</li> <li>ingredient 2</li> <li>ingredient 3</li> <li>ingredient 4</li> <li>ingredient 5</li> <li>ingredient 6</li> </ul> </div> <div class="recipe-instrucions"> <h3>Instructions:</h3> <ol> <li>You do this.</li> <li>You do this.</li> <li>You do this.</li> <li>You do this.</li> <li>You do this.</li> <li>You do this.</li> <li>You do this.</li> </ol> </div> <div class="recipe-notes"> <h3>Notes:</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue velit, commodo eget tempor interdum, ornare eu massa. Phasellus vitae dui quis tortor ultrices dictum.</p> </div> <div class="recipe-nutrition"> <h3>Nutritional Information:</h3> <div class="recipe-nutrition-content"> <div class="recipe-nutrition-info"> <p>Calories</p> <p>100</p> </div> <div class="recipe-nutrition-info"> <p>Fat</p> <p>100g</p> </div> <div class="recipe-nutrition-info"> <p>Sat. Fat</p> <p>100g</p> </div> <div class="recipe-nutrition-info"> <p>Carbs</p> <p>100g</p> </div> <div class="recipe-nutrition-info"> <p>Fiber</p> <p>100g</p> </div> <div class="recipe-nutrition-info"> <p>Net Carbs</p> <p>100</p> </div> <div class="recipe-nutrition-info"> <p>Sugar</p> <p>100g</p> </div> <div class="recipe-nutrition-info"> <p>Protein</p> <p>100g</p> </div> <div class="recipe-nutrition-info"> <p>Carbs</p> <p>100g</p> </div> <div class="recipe-nutrition-info"> <p>Sodium</p> <p>100mg</p> </div> <div class="recipe-nutrition-info"> <p>Cholesterol</p> <p>100g</p> </div> </div> </div> </div>
Then customize all of the black text to match your recipe.
How To Use It
Copy and paste the code as indicated above.
Customize the recipe card.
