Design a Stunning Product Page with Shogun Page Builder
Table of Contents:
- Introduction
- Creating a Custom Layout Product Page with Shogun Page Builder
- Importing Products to Shogun
- Choosing Between Custom Layout and Existing Layout
- Customizing the Page with Drag and Drop Elements
- Using Structural Blocks
- Adding Images to the Page
- Editing Text Elements
- Customizing Heading Elements
- Populating the Page with Pre-Written Text
- Editing Button Elements
- Customizing Product Details
- Adding Customer Reviews
- Reviewing and Previewing the Page
- Publishing the Product Page
Article:
Introduction
In this article, we will explore how to create a custom layout product page using the Shogun Page Builder. Shogun offers a powerful and intuitive interface that allows you to design and customize product pages without any coding knowledge. With drag and drop elements, structural blocks, and a range of customization options, you can create a visually stunning and highly functional product page that enhances the user experience.
Creating a Custom Layout Product Page with Shogun Page Builder
The first step in creating a custom layout product page is accessing the Shogun Page Builder. From the Page Builder dashboard, navigate to the "Add a Page" section and click on "Add Page." Here, you will find the option to select a product.
Importing Products to Shogun
Shogun pulls in all your products dynamically from your ecommerce backend. To import a product to Shogun, simply select it from the list and choose the "Import to Shogun" option. This will load the Page Builder editor, with all the product details preloaded for customization.
Choosing Between Custom Layout and Existing Layout
When importing a product, you have the choice to use a custom layout or an existing layout. A custom layout allows you to design the product page from scratch, while an existing layout provides a base template that you can modify according to your requirements.
Customizing the Page with Drag and Drop Elements
The Shogun Page Builder offers a wide range of drag and drop elements that you can use to customize your product page. Simply drag and drop these elements onto the page and customize them as desired. You can add images, text, buttons, and more to create a visually appealing layout.
Using Structural Blocks
Structural blocks are like miniature templates that can be used to enhance the structure and design of your page. These blocks come pre-populated with content and are made up of drag and drop elements, giving you the flexibility to customize them further. Browse through the elements to find the perfect structural block for your product page.
Adding Images to the Page
Images play a crucial role in showcasing your products. With the Shogun Page Builder, adding images is a breeze. Simply click on the image element and select an image from your device, media library, or integrated platforms. Customizing the image size, alignment, and other attributes is also possible within the editor.
Editing Text Elements
Text elements allow you to provide descriptions, specifications, and other relevant information about your product. Within the editor, you can easily edit the text, change fonts, and import custom fonts from your ecommerce backend. The rich text editor makes it simple to format the text according to your preferences.
Customizing Heading Elements
Headings are an essential component of any product page. With Shogun Page Builder, you have complete control over the appearance and style of headings. Choose from various heading types, such as H1 to H6, and customize the font, weight, size, and color to match your brand's aesthetics. Edit the text within the heading element to make it specific to your product.
Populating the Page with Pre-Written Text
To save time and effort, Shogun allows you to populate the page with pre-written text associated with the product. This feature comes in handy when you need to include standard details or descriptions for your product. Utilize the rich text editor to further customize the pre-written text and make it relevant to your product.
Editing Button Elements
A well-designed and strategically placed button can significantly impact your conversion rate. With the Shogun Page Builder, you can easily edit the button elements on your product page. Customize the button color, text, font, and performance to create an enticing call-to-action that encourages users to take the desired action. Make sure to test different variations to optimize the button's effectiveness.
Customizing Product Details
As you have chosen the custom layout option, you have full control over editing the product details. This allows you to tailor the appearance of each product element, including fonts, colors, sizing, and performance. For example, you can change the Add to Cart button's color by selecting the element and navigating through the controls to find the button color option.
Adding Customer Reviews
Customer reviews provide valuable social proof and can greatly influence purchasing decisions. In Shogun, you can easily add customer reviews to your product page. If you have already created a section for customer reviews, save it as a snippet. Access your saved snippets from the Save tab and drag and drop the correct one onto the page. Alternatively, use the search icon for quick access to your saved snippets.
Reviewing and Previewing the Page
Once you have created the custom layout product page, it is essential to review and preview it before making it live on your website. Click on the "Preview" button to open the page preview. This allows you to visualize how the page will look and function on your website. Make any necessary adjustments to ensure a seamless and visually appealing user experience.
Publishing the Product Page
After reviewing and finalizing your custom layout product page, it's time to publish it. Click on the "Publish" button within the editor, and your product page will go live on your website. Ensure that all the elements, including images, text, buttons, and product details, are accurately displayed. Regularly monitor the page's performance and make updates as needed to enhance conversions and provide an optimal user experience.
Highlights:
- Create a custom layout product page with Shogun Page Builder
- Import products dynamically from your ecommerce backend
- Choose between custom layout and existing layout templates
- Customize the page with drag and drop elements
- Utilize structural blocks for enhanced design options
- Add images from your device, media library, or integrated platforms
- Edit text elements with ease and import custom fonts
- Customize headings to match your brand's style
- Populate the page with pre-written text for efficiency
- Optimize button elements for effective call-to-action
FAQ:
Q: Can I import my existing product details into Shogun?
A: Yes, Shogun allows you to import products dynamically from your ecommerce backend.
Q: Is it possible to use custom fonts for text elements?
A: Yes, you can import custom fonts from your ecommerce backend into Shogun and use them in text elements.
Q: Can I customize the appearance of headings?
A: Absolutely! Shogun provides various customization options for headings, including font, size, weight, and color.
Q: Can I add customer reviews to my product page?
A: Yes, you can easily add customer reviews by creating a section or snippet specifically for them.
Q: How can I preview my product page before publishing it?
A: Shogun offers a preview feature that allows you to see how the page will look live on your website before making it live.
Q: Can I make changes to my product page after publishing it?
A: Yes, you can always go back to the Shogun Page Builder and make updates to your product page even after it's been published.
