FastStore UI Components
FastStore UI is designed and built following the Atomic Design (opens in a new tab) pattern. Atomic Design breaks user interfaces hierarchically into smaller and simpler components and the FastStore components are classified in: atoms, molecules, organisms and features.
Atoms
- Success
Badge
Badges are status descriptors used to emphasize an item's state.
Button
Buttons indicate actions that users can take, like adding an item to the cart.
Checkbox
Checkboxes allow users to toggle an option on or off.
Icon
Icons are simplified graphics used to represent concepts and help users navigate the UI.
Input
Fields used to get user inputs.
Label
Describes the meaning of input fields.
Link
Performs the same behavior of a regular anchor tag (`a`), but can be used as any HTML tag and component.
- Great Unordered List
- Ok Unordered List
- Bad Unordered List
List
Lists group related content. They can be ordered or unordered.
Loader
Loaders provide a visual cue that an action is being processed.
A content outside me
Overlay
Overlays provide contextual information on top of the current layer of the interface.
- 62.5
Price
Used to display the price of a given product, discount and total values.
Radio
Allow users to select one option from a set.
Select
Select components allow users to pick an option from a predefined list.
Skeleton
Improves the store's experience and perceived performance through loading placeholders.
- 0500
Slider
Allows users to select a single value from a range.
- visually hidden text
SROnly
Hides an element visually. Improve accessibility by providing text to screen readers when applied.
Molecules
- Shorts
- Sweatshirt
- Tank tops
- Backpacks
- Necessaire
- Smartphones
- TVs
Accordion
Displays an expandable/collapsible list of items.
Alert message
LinkAlert
Displays short messages related to the behavior of a system, feature or page.
Breadcrumb
Indicates the user's location in a website hierarchy.
Buy Button
Intends to send the user to the checkout/cart step directly.
Carousel
Slides through multiple elements using custom controls.
Apple Magic MouseColor: Black
Size: Medium
Original price:$999Price:$950.04Cart Item
Used to present the summarized information of a product inside the Cart.
Checkbox Field
Wraps a
Checkboxinput and its correspondingLabel. It allows users to select one option from a set.- 50% off
Discount Badge
A custom
Badgethat display product's discounts. Dropdown
Displays a set of actions/items to the user, usually used to show a menu of options.
Get a Apple Magic Mouse
Original price:$999FreeGift
Displays an additional item to purchase as a gift.
Icon Button
icons that trigger some sort of action, such as adding an item to the cart.
Input Field
Wraps an
Inputand its correspondingLabel.Link Button
Visuallly replicates a
Button, however acts as a link to navigate users between pages.Modal
Are dialog windows that sit on top of an application's main view.
Navbar Links
Used to display a set of navigation links that self adapts on mobile or desktop screens.
- Subtotal (3 products)$1,200
- Discount-$100
- Total$1,100
Order Summary
Provides a summary of the items in the cart, including the total price, related shipping tax, and discounts.
Product Card
Displays summarized information about a product.
- Original price:$999Price:$950.04
Product Price
Displays product's selling and listing prices.
Apple Mouse
10% offProduct Title
Used on Product Details Page, wraps the product name, a product label and the rating.
Quantity Selector
Allows customers to select the quantity of a given product to purchase.
Radio Field
Wraps a
Radioinput and its correspondingLabel. It allows users to select one option from a set.Radio Group
Allows users to select a single option from a list of two or more mutually exclusive options.
Rating
Displays the average rating of a product based on other shoppers' feedback and reviews.
Region Bar
Trigger the
RegionModaland is part ofRegionalizationfeature.Search Auto Complete
Lists auto completing suggestions based on searched term. This component is part of the
Searchfeature.Search Dropdown
Combines all
Searchcomponents to show all options inSearchInput. This component is part of theSearchfeature.Search History
Responsible for showing the latest terms searched by a user. This component is part of the
Searchfeature.Search Input Field
An
InputFieldwith a search button. This component is part of theSearchfeature.Suggested Products
Search Products
Shows details of the suggested products. This component is part of the
Searchfeature.Search Top
Displays the most searched terms by customers. This component is part of the
Searchfeature.Select Field
Wraps a
Selectinput and its correspondingLabel. It allows users to select one option from a set.SKU Selector
Used in Product Details Pages (PDPs) to display all the available variants for a given product.
Bordered
Total
1x $200 2x $200 3x $204 Table
Displays information in a friendly way, allowing users to scan for details quickly.
- Tag
Tag
Are an interactive
Badge. By default, its have a close button. Toast
Used to display notifications.
Toggle
A customized checkbox input styled to look like a switch button.
Toggle Field
Toggle Field wraps a
Toggleinput and its correspondingLabel.
Organisms
Explore more about our amazing products
See moreBanner Text
Used for advertising brands, products, and/or collections.
Cart Sidebar
Displays the summary of items added to the cart along with detailed information, and checkout option.
Your Cart is empty
Empty State
Used to represent an empty state.
Filters
Filter
Filters products inside the Product Listing Page (PLP) and Search Page.
Filter Slider
The mobile
Filterview that is rendered inside aSlideOvercomponent.
Hero
Full-width banner presented on the above-the-fold section of a web page.
Image Gallery
Used when you want to display a series of photos in a gallery on a post or page.
Navbar
Represents the page header and groups features like Search and Regionalization.
Open Menu
Navbar Slider
As part of the
Navbar, this component is its mobile version used to list the navigation links through theNavbarLinks.Newsletter
Represents a section with at least one input text with an action allowing users to submit their input.
Out of Stock
Used to announce to users that the product is out of stock.
Payment Methods
Displays the logos of the available payment options in a store.
- $0$500$100$250
Price Range
Sliderthat allows users to select a maximum and minimum price from a range. 
Apple Magic Mouse
Original price:$999Price:$950.04
4k Philips Monitor 27”
Original price:$490Price:$420
Echo Dot Smart Speaker
Original price:$310Price:$280
Aedle VK-1 L Headphone
Original price:$150Price:$130
Oculus VR Headset
Original price:$344Price:$315
Apple AirPods Pro
Original price:$249Price:$229
Anker SoundCore Liberty Air
Original price:$643.71Price:$486.34
Fujifilm X-T1 Camera
Original price:$495.97Price:$366.11
SANDMARC Fisheye Lens
Original price:$946.73Price:$636.05
Apple AirTag
Original price:$679.29Price:$426.14
Product Grid
A section generally used on PLP pages to list the products available in the store.
Apple Magic Mouse
Original price:$999Price:$950.044k Philips Monitor 27”
Original price:$490Price:$420Echo Dot Smart Speaker
Original price:$310Price:$280Aedle VK-1 L Headphone
Original price:$150Price:$130Oculus VR Headset
Original price:$344Price:$315Apple AirPods Pro
Original price:$249Price:$229
Product Shelf
Displays a list of products to be used as a section on the store.
Region Modal
A
Modalwith some region configurations. The component is part ofRegionalizationfeature.Search Input
Responsible to receive, search and display suggestions. This component is part of the
Searchfeature.Shipping
I don't know my Postal CodeShipping Simulation
Lets customers set the
PostalCodeand see the shipping options in the `PDP`.Slide Over
Represents an aditional session that complements the screen's information.