Product Details
The Product Detail Screen provides a comprehensive view of the selected product. This instruction provides you with the necessary details and guidance to customize and optimize the Product Detail Screen with FluxBuilder.
Video Guide
Manual Guide
1. Product Detail Themes
The Product Detail screen can display on the app under 4 types:
1.1 Simple Type
1.2 Half Size Image Type
1.3 Full Size Image Type
These Types support:
- Featured videos
- info: booking product
- info: listing booking
- info: grouped product
- info: variable product
- image gallery
- product title
Follow the table below for more details:
1.4 FlatStyle
The Type supports:
- Featured videos
- Simple product
- Subscription product
- Add-Ons product
- Variable product
- Fixed bottom button including: Price, Quanity, BUY NOW, ADD TO CART and cart buttons.
To change the Product Detail screen type:
Step 1: on the simulator of the app, click on any product.
Step 2: select Layout.
2. Vertical Product Gallery
In addition to the normal product gallery, the app presents the product image gallery in a vertical format, adding a unique touch to the user interface of the product detail page.
The feature is now available for Simple Type and Flat Style of Product Detail Themes.
Follow the guide below to setup the feature:
Step 1: Open the app and click on any product on the simulator.
Step 2: On Product detail config, scroll to Product Image Scroll Direction.
Step 3: Select Horizontally or Vertically.
Horizontally:
Vertically:
3. Map in Listing
After uploading a new listing, the Listing app support displaying the store on map on Listing Detail screen as the image:
To configure, follow the steps below:
Step 1: Open app and go to Features.
Step 2: Open Google Map and config the feature as this guide.
Step 3: On the simulator of FluxBuilder, click on any listing. Enable Default Expand Map.
4. Product Detail Slider
The slider settings for the Image Gallery on the Product Details screen are available for Simple Type and Flat Style.
Follow the steps below to configure:
Step 1: Open your app.
Step 2: Select any product on the simulator.
Step 3: On the right side screen, scroll down to find Slider Settings. There, you'll find the options to configure the settings to suit your specific needs.
5. Product Variation Layouts
Variant products are supported in all FluxStore apps. To present the variant products on the app successfully, make sure to:
- Complete the website integration (install all the required plugins if any).
- Add Variable products on your website. Set Attributes and Variations for the products.
Then, the app will automatically update the variant products, as shown in the image below:
Show Image for Selected Variant
To enable the automatic display of corresponding images when selecting a product variation on FluxStore apps, please follow the steps:
Step 1: Set images for the variations of a product, for example:
Step 2: Configure the app to display the image for the selected variation.
6. Dynamic Product Variant
With this feature, the product variation options fields are transformed into visually appealing representations such as color, box, and option layouts. It is currently compatible with all apps.
Before setting the Product Variant layouts, you need to set up the Attributes of Products as the image.
Then, follow the steps below to change the layout in FluxBuilder:
Step 1: Open your app.
Step 2: Select any product on the simulator.
Step 3: On the right side screen, scroll down to find the Product Variant Layout.
Step 4: Click + to add new Attribute Slug.
Step 5: Select Layout for the attribute.
Attribute Layout
Currently, our apps support 2 layouts to display attributes:
- Attribute Layout is Normal
- Attribute Layout is Inline
Follow the steps below to configure in FluxBuilder:
Step 1: Open your app.
Step 2: Select any product on the simulator.
Step 3: On the right side screen, find the Attribute Layout and select the suitable layout.
7. Variation Swatches
The Variation Swatches plugin turns the product variation select options fields into radio images, colors, and labels. Helps you show product variation items in images, colors, and labels. It also enables them in product quick view.
Besides creating size, brand, image, color, and label variation swatches, you can handle the swatches shape style Rounded and Circle.
It is available for WooCommerce, and Multi Vendors app. Compatible with this https://wordpress.org/plugins/woo-variation-swatches plugin.
8. Inline Video
Allow your users to see a YouTube or Vimeo video instead of the featured image of the Product Detail page.
You can use WooCommerce Featured Video or YITH WooCommerce Featured Video plugins.
This feature is available for Woocommerce app or Multi Vendors app.
9. Rating and Reviews
By reading reviews, customers can benefit from the firsthand experiences of others, gaining confidence in their purchasing choices. These apps - Woocommerce, Opencart, Multi Vendors, Shopify and Listing - support rating and review presentations on the Product Details screen.
Use FluxBuilder to enable the feature as below:
Step 1: Open your app.
Step 2: Select any product on the simulator.
Step3: On the right side screen, turn on Enable Review.
Photo Review
The Product Details screen also supports review photo presentations. To allow the display of review photos on the Product Details screen, you should enable Rating and Review as the guide above.
This feature is available for WooCommerce, Multi Vendors apps with this plugin https://wordpress.org/plugins/woo-photo-reviews/
10. Brand Image
Woocommerce and Multi Vendors allow the app to display Brand Image of products on Product Details screen.
Before enabling the feature on the app, you have to install the plugin Woocommercce Brand to your website. Then use FluxBuilder as below:
Step 1: Open your app.
Step 2: Select any product on the simulator.
Step 3: On the right side screen, turn on Show Brand option.
11. Buy Now Button to The Bottom by Default
For the Simple Type of Product Detail screen, the Buy Now and Add To Cart buttons can also be conveniently located at the bottom, ensuring easy accessibility.
Use FluxBuilder:
Step 1: Open your app.
Step 2: Select any product on the simulator.
Step 3: On the right side screen, select Simple layout and turn on Fixed Buy Button To Bottom.
