Product Details #
To design the Product Details page, we have a total 6 widgets at the moment in our app.
1. Product Image and Title #
This field will be used to display the title and image for the products.
2. Product Price #
This is for show product price.
3. Size Guide #
3.1. Title: This field will be used to display the title for Size guide.
3.2 Alignment: There are mainly three options.
- Left: It will display the title on the left side.
- Right : It will display the title on the right side.
- Center: It will display the title in the center of the screen.
3.4. Text Color: Size tile text color can be editable from here.
4. Products variant picker #
4.1 Title: This field will be used to display the title for the variant picker.
4.2. Variant Layout: Set a variant layout from here.
5. Quantity Selector #
This is for show Quantity Selector.
6. Products Description #
This is for show Product Description.
7. Products Recommendation #
This is for show Product Recommendation.
8. Single Banner #
8.1 Title: This field will be used to display the title for the single banner section.
8.2. Images: This field will be used to upload the images and those images are also draggable to top or bottom side. There are also redirection options for this images.
8.3. Padding top and Padding bottom: It will leave space before and end of the section as per the pixel value given in the backend.
8.4. Background Color: It will set the background color of the whole section.
9. Recently Viewed #
9.1 Title: This field will be used to display the title for the Recently Viewed product.
9.2. No of Products: This field will be used to show the number of products in recently viewed section.
9.3. Background Color: It will set the background color of the whole section.
10. Countdown Timer #
10.1. Title: This field will be used to display the title for the countdown time section.
10.2. Display Type: There are two options:
Banner: If you want to display the banner image in the countdown timer then select banner type.
Product: If you want to display the product in the countdown timer then select the product type.
10.3. Select product: You can select the product to display in the countdown timer box from here.
10.4. Timer Placement: There are two options for the placement of timer:
Top: It will display the timer on top.
Bottom: It will display the time on bottom.
10.5. Title Alignment: There are mainly two options.
Left: It will display the title on the left side.
Center: It will display the title in the center of the screen.
10.6. Image: The image for the countdown timer can be set from here.
10.7. Date Time: The value of the date & time in the count down time can be set from here.
10.8. Background color: It will set the background color of the whole section.
11. Video #
11.1. Title: This field will be used to display the title for the video section.
11.2. Autoplay: It will set the video auto play option “Yes” or “No”. If its selected as “Yes” then the video will be in autoplay otherwise, the video will not be autoplay.
11.3. Title Alignment: There are mainly two options.
- Left: It will display the title on the left side.
- Center: It will display the title in the center of the screen.
11.4. Type & link: There are mainly two options.
Youtube: It will allow you to put youtube video link in link field to view for the visitors.
Custom: It will allow putting the custom URL in the link field of the video for the visitors.
11.5. Placeholder Image: It will allow to use the given placeholder image for the video.
11.6. Padding top and Padding bottom: It will leave space before and end of the section as per the pixel value given in the backend.
11.7. Background Color: It will set the background color of the whole section.
12. Rich Text #
12.1. Title: This field will be used to display the title for the rich text section.
12.2. Rich text editor: This field will allow user to add the formatted data like bold, italic, buttet points, etc.
12.3. Title Alignment: There are mainly two options.
- Left: It will display the title on the left side.
- Center: It will display the title in the center of the screen.
12.4. Background Color: It will set the background color of the whole section.
13. Testimonial #
13.1. Title: This field will be used to display the title for the Testimonial section.
13.2. Title Alignment: There are mainly two options.
- Left: It will display the title on the left side.
- Center: It will display the title in the center of the screen.
13.3. Testimonial: Any number of testimonial section title, text and images can be added from it.
13.4. Background Color: It will set the background color of the whole section.