Extensions `THEME_NAME/extensions/`

One of Shadows key points is having components which can be used across any ReadyTheme built on the framework. We call these Extensions.

Extensions are self-contained, complete UI components which provides a form of plug & play functionality. Extensions may include HTML, CSS, and/or JavaScript.

AJAX Add-to-Cart

The AJAX Add-to-Cart extension will add a product to the basket from the product page without reloading the page. If you also have the Mini-Basket extension active, it will display when a product has been successfully added. If the Mini-Basket extension is not active, a success message will be displayed instead.

AJAX Add-to-Cart come pre-installed with Shadows, it just needs to be activated. To activate:

Navigate to User Interface -> JavaScript Resources
Edit the source for theme
Uncomment the following:
```
								
							
```

Breadcrumbs `THEME_NAME/extensions/breadcrumbs/breadcrumbs.css`

THEME_NAME/extensions/breadcrumbs/breadcrumbs.html

Collapsing Breadcrumbs
`THEME_NAME/extensions/breadcrumbs/collapsing/collapsing-breadcrumbs.css`

THEME_NAME/extensions/breadcrumbs/collapsing/collapsing-breadcrumbs.html

THEME_NAME/extensions/breadcrumbs/collapsing/collapsing-breadcrumbs.js

Category Tree `THEME_NAME/extensions/category-tree/category-tree.css`

THEME_NAME/extensions/category-tree/category-tree.html

Fasten Header
`THEME_NAME/extensions/fasten-header/fasten-header.css`

THEME_NAME/extensions/fasten-header/fasten-header.html

THEME_NAME/extensions/fasten-header/fasten-header.js

Hero `THEME_NAME/extensions/hero/hero.css`

Storefront Example

Category Image Example

Hero Slider

One of the most popular requests when it comes to creating a site is to replace the static hero image with a carousel of images. Shadows has this covered with Roundabout. To create a hero slider, follow these steps:

Navigate to ReadyTheme -> Images
Add images and copy the item tags generated.
Navigate to ReadyTheme -> Content Sections
Create a new ReadyTheme Content Section with the following code (replace placeholder image tags with the ones you copied in the previous step):
```
								
							
```
Replace this code in the SFNT Page Template with the ReadyTheme Content item tag you created:
```
								
							
```
Navigate to User Interface -> CSS Resources
Edit extensions and add @import "carousel/roundabout.css"; to the bottom of the import list.
Navigate to User Interface -> JavaScript Resources
Edit theme and, within the jsSFNT function, add this code:
```
								
							
```
If you would like the carousel to automatically start, you can pass that as an option:
```
								
							
```

Messages `THEME_NAME/extensions/messages/messages.css`

THEME_NAME/extensions/messages/messages.html

Mini-Basket

The Mini-Basket extension will display the contents of the Miva mini-basket item in an off-canvas overlay which will transition in from the right edge of the browser.

Mini-Basket come pre-installed with Shadows, it just needs to be activated. To activate:

Navigate to User Interface -> CSS Resources
Edit the source for extensions
Uncomment the following:
```
								
							
```
Navigate to User Interface -> JavaScript Resources
Edit the source for theme
Uncomment the following:
```
								
							
```
Navigate to ReadyTheme -> Content Sections
Activate mini_basket

THEME_NAME/extensions/mini-basket/mini-basket.css

THEME_NAME/extensions/mini-basket/mini-basket.html

THEME_NAME/extensions/mini-basket/mini-basket.js

Shadows ships with a mobile friendly navigation as well as three expanded navigation patterns; drop-down, overflow, and overlay. To utilize one of these methods, follow these steps:

Navigate to User Interface -> CSS Resources
Edit extensions and add the @import link which corresponds to the navigation pattern you are using, to the bottom of the import list; i.e. @import "navigation/overlay-navigation.css";.
Navigate to User Interface -> JavaScript Resources
Edit theme and, within the init function, add the code which corresponds to the navigation pattern you are using:
```
								
							
```
```
								
							
```
```
								
							
```

Transfigure Navigation THEME_NAME/extensions/navigation/transfigure-navigation.css

THEME_NAME/extensions/navigation/transfigure-navigation.html

THEME_NAME/extensions/navigation/transfigure-navigation.js

Drop-Down Navigation THEME_NAME/extensions/navigation/drop-down/drop-down-navigation.css

THEME_NAME/extensions/navigation/drop-down/drop-down-navigation.html

THEME_NAME/extensions/navigation/drop-down/drop-down-navigation.js

Overflow Navigation THEME_NAME/extensions/navigation/overflow/overflow-navigation.css

THEME_NAME/extensions/navigation/overflow/overflow-navigation.html

THEME_NAME/extensions/navigation/overflow/overflow-navigation.js

Overlay Navigation THEME_NAME/extensions/navigation/overlay/overlay-navigation.css

THEME_NAME/extensions/navigation/overlay/overlay-navigation.html

THEME_NAME/extensions/navigation/overlay/overlay-navigation.js

Product Carousel

ReadyTheme Product Listings are a great way to create featured product displays and the like. Sometimes though, it is nice to display more products and allow customers to scroll through them. To create a product carousel, follow these steps:

Navigate to ReadyTheme -> Product Listings
Edit featured_products and replace the code with the following:
```
								
							
```
Alternately, you can create a new product listing, modify a related products list, or other similar lists.
Navigate to User Interface -> CSS Resources
Edit extensions and add @import "carousel/roundabout.css"; to the bottom of the import list.
Navigate to User Interface -> JavaScript Resources
Edit theme and, within the jsSFNT function, add this code:
```
								
							
```
If you would like the carousel to automatically start, you can pass that as an option:
```
								
							
```
If you are adding/modifying a product list on a different page, you will need to initialize the function there instead.

Quantity Increment Adjuster
`THEME_NAME/extensions/quantify/quantify.css`

THEME_NAME/extensions/quantify/quantify.html

THEME_NAME/extensions/quantify/quantify.js

Search Preview `THEME_NAME/extensions/search-preview/search-preview.css`

THEME_NAME/extensions/search-preview/search-preview.html

THEME_NAME/extensions/search-preview/search-preview.js

Spinner `THEME_NAME/extensions/spinner/spinner.css`

Tabbed Product Details
`THEME_NAME/extensions/tabs/flex-tabs.css`

THEME_NAME/extensions/tabs/flex-tabs.html

Extensions THEME_NAME/extensions/

AJAX Add-to-Cart

Breadcrumbs THEME_NAME/extensions/breadcrumbs/breadcrumbs.css

Collapsing Breadcrumbs THEME_NAME/extensions/breadcrumbs/collapsing/collapsing-breadcrumbs.css

Category Tree THEME_NAME/extensions/category-tree/category-tree.css

Fasten Header THEME_NAME/extensions/fasten-header/fasten-header.css

Hero THEME_NAME/extensions/hero/hero.css