Overview
The no-code drag-and-drop page creation from Shogun Page Builder is accessible from within the Shogun Frontend Experience Manager. Using Page Builder for Frontend, you can quickly create site content using elements, pre-made blocks, and even animations from Shogun Page Builder—which will later publish as part of your Shogun Frontend PWA.
Create Pages with Page Builder for Frontend
To create a page using Page Builder for Frontend:
Go to the Pages page using the left side menu.
Click on the arrow dropdown on the ADD PAGE button and select Build with Page Builder.
Enter the page name and page path, the click on the ADD PAGE. You'll be redirected to the Page Builder editor.
Drag and drop the desired components to create your page. Read more about Page Builder components and elements here.
When finished, click on the Save button.
To publish your new page, click on "You're building a page for your Frontend site" link on the top bar.
You can now proceed to publish your store within Shogun Frontend as usual.
Or watch the demo below:
Updating Page Settings
Each Page built with Page Builder for Frontend has a corresponding CMS item. Once you have created your first Page using Page Builder for Frontend, a new CMS Group will now be exposed in your CMS titled 'Page Builder Pages'.
When you open up that CMS Group you will find a list of all your Pages.
To update Page Settings, open up the Content Item for the Page you want to edit.
Here, you can define a new Page Name, update the Page Path to change the URL, and add Meta Title and Meta Description values used for SEO. When defining a new Page Path, we will automatically redirect the previous Page Path to the new Page Path.
You can also add additional Custom fields for each Page Builder for Frontend page to reference within a custom coded section.
Deleting Pages
To Delete a Page built with Page Builder for Frontend, open the Content Item for that Page and click Delete. Upon next publish, that Page will no longer be available on your storefront.
Limitations
When using an Adobe Commerce backend, use of the Product Box and Collection elements are not supported.
We do not support the ability to define a Page Path to be the same as a previously deleted Page.
Create Sections with Page Builder for Frontend
You can also create Sections using Page Builder Frontend to add to your Pages.
Go to Sections
Click ADD SECTION
Click Build with Page Builder
Enter the section name, and click ADD SECTION. You'll be redirected to the Page Builder editor.
Note: Sections must use CamelCase formatting for their Name.
Drag and drop the desired components to create your page. Read more about Page Builder components and elements here.
When finished, click on the Save button.
Now when adding Sections to your Pages, you can select your Sections built with Page Builder denoted by a PB icon.
FAQ
Q: Do I need a Page Builder account to use Page Builder for Frontend?
A: No. You only need a Shogun Frontend store.
Q: I don’t see the most up-to-date product/collections data in the Page Builder account connected to my Shogun Frontend account.
A: To use the Product Box element within Page Builder, you first need to connect your Shogun Frontend domain to your Shopify or BigCommerce store.
Connecting Product Box for Shopify:
Copy your Shogun Frontend domain name
Go your Shopify store, and go to Settings > Domains
Click Connect existing domain
Add and Verify the domain
Note: you may see an error at this step. Proceed by clicking Add Domain
Important final step: be sure to switch your myshopify.com Domain back to the Primary Domain.