It’s been my privilege to be a part of the Ablecommerce development team. We at ablecommerce introduced our new version (Ablecommerce9) with a feature-rich CMS system. I have been part of the CMS development process and also used this CMS system pretty frequently.
This blog post will help the reader understand the new Ablecommerce CMS system with some common examples and use cases. Along with providing examples, I will be highlighting the fact that how this system makes it easy for a business merchant to add content to a website’s page without even editing a file in an editor or hiring a developer.
Ablecommerce CMS system contains three types of content components that can be placed in a template layout.
Content Components:
Widget:
A widget is a simple reusable component that can be placed anywhere on a page by a simple drag and drop action. There are several widgets that are available by default in ablecommerce software and a merchant can have many more custom widgets by just installing an ablecommerce plugin.
A widget also consists of configurable settings. This is something that makes a widget very dynamic. The same widget placed on multiple pages can have different outputs based on settings configuration.
Let’s take some of the examples for widgets to explore the CMS system’s basic functionality.
1- Full-Width Notification Bar
This widget consists of HTML that will render a horizontal bar consisting of a button, heading, and a short text. We can make these three UI components configurable using widget settings.
Button Name
Button URL
Heading Text
Short Text
and then we can use this same widget on multiple pages having a different output. An example can be seen below.
2- Category Page Banner
Another example of a widget could be a banner with some sliding images. Let’s say we want a banner on category pages with 3 different full-width images on each category page. We can make this happen using a widget with configurable settings. We can take URLs of images as inputs for widget settings and add different images for each category.
3- Product Reviews Widget
This widget will render customers reviews of a related category. Placing this widget on a category page will display the reviews of the products in that category. We can also add configurable settings to this widget to display some custom or generic reviews that can be configured from admin if the plugin having this widget provides a UI to select specific reviews to display.
Board:
A Board is a reusable component that can have multiple widgets placed in it with an arrangement defined by a layout template. Once created using a user-friendly admin UI, a board is available to be placed anywhere on a page by drag and drop action. There are some boards that are by default available in ablecommerce e.g. Header and Footer and a merchant can create new boards with a custom arrangement of widgets in a layout template using admin UI.
For details please visit.
Apart from Header and Footer, we can also make use of boards for other requirements.
The basic concept of a board is to make a package of widgets that can be placed anywhere. Say if we want to place three widgets on a sidebar of 5 pages. Instead of placing each three of them on 5 pages one by one we can create a board containing three widgets and place that board on 5 pages. We can even make that easy using page templates. (Will be discussed later)
HTML Snippet:
An HTML snippet is also a reusable component that contains HTML content to be placed anywhere on a page using a drag and drop action. The HTML snippet can be created and edited from a UI. There are few snippets that are available by default in ablecommerce and a merchant can create as many using a simple user interface that is even available on the retail side.
For details please visit.
A prime example of an HTML snippet is to create a highlighted text that you want to add on a page and for which the content is meant to be changed frequently. These snippets can be used for
product marketing,
sharing coupon codes with a highlighted display,
sharing some important message or policy,
highlighting discounts on a weekend or on special days,
highlighting a new product or a new category added, etc.
A simple working example for a NEWS/Announcement text display can be achieved by using an HTML snippet.
Three steps process:
- Create a new HTML snippet.
- Add the following HTML in the editor.
- Drag and drop the snippet just below the header.
<div style="background-color: #a23434;padding:15px">
<p style="margin:0" align="center">
<span style="color: rgb(255, 255, 255); font-size: 18px;">
<b>This is a place for a news or announcement.</b>
</span>
</p>
</div>
Please follow the steps if you want to add this HTML snippet to appear on every page in an Ablecommerce store with sample store data.
- Go to the Admin => Website => HTML Snippets page
- Click Add HTML Snippet button on the top right corner
- Add a name and the HTML in the HTML field
- Now go to the Admin => Website => Store Design => Widget Boards
- Edit Store Header Compact board (This is the default header for an ablecommerce store)
- Click the Layout tab
- Add a row at the bottom, add a zone for the HTML snippet and then click save from the sticky footer
- Now click the Design tab and click Edit Content button
- In the left sidebar that appears, click HTML snippet tab and just drag the newly created HTML snippet into the newly created empty zone area
There could be many more uses. Our CMS makes this super easy with the use of HTML snippet and a merchant can create these in a few minutes before taking this to live.
Templates:
Before jumping into the details of templates let me share with you an overview of an Ablecommerce page. An ablecommerce page can be a Product page, a Category page, or a Webpage. For each of these types, we can define page Templates.
An ablecommerce page consists of two template layouts. A page template and an inner template. We have a storewide
default page template and an inner template for each type of ablecommerce page and then we can also assign each separate page its own page template and inner template.
For details please visit.
Page Template:
A page template is an outer template that defines a layout which is intended to be reused across the website. A simple example for a page template can be a page that consists of a Header, Footer, and a Sidebar (as shown above). This page template can be used as a store default for a page type and will be used for all pages or the page can define its own page template layout as well.
Let’s take some use cases and see how this page template feature helps us achieving the requirement.
1- A merchant may want to have a unique header for some of the products or let’s say for all products in a particular category. Similarly, a merchant may want to have a full-width notification bar (e.g. to display a coupon code) for these products. So a page template can be defined and be assigned to those products.
The same is the case with categories and webpages.
2- A merchant may want to have a unique sidebar widget with some common widgets for all blog pages. So a new page template can be defined and assigned to those pages.
3- For some products, a merchant may want to have a sidebar with some filters options, etc and for some he wants a full-width layout to display product details. So different page templates can be defined to achieve this requirement.
4- An eCommerce theme can have some pages with full-width layout and some with boxed layout. To achieve this in ablecommerce we can define two different page templates.
When creating a layout from an editor in the admin panel we can also edit the HTML for the layout in case we need to add some container level classes. The basic structure for these layouts is based on bootstrap layout structure.
Inner Template:
Inner templates are also reusable and each inner template defines its own layout structure. We can have default inner templates for each type or we can assign a separate inner template to each particular page.
In ablecommerce default store data, we have two inner template examples for products, three for categories, and for a webpage, the store default inner template contains a webpage content widget. For application pages like basket page, a billing page, shipping page, payment page, wishlist listing, Address book page, etc, we have defined their own inner templates with widgets placed in it.
For a merchant, this feature added a level of flexibility to achieve any sort of layout structure. Let’s try to explore a bit with a few examples.
1- A merchant may want to share the same page template (outer) for all products but he wants to add a specific discount promotional info for some products or for products in a particular category so he can define a separate inner template for those products to achieve this easily.
2- Similarly to apply a widget to some specific category, you can make use of a separate inner template.
3- For blog pages, the layout can be different from other pages. This can be achieved using a separate inner template.
Creating layouts
Ablecommerce allows the merchant to use a user-friendly user interface to create a layout with any combination of rows and columns. This layout structure is based on a bootstrap standard layout structure.
We can define the layouts for a page template, an inner template, and for the board. To define a layout, ablecommerce provides an interactive user interface that supports the bootstrap rows and columns structure. So, while creating the layouts, we must follow the bootstrap definition of layout structure.
RenderBody and Zones:
To create a layout for a page template, you must define a place for the RenderBody section. This section is where the page's inner template content will be rendered. After defining the RenderBody section you can define a zone in each column. The zone is the place where a widget can be inserted.
To add the zone and RenderBody section details can be seen on this page.
To create a layout for an inner template and a board, the process is almost similar. We don't have the RenderBody section for inner template or boards but we need to define the zones for the widgets to be placed as per the requirements.
Manual HTML Editing:
The HTML will be auto-generated using the UI and will be saved as a razor view file. But there is also an option to edit the HTML manually from the UI. This option is needed when we need to apply some container level styles or in the case of a board, we may need to apply some styles on the container of multiple widgets. An example of using this option is been used on our sample store header boards.
Conclusion
I hope this blog post will help the reader to get an overview of the basics of our new CMS system. There's a lot more to learn and explore once you start using the software by hand. You can start by signing in for a free demo or as a developer you can have your free download. You can see more details on our help site.
