We’ve Built Our Own Storyblok Integration!

Don’t have time to read our blog? Check out our YouTube playlist of step-by-step instructions for our Storyblok Integration!

---

As part of our ongoing commitment to innovate, the team at Media Lounge have been searching for the best way to deliver a rich, content-driven experience that developers, agencies and store owners alike can utilise easily.

If you’ve used Magento 2 for any significant length of time, you’ll know that its content management has, for the most part, been found to be very limited.

The main ways you can currently manage content include:

CMS Pages – these are of course used to create standalone pages for your eCommerce store. Magento offers a basic WYSIWYG editor powered by TinyMCE and allows almost any kind of HTML content to be used. While this works well for simpler pages, it can become difficult to maintain effectively as content layouts increase in complexity. Also, you cannot preview your work without saving the page first, which makes identifying and fixing issues much harder.

Static Blocks – also known as just ‘Blocks’, this content management option can be very useful to make sections of pages editable. The more complicated parts of the content of the Magento template (HTML, CSS, JS etc) can be extracted to make editing more straightforward. Although this is convenient, it doesn’t solve everything as splitting editable areas into multiple blocks will create dozens of them over time, and the admin interface doesn’t make this easy.

Widgets – these are arguably one of the more popular ways to edit content as they allow the management of HTML, CSS, JS etc behind a more easy-to-use interface. However, you still need a significant amount of boilerplate code to get even the simplest widgets to work and there are only a handful of field types provided out of the box.

As a number of clients prefer content-rich eCommerce stores that are easy for them to edit, we felt that we were already pushing the limits of what Magento could offer.

What About Magento’s Page Builder?

As a dedicated extension for creating content, the Page Builder within Magento Commerce is arguably better than the solutions previously mentioned thanks to its key features:

• Drag-and-drop functionality for content creation
• Live previews of how the content will look on the storefront
• Form editors for entering and customising the content

However, there are still a number of features that we didn’t like:

• Magento Commerce only (no certainty of it ever coming to Open Source)
• Lots of boilerplate code, even more so than widgets
• Using the default Magento frontend stack

With these issues in mind, the ML team decided to start looking externally for a viable option in the form of Magento Extensions, or third party services if you prefer the Headless approach. This is how we arrived at the decision to use Storyblok as our content management system of choice.

Storyblok combines a unique selection of visual editing tools and highly customisable content blocks with a modern architecture that gives anyone the ability to build content quickly and reliably.

Tweet this now

Why Storyblok?

Our team settled on Storyblok as it allows the management of content through a CMS that is both intuitive and powerful. Combine that with a unique selection of visual editing tools and highly customisable content blocks, it is a modern architecture that gives anyone the ability to build content quickly and reliably.

Storyblok also provides features similar to those provided by Magento’s Page Builder:

• Pages with visual editor
• Editable sections
• Custom fields
• Internationalisation support
• Content scheduling

After trialling the system, we realised that Storyblok was far superior to any other content management option we had used previously – and so we decided to create our own extension that would integrate Storyblok’s Visual Editor with Magento 2, in a way that developers could easily create and customise even the most complicated layouts.

Our Storyblok Integration module is currently available in the Magento Marketplace and can be installed in the same way as any other Magento 2 module. The module only lists Magento 2.4 in the Magento Marketplace but it does work with Magento 2.3 as long as it’s running PHP 7.3 or later. You can also install it directly from Packagist.

The integration has been kept as simple as possible, you won’t need to learn any new concepts to install it. Also bear in mind that before you start, you’ll need to create a Storyblok account – it is possible to start on their free tier but we recommend you upgrade to one of their paid plans if you’d like to use the more powerful features.

Maintaining SEO

As with all content management, we wanted to ensure that our Storyblok Integration did not negatively impact SEO performance. With that in mind, all the same SEO features available on native CMS pages are provided in this extension:

Sitemap integration – our integration will automatically include pages in the built-in Magento sitemap generator so they can be accessed and indexed by search engines. Only pages with the Content Type of ‘page’ will be included in the sitemap by default.

Custom SEO field – our Magento 2 module also provides support for the ‘meta-fields’ customer field which can be used in a Storyblok Space. You can add your SEO field type as part of your page schema, meaning the page title and description will be directly editable from Storyblok.

Custom field – one of the most powerful features of Storyblok is the ability to extend existing fields with custom code. Doing this grants almost limitless functionality that built-in fields may not necessarily provide. Custom fields are built entirely by Storyblok so our module simply facilitates that process, but the possibilities are endless.

Low Performance Footprint

To ensure our Storyblok Integration remained as lean as possible, its performance impact on Magento 2 has been kept to an absolute minimum. The module does not include blocks straight out of the box, nor does it add any additional CSS or JS to your store. You benefit from total freedom when it comes to customising your content using the technology at your disposal.

On top of that, we’ve utilised the cache tags already within Magento to individually cache Storyblok content to avoid making unnecessary HTTP requests.

Try It Yourself!

So why not give our integration a try? Head over to the Magento Marketplace to download today!

Storyblok provides a huge number of additional features that can easily be implemented via our Magento 2 integration, so we hope you find it as useful as we have! Please do let us know if you find any issues or problems with the module – you can report them in our official GitHub repository.

For more information, be sure to read our documentation or check out our YouTube playlist for step-by-step instructions.