Layout in Venddor IO

Tailoring Your Store's Appearance with Layouts in Venddor IO

The visual appeal of your online store is paramount to its success, and Venddor IO offers a user-friendly way to customize this through layouts. Found under Design → Layouts in the Venddor IO administration dashboard, layouts allow you to easily rearrange information blocks via a simple drag-and-drop mechanism.

Venddor IO's layout structure is inspired by the Bootstrap 2.3 framework. Dive deeper into Bootstrap and its capabilities on their official website.

Understanding Layout Settings

A layout in Venddor IO comprises:

Grid Columns: Choose between 12 or 16 columns for your grid layout. While the 16-column grid offers greater flexibility due to its narrower columns, the 12-column grid might be preferable if your design is based on it.
Layout Width: Opt for a Fixed, Fluid, or Full-width layout. With the Fluid layout, you can specify minimum and maximum site width.

Delving Deeper into Layout Components

Locations: Define the look of a particular page. This setting uses the dispatch parameter format: [controller_name].[mode_name]. For uniformity across all locations, the Default location is employed.
Containers: Every layout location contains four main containers: top panel, header, content, and footer.
Grids: Positioned within containers, grids are pivotal for determining content structure. Venddor IO's default setting employs a 16-column grid.
Blocks: These are distinct units highlighting specific components of your store. Blocks are established based on schemas found in Venddor IO's system.

Exporting and Importing Layouts

Whether you wish to back up your design or share it across multiple stores, Venddor IO supports layout export and import. After designing your layout, simply export it to the layouts directory. This will activate automatically when the theme is installed.

Ensuring Layout Compatibility

Design themes with a broad audience in mind. This ensures smoother theme installations and enhanced user experience.

Add-ons and Their Layouts

Extend your store's capabilities with add-ons. These can bring in their own layouts, stored in their respective folders. Additionally, themes can modify these layouts. If a theme's directory holds layouts/addons/[addon_name]/layouts.xml, those layouts will be prioritized during the add-on installation.