This functionality existed on the custom taxonomy recipe collection archive pages where editors could add individual recipes to the collection sections and drag and drop the recipes in the order they wanted them to appear. However, they were not able to add the same functionality to a page (in the WordPress sense).

We needed to give editors the ability to add a recipe collection section to a regular page. Adapting the existing functionality into a custom Gutenberg block gave our client the ability to create the pages they needed for their upcoming campaign.

Block Functionality Needs

On the campaign page our client was creating, they wanted to showcase a collection of recipes in any order they wanted. They wanted a Load More button in case there was more than one row of recipes. The user could choose to see them or not.

Our client also wanted a button that linked to the recipe collection term archive page. Since the functionality existed in another part of the site, I looked at how it was built to inform how to create the new Gutenberg block.

Custom Recipe Collection Block

Enter the custom recipe collection block. Creating a custom Gutenberg block meant our client could add the recipe collection section to any page, post, or custom post type, on any part of the site.

In the admin, editors are able to set the block’s title and description and use a dropdown to select their desired recipe collection term. When the recipe collection term is selected, the block title and description automatically populate with the term name and description. Both the block title and description can be manually overridden if the editor chooses.

Once the recipe collection is chosen, recipes are individually selected and added to the block. When recipes are added manually, only those recipes are displayed in this custom Gutenberg block.

The recipes may be dragged and dropped into the order they should appear. The order in which the recipes are arranged is the order in which they display in the collection block.

If no recipes are selected, then all recipes from the collection are listed and sorted by rating. The block also allows the user to toggle between displaying a button that links to the recipe collection archive.

Need a Custom Gutenberg Block on Your Website?

While this particular solution was developed for a CPG client, any company in any industry benefits from the specialized functions of a custom Gutenberg block. When you find yourself in need of one on your site, contact WebDevStudios.

The post We Built a Custom Gutenberg Block for a CPG Client appeared first on WebDevStudios.

Consumers everywhere are paying attention to the ingredients that we are consuming and the potential negative effects those ingredients have. Consumers want to know the ingredients of their food, hair, skin, makeup, household, baby products and more. It has given rise to new businesses that use more natural ingredients and it forces older corporations to adapt by reevaluating the ingredients currently in their products. 

Benefits of Product Transparency

This movement doesn’t just benefit consumers, but also you as a business. If you are transparent about your ingredients, it will help you to build trust and loyalty with your consumer. According to a survey conducted by Ingredient Communications, 73% of consumers are willing to spend a higher retail price for ingredients they recognize and trust. When I shop, I will always buy the higher-priced item, if I know and can pronounce all of the ingredients. I will stick with a brand if it has earned my trust. 

If you are too embarrassed to showcase your ingredients, it may be time for you to revamp your products and use ingredients that are considered clean. According to Food Insider, global sales of clean-label products hit $165 billion in 2015 and is projected to reach $180 billion this year. Jump on board so you can get a piece of that pie. 

Online grocery sales are also predicted to be a $100 billion dollar industry by 2022 and will account for 20% of all grocery sales, according to the Food Marketing Institute. This means that your website and products need a strong online presence to ensure you’re capturing those online consumers. By listing all of the ingredients of your products on your website, you are improving your SEO keywords and becoming more visible to online consumers who are searching for products with those ingredients!

Displaying Ingredients on Your Website 

Add Ingredients to Your Product Page

The simple way for displaying ingredients on your consumer goods site is by creating a page for each of your products. You can have images of the product, descriptions, add-to-cart button, if they can buy online, and a section that lists all of your ingredients. Please be sure to make the ingredients really stand out and noticeable. 

One of our clients, Campbell Soup Company, does this really well on their Well-Yes website. They have a Featured Ingredients section highlighting key ingredients and nutrition information. This section also has eye-catching images of vegetables, beans, and peppers, which makes me feel as if I picked those from the garden and made the soup myself. If I scroll further down, their ingredients are prominently displayed, easy to read, and are all ingredients I recognize and trust. 

On the Pepperidge Farm site, we created this template for Campbell Soup Company to again showcase the ingredients of Goldfish Crackers. Who knew that Goldfish Crackers contained beets?!

Where Are Your Ingredients Sourced?

If you get your ingredients from local farmers or you source from other countries, it may be a great idea to create a web page showing where those ingredients come from. Are your ingredients fair-trade or sourced from another country? You can showcase the people and the culture that contribute to that product.

Are your ingredients sustainable or eco-friendly? Showcase the animals or environment you are saving and the great impact your products have. You can create a separate page or site with all of the information consumers may want to know about your ingredients and where it came from.

WebDevStudios worked with the Campbell Soup Company to build an informational website: What’s In My Food? Campbell’s is rightly proud of the food they make and understands that their consumers may have questions about the ingredients used in their products. We created a transparent website project with What’s In My Food? that gives you all of the information you need to know about your food and its ingredients. 

Control the Narrative

Some ingredients you use may have a bad reputation. Blogs, social media and other news outlets can ruin your brand if they release content that sheds a negative light on ingredients you’re using. The vegan brand, Impossible Burgers, received a lot of backlash for an ingredient they use, Heme, which gives the product its “bloody” look and iron-rich flavor. 

The news outlets scared me and I thought about not eating Impossible Burgers anymore, especially when I found out it was made in labs. Before giving up completely, I went to their website and was impressed by how Impossible Burgers took control of the narrative by thoroughly explaining that ingredient on their website.

They show exactly how it’s made in their labs, showcase how sustainable it is, and how it helps to save the environment. They are also transparent about the labs and scientists who create the product, which is a level of transparency I’ve never seen before! Equipped with both sides of the story, I was able to make a decision to keep supporting their products.

Nutritional Facts Panel Plugin

Campbell Soup Company is 151 years old and I am willing to bet they’ve lasted this long because they adjust with the times. We built a Nutritional Facts Panel Plugin in WordPress for their website that displays all of the nutritional facts for their products. In addition to viewing ingredients, consumers can also easily see the serving size, vitamins, minerals protein, sugars, etc. in their products. 

With the increase in online shopping, this feature helps consumers to see important information you typically can only see if you’re holding the physical product in the store. One challenge of this feature is ensuring the panel stays compliant with FDA Regulations; so that means it needs to be regularly updated when there are changes. 

Conclusion

Society is no longer blindly consuming or purchasing products. Reading ingredients is critical to ensure that people are consuming products that are good for their health, prevents diseases, do not trigger allergies and are eco-friendly. For some people, it’s also important that the product be sustainable, fair-trade, cruelty-free or vegan. Don’t neglect the importance of displaying ingredients on your consumer goods website. Use this as an opportunity to show consumers you are aware and just as concerned about these issues.

Interested in a solution like this for your consumer goods website? Contact us!

The post Product Transparency: Displaying Ingredients on Your Consumer Goods Website appeared first on WebDevStudios.