Skip to content
Last update: March 4, 2024

Category Page Integration

In this article, we will integrate CMS into the category page of the Virto Commerce vue-b2b-theme. The integration allows you to create and manage content in CMS and display it in the Virto Commerce vue-b2b-theme.

To use CMS with the page:

  1. Create page model in CMS for the category page. The page model defines the properties of the category page and how it is rendered in the CMS.
  2. Add to the page component. This allows you to fetch content from `** and display it in the category page.
  3. Create content. Add components to your page model and fill them with content.

Create Page Model in

To create page model:

  1. Go to the Models menu and click Create Model in the top right corner.
  2. Select the model type from the dropdown list. We select Page.
  3. Enter the name of the component and its description. We enter Category page.
  4. Change preview URL to http://localhost:YOUR_PORT where YOUR_PORT is the port of your Virto Commerce vue-b2b-theme application.

    Catalog Page Block

  5. Add a new field called showSidebar of the type Boolean. This allows you to hide the sidebar if needed.

  6. Click Save to save the changes.

    Catalog Page Block Fields

  7. Use this model to create the content for our category page in the Page content section. Go to the Content menu and click Category page in the Page models section.

  8. Click New Entry and select Category page model from the dropdown list to create new page:

    Create New Builder Catalog

Add to the Page Component

To integrate with the category page:

  1. Edit category.vue page component in the client-app/pages folder.

            :show-sidebar="content?.data?.showSidebar ?? true"
    import { Category } from "@/shared/catalog";
    import { getContent, RenderContent, isPreviewing } from "";
    import { onMounted, shallowRef } from "vue";
    import { useRouter } from "vue-router";
    import { useBuilder } from "@/shared/builder-io/composables/useBuilder";
    interface IProps {
        categoryId: string;
    const router = useRouter();
    const { registeredComponents } = useBuilder();
    const canShowContent = shallowRef(true);
    const content = shallowRef(null);
    const pageNotFound = shallowRef(false);
    onMounted(async () => {
        await tryLoadContent(window.location.pathname);
    router.beforeEach(async (to) => {
        await tryLoadContent(to.fullPath);
    async function tryLoadContent(url: string) {
        try {
            const result = await getContent({
            model: "category-page",
            apiKey: "121744b9a9944bae8c35aeef88a87ba0",
            userAttributes: {
                urlPath: url,
            content.value = result;
            canShowContent.value = !!content.value || isPreviewing();
        } catch (e) {
            pageNotFound.value = true;
  2. As we want to use showSidebar property to control sidebar visibility, we change the category.vue component to use props from matcher.vue and add v-if condition in the sidebar section.

        <!-- Sidebar -->
        <div class="flex items-stretch lg:gap-6">
            <template v-if="showSidebar">
            <!-- Sidebar template -->
    interface IProps {
    categoryId?: string;
    isSearchPage?: boolean;
    showSidebar?: boolean;
    const props = withDefaults(defineProps<IProps>(), {
    showSidebar: true,

Now you can preview the category page in the and start creating content for it.

Create content

You can create content by adding components to your page model and filling them with content.

If you have already added custom components to, you can use them to create content for the page.

Readmore Registering Custom Components

As a result, you will get integration of CMS with the category page of Virto Commerce vue-b2b-theme: Integration