12 CMS Best Practices for eCommerce Stores
Storyblok is the first headless CMS that works for developers & marketers alike.
Garbage In, Garbage Out (GIGO), an acronym used in computer science, implies that the quality of what you put in determines the quality of what comes out the other end. This statement holds true for a content management system (CMS). If you want strong content out, you need to change how you create and deliver content with your CMS.
Smart eCommerce businesses implement CMS best practices across five key areas: accessibility, performance, personalization, collaboration, and security, to improve the overall functionality and shopping experience of their online stores.
Accessibility is a core Google Lighthouse performance metric — yet many businesses do not prioritize it. WebAIM’s 2022 Report shows that only just over 3% of the world’s top one million websites offer full accessibility. Full accessibility means that users with different disabilities can seamlessly access and navigate your eCommerce store.
To improve accessibility, your eCommerce store must align with the four core principles of the Web Content Accessibility Guidelines (WCAG) — Perceivable, Operable, Understandable, and Robust.
- Perceivable means your website content and interface are fully identifiable through sight, sound, or touch.
- Operable means users can easily navigate your website using their hands, voice, or assistive technologies.
- Understandable means the website content, interface, and layout are easy for everyone to understand.
- Robust means the website can be easily accessed on different devices and technologies.
Best practices for making your eCommerce store more accessible
To improve accessibility, you should:
Add accessible iFrames for video content
An iFrame is an HTML element used for embedding content from another website into a webpage. For example, you can use iFrames to add a YouTube video to your blog posts, allowing users to watch the video without leaving the page.
To make your iFrames accessible, you need to add alt text attributes to the iFrame in your CMS. Alt text attributes basically tell website visitors what a video is about, even if they can’t see the video. In Storyblok, you can add alt text attributes to iFrames by creating nestable components for rich-text fields. This allows you to include titles and descriptions for embedded videos.
Control contrast ratio
The contrast ratio determines how dark or bright colors appear on your website — especially for visually impaired users. Visually impaired website visitors need strong contrast between foreground and background colors to view website images and read highlighted texts easily.
Your eCommerce store’s color contrast ratio should align with two important Web Content Accessibility Guidelines:
- A minimum contrast ratio of at least 4.5:1 for normal text and embedded images with texts
- A minimum contrast ratio of 3:1 for large texts and visual elements
Use WebAIM’s contrast checker to test color contrast before UI implementation on your website.
You can further improve contrast by using multiple visual elements to convey information — not just colors. This means using other visual cues like arrows, asterisks, and bold and italics font formats to highlight important texts like calls to action.
Define assets attributes
Asset attributes like titles, alt tags, and captions provide additional information about media elements on your website. Assistive technologies like screen readers use asset attributes to describe content to users with cognitive disabilities.
You can define asset attributes in your content management system, depending on its configurations. For example, if you use Storyblok, you can add new asset attribute fields in the Visual Editor.
Performance factors like page load time and mobile optimization affect the overall shopping experience of your eCommerce store. For example, 2020 Deloitte research shows that 9.1% more shoppers added items to their carts when mobile site speed increased by 0.1 second.
Best practices for improving your eCommerce store’s performance
To boost your online store’s performance, you should:
Optimize content and design for mobile
More people are switching to mobile as the primary medium for online shopping. According to Klarna’s Mobile Shopping report, 5 in 7 consumers in the U.S have already shopped on their mobile phones as of 2021. And these shoppers expect similar content and design experience as they’ll get on a desktop.
Three simple tips to help you create mobile-optimized content and design:
- Use a one-column design layout for your eCommerce store, so mobile shoppers can scroll through its content easily.
- Use a headless CMS to deliver the same content to your website and mobile channels.
- Reduce the number of content themes and heavy images that can slow down your store’s mobile page load time.
Add structured data markup schema
Structured data markup schema gives the search engine bots more information about a website. Search engine bots use structured data to index websites correctly for specific keywords, improving the website’s chances of ranking higher on search engine result pages (SERP) for those terms. For example, if you add “shoe collection” to a product page on your eCommerce store, the page will appear in relevant search results — like when someone searches for “buy new shoes.”
You can use Google’s Structured Data Markup Helper to add structured data markup schema to different product pages of your eCommerce store. Other tools like Schema App and Merkle Structured Data Tool are useful for this purpose too.
Use SEO-friendly URLs
SEO-friendly URLs increase your eCommerce store’s search visibility, making your product pages and content easily findable. SEO-friendly URLs:
- Are concise, having about four words
- Contain a primary keyword — a relevant search term that you want a web page to rank for in the SERP, for example, “retail stores”
- Are written in lower case
- Use hyphens to separate the words
In your content management system, you can modify the URL slugs of your eCommerce website pages to better optimize them for search. With Storyblok, for instance, you can create SEO-friendly URLs for content folders using the Advanced Path app.
Personalization improves customer satisfaction. Satisfied customers are more likely to become repeat buyers and drive word-of-mouth marketing for your eCommerce business.
Best practices for personalizing your CMS
More than 3 in 4 shoppers want a more personalized customer experience, according to Netcore’s eCommerce Personalization Benchmark Report 2021. To improve personalization for your eCommerce store, you should:
Optimize your content for different locations/languages
Shoppers are more likely to purchase a product if its details are in their native language, according to CSA Research’s 2020 survey. Content localization — that is, optimizing your content for multiple locations and languages — expands your store’s reach, increases its visibility on non-English SERPs, and improves the user experience for non-English speakers because they can navigate your store easily.
Every CMS has a unique process for content localization. For example, in Storyblok, you can implement field level translation or folder level translation] for content localization, depending on your overall content structure.
Integrate third-party apps like CRM software
Third-party apps — like customer relationship management software — help you learn more about your customers so you can better personalize their shopping experiences. For example, you can use customer insights in your CRM, like demographics and purchasing data, to optimize your key messaging for marketing campaigns.
You can integrate third-party apps with your CMS using APIs or plugins, depending on the type of content management system. Read our article to learn more about CMS personalization.
If you have a large eCommerce store, multiple people might be working in your CMS simultaneously — creating new content, updating existing records, or deleting obsolete information. You need to prioritize collaboration, so things run smoothly.
Best practices for collaboration
To improve collaboration, make the following changes in your CMS:
Set up permissions and access controls for different users
Permissions and access controls ensure that only specific users can access important content folders and make updates to content in your CMS. This helps you avoid arbitrary content modifications in your CMS.
In Storyblok, space owners can define roles and permissions for different collaborators.
Map out content authoring workflows
A content authoring workflow is simply a sequence of tasks that should be completed before a new content entry goes live on your eCommerce store. It streamlines your content publishing process, ensuring efficiency and quality control.
You can define content authoring workflows in your CMS by assigning tasks to specific collaborators. For example, your content writer can add new product descriptions for items while the content marketing manager reviews and publishes these new entries.
Your content management system is the most delicate part of your website. In fact, 32% of the world’s largest enterprises suffer a CMS security breach every week.
Best practices for boosting security in your eCommerce store
To make your content management system more secure, you should:
Use a read-only API
Read-only APIs are difficult to breach because they only fetch requested data. They do not allow an external system to create, update, or delete data in your CMS. External systems use APIs — Applicant Programming Interfaces — to pull content from a CMS backend and deliver the content to different frontends.
Limit plugin usage
Plugins can increase your CMS vulnerability to data breaches. For example, in 2021, about 100,000 WordPress websites were breached after using the responsive menu plugin.
To limit plugin usage, consider switching to a headless CMS like Storyblok. Unlike a traditional CMS, headless CMSs use APIs for content delivery, feature expansions, and third-party integrations. APIs have better security because they do not share your data with external systems automatically.
It’s easier to implement CMS best practices when you go headless
A headless CMS has its backend completely removed from the frontend, providing better content management flexibility. With better content management flexibility, you can easily implement these CMS best practices without dealing with the burden of extra code — which is a common problem with traditional and hybrid CMSs. This helps you create more exciting shopping experiences for shoppers and drive better results for your eCommerce store.
See why you should go headless with Storyblok.