Skip to content

Flex Components#

Flex Components in Miva Merchant provide a flexible and user-friendly way to manage dynamic and reusable content within your store. These components are part of the Page Builder feature, enabling you to create, configure, and customize various types of content blocks without requiring advanced coding knowledge. From product lists to banners, Flex Components streamline content management, making it accessible for both developers and non-technical users.

What Are Flex Components?#

Flex Components are modular elements that can be added to pages through the Page Builder interface. They allow you to create and configure various types of content or functionality, such as product grids, banners, and promotional sections, using a drag-and-drop interface.

By leveraging Flex Components, you can:

  • Quickly build and customize pages with dynamic, reusable content.
  • Create visually appealing layouts without editing templates.
  • Maintain consistency across your store by using pre-configured or custom components.

Features of Flex Components#

  1. Drag-and-Drop Interface:

    • Flex Components can be easily added, configured, and rearranged within the Page Builder interface, simplifying the design process.

  2. Dynamic Configuration:

    • Each component includes customizable settings that allow you to tailor its appearance and functionality to your store’s needs.

  3. Reusable Across Pages:

    • Flex Components can be reused across multiple pages, ensuring consistency and saving time.

  4. Customizable Output:

    • Developers can customize the underlying templates of Flex Components to meet advanced design requirements.

Flex Components Examples#

Product List#

The Product List Flex Component displays products dynamically, based on specified criteria such as categories, search terms, or custom filters.

Key Features: - Configure sorting, filtering, and pagination options. - Select layouts for grid or list-based displays. - Dynamically load products based on store data.

The Banner Flex Component allows you to add promotional banners to your store pages.

Key Features:

  • Customize images, text, and links for the banner.
  • Schedule banners for specific campaigns or timeframes.
  • Configure responsive designs for mobile and desktop views.

The Image Gallery Flex Component is used to display multiple images in a visually appealing layout.

Key Features:

  • Choose from grid, carousel, or slider layouts.
  • Add captions and links to individual images.
  • Adjust spacing, alignment, and size settings.

Custom HTML#

The Custom HTML Flex Component allows you to embed custom HTML, CSS, or JavaScript directly into your pages.

Key Features:

  • Full control over the content and design of the component.
  • Integrate third-party widgets or custom functionality.
  • Preview changes directly in the Page Builder interface.

Managing Flex Components#

Flex Components can be uploaded directly through the Flex Components screen in the Miva admin interface.

Upload a Flex Component#

  1. Navigate to User Interface > Flex Components.
  2. Click Upload Component.
  3. Select the Flex Component file to upload (a .tar.bz2 file).
  4. Confirm the upload by clicking Add Component.

Additional Options During Upload

  1. Ignore Dependencies:
    • If the component has dependencies (e.g., required assets or related templates), you can choose to ignore them during upload. This may be useful for advanced users or when dependencies are already satisfied.
  2. Overwrite Registered Component (Managed Components Only):
    • Select this option to replace the version in the registry with the uploaded version. This will not impact components in other branches but ensures the latest version is available for future use.

If successful the component is immediately added to the current branch and becomes available for use in Page Builder. Components marked as Managed are added to the Flex Component Registry for easy reuse across other branches (found under the three dots more menu under the Mange Component Versions link).