> ## Documentation Index
> Fetch the complete documentation index at: https://help.aasaan.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Widgets

> Comprehensive Guide to Using Widgets for Website Customization in Aasaan

## Widgets

Widgets in Aasaan are integral components that enhance the user interface and interactivity of your website. Each widget, whether static or dynamic, is designed to serve a distinct purpose, contributing to a rich and engaging user experience.

<Frame>
  <img src="https://cdn.lightbooks-dev.io/docs/storefront/storefront-01.png" />
</Frame>

<Frame>
  <img src="https://cdn.lightbooks-dev.io/docs/storefront/storefront-02.png" />
</Frame>

<Frame>
  <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets-01.png" />
</Frame>

### Static Widgets

Static widgets incorporate fixed content without the need for user interaction or data updates.

<Frame>
  <img src="https://cdn.lightbooks-dev.io/docs/storefront/static-01.png" />
</Frame>

#### Announcement Bars

* **Purpose**: Display timely notices like promotions, sales, or shipping policies prominently at the top of your site.
* **Usage**: Typically used for important, short-term messages to visitors.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/bars/bars-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/bars/bars-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Basic**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/annoucmentBars/top-announcementbar-1.jpg" />
    </Frame>

    **Slider**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/annoucmentBars/top-announcementbar-2.jpg" />
    </Frame>

    **Infinite**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/annoucmentBars/top-announcementbar-3.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### Header

* **Layout**: Contains the primary navigation elements including the logo, menu, and possibly contact information.
* **Customization**: Can be styled to match the overall theme and branding of the website.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/headers/header-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/headers/header-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Header Style 1**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/menus/header-1.jpg" />
    </Frame>

    **Header Style 4**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/menus/header-4.jpg" />
    </Frame>

    **Header Style 5**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/menus/header-5.jpg" />
    </Frame>

    **Header Style 6**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/menus/header-6.jpg" />
    </Frame>

    **Header Style 7**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/menus/header-7.jpg" />
    </Frame>

    **Header Style 9**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/menus/header-9.jpg" />
    </Frame>

    **Header Style 10**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/menus/header-10.jpg" />
    </Frame>

    **Megamenu**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/menus/main-menubar.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### Testimonials

* **Engagement**: Showcases customer feedback and endorsements to establish trust and credibility.
* **Display**: Often presented in a carousel or grid layout for visual appeal.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/testimonials/testimonials-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/testimonials/testimonials-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Testimonial with slider-1**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/testimonials/testimonial-theme-1.jpg" />
    </Frame>

    **Testimonial with slider-2**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/testimonials/testimonial-theme-2.jpg" />
    </Frame>

    **Testimonial with slider-3**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/testimonials/testimonial-theme-3.jpg" />
    </Frame>

    **Testimonial with slider-4**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/testimonials/testimonial-theme-4.jpg" />
    </Frame>

    **Testimonial with Brands**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/testimonials/testimonial-theme-6.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### About

* **Content**: Offers a narrative about the company, team, or individual, highlighting history, values, or mission.
* **Impact**: Helps to build a personal connection with the audience.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/about/about-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/about/about-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Template 1**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/about/about-1.jpg" />
    </Frame>

    **Template 2**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/about/about-2.jpg" />
    </Frame>

    **Template 3**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/about/about-3.jpg" />
    </Frame>

    **Template 4**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/about/about-4.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### Clients

* **Showcase**: Features logos or testimonials from clients or partners, reinforcing brand reputation.
* **Design**: Can be displayed in various formats depending on the desired emphasis and website design.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/clients/clients-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/clients/clients-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Template 1**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/clients/clients-1.jpg" />
    </Frame>

    **Template 2**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/clients/clients-2.jpg" />
    </Frame>

    **Template 3**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/clients/clients-3.jpg" />
    </Frame>

    **Template 4**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/clients/clients-4.jpg" />
    </Frame>

    **Template 5**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/clients/clients-5.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### Contacts

* **Information**: Lists essential contact details, facilitating communication with visitors.
* **Accessibility**: Ensures that users can easily find contact information for customer support or inquiries.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/contacts/contacts-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/contacts/contacts-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Template 1**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/contact/contact-1.jpg" />
    </Frame>

    **Template 2**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/contact/contact-2.jpg" />
    </Frame>

    **Template 3**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/contact/contact-3.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### Sections

* **Versatility**: Provides predefined sections for diverse content presentation needs.
* **Flexibility**: Each section can be used for different purposes such as highlighting services, team members, or features.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/sections/sections-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/sections/sections-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Section 1**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/section/section-1.jpg" />
    </Frame>

    **Section 2**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/section/section-2.jpg" />
    </Frame>

    **Video Widget**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/section/section-3.jpg" />
    </Frame>

    **Image Widget**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/section/section-4.jpg" />
    </Frame>

    **Slider Widget**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/section/section-5.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### Features

* **Highlight**: Emphasizes the main features or benefits of products or services offered.
* **Strategy**: Can be leveraged to focus on selling points that differentiate the brand in the market.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/features/features-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/features/features-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Template 1**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/features/features-1.jpg" />
    </Frame>

    **Template 2**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/features/features-2.jpg" />
    </Frame>

    **Template 3**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/features/features-3.jpg" />
    </Frame>

    **Template 4**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/features/features-4.jpg" />
    </Frame>

    **Template 6**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/features/features-6.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### Hero

* **Impact**: The prominent display area often featuring a strong call-to-action to engage visitors immediately.
* **Design**: Typically includes high-quality images or videos with overlaid text and buttons.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/hero/hero-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/hero/hero-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Template 1**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/hero/hero-1.jpg" />
    </Frame>

    **Template 2**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/hero/hero-2.jpg" />
    </Frame>

    **Template 3**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/hero/hero-3.jpg" />
    </Frame>

    **Template 4**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/hero/hero-4.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### Policy

* **Compliance**: Details legal and policy information including terms of service, privacy policy, and returns.
* **Transparency**: Promotes trust by clearly stating policies and practices.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/policy/policy-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/policy/policy-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Policy 1**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/pages/policy/policy.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### Footer

* **Navigation**: Contains secondary navigation and vital links like contact information, social media, and certifications.
* **Consistency**: Should be consistent across all pages for familiarity and ease of access.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/footer/footer-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/footer/footer-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Footer 3**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/footer/footer-3.jpg" />
    </Frame>

    **Footer 4**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/footer/footer-4.jpg" />
    </Frame>

    **Footer 5**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/footer/footer-5.jpg" />
    </Frame>

    **Footer 6**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/footer/footer-6.jpg" />
    </Frame>

    **Footer 7**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/footer/footer-7.jpg" />
    </Frame>

    **Footer 8**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/footer/footer-8.jpg" />
    </Frame>
  </Tab>
</Tabs>

### Dynamic Widgets

Dynamic widgets adapt content in real-time based on user interactions or backend updates.

<Frame>
  <img src="https://cdn.lightbooks-dev.io/docs/storefront/dynamic-01.png" />
</Frame>

#### Slider

* **Function**: Cycles through images or content, often used to feature products, news, or events.
* **Interactivity**: Can be set to auto-rotate or change on user input, such as a click or swipe.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/sliders/slider-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/sliders/slider-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Gallery block with 3 images**

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/sliders/slider-03.png" />
    </Frame>

    **Gallery block with 4 images**

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/sliders/slider-04.png" />
    </Frame>

    **Gallery slider with price tag - Full width**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/sliders/basic-slider-pricetag-fullw.jpg" />
    </Frame>

    **Gallery slider with price tag**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/sliders/basic-slider-pricetag.jpg" />
    </Frame>

    **Gallery slider block**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/sliders/basic-slider.jpg" />
    </Frame>

    **Gallery vertical slider with price tag**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/sliders/basic-vertical-slider-pricetag.jpg" />
    </Frame>

    **Gallery fashion block**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/sliders/fashion-slider.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### Banner

* **Purpose**: Captures attention with a large, bold visual, often used for major announcements or calls-to-action.
* **Visibility**: Placed strategically to ensure maximum impact upon visitor arrival.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/banners/banner-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/banners/banner-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Gallery with sliding images with arrows**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/banners/basic-banners.jpg" />
    </Frame>

    **Image Banner**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/banners/image-banner.jpg" />
    </Frame>

    **Information Banner**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/banners/info-banner.jpg" />
    </Frame>

    **Gallery with Column images**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/banners/one-column.jpg" />
    </Frame>

    **Gallery block with three column view**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/banners/three-columns-with-slider-right.jpg" />
    </Frame>

    **Gallery block with three column view and slider**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/banners/three-columns-with-slider.jpg" />
    </Frame>

    **Gallery block with dual image**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/banners/two-columns.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### Categories

* **Organization**: Dynamically presents product or content categories, allowing users to navigate the site's offerings.
* **Customization**: Categories can be arranged or highlighted according to business priorities.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/categories/categories-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/categories/categories-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Categories with fixed images**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/categories/basic-categories.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### Deals

* **Promotion**: Features special offers or discounts, sometimes with a countdown for limited-time deals.
* **Urgency**: Encourages quick decision-making by highlighting the temporary nature of the deals.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/deals/deals-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/deals/deals-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Gallery block with single product**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/deals/basic-deals.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### New Arrivals

* **Freshness**: Introduces the latest products or content to keep the site current and engaging.
* **Discovery**: Helps visitors discover what's new quickly and efficiently.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/newarrivals/newarrivals-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/newarrivals/newarrivals-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **New Arrivals Gallery**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/newarrivals/basic-new-arrivals-2.jpg" />
    </Frame>

    **Gallery with vertical cards and tag**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/newarrivals/basic-new-arrivals.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### Brands

* **Selection**: Groups products by brand for customers who have brand loyalty or preferences.
* **Navigation**: Facilitates easier browsing for customers looking for specific brands.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/brands/brands-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/brands/brands-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Brands with fixed logos**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/brands/basic-brands.jpg" />
    </Frame>
  </Tab>
</Tabs>

#### Social Media

* **Integration**: Connects social media content directly to the website to extend engagement channels.
* **Updates**: Keeps content fresh with the latest posts or updates from linked social media accounts.

<Tabs>
  <Tab title="Goto">
    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/socialmedia/socialmedia-01.png" />
    </Frame>

    <Frame>
      <img src="https://cdn.lightbooks-dev.io/docs/storefront/widgets/socialmedia/socialmedia-02.png" />
    </Frame>
  </Tab>

  <Tab title="Models">
    **Instagram feed**

    <Frame>
      <img src="https://cdn.aasaan.app/categories/fashion/storefront/widgets/socialmedia/instafeed.jpg" />
    </Frame>
  </Tab>
</Tabs>

Widgets in Aasaan are designed to be highly customizable, ensuring that they contribute effectively to your website's design and user engagement strategy.
