You can design your online storefront adding different sections in Design module.
Just navigate to Store tab and select Design > Pages > Home
Business tab
In business tab you can add sections:
Banner - Smart banner, Banner carousel, Banner Image
Categories List - Small tile, Text tile, Large Tile, Scrollable tile
Product List - Product tile, Product carousel, Horizontal cards
Others - Announcement section
Basic tab
In basic tab you can add sections:
Banners
Smart banner best option to attract attention.
Smart banner will show products from specific saved category.
You can save your own Title, Button text, Link to category, Sorting and Qty of Products displayed.
Banner Carousel
Upload the banners under one section and link product or category.
Section has arrows on right and left when buyer hovers the banner carousel.
Add few banners under one section and they will slide to side.
Upon uploading the banner select option for user click.
Banner image supports vertical banners.
You can set up Height for you banner:
Adapts to Image - the uploaded image will be displayed at full height
Small - the uploaded image will fill 30% of viewport.
Medium - the uploaded image will fill 50% of viewport.
Large - the uploaded image will fill 100% of viewport.
NOTE: Additional styles for Banner sections can be changed in Style tab
Categories List
Check out the difference between Categories list options:
Small tile
Text tile
Large tile
Scrollable tile
In Style tab you can apply different settings:
Alignment, Spacing, Rows, Image mask, Scaling, Background, Aspect ratio.
Product Tile
Product tiles are fixed on the storefront. You can set up multiple rows.
2 on Mobile view and up to 8 on Desktop view.
In the Product carousel selection product cards can be swiped to side.
Same as in Categories Tiles settings you can link up to products and edit title.
Sorting of the tile can be managed based on the Category. Please check this guide
Additional settings can be found in Style tab.
Horizontal Cards
Here's how Horizontal Cards displayed on storefront
Announcement section
Use Announcement section to share information with customers.
Line with your text will appear on top of your online store.
You can add multiple text messages and select icon next to the message.
Add 2 or more announcements, so it will scroll.
Text section
You have ability to add informative Text section.
You can add title or fill description without title. Note that at lease one of the fields must be filled in.
In Description you can use Rich text editor: Bold, Italic, Crossed, Links, Bulleted or Numbered Lists.
in Style, you can apply additional settings as:
Title size, Spacing, Background color and Description Color
Spacer section
You also can add spacer section or dividing line to your Home page.
Great option if you need divide different sections.
Check the settings in the screenshot below
