mayank_mishra.jpeg

Mayank Mishra, VP of Engineering

Unifed authoring experience.svg

<p>Personalization has been around for years. Every marketer talks about it. Every company says they’re doing it. But here’s the truth — <strong>they’re all missing something</strong>.</p><p>At Contentstack, we have spent years studying this, talking to marketers, developers and businesses. The problem wasn’t just about having better tools. It was <strong>how </strong><a href="https://www.contentstack.com/platforms/personalize"><strong>personalization</strong></a><strong> was built into the system</strong>.&nbsp;</p><p>Vendors kept focusing on tweaks, fixes, and developer-intensive solutions, but none took a step back to address the core problem — the content management system (CMS) at the heart of the content engine.</p><p>And then, we found the answer.&nbsp;</p><p>It wasn’t in the endless updates to APIs or in content models that developers have to touch every time you want to run a campaign. It was something much simpler and much more powerful.&nbsp;</p><p>It was <strong>Variants</strong>.</p><h2>What are Variants?</h2><p>At its core, <strong>a Variant is an alternate version of content that lives within the same CMS structure</strong>. Think of it as a customizable layer, where different versions of your content can be personalized for specific audiences — without changing the underlying content model or engaging developers every time.</p><p>This approach makes <a href="https://www.contentstack.com/platforms/personalize">personalization</a> a natural extension of your CMS, not an external process that complicates things.&nbsp;</p><p>Instead of manually altering the backend, <strong>Variants allow marketers to create and manage different versions of content</strong>, empowering them to adjust messaging, images or layouts for different customer segments with ease.&nbsp;</p><p>It’s like having multiple tailored versions of the same campaign ready to go at a moment’s notice.&nbsp;</p><p></p><img asset_uid="blt7f697b89161ddc26" src="https://images.contentstack.io/v3/assets/blt7359e2a55efae483/blt7f697b89161ddc26/66f1c78fa4163f75fbd372fa/Unifed_authoring_experience.svg" alt="Unifed authoring experience.svg" height="auto"/><h2>This changes everything</h2><p>Everyone was focused on making personalization better — but not easier. They forgot about the real people in the process: <strong>the marketers, the creators, the innovators</strong>. They were held back, waiting for developers to adjust the backend. By the time changes were made, the moment had passed.</p><p>That’s where <strong>Variants</strong> come in.&nbsp;</p><p>Variants allow personalization to be built <strong>right into the </strong><a href="https://www.contentstack.com/platforms/headless-cms"><strong>CMS</strong></a> — native and integrated — but without messing with the system. No more tweaking content models, no more waiting on developers for months to modify APIs.&nbsp;</p><p>After a simple, <strong>one-time setup</strong>, marketing teams can create, manage and launch personalized campaigns <strong>as quickly as they can imagine them</strong>.&nbsp;</p><h2>Simple, effortless, fast, powerful</h2><p>This is what’s been missing, and it’s so simple. With Variants, personalization is no longer a technical problem. It’s a creative opportunity. This is what marketers have been waiting for — <strong>a tool that lets them focus on their ideas</strong>, not how to make the system work.&nbsp;</p><p>With <strong>Variants</strong>, marketers have the <strong>freedom</strong> to <strong>experiment, launch and iterate </strong>—<strong> in real time</strong> — dramatically reducing their campaign launch times.</p><p>This isn’t just a new feature. It's the new way of working.&nbsp;</p><p>It’s <a href="https://www.contentstack.com/platforms/personalize"><strong>personalization reimagined</strong></a><strong>.</strong></p>

Personalization has been around for years. Every marketer talks about it. Every company says they’re doing it. But here’s the truth — 

At Contentstack, we have spent years studying this, talking to marketers, developers and businesses. The problem wasn’t just about having better tools. It was 

Vendors kept focusing on tweaks, fixes, and developer-intensive solutions, but none took a step back to address the core problem — the content management system (CMS) at the heart of the content engine.

It wasn’t in the endless updates to APIs or in content models that developers have to touch every time you want to run a campaign. It was something much simpler and much more powerful. 

a Variant is an alternate version of content that lives within the same CMS structure

. Think of it as a customizable layer, where different versions of your content can be personalized for specific audiences — without changing the underlying content model or engaging developers every time.

 a natural extension of your CMS, not an external process that complicates things. 

Instead of manually altering the backend, 

Variants allow marketers to create and manage different versions of content

, empowering them to adjust messaging, images or layouts for different customer segments with ease. 

It’s like having multiple tailored versions of the same campaign ready to go at a moment’s notice. 

Everyone was focused on making personalization better — but not easier. They forgot about the real people in the process: 

the marketers, the creators, the innovators

. They were held back, waiting for developers to adjust the backend. By the time changes were made, the moment had passed.

Variants allow personalization to be built 

 — native and integrated — but without messing with the system. No more tweaking content models, no more waiting on developers for months to modify APIs. 

, marketing teams can create, manage and launch personalized campaigns 

This is what’s been missing, and it’s so simple. With Variants, personalization is no longer a technical problem. It’s a creative opportunity. This is what marketers have been waiting for — 

a tool that lets them focus on their ideas

 — dramatically reducing their campaign launch times.

This isn’t just a new feature. It's the new way of working. 

variants_hero_hero.png

Variants: The breakthrough personalization has been waiting for

<p>The need to reach out to a larger market is pushing retailers to create an online presence. While there are a wide variety of online tools available to create an ecommerce website, choosing the best from the lot can be a little daunting.</p><p>Several ecommerce solution providers offer a <em>one-size-fits-all</em>&nbsp;package—including content management system (CMS)—for various requirements. This approach&nbsp;takes away the flexibility and expertise that each component can provide individually. The best approach is to use various best-in-breed microservices and combine them to create a solution that is more flexible and easy to use.</p><p>We recommend using a popular ecommerce solution provider (such as Snipcart) for the shopping cart needs of your site and Contentstack for managing the content. Snipcart&nbsp;enables you to integrate the basic functionalities of a&nbsp;shopping cart (sell items, process payments, manage orders) to your site, while Contentstack&nbsp;(being an API-first, headless CMS) lets you easily create, manage and deliver content to your ecommerce website (or to any other digital properties).</p><p>In this step-by-step tutorial, we will show you how to integrate Snipcart directly within&nbsp;Contentstack in a few simple steps. The resulting package is a powerful, easy-to-use ecommerce backend that is scalable and can be used by developers and business owners alike.</p><h2>Prerequisites</h2><ul><li><a href="http://snipcart.com" target="_blank">Snipcart</a> account</li><li>Contentstack account</li></ul><p><br />Note<strong>:</strong> For this tutorial, we have assumed that you are familiar with Contentstack and Snipcart. If not, then please refer to the docs (<a href="https://www.contentstack.com/docs" target="_blank">Contentstack docs</a> and <a href="https://docs.snipcart.com/" target="_blank">Snipcart docs</a>) for more details.</p><h2>Setting It Up</h2><p>Now, let’s get started with the steps.</p><h3>Step 1: Create a stack</h3><p>Log in to your Contentstack account, and create a new stack. This stack will hold all the data, specific to your ecommerce website. <a href="https://www.contentstack.com/docs/developers/set-up-stack/" target="_blank">Learn more on how to create a stack</a>.</p><h3>Step 2: Add a publishing environment</h3><p>In Contentstack, a publishing environment is the destination server where the content is published. <a href="https://www.contentstack.com/docs/developers/set-up-environments/" target="_blank">Read more about environments</a>.</p><p>To add an environment, navigate to Settings&nbsp;&gt; Environment, and click on the "+ New Environment"&nbsp;tab.</p><p>Provide a suitable name for your environment, say "staging."&nbsp;Specify the base URL (e.g. http://YourDomainName.com), and select the language (e.g. English - United States). Then, click on <em>Save</em>.</p><h3>Step 3: Import content types</h3><p>A content type is like the structure or blueprint of a page or a section of your web or mobile property. <a href="https://www.contentstack.com/docs/developers/create-content-types/" target="_blank">Read more about Content Types</a>.</p><p>For this&nbsp;ecommerce website&nbsp;example, four basic content types are required: Header, Footer, Category, and Product. For quick integration, we have already created these content types. You simply need to import them to your stack. You can also create your own content types. <a href="https://www.contentstack.com/docs/developers/create-content-types/" target="_blank">Learn how to do this here</a>.</p><p>To import the content types, first save the zipped folder of the JSON files given below on your local machine. Extract the files from the folder. Then, go to your stack in Contentstack. The next screen prompts you to either create a new content type or import one into your stack. Click the "Import"&nbsp;link, and select the JSON file saved on your machine.</p><p>Here’s a brief overview and download links of all the content types required for this project:</p><p><span style="font-weight: 600;color: #787981;">Header:</span> This content type lets you add content for the header section of the site.&nbsp;</p><p><span style="font-weight: 600;color: #787981;">Footer:</span> The Footer content type enables you to add content for the footer section of your site.&nbsp;</p><p><span style="font-weight: 600;color: #787981;">Category:</span> This content type lets you create the various categories of the products of your ecommerce website. The fields of this content type include name and URL.</p><p><span style="font-weight: 600;color: #787981;">Product:</span> This content type will help you create the product entries of your ecommerce site. The fields include name, URL, category, price, image, and so on.</p><p><a href="https://github.com/builtio-contentstack/contentstack-snipcart-nodejs-demo/blob/master/content_types.zip?raw=true">Click here to download content types</a>.</p><p style="text-align: start;">Now that all the content types are ready, let’s add some content for your ecommerce website.</p><h3>Step 4: Add&nbsp;content</h3><p><span style="font-weight: 600;color: #787981;">Create entries for the Category&nbsp;and Products&nbsp;content type.</span> Add a few entries each for the Category&nbsp;and Products&nbsp;content type. Save and publish these entries. <a href="https://www.contentstack.com/docs/content-managers/#author-content">Learn how to create and publish entries</a>.</p><p><span style="font-weight: 600;color: #787981;">Create entries for the header&nbsp;and footer&nbsp;content types.</span> Using the header&nbsp;content type, add the name and other details of your site. Similarly, add footer content using the footer&nbsp;content type.</p><p>With this step, you have created sample data for your ecommerce site. Now, it’s time to setup your Snipcart account and initiate Contentstack app.&nbsp;</p><h3>Step 5: Setup Snipcart account</h3><p>If you do not have an account, you can <a href="https://app.snipcart.com/register">register for one here</a><a href="https://app.snipcart.com/register" target="_blank"><br /></a>. When signing up, you can leave the field asking for website URL blank or enter a random value. This can be updated later.&nbsp;</p><h3>Step 6: Build and configure website</h3><p>Since Contentstack is a headless CMS, the content created and saved in it can be consumed by any platform, any channel, anywhere. However, to get your app up and running quickly, we have created a sample ecommerce webapp (using Node.JS) for this project.</p><p><a href="https://github.com/builtio-contentstack/contentstack-snipcart-nodejs-demo">Click here to download code</a>.</p><p>Note: The website uses the Content Delivery API (which has in-built CDN support) to deliver content to the ecommerce website. Read more about our <a href="https://www.contentstack.com/blog/contentstack-meets-cdn" target="_blank">CDN-enabled content delivery system</a>.<br /></p><p>Once you have downloaded the project, add your Snipcart key, Contentstack API Key and Access Token to the project. The <span style="font-weight: 600;color: #787981;">config/all.js</span> file would look something like this:</p><pre>    port: 4000,<br />    // Contentstack Config<br />    contentstack: {<br />        api_key: '',<br />        access_token: ''<br />    },<br />    // Snipcart Key<br />    snipcart_key: ''<br /></pre><p>Fire up your terminal (command prompt or similar on Windows), point it to your project location and run the following:</p><pre>    npm install<br />    npm start<br /></pre><p>This will initiate your project. However, you will not be able to fully use the checkout process until the project is live on a domain.</p><h3>Step 7: Go live</h3><p>You can make the application live by deploying it on any cloud hosting service. In this tutorial, we have used Zeit’s Now. <a href="https://zeit.co/download" target="_blank">You can download Zeit's Now&nbsp;from here</a>.</p><p>Run Zeit Now to deploy. Every time you run Now, you get a new deployment!<br /></p><p><em>contentstack-snipcart-nodejs-demo$ now</em></p><p>The first time you run Now, it will ask for your email address for verification. Simply click on the email you have received, and you will be logged in automatically.</p><p>Once the deployment has started, you will get a link (copied to your clipboard) that you can share immediately with your peers, even before the upload and startup completes!</p><h3>Step 8: Connecting to Snipcart</h3><p>The last step is to update your Snipcart settings to point to your new Now site online.</p><p>Go to your Snipcart dashboard, click on "Account", and then "Domains &amp; URLs." Enter your now website URL under "Default Website Domain" and save your settings.</p><p>Your ecommerce site should now be up and running! Try viewing your categories, adding items to your cart, and checking out. While your Snipcart account is in test mode, no purchases will actually be made.<br /></p>

The need to reach out to a larger market is pushing retailers to create an online presence. While there are a wide variety of online tools available to create an ecommerce website, choosing the best from the lot can be a little daunting.

Several ecommerce solution providers offer a 

 package—including content management system (CMS)—for various requirements. This approach takes away the flexibility and expertise that each component can provide individually. The best approach is to use various best-in-breed microservices and combine them to create a solution that is more flexible and easy to use.

We recommend using a popular ecommerce solution provider (such as Snipcart) for the shopping cart needs of your site and Contentstack for managing the content. Snipcart enables you to integrate the basic functionalities of a shopping cart (sell items, process payments, manage orders) to your site, while Contentstack (being an API-first, headless CMS) lets you easily create, manage and deliver content to your ecommerce website (or to any other digital properties).

In this step-by-step tutorial, we will show you how to integrate Snipcart directly within Contentstack in a few simple steps. The resulting package is a powerful, easy-to-use ecommerce backend that is scalable and can be used by developers and business owners alike.

 For this tutorial, we have assumed that you are familiar with Contentstack and Snipcart. If not, then please refer to the docs (

Log in to your Contentstack account, and create a new stack. This stack will hold all the data, specific to your ecommerce website. 

In Contentstack, a publishing environment is the destination server where the content is published. 

To add an environment, navigate to Settings > Environment, and click on the "+ New Environment" tab.

Provide a suitable name for your environment, say "staging." Specify the base URL (e.g. http://YourDomainName.com), and select the language (e.g. English - United States). Then, click on 

A content type is like the structure or blueprint of a page or a section of your web or mobile property. 

For this ecommerce website example, four basic content types are required: Header, Footer, Category, and Product. For quick integration, we have already created these content types. You simply need to import them to your stack. You can also create your own content types. 

To import the content types, first save the zipped folder of the JSON files given below on your local machine. Extract the files from the folder. Then, go to your stack in Contentstack. The next screen prompts you to either create a new content type or import one into your stack. Click the "Import" link, and select the JSON file saved on your machine.

Here’s a brief overview and download links of all the content types required for this project:

 This content type lets you add content for the header section of the site. 

 The Footer content type enables you to add content for the footer section of your site. 

 This content type lets you create the various categories of the products of your ecommerce website. The fields of this content type include name and URL.

 This content type will help you create the product entries of your ecommerce site. The fields include name, URL, category, price, image, and so on.

Now that all the content types are ready, let’s add some content for your ecommerce website.

Create entries for the Category and Products content type.

 Add a few entries each for the Category and Products content type. Save and publish these entries. 

Create entries for the header and footer content types.

 Using the header content type, add the name and other details of your site. Similarly, add footer content using the footer content type.

With this step, you have created sample data for your ecommerce site. Now, it’s time to setup your Snipcart account and initiate Contentstack app. 

. When signing up, you can leave the field asking for website URL blank or enter a random value. This can be updated later. 

Since Contentstack is a headless CMS, the content created and saved in it can be consumed by any platform, any channel, anywhere. However, to get your app up and running quickly, we have created a sample ecommerce webapp (using Node.JS) for this project.

Note: The website uses the Content Delivery API (which has in-built CDN support) to deliver content to the ecommerce website. Read more about our 

Once you have downloaded the project, add your Snipcart key, Contentstack API Key and Access Token to the project. The 

Fire up your terminal (command prompt or similar on Windows), point it to your project location and run the following:

This will initiate your project. However, you will not be able to fully use the checkout process until the project is live on a domain.

You can make the application live by deploying it on any cloud hosting service. In this tutorial, we have used Zeit’s Now. 

Run Zeit Now to deploy. Every time you run Now, you get a new deployment!

The first time you run Now, it will ask for your email address for verification. Simply click on the email you have received, and you will be logged in automatically.

Once the deployment has started, you will get a link (copied to your clipboard) that you can share immediately with your peers, even before the upload and startup completes!

The last step is to update your Snipcart settings to point to your new Now site online.

Go to your Snipcart dashboard, click on "Account", and then "Domains & URLs." Enter your now website URL under "Default Website Domain" and save your settings.

Your ecommerce site should now be up and running! Try viewing your categories, adding items to your cart, and checking out. While your Snipcart account is in test mode, no purchases will actually be made.

creating-an-ecommerce-site.jpeg

Integrating Headless CMS Contentstack with Ecommerce Solution Snipcart

<p>Working with content structure is one of the most common—and challenging—tasks for a developer. Are you looking out for the easiest technique to build and customize your content? Here’s where our new content type builder comes in handy. You can now build your content structure in just a few minutes, or rather, a few seconds!
</p>
<p>This new release makes working with content easy and flexible! It’s packaged with enhanced features to quickly create content types, add fields using the drag-and-drop functionality, edit field properties in real time, rearrange fields, label them, and do a lot more.</p>
<p>Follow the instructions below to set it up.</p>
<h3>1. Create&nbsp;a Content Type</h3>
<p>When creating a new content type, name it, and select the kind of content type you want—"Webpage" or "Content&nbsp;Block". If you want to add a single entry, select "Single,"&nbsp;otherwise, select "Multiple" for multiple entries.
</p>
<h3>2. Drag and Drop Fields</h3>
<p>Build powerful content structures that require no technical expertise. Just drag and drop the fields you want from the list available in the right panel. To learn more, read the <a href="https://www.contentstack.com/docs/developers/create-content-types/">Content Types documentation</a>.
</p>
<iframe src="//fast.wistia.net/embed/iframe/b8ats0op43" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" oallowfullscreen="oallowfullscreen" msallowfullscreen="msallowfullscreen" width="640" height="388">
</iframe>
<h3>Realtime Field Editing</h3>
<p>The changes made to your field properties are reflected immediately. Simply click on the selected field to edit its properties, and watch your changes happen in real time. For instance,&nbsp;Contentstack has the Instructional Value, Placeholder Text, and Help Text fields designed to help content editors manage content. If you edit any of these fields, the UI reflects it simultaneously.
</p>
<iframe src="//fast.wistia.net/embed/iframe/r6ybkilb60" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" oallowfullscreen="oallowfullscreen" msallowfullscreen="msallowfullscreen" width="640" height="388">
</iframe>
<h3>Rearrange Fields in No Time</h3>
<p>To rearrange fields, drag them using the grip icon (dots) appearing on the left side of the field.
</p>
<iframe src="//fast.wistia.net/embed/iframe/6po7itxtqi" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" oallowfullscreen="oallowfullscreen" msallowfullscreen="msallowfullscreen" width="640" height="388">
</iframe>
<h3>Easy Categorization</h3>
<p>Organize the content types in your stack by adding labels. You can add and nest as many labels as you need for easy access.
</p>
<iframe src="//fast.wistia.net/embed/iframe/6po7itxtqi" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" oallowfullscreen="oallowfullscreen" msallowfullscreen="msallowfullscreen" width="640" height="388">
</iframe>

Working with content structure is one of the most common—and challenging—tasks for a developer. Are you looking out for the easiest technique to build and customize your content? Here’s where our new content type builder comes in handy. You can now build your content structure in just a few minutes, or rather, a few seconds!

This new release makes working with content easy and flexible! It’s packaged with enhanced features to quickly create content types, add fields using the drag-and-drop functionality, edit field properties in real time, rearrange fields, label them, and do a lot more.

Follow the instructions below to set it up.

When creating a new content type, name it, and select the kind of content type you want—"Webpage" or "Content Block". If you want to add a single entry, select "Single," otherwise, select "Multiple" for multiple entries.

Build powerful content structures that require no technical expertise. Just drag and drop the fields you want from the list available in the right panel. To learn more, read the 

wistia_embed

The changes made to your field properties are reflected immediately. Simply click on the selected field to edit its properties, and watch your changes happen in real time. For instance, Contentstack has the Instructional Value, Placeholder Text, and Help Text fields designed to help content editors manage content. If you edit any of these fields, the UI reflects it simultaneously.

To rearrange fields, drag them using the grip icon (dots) appearing on the left side of the field.

Organize the content types in your stack by adding labels. You can add and nest as many labels as you need for easy access.

New Content Type Builder.jpg

New Content Type Builder Makes Creating Content Structures Easy

<p>We are excited to announce a major update to&nbsp;Contentstack, our award-winning CMS. These updates include import and export functionality; now you can download the schema of a form in JSON format and import it back into Contentstack. This is a very useful feature if you want to introduce changes across several entries or forms, or simply keep backups of your data in Contentstack.</p>
<p dir="ltr">We’ve also introduced <a title="webhooks" href="https://www.contentstack.com/docs/developers/set-up-webhooks/" target="_blank">webhooks</a>, which provide a way to integrate&nbsp;Contentstack with other applications. Webhooks can be triggered for all significant events on your websites and provide notifications in a format easily understood by applications. Simply add a trigger URL and specify a condition that will trigger this webhook.</p>
<p dir="ltr">With the latest release we now provide an interface for developers to view comprehensive records of all events associated with a website. The Audit Logs screen lists all events since the inception of the website. This is especially helpful for site owners to monitor the activities of all collaborators on the website, along with the public IP from which they performed the action.</p>
<p dir="ltr">There is now a filter for the Publish Status and a facility to specify a date range. The format changed from a timeline view to a tableview, which is more intuitive and focuses on providing comprehensive information to the user.</p>
<p dir="ltr">To show you just how easy and intuitive it is to use&nbsp;Contentstack, our youngest ever intern is going to teach you how to update the “News and Awards” page on the Built.io website:</p>
<p dir="ltr">You can read more about the Contentstack update in our <a title="press release" href="http://www.prnewswire.com/news-releases/builtio-contentstack-adoption-soars-as-it-launches-new-enterprise-features-300114151.html" target="_blank">press release</a>.</p>

We are excited to announce a major update to Contentstack, our award-winning CMS. These updates include import and export functionality; now you can download the schema of a form in JSON format and import it back into Contentstack. This is a very useful feature if you want to introduce changes across several entries or forms, or simply keep backups of your data in Contentstack.

, which provide a way to integrate Contentstack with other applications. Webhooks can be triggered for all significant events on your websites and provide notifications in a format easily understood by applications. Simply add a trigger URL and specify a condition that will trigger this webhook.

With the latest release we now provide an interface for developers to view comprehensive records of all events associated with a website. The Audit Logs screen lists all events since the inception of the website. This is especially helpful for site owners to monitor the activities of all collaborators on the website, along with the public IP from which they performed the action.

There is now a filter for the Publish Status and a facility to specify a date range. The format changed from a timeline view to a tableview, which is more intuitive and focuses on providing comprehensive information to the user.

To show you just how easy and intuitive it is to use Contentstack, our youngest ever intern is going to teach you how to update the “News and Awards” page on the Built.io website:

You can read more about the Contentstack update in our 

Mayank Mishra, VP of Engineering

Posts by Mayank Mishra, VP of Engineering