Home » Uncategorized » How to Create Custom Recipe Cards for Squarespace

How to Create Custom Recipe Cards for Squarespace

This post may contain affiliate links, and we receive an affiliate commission for any purchases made by you using these links. We appreciate your support!

I’m going to show you how to create easy, user-friendly, and fully customizable recipe cards for you to use on your Squarespace food blog using markdown text blocks. I will also show you how to add recipe schema markup so that your recipes rank competitively in Google!

NOTE: I have since moved to WordPress. I keep this up to help others who are on the Squarespace platform. While it is possible to have a very well-optimized food blog on Squarespace, it is a lot more work and takes a lot more time than on WordPress. It’s a personal decision as to which platform one prefers. As a busy mom, I needed to find a way to save time optimizing my posts, hence my move to WordPress. I adore Squarespace, but it just isn’t for me at this time. But for those of you sticking it through, I hope this helps! XO.

 How to Create Custom Recipe Cards on Squarespace - I’m going to show you how to create easy, user-friendly, and fully customizable recipe cards for you to use on your Squarespace food blog using markdown text blocks. I will also show you how to add recipe schema markup so that your recipes rank competitively in Google! #foodblogging #squarespace #recipecards #markdowntext #howto #tutorial #CSS #html #foodblog #blogging #recipes #recipegenerator #schema #googlerichsnippets

Why do I need a recipe card for my food blog?

  • Above all, writing for the user should always be the first intention of any post (recipe or not). Incorporating a recipe card makes it easier for the user to find, read, and print the recipe.

  • Using a recipe card on each recipe blog post helps create a cohesive and branded look that users will come to connect with you.

  • You must include a certain amount of information in your recipe cards to be taken seriously by Google. You must also have proper schema markup in order to show up in Google search results and rank competitively against other food blogs.

I’ve spent a fair amount of time since I first began my food blog researching and trying various ways of displaying my recipes within posts. Having decided against WordPress and its infamous recipe ‘plug-ins’, I’ve had to find many workarounds in order to achieve the same effects. First on Weebly, now on Squarespace with over 4.086 million subscriptions. Having recently grown tired of the inconsistency of good recipe card generator options for Squarespace, I decided to take matters into my own hands and experiment a little. Thanks to the fair amount of markdown and CSS tutorials one can find online, this is the result of my experiment! I hope it can help you, too.

How to Create a Custom Recipe Card with Squarespace:

Now, to see what I am referring to when I say ‘recipe card’, please look HERE and scroll down to the recipe to see if this is something that you would like.

  1. First, you will create a template to make it easier to create new recipes using your ‘card’ each time. Start by creating a new blog post. Title it ‘Recipe Card’ or something that will make it easy to find. You will keep this saved as a draft to have on hand at all times.

  2. Click the ‘+’ symbol and open a new Markdown text block.

  3. Do you want a customizable border around your recipe card? Copy and paste the below into your text block: Do you want a border-free recipe card? Copy and paste the second code below:


If you chose to have a customizable border around your markdown text box, then head on over to Design > Custom CSS and then insert the following code:

How to Customize the Border Around the Markdown Text Box:

As you can see, there are three sections to this code. The top is for desktop, the second for iPads and tablets, and the third is for mobile display. Here are some available modifications:

Change the font family:

  • I found this site useful for finding web friendly font-family choices to choose from. You simply replace the ‘”Playfair Display”, Georgia, Serif;’ in each of the three sections with the font-family of your choice.

Change the font size:

  • You can change the font size of each section by changing the values. I like 17px.

Insert a background image into your recipe card:

  • Delete “/s/IMAGE-FILENAME-HERE.jpg” in each section.

  • Replace the two quotation marks (““).

  • Move your curson in-between the two quotation marks.

  • Click ‘Manage Custom Files’ below. Choose your image and the file name should appear in-between the quotations.

  • Click ‘Save’ and the background image should display.

  • Please note that you may need to play around with your image in a photo editor to get the contrast and size, etc. just right in order for the text to ‘pop’ and display clearly.

Change the border color and line size:

  • Replace the ‘border color’ value (#fabae6) in each section with the hex color value of your choice. This site might be helpful.

  • Replace the ‘border width’ values (15px 15px 15px 15px) in each section with the line width of your choice. I like 1px 1px 1px 1px.

How to Customize Your Recipe Card:

Here is where the fun happens! You can customize the entire markdown text block to suit your needs. What you copied and pasted is the template that works for me, but feel free to change the info you want to share, rearrange, etc.!

To use my template, replace ‘Recipe Name’ ‘Author’ ‘Date’ etc. with just what those imply. At any time, you can highlight any portion of this card and choose to make the text bold or italic, change the headings values, etc. using the toolbar at the top of the markdown text block. Just note that if you heavily modify my template and you want a border to display, you may need to highlight all text and then click the quotation (“) symbol in order for the border to show up properly. If you are not using a border, be sure to keep away from using the quotation symbol in your text block! The border is a ‘quote block’ based code.

Do you want to add a small image of your recipe to your recipe card?

Copy the code below and replace the alt text, URL and title with those that pertain to your recipe. For image hosting, I like to use Postimage.

Do you want to add star ratings that display in Google to your recipe card?

Find those instructions in my Google Star Ratings for Recipes post. I like to insert the Rating Widget Code HTML code right below the image in the markdown text block.

Do you want to insert horizontal dividers?

Simply type ‘***’ wherever you would like them to display in the text box.

Do you want to add a print option for your readers?

You have three options:

  1. Head over to PrintFriendly.com, create a free print button code and then paste it wherever you would like your print button to display in the markdown text box.

  2. Install Sumo.com social sharing icons which also give a ‘print’ icon option. You can see an example of this on my site by looking to the left of this screen.

  3. Simply create a ‘Print’ link in the text box that links to a copy of just the recipe that you’ve stored on Google Drive or the like.

Do you want to add nutritional information to your recipe card?

I like to use Very Well Fit to calculate nutritional information:

  • You simply copy and paste the ingredients for a recipe.

  • Select the number of servings, click ‘analyze recipe’.

  • And then you can tweak the ingredients to include specific name brand products, etc. before calculating the nutritional information.

  • Scroll down and then you can either use this nutritional information as a reference to add calories and fat to both the recipe card text box and the JSON-LD generator. Or, you can even copy a code to embed a nutritional label for your post!

Do you want to add affiliate links to ingredients used in recipes?

Simply highlight the ingredient in your recipe card, click the link icon at the top of the markdown text box and enter your unique affiliate link.

Once you have your template looking just as you would like it, I would suggest keeping a copy of it saved as a blog post draft and saved on your desktop within reach for easy copying and pasting each time you go to post a new recipe. It’s nice to have it all set-up so that when you go to post a new recipe, you simply need to insert your times, ingredients and instructions, etc.!

How to add schema markup to your recipe cards and get your recipes showing up in Google Search results:

Head on over to Technical SEO and insert your recipe information into the Schema Recipe Markup Generator:

  • Select ‘Recipe’ from the drop-down menu.

  • Fill out all applicable fields (the more, the better in Google’s eyes).

  • Copy and paste the JSON-LD code generated into a new code block anywhere in your blog post.

This code will be invisible to you, but very visible to Google!

To read more about Google rich snippets and getting your recipe to display in Google and Pinterest’s rich pins, please read this post of mine.

And, that’s it! You should have nice looking, user-friendly recipe cards showing in your posts and data-rich results displaying in Google! I so hope you found this tutorial helpful! And if you did , I would greatly appreciate you sharing and pinning this post so it can help more people looking for a recipe solution! And, if you have any questions or any feedback, that would be most welcome as well in the comments below!

Thank you. xo.

More Food Blogging with Squarespace posts you may find helpful:

Food Blogging With Squarespace: How To Get Recipe Star Ratings In Google Search Results

Food Blogging With Squarespace: Recipe Cards & How To Get Rich Snippets In Google Search Results

Markdown Text Block Resources you may find helpful:

Squarespace’s ‘Using Markdown Text Blocks’

Squarespace’s ‘Markdown Cheat Sheet’

Markdown Cheat Sheet by Adam Pritchard

And W3Schools.com is a wonderful resource for learning how to customize anything and everything on your website by learning CSS & HTML coding + more!

Are you using this recipe card on your site? Drop me a line or tag me on social media and I will link to your site in this post as an example for others!

Leave a Reply

Your email address will not be published. Required fields are marked *

 

20 Comments

  1. This is very helpful and valuable information I really appreciate you sharing this. I am going to give it a try. I too was also considering wordpress but for some reason I thought it would be more difficult. Thanks again

  2. Hi Kristin

    I just wanted to say thank you so much for your generosity in sharing this information and keeping it here now that you have moved to WordPress. I came across your site years ago when I was first researching recipe cards for Squarespace – and it still seems to be the best information around. I must say I was so disheartened when I saw on a FB group your notice that you had moved to WordPress! But at the same time I’m really glad to know it worked out for you and that it is possible to transition to WP.

  3. My border is only showing up on the left side and not the other 3 sides, how can I fix this?
    How can I center the recipe card other than just adding spacers on each side?
    How can I get it to print just the recipe card and not my whole page?
    How can I create a jump to recipe button as well to match my print button?

    1. Hi Erica –

      Being that I am no longer on Squarespace, it may be tricky to troubleshoot all but here goes!

      With the border, are you certain you have highlighted the contents of the recipe card in the editor and then pressed the quotations button (“”)? I ask because it will show as if one side has a border until you convert it to a quote block which then activates the CSS border code.
      This is tricky for me without being on the platform any longer. Do you have a sidebar or a full width page layout? I used this setup with a sidebar and all was centered perfectly. But I do recall spacers often being the only option for resolving things such as this on Squarespace.
      At the time of me writing this there were limited options/workarounds for printing. With a printfriendly.com button or Sumo social sharing tools print option, a user can delete what they do not want printed in the print dialog box that opens when they click the print button. It isn’t ideal but one option that was available. I preferred to simply write a PRINT link in my recipe card that linked to a Google doc with nothing but the recipe in simple font. That seemed to have worked best.
      There isn’t a code or plugin that will do this automatically for posts, but you can use anchor links to create your own in each post. Follow this Squarespace tutorial to do just that: https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links

      I hope this helps! 🙂

  4. Hi!

    Thank you for this information! I would actually love to hear more on why you moved over to wordpress. Is there a post on how you did this? I am considering moving my site over to wordpress as well!

    Thank you for all of this!

    1. Hi Samantha – my main reason for moving over was to save time! I found that while there are work-arounds for achieving the same things on Squarespace as you can on WordPress, it was becoming far too time-consuming to manually calculate nutrition, enter a recipe code in addition to the recipe, enter FAQ codes, enter video codes and so on and so forth. I was putting hours and hours into just one post to get it well optimized on Squarespace. Once I moved to WordPress, I was amazed at how quickly I was able to achieve the same things with the simple click of a button using plugins. It now only takes me a small fraction of the time I was spending on Squarespace to put posts together and they are even more well optimized thanks to plugins that convert to metric, etc. It was super easy to move over thanks to Big Scoots hosting. They transferred my entire site over at no extra cost, outside of regular monthly hosting fees. I could not recommend them enough! I hope this helps. 🙂

  5. Hi Kristen,

    I am also new to Squarespace and I am struggling with the code. I managed to put it in the markdown box, but when I head over to CSS, it keeps saying that the code has a mistake in the first line (I used the one you provided for CSS).

    Do you have any advice on how I could fix it?

    1. Hi Martina – I’m sorry you are encountering this issue. Unfortunately, because I am no longer on Squarespace, I am having trouble troubleshooting this for you. This is what I used when I was on Squarespace and it worked, but I’m wondering if maybe Squarespace has changed something or maybe your particular template isn’t compatible with it. I apologize, but I think if you could reach out to someone on Squarespace that knows coding, they may be able to figure it out!

  6. Are there common mistakes people make when using this code? I’m trying to troubleshoot! It was working beautifully and I was customizing it and had it so close to publishing then all the sudden it stopped working. I tried undoing my recent edits. I tried deleting the markdown and custom css and starting over with your code and now none of it is working! There is no border – just a thin white line to the left of text. Do you have any suggestions?

    1. Hmm, I’m sorry you’re encountering this! Are you certain that you highlighted all of the content in the markdown block and clicked the quote symbol to make sure it’s all enclosed in quotes? The box code is activated when it’s wrapped in quotes..

  7. Hi! Is there a way to make it smaller and make it print one one page? Is that easy to do? I may try this! Thank you!

    1. Hi, Laura! Are you referring to the border itself? If so, I offer instructions above. For any ‘px’ values placed in code form in CSS, you can adjust to suit any size desired. If you are not using a border, some font sizes, etc. can be adjusted in Design>Site Styles within the Squarespace editor. Both types of adjustments can be viewed in real time, so long as you have a markdown text block open in the viewer. As for printing, I’ve yet to find the perfect solution. The options outlined in the post above are all that I’ve found. The Sumo social plugin does allow people to delete what they do not want to print before printing. But, I personally now find the best option is to link to Google Drive doc (you can see an example in my latest posts) or PDF, so that readers can just print the recipe alone. I hope you don’t find this too confusing and I hope this helps! Please let me know if you have any other questions. 🙂

      1. I am very new to Squarespace and am using a template. Does this work with templates? I put the code into the text block and it shows up as code. I assume I need to put it somewhere else but I’ve googled the crap out of it and I still don’t know where to put the code. Can you help?

        1. Hi Delainy – Yes, it should work with any template. Just to troubleshoot – are you placing the code in a “Markdown Text” block specifically? I ask because it will not work in a plain text block . . .

        2. If you click the “+” symbol within the Squarespace post editor, you will see a dropdown box with different block options. You want to select the “Markdown Text Block” to insert it into your post. Once it’s inserted in your post, you can click it and add the recipe card code above. I hope this helps! Let me know if you have any further questions. 🙂

  8. ummmm WOW THANK YOU for this information I didn’t know I needed!! My blog looks so much better now and it was so easy!

    1. Hi Jenny – I appreciate the feedback. I’m so happy you found this helpful! Thank you for sharing. 🙂