Written By:
Bryce Choquer
Founder, CEO

Try Penni Cart Today!

Discover the ultimate customization for your Webflow store. Get started for free.

Try for free
December 1, 2024
Article

Elevate Your Website with Webflow Schema Markup

How to Add Schema Markup to Webflow Ecommerce

Introduction

Adding schema markup to your Webflow Ecommerce store can increase search visibility. With structured data you can show product information such as price, availability and reviews in search results. This guide will cover how to add schema markup only for Ecommerce pages in Webflow.

Step-by-Step Guide to Adding Schema Markup for Webflow Ecommerce

1. Choose the Relevant Schema Type for Ecommerce For an Ecommerce site you’ll use:

  • Product Schema: Shows product name, price, availability and reviews.
  • Breadcrumb Schema: Helps search engines understand your site’s structure.
  • Offer Schema: Highlights discounts and special offers.

Example Product Schema:

{ "@context": "https://schema.org",  "@type": "Product",  "name": "Example Product",  "image": [    "https://example.com/image1.jpg",    "https://example.com/image2.jpg"  ],  "description": "A brief description of the product.",  "brand": {    "@type": "Brand",    "name": "Example Brand"  },  "offers": {    "@type": "Offer",    "priceCurrency": "USD",    "price": "29.99",    "availability": "https://schema.org/InStock",   "url": "https://example.com/product-page"  },  "aggregateRating": {    "@type": "AggregateRating",   "ratingValue": "4.5",    "reviewCount": "25"  }}

2. Add Schema Markup to Ecommerce Pages

Open the Settings for the relevant Ecommerce page or product template.


  • Scroll to the Custom Code section.
  • Add the JSON-LD schema markup in the <head> or <footer>.


  • Use Webflow CMS fields to populate schema data dynamically. For example:
  • Use {{Product Name}} for product name.
  • Use {{Price}} for product price.
  • Use {{Product Image URL}} for product images.

3. Test Schema

  • After adding the schema markup use Google’s Rich Results Test to test your schema.
    • https://search.google.com/test/rich-results
  • Make sure all data is populated and there are no warnings or errors.

Summary

Adding schema markup to your Webflow Ecommerce site will increase your product pages visibility in search results and drive more clicks and sales. Done right and your site will stay competitive and users will get product information in search results.

related Articles

December 5, 2024
Article

Webflow Ecommerce to Google Merchant Center

Connect your Webflow Ecommerce store to Google Merchant Center. Learn how to create and manage product feeds for Shopping Ads and free listings.

September 19, 2024
Article

How to Reduce Abandoned Shopping Carts with Custom Solutions

Abandoned shopping carts are a big problem in eCommerce. Creating an ecommerce fully functional can be expensive and challenging.

September 19, 2024
Article

How to Start an eCommerce on Webflow?

Starting an online store is both exciting and overwhelming. Webflow is a flexible design platform for creating an eCommerce site