“Kibo Product Page” and “Kibo Category Page” are two page types built into Website Builder that let us layer custom content onto one specific product or category, without touching how the rest of the product catalog renders. Every Product and Category on the storefront already renders through a shared page template, built once by developers and connected directly to the live KIBO Commerce catalog — that happens automatically, with no Website Builder page involved at all. Building one of these two page types creates an “override”: a one-off page bound to a single Product or Category, whose content gets fetched and merged into that same shared template alongside the regular catalog data, rather than replacing it.In this video, we’ll build an override for both a Product and Category, adding custom components to each and publishing them to see how the merged result renders on the live storefront.Important Note: because each override is bound to one specific product or category, this isn’t something we configure once for the whole catalog — it’s a page-by-page decision, reserved for the specific items that need something beyond the default rendering. “Kibo Product Page” and “Kibo Category Page” are two page types built into Website Builder that let us layer custom content onto one specific product or category, without touching how the rest of the product catalog renders. Every Product and Category on the storefront already renders through a shared page template, built once by developers and connected directly to the live KIBO Commerce catalog — that happens automatically, with no Website Builder page involved at all. Building one of these two page types creates an “override”: a one-off page bound to a single Product or Category, whose content gets fetched and merged into that same shared template alongside the regular catalog data, rather than replacing it. In this video, we’ll build an override for both a Product and Category, adding custom components to each and publishing them to see how the merged result renders on the live storefront. Important Note: because each override is bound to one specific product or category, this isn’t something we configure once for the whole catalog — it’s a page-by-page decision, reserved for the specific items that need something beyond the default rendering. rendering To navigate to the KIBO CMS, in the Admin UI, on the “MAIN” tab, we’ll click “Content”, then click “Page Builder”. To navigate to the KIBO CMS, in the Admin UI, on the “MAIN” tab, we’ll click “Content”, then click “Page Builder”. This opens the KIBO CMS Admin page.We discussed this screen in detail in a previous video. Important Note: both of these page types depend on the KIBO Commerce Integration we previously discussed on the Website Builder video’s “Integrations” screen — without a catalog connected, these new Pages wouldn’t have any products or categories to pull from.For more information on KIBO CMS Integration, please review the documentation linked here. Important Note: both of these page types depend on the KIBO Commerce Integration we previously discussed on the Website Builder video’s “Integrations” screen — without a catalog connected, these new Pages wouldn’t have any products or categories to pull from. For more information on KIBO CMS Integration, please review the documentation linked here. Back on the “Pages” menu, to create a new Product or Category page, we’ll click “New Page” on the top right. Back on the “Pages” menu, to create a new Product or Category page, we’ll click “New Page” on the top right. This will open the “Create a Page” modal. In the “Page Type” dropdown, alongside the default “Static Page”, two more choices are available: “Kibo Product Page” and “Kibo Category Page”.We’ll select “Kibo Product Page” first. This will open the “Create a Page” modal. In the “Page Type” dropdown, alongside the default “Static Page”, two more choices are available: “Kibo Product Page” and “Kibo Category Page”. We’ll select “Kibo Product Page” first. For a Product Page, we start by choosing the product’s category. We’ll click the “Choose category” button. For a Product Page, we start by choosing the product’s category. We’ll click the “Choose category” button. This opens a searchable list of every category in the connected tenant catalog, each shown alongside its category code.In this example, we’ll select “Jackets and Outerwear”. This opens a searchable list of every category in the connected tenant catalog, each shown alongside its category code. In this example, we’ll select “Jackets and Outerwear”. Next, we’ll enter a required Page “Title”. In this example, we’ll name it after the product this page will represent. Next, we’ll enter a required Page “Title”. In this example, we’ll name it after the product this page will represent. Finally, we’ll edit the “Path” field directly, replacing “undefined” with the actual product code. This is what binds the page to the product in the catalog, and it’s what determines the data that gets merged into the page once it’s built. Finally, we’ll edit the “Path” field directly, replacing “undefined” with the actual product code. This is what binds the page to the product in the catalog, and it’s what determines the data that gets merged into the page once it’s built. With all fields configured, we’ll click “Create” to generate the page. With all fields configured, we’ll click “Create” to generate the page. This opens the new page in Page Builder, but the canvas isn’t blank. What’s already there is the default product page “fragment”, built into the code as a starting point. Rather than building the page from scratch, we’re editing around and adding onto that default starting point. This opens the new page in Page Builder, but the canvas isn’t blank. What’s already there is the default product page “fragment”, built into the code as a starting point. Rather than building the page from scratch, we’re editing around and adding onto that default starting point. From here, we can start adding components where we want them. In this example, we’ll drag a “Small Banner” component onto the page, placing it above the existing page fragment to give us a spot for promotional messaging. From here, we can start adding components where we want them. In this example, we’ll drag a “Small Banner” component onto the page, placing it above the existing page fragment to give us a spot for promotional messaging. In the “Element” panel, we’ll edit the banner’s “Title”, “Subtitle”, “CTA Text”, and “CTA Link”, which updates the component on the canvas. In the “Element” panel, we’ll edit the banner’s “Title”, “Subtitle”, “CTA Text”, and “CTA Link”, which updates the component on the canvas. We’ll add a second component, placing it further down the page. We’ll add a second component, placing it further down the page. In the “Element” panel, we’ll edit the “Section Title”, and list specific product codes in the “Products” field, separated by commas, to hand-pick which items appear. In the “Element” panel, we’ll edit the “Section Title”, and list specific product codes in the “Products” field, separated by commas, to hand-pick which items appear. When we have added and configured all of the content needed, we’ll click “Publish” on the top right to publish this Product Override page.Again, if your user role in KIBO CMS does not give you “Publish” permissions, you would click the “Request Review” button. When we have added and configured all of the content needed, we’ll click “Publish” on the top right to publish this Product Override page. Again, if your user role in KIBO CMS does not give you “Publish” permissions, you would click the “Request Review” button. A confirmation modal will open with an optional “revision description”; we’ll add one, then click “Yes, publish this page!”. A confirmation modal will open with an optional “revision description”; we’ll add one, then click “Yes, publish this page!”. After publishing, we get a URL for the new page as well as a separate set of options on the far right. Those options are “Refresh Preview”, “Copy Preview Link”, and “Preview Page in a New Tab”.Important Note: Hover click interactions will work in the preview URL, or when its a “published” page. When viewing a “draft” page from the CMS Admin, the hover interactions are disabled. After publishing, we get a URL for the new page as well as a separate set of options on the far right. Those options are “Refresh Preview”, “Copy Preview Link”, and “Preview Page in a New Tab”. Important Note: Hover click interactions will work in the preview URL, or when its a “published” page. When viewing a “draft” page from the CMS Admin, the hover interactions are disabled. Clicking “Preview Page in a New Tab” opens the page in a new browser tab, rendered exactly as it will appear on the live Next.js storefront.The preview shows the fully merged page: our “Shop All Jackets Here” banner sits above the existing page fragment, exactly the merge we described earlier, now rendering live. Clicking “Preview Page in a New Tab” opens the page in a new browser tab, rendered exactly as it will appear on the live Next.js storefront. The preview shows the fully merged page: our “Shop All Jackets Here” banner sits above the existing page fragment, exactly the merge we described earlier, now rendering live. Scrolling down, our “Recommended Jackets” section displays, with the specific products we chose in the “Products” field. Scrolling down, our “Recommended Jackets” section displays, with the specific products we chose in the “Products” field. Back on the Page Builder page, we’ll click the “back” button to go back to the Pages list. Back on the Page Builder page, we’ll click the “back” button to go back to the Pages list. We’ll click the “New Page” button on the top right again, this time to build a Category override. We’ll click the “New Page” button on the top right again, this time to build a Category override. In the “Page Type” dropdown, we’ll select “Kibo Category Page” this time. In the “Page Type” dropdown, we’ll select “Kibo Category Page” this time. Exactly like the Product page, we’ll click “Choose category” — but this time, the category we pick is the page itself, not just a filter. Exactly like the Product page, we’ll click “Choose category” — but this time, the category we pick is the page itself, not just a filter. We’ll select “Boots and Footwear” from the same searchable category list. We’ll select “Boots and Footwear” from the same searchable category list. Unlike the Product page, the “Title” and “Path” fields pre-populate automatically from the category we chose. Since a category page only ever needs to point at one category, there’s no separate code to enter by hand. Unlike the Product page, the “Title” and “Path” fields pre-populate automatically from the category we chose. Since a category page only ever needs to point at one category, there’s no separate code to enter by hand. With all fields configured, we’ll click “Create” to generate the page. With all fields configured, we’ll click “Create” to generate the page. This opens the new Category Page in Page Builder, and just like the Product override, it’s not blank. The regular Category browsing experience is already rendering.In this example, we’ll drag in an “Image” element above the Category results. This opens the new Category Page in Page Builder, and just like the Product override, it’s not blank. The regular Category browsing experience is already rendering. In this example, we’ll drag in an “Image” element above the Category results. We’ll click “Select from library” in the “Element” panel to select an image. We’ll click “Select from library” in the “Element” panel to select an image. This opens the image File Manager menu; we’ll select a “Boots & Footwear” image from here. This opens the image File Manager menu; we’ll select a “Boots & Footwear” image from here. The image now anchors the top of the page. In the “Element” panel, we can edit the image “Title” and “Alternate Text” fields as needed. The image now anchors the top of the page. In the “Element” panel, we can edit the image “Title” and “Alternate Text” fields as needed. Next, we’ll click “Publish” to publish this override as well. Next, we’ll click “Publish” to publish this override as well. Same confirmation flow as before — we’ll add an optional description and click “Yes, publish this page!”. Same confirmation flow as before — we’ll add an optional description and click “Yes, publish this page!”. Again, publishing gives us a preview URL and the same set of options on the far right. Again, publishing gives us a preview URL and the same set of options on the far right. The published page shows the same merge pattern as the Product override: our “Boots & Footwear” banner sits at the top, with the regular category browsing experience rendering underneath it. The published page shows the same merge pattern as the Product override: our “Boots & Footwear” banner sits at the top, with the regular category browsing experience rendering underneath it. Back on the Page Builder page, we’ll again click the “back” button to go back to the Pages list. Back on the Page Builder page, we’ll again click the “back” button to go back to the Pages list. As mentioned in a previous video, we can organize Pages into Folders.In this example, we’ll select the new “Boots and Footwear” page, click the row’s “ellipses” menu, and select “Move”. As mentioned in a previous video, we can organize Pages into Folders. In this example, we’ll select the new “Boots and Footwear” page, click the row’s “ellipses” menu, and select “Move”. This opens a folder picker modal; we’ll select “Category Override Pages” and click “Move page” to file the new Page there. This opens a folder picker modal; we’ll select “Category Override Pages” and click “Move page” to file the new Page there.