1. Page Layout #

1. To design the home screen, we have a total 18 widgets at the moment in our app.  

1.1. Collection Carousel #

1.1.1. Title: This field will be used to display the title for the collection carousel section.

1.1.2. All collections or manual collections selection, this section will allow customer to select either all collections or selected collections which are required to show in app which can also be editable from here.

1.1.3. Collection Title Display: There are mainly three options into it.

• None: If you do not want to display the title of that collection then you can select none.
• Overlay: It will display the collection name over the collection image.
• Bottom: It will display the collection name below the collection image.

1.1.4. Display Orientation: There are mainly three options.

• Square: It will display the square shape image of the collection.
• Vertical: It will display the vertical shape image of the collection.
• Horizontal: It will display the horizontal shape image of the collection image.

1.1.5. Image Radius: There are mainly three options.

• Circle: It will display the Circle shape image of the collection.
• Rounded corner: It will display the Rounded corner image of the collection.
• None: It will display the default shape image of the collection image which is selected in display orientation.

1.1.6. View size: There are mainly three options.

• Small: It will display the small size image of the collection.
• Medium: It will display the medium size image of the collection.
• Large: It will display the large size image of the collection image which is selected in display orientation.

1.1.7. 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.

1.1.8. Background Color: It will set the background color of the whole section.

1.2. Image Slider #

1.2.1. Title: This field will be used to display the title for the Image slider section.

1.2.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.

1.2.3. Width: This field has an option to set the width of the section in full width or container size. The container padding can be manageable from below path:

Setting -> General -> Space management -> Container Padding.

1.2.4. Auto slide: The images can be set to an auto slide “Yes” or “No” from this field. If you select “Yes” then it will slide automatically and for “No”, you need to manually slide the images to change it.

1.2.5. Slider controller: There are options to either display the slider controller or hide it.

1.2.6. 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.

1.2.7. Padding top and Padding bottom: It will leave space before and end of the section as per the pixel value given in the backend.

1.2.8. Background color: It will set the background color of the whole section.

1.3. Collection Slider #

1.3.1. Title: This field will be used to display the title for the collection slider section.

1.3.2. Collections: This field will show collection image with link to all collections or manual collections in front.

1.3.3. Width: This field will show all collections or manual collections in front.

1.3.4. Auto slide: The images can be set to an auto slide “Yes” or “No” from this field. If you select “Yes” then it will slide automatically and for “No”, you need to manually slide the images to change it.

1.3.5. Slider controller: There are options to either display the slider controller or hide it.

1.3.6. 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.

1.3.7. Padding top and Padding bottom: It will leave space before and end of the section as per the pixel value given in the backend.

1.3.8. Background color: It will set the background color of the whole section.

1.4. Collection list #

1.4.1. Title: This field will be used to display the title for the collection list section.

1.4.2. Collections: This field will show a collection image with a link to all collections or manual collections in front.

1.4.3. Collection title display: There are three options:
None: It will display only a collection image without its title.

Overlay: It will display a collection title over the collection image.

Bottom: It will display a collection title below the collection image.

1.4.4. Grid Columns: There are two options:
2: It will display two columns in the collection grid.

3: It will display three columns in the collection grid.

1.4.5. Grid Columns: There are three options:
Square (1:1): It will display a square shape collection image.

Vertical (Portrait – 3:4): It will display vertical shape collection image

Horizontal (Landscape – 4:3): It will display a horizontal shape collection image.

1.4.6. View All Button Placement: There are two options:
Top: It will display a View all button on the top right side of the section.

Bottom: It will display a View all button at bottom of the section.

1.4.7. Image Radius: There are three options:
Circle: It will display a circle shape collection image.

Rounded corner: It will display a rounded corner with the shape of selected display orientation collection image.

None: It will display a collection image as per selected orientation.

1.4.8. Display Layout: There are two options:
Grid View: It will display selected collections images in grad layout.

List View: It will display selected collection images in list view.

1.4.9. Title Alignment: There are two options:
Left: It will display the title of the section on the left side.

Center: It will display the title of the section in the center of the screen.

1.4.10. Button Text: It will show the given button text in the mobile app.

1.4.11. Button Action: It will show the redirection link for the button.

1.4.12. Background color: It will show the redirection link for the button.

1.5. Product Carousel #

1.5.1. Title: This field will be used to display the title for the product carousel section.

1.5.2. Collection: It will display all products, products from selected collection, or manually selected products.

1.5.3. Product snippet layout: There are two options:

Bordered: It will show a border around the product box.

No-bordered with bg color: It will take the background color without a border.

1.5.4. Add to cart button: If you selected “Yes” from the dropdown then it will show the “Add to cart” button just below the price in the product grid otherwise it will not show the “Add to cart” button.

1.5.5. Image option: There are three options:
Fit: Scales the image to fit within the container while maintaining the aspect ratio (may leave space).
Fill: Stretches the image to fill the container, possibly distorting the aspect ratio.
Cover: Scales the image to cover the entire container while maintaining the aspect ratio (may crop edges).

1.5.6. Container Border Radius: There are two options:

Square: It will show the square-shaped border around this section.

Rounded: It will show the square-shaped rounded corner around this section.

1.5.7. Product Alignment: There are two options:

Left: It will start the product title from the left side of the box.

Center: It will start the product title from the center of the box.

1.5.8. Title Alignment: There are two options:

Left: It will start the section title from the left side of the box.

Center: It will start the section title from the center of the box.

1.5.9. Widget spacing: There are two options:

Tight: It will show all product cards very close to each other.

Loose: It will show all the product cards by keeping some space between them.

1.5.10. Button Text: The added button text will show in Front.

1.5.11. Button Action: The action point for the button can be set from here.

1.5.12. Maximum products to display: To set the maximum number of products in product carousel, this field can be used.

1.5.13. Maximum products to display: To set the maximum number of products in product carousel, this field can be used.

1.5.14. Border Color: Border color around the product card can be set using this field.

1.5.15. Background Color: The background color of the section can be set using this field.

1.6. Product grid #

1.6.1. Title: This field will be used to display the title for the product grid section.

1.6.2. Collection: It will display all products, products from selected collection, or manually selected products.

1.6.3. Product snippet layout: There are two options:

Bordered: It will show a border around the product box.

No-bordered with bg color: It will take the background color without a border.

1.6.4. Add to cart button: If you selected “Yes” from the dropdown then it will show the “Add to cart” button just below the price in the product grid otherwise it will not show the “Add to cart” button.

1.6.5. Image option: There are three options:
Fit: Scales the image to fit within the container while maintaining the aspect ratio (may leave space).
Fill: Stretches the image to fill the container, possibly distorting the aspect ratio.
Cover: Scales the image to cover the entire container while maintaining the aspect ratio (may crop edges).

1.6.6. Grid Columns: There are two options:
2: It will show two product cards in one row.

3: It will show three product cards in one row.

1.6.7. Container Border Radius: There are two options:

Square: It will show the square-shaped border around this section.

Rounded: It will show the square-shaped rounded corner around this section.

1.6.8. Display Layout: There are two options:

Grid Layout: It will show the products in grid view.

List Layout: It will show the products in list view.

1.6.9. Product Alignment: There are two options:

Left: It will start the product title from the left side of the box.

Center: It will start the product title from the center of the box.

1.6.10. Title Alignment: There are two options:

Left: It will start the section title from the left side of the box.

Center: It will start the section title from the center of the box.

1.6.11. Widget spacing: There are two options:

Tight: It will show all product cards very close to each other.

Loose: It will show all the product cards by keeping some space between them.

1.6.12. Button Text: The added button text will show in Front.

1.6.13. Button Action: It will show the redirection link for the button.

1.6.14. Maximum products to display: To set the maximum number of products in product carousel, this field can be used.

1.6.15. Maximum products to display: To set the maximum number of products in product carousel, this field can be used.

1.6.16. Border Color: Border color around the product card can be set using this field.

1.6.17. Background Color: The background color of the section can be set using this field.

1.7. Image Carousel #

1.7.1. Title: This field will be used to display the title for the image carousel section.

1.7.2. Images: This field allows us to upload one or more images and we can set redirection links for these images. The images can also be edited or deleted from this field.

1.7.3. Display Orientation: There are three options:

• Square: It will display the square-shaped image of the uploaded image.
• Vertical: It will display the vertical shape image of the uploaded image.
• Horizontal: It will display the horizontal shape image of the uploaded image.

1.7.4. View size: There are mainly three options.

• Small: It will display the small size image of the collection.
• Medium: It will display the medium size image of the collection.
• Large: It will display the large size image of the collection image which is selected in display orientation.

1.7.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.

1.7.6. Background color: It will set the background color of the whole section.

1.8. Image Grid #

1.8.1. Title: This field will be used to display the title for the image grid section.

1.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.

1.8.3. Image Fit Option: There are three options here:

Fit: Scales the image to fit within the container while maintaining the aspect ratio (may leave space).
Fill: Stretches the image to fill the container, possibly distorting the aspect ratio.
Cover: Scales the image to cover the entire container while maintaining the aspect ratio (may crop edges).

1.8.4. Grid Columns: There are two options:

2: It will show two columns in one row for the images.

3: It will show three columns in one row for the images.

1.8.5. Spacing in between: There are two options:

Tightly placed: It will show two images very close to each other.

Loosely placed: It will show two images with some spacing between each other.

1.8.6. Masonry layout: If you select “Yes” from the drop down then it will show the image in masonry effect else it will show simple image without any effect.

1.8.7. 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.

1.8.8. Background Color: It will set the background color of the whole section.

1.9. Single Banner #

1.9.1. Title: This field will be used to display the title for the single banner section.

1.9.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.

1.9.3. Image Fit Option: There are three options here:

Fit: Scales the image to fit within the container while maintaining the aspect ratio (may leave space).
Fill: Stretches the image to fill the container, possibly distorting the aspect ratio.
Cover: Scales the image to cover the entire container while maintaining the aspect ratio (may crop edges).

1.9.4. Width: This field will show all collections or manual collections in front.

1.9.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.

1.9.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.

1.9.7.  Background Color: It will set the background color of the whole section.

1.10. Rich Text #

1.10.1. Title: This field will be used to display the title for the single banner section.

1.10.2. Rich text editor: This field will allow user to add the formatted data like bold, italic, buttet points, etc.

1.10.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.

1.10.4. Background Color: It will set the background color of the whole section.

1.11. Collapsible Text #

1.11.1. Title: This field will be used to display the title for the Collapsible text section.

1.11.2. Sub Text: This field is used to display the sub text below the main title.

1.11.3. Collapsible Text: There are two options in the field:
Title: It will display the heading of the collapsible text.

Text: It will be mainly used to display the response of the collapsible text heading.

1.11.4. Alignment: There are three options in the alignment field.

Left: It will show the collapsible text to the left side of the screen.

Center: It will show the collapsible text to the center of the screen.

Right: It will show the collapsible text to the right side of the screen.

1.11.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.

1.11.6. Color: It will set the color of the collapsible text.

1.11.7. Background Color: It will set the background color of the whole section.

1.12. Video #

1.12.1. Title: This field will be used to display the title for the video section.

1.12.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.

1.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.

1.12.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.

1.12.5. Placeholder Image: It will allow to use the given placeholder image for the video.

1.12.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.

1.12.7. Background Color: It will set the background color of the whole section.

13. Instagram Feed #

1.13.1. Title: This field will be used to display the title for the instagram feed section.

1.13.2. Display Layout: There are four options:

Grid: Displays products in a multi-column layout (e.g., 2×2 or 3×3 format).

List: Displays products in a single-column vertical format, one below the other.

Carousel: Displays products in a horizontally scrollable format.

Slider: Similar to a carousel but often used for banners or large images rather than products.

1.13.2. Display Layout: There are four options:

1.13.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.

1.13.4. Token: The token number generated after connecting your instagram account with the mobivogue app builder in your store.

1.13.5. Number of Posts: This indicates the number of Instagram posts you want to show on your mobile application.

1.13.6. Background Color: It will set the background color of the whole section.

1.14. Testimonial #

1.14.1. Title: This field will be used to display the title for the Testimonial section.

1.14.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.

1.14.3. Testimonial: Any number of testimonial section title, text and images can be added from it.

1.14.4. Background Color: It will set the background color of the whole section.

1.15. Newsletter #

1.15.1. Title: This field will be used to display the title for the Newsletter section.

1.15.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.

1.15.3. Type: There are mainly two options.

Shopify: It will take Shopify default newsletter option for it.

Embed: It will allow taking embed code for the newsletter option into it.

1.15.4. Heading: The text for the newsletter input box can be added from here.

1.16. Countdown Timer #

1.16.1. Title: This field will be used to display the title for the countdown time section.

1.16.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.

1.16.3. Select product: You can select the product to display in the countdown timer box from here.

1.16.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.

1.16.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. 

1.16.6. Image: The image for the countdown timer can be set from here.

1.16.7. Date Time: The value of the date & time in the count down time can be set from here.

1.16.8. Background color: It will set the background color of the whole section.

1.17. Recently Viewed #

1.17.1. Title: This field will be used to display the title for the recently viewed section.

1.17.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.

1.17.3. No of Products: It will show the given number of recently viewed products in the section.

1.17.4. Background color: It will set the background color of the whole section.

1.18. Divider #

1.18.1. Width: This field will be used to display the width of the divider either in full width or container size.

1.18.2. Type: There are three options:
Solid: It will show the solid line in the divider.

Dashed: It will show the dashed line in the divider.

Rounded: It will display the rounded line in the divider.

1.18.3. Density: It will show the divider line according to the selected density of the line.

1.18.4. Background color: It will set the background color of the whole section.

2. Sidebar #

2.2.1 Side Menu: New menu item can be added by clicking on the “Add Menu Item” button.

2.2.2 Menu Item: New menu item will be having default names and position at last which is draggable and you can move upward or downward.

2.2.3 Lable: The name of the menu item can be added from here.

2.2.4 Action: The redirection action for the menu item can be adjusted from here.

3. Footer #

3.3.1 Footer: You can add maximum 5 items in the bottom bar and you can enable or disable the bottom bar icons as well. Also, this bottom bar items are dragable so their position can change accordingly. 

The bottom bar icons and name of the label can be set from here.

3.3.2 Lable: The name of the footer bar can be added from here.

3.3.3 Icon: The name of the footer bar can be added from here.