> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/classic-manual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/classic-manual/addons/premium-themes/aspen.md).

# Aspen

Introducing Aspen, a ruggedly beautiful Premium RapidWeaver theme. Immerse your visitors in a captivating browsing experience with Aspen's breathtaking design. Crafted with attention to detail, Aspen offers grand video/image banners, responsive audio and video layouts, and phenomenal creative freedom, making it the perfect companion for your web building adventure.

[Preview Aspen Here](https://www.realmacsoftware.com/rapidweaver/addons/aspen/)

[Purchase Aspen Here](https://www.realmacsoftware.com/store/) or as part of our [Premium Themes Bundle Here](https://www.realmacsoftware.com/store/rapidweaver/)!

Below you will find some helpful tutorials to guide you through Aspen's features.

***

## Aspen's Main Features

### Animated Site Titles

This tutorial will show you how to add an animated site title in the Aspen Theme.

{% embed url="<https://www.youtube.com/watch?v=WhVowSLQIdk>" %}
How to add an animated site title in the Aspen Theme
{% endembed %}

Example video snippet:

```html
<i>My</i> <i>Custom</i> <i>Website</i>
```

***

### Autoplay Video Banners

This tutorial will show you how to set up an Autoplay Video Banner using the Aspen Theme.

{% embed url="<https://www.youtube.com/watch?v=jbk2GmGRLzo>" %}
How to add an Autoplay Video Banner to the Aspen Theme&#x20;
{% endembed %}

1. Add your compressed .mp4 video file to **RapidWeaver** > **View** > **Show Site Resources** ([**Command-4**](/classic-manual/user-manual/keyboard-shortcuts.md)).
2. In the **Inspector** > **General Settings tab** ([**Option-Command-1**](/classic-manual/user-manual/keyboard-shortcuts.md)) > enable the **Slogan field**.
3. Paste the autoplay video code snippet into that Slogan field:

```html
<video autoplay playsinline muted loop="true" width="1280" height="720"><source type="video/mp4" src="%resource()%"></video>
```

4. Add your video filename within the resource () brackets in the above code.

***

### Banner Import Stack

This tutorial will show you how to use the included Aspen Banner Import stack in your website.

{% hint style="info" %}
This tutorial requires the [Stacks](https://marketplace.realmacsoftware.com/plugins/stacks) third party plugin.
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=7Js5menWwxk>" %}
How to use the Banner Import stack with the Aspen Theme
{% endembed %}

***

### Custom Banner Image (Site Wide)

This tutorial will show you how to add a site wide banner image to the Aspen theme.

1. In RapidWeaver, go to **Settings** > **General**, then drag and drop your image in the **Banner** input box.

<figure><img src="/files/V5b8tmXevCJHPI7L5joI" alt=""><figcaption></figcaption></figure>

Your custom banner will be displayed for all pages in RapidWeaver's Preview mode.

<figure><img src="/files/umz7lJe27GneXVhYvgIx" alt=""><figcaption></figcaption></figure>

***

### Custom Banner Images (Per Page)

This tutorial will show you how to add a per page banner image to the Aspen theme.

{% embed url="<https://www.youtube.com/watch?v=y017Ipuv_OM>" %}
How to add a custom banner image in the Aspen Theme
{% endembed %}

***

### Custom Site Logo

This tutorial will show you how to add a custom site logo in the Aspen Theme.

{% embed url="<https://www.youtube.com/watch?v=B222OPoD-hg>" %}
How to add a custom site logo in the Aspen Theme
{% endembed %}

***

### Responsive Video Player

This tutorial will show you how to embed a responsive YouTube or Vimeo video player on your pages in the Aspen theme.

{% embed url="<https://www.youtube.com/watch?v=x5Mgpvw8YLw>" %}
How to embed a responsive YouTube or Vimeo video in the Aspen Theme
{% endembed %}

1. Copy the **embed/share** code from the video host.

* Copy your **YouTube** Embed code from here:

<div><figure><img src="/files/woL6zW27mO0Nq0HxTbjA" alt=""><figcaption><p>Step 1: Click Share > Embed</p></figcaption></figure> <figure><img src="/files/9tkvRhw9WPImqGtyfTkV" alt=""><figcaption><p>Step 2: Select desired embed options > Copy the highlighted embed code</p></figcaption></figure></div>

* Copy your **Vimeo** Embed code from here:

<div><figure><img src="/files/WUsmVuwsgt24WEdhLN66" alt="" width="563"><figcaption><p>Step 1: Click Share</p></figcaption></figure> <figure><img src="/files/jrzlH5UDQxLVdH65o0g9" alt="" width="563"><figcaption><p>Step 2: Select desired embed options > Copy the highlighted embed code</p></figcaption></figure></div>

2. Paste the embed code in the RapidWeaver page/section where you'd like the fluid video player to appear.

* Highlight your code, select **Format** > **Clear Formatting** ([**Option-Command-.**](/classic-manual/user-manual/keyboard-shortcuts.md)), then **Format** > **Ignore Formatting** ([**Command-.**](/classic-manual/user-manual/keyboard-shortcuts.md)).

<figure><img src="/files/X32EdQBx6NrtADwjXO5f" alt=""><figcaption></figcaption></figure>

Your responsive video player should now show in RapidWeaver's Preview mode.

<figure><img src="/files/LZQQpT5NfGKSuVkmXtIn" alt=""><figcaption></figcaption></figure>

***

### Responsive Audio Player

This tutorial will show you how to add a responsive audio player in the Aspen Theme.

{% embed url="<https://www.youtube.com/watch?v=-NYzppNjQiY>" %}
How to add an Audio Player in the Aspen Theme
{% endembed %}

1. Add your .wav or .mp3 file to the RapidWeaver **Resources** panel ([**Command-4**](/classic-manual/user-manual/keyboard-shortcuts.md)).
2. Paste the below audio player code snippet in the RapidWeaver page/section where you'd like the audio player to appear:

{% code fullWidth="false" %}

```html
<audio preload="auto" controls><source src="%resource()%" /></audio>
```

{% endcode %}

3. Add your audio filename within the resource () brackets in the above code.

* Highlight your code, and select **Format** > **Ignore Formatting** ([**Command-.**](/classic-manual/user-manual/keyboard-shortcuts.md)).

In preview, your responsive audio player should now be displayed.

***

### Sidebar Split feature

This tutorial will show you how to use the split sidebar feature in the Aspen theme.

{% embed url="<https://www.youtube.com/watch?v=_YEpl4WA6S0>" %}
How to use the Sidebar Split feature in the Aspen Theme
{% endembed %}

***

### Aspen's Sidebar Import Stack

This tutorial will show you how to use the sidebar import stack inside your website using the Aspen theme.

{% hint style="info" %}
This tutorial requires the [Stacks](https://marketplace.realmacsoftware.com/plugins/stacks) third party plugin.
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=r8oQQgILffA>" %}
How to use the Aspen sidebar import stack
{% endembed %}

***

### Aspen's Split stack

Tutorial showing how to use the Aspen Split stack in your next website built with the Aspen theme.

{% hint style="info" %}
This tutorial requires the [Stacks](https://marketplace.realmacsoftware.com/plugins/stacks) third party plugin.
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=nHEENz1zAYw>" %}
How to use the Aspen Split stack
{% endembed %}

***

### Change the "Menu" button text

This tutorial will show you how to change the "Menu" button text in RapidWeaver's Aspen theme.

<figure><img src="/files/blAf5tfyXNG2C0fk1j2X" alt="How to change the menu button text in Premium RapidWeaver Theme Aspen"><figcaption><p>How to change the menu button text in Aspen</p></figcaption></figure>

To change the menu button text in the Aspen Theme, paste the below CSS code into the **Inspector** > **HTML Code tab** ([**Option-Command-3**](/classic-manual/user-manual/keyboard-shortcuts.md)), > **CSS sub-tab:**

```css
figure.theme header.theme .nav_btn:after{content: 'MENU';}
```

Once pasted, adjust the quoted **'MENU'** text as needed. This will update the “Menu” button text site wide.

In the above example we changed **'MENU'** to **'SUPER MENU'**.

***

## eCommerce with Aspen

Aspen comes packed with eCommerce features to help you build a successful eCommerce website. Take your online sales to new heights with Aspen, where only the sky is the limit.

### Ecwid eCommerce

Ecwid is our preferred eCommerce platform and is fully compatible with Aspen. Get Ecwid for a beautiful online store to sell digital or physical products. [Learn more, and sign up for a free plan](https://open.ecwid.com/lcM2g?url=https%3A%2F%2Fmy.ecwid.com%2Fcp%2F%3Fpartner%3Drapidweaver%23register).

{% hint style="info" %}
Tutorial requires an [***Ecwid eCommerce account***](https://open.ecwid.com/lcM2g?url=https%3A%2F%2Fmy.ecwid.com%2Fcp%2F%3Fpartner%3Drapidweaver%23register)***.*** Sign up for a free plan to get started.
{% endhint %}

We've put together a short three part video tutorial that goes through how to setup your Ecwid store in RapidWeaver and start selling online with ease.

**1) Start Selling online with RapidWeaver and Ecwid**

{% embed url="<https://www.youtube.com/watch?v=ptsyqo7fQ3Y>" %}

**2) Categories & Store Customization**

{% embed url="<https://www.youtube.com/watch?v=6wei9uL02eg>" %}

**3) Sell Online with Stacks and Ecwid**

{% embed url="<https://www.youtube.com/watch?v=HS_E_aTlQ9I>" %}

***

### Cartloom eCommerce

This tutorial covers the built-in Cartloom eCommerce features that come with the Aspen theme.

{% hint style="info" %}
Tutorial requires a [***Cartloom eCommerce***](https://cartloom.com/) account.
{% endhint %}

Aspen comes with built-in Cartloom eCommerce integration and features.

* Display a Cartloom eCommerce shopping cart icon in upper right-hand corner of your page that updates in real-time as items are added or removed from the cart.
* Import a shopping bag, shopping basket, or shopping cart icon that triggers Cartloom's View Cart function anywhere in your page layout/design.
* Import a shopping bag, shopping basket, or shopping cart icon into Aspen's designated social icon areas that link to your eCommerce page.

### **Interactive Shopping Cart (Upper Right Corner)**

To add an interactive shopping icon that updates in real-time as items are added/removed from your shopper's cart:

1. Go to **Settings** > **Master Style** > check the **Show Cartloom Cart** box > adjust the Shopping Icon Size per your desire.

<figure><img src="/files/7DMe57pOK7YvXKdUqbZs" alt=""><figcaption></figcaption></figure>

2. Paste the Cartloom Javascript snippet below in **Settings** > **Code** > **Head:**

```javascript
<script type="text/javascript" id="cljs" src="https://sellername.cartloom.com/cl4/cart.js"></script>
```

{% hint style="info" %}
Replace **sellername** in the above snippet to match your actual Cartloom seller name.
{% endhint %}

<figure><img src="/files/VmNcvLznrQJsaABsl7Ko" alt=""><figcaption></figcaption></figure>

### **Interactive Shopping Cart (Anywhere)**

To add an interactive shopping cart icon anywhere in your site's layout/design, copy any of the below code snippets and paste it into your page's content area within RapidWeaver's Edit mode:

Shopping Bag

```html
<a class="social-bag cartloom-viewcart" href="#"></a>
```

Shopping Basket

```html
<a class="social-basket cartloom-viewcart" href="#"></a> 
```

Shopping Cart

```html
<a class="social-cart cartloom-viewcart" href="#"></a>
```

<figure><img src="/files/3YEx8BvcPxWBePh2SIAj" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/xJlgZbK12Bg64Aa5vrB3" alt=""><figcaption></figcaption></figure>

1. Paste the below Cartloom Javascript snippet under **Settings** > **Code** > **Head**:

```javascript
<script type="text/javascript" id="cljs" src="https://sellername.cartloom.com/cl4/cart.js"></script>
```

{% hint style="info" %}
Replace **sellername** in the above snippet to match your actual Cartloom seller name.
{% endhint %}

<figure><img src="/files/VmNcvLznrQJsaABsl7Ko" alt=""><figcaption></figcaption></figure>

### **eCommerce Shopping Icons**

To add a shopping icon to Aspen's designated theme areas:

1. Copy your preferred shopping icon code snippet from the below options, then go to **Settings** > **Code** > **Body** > and paste your code there.

Shopping Bag

```html
<a class="social-import social-bag" href="#"></a>
```

Shopping Basket

```html
<a class="social-import social-basket" href="#"></a>
```

Shopping Cart

```html
<a class="social-import social-cart" href="#"></a>
```

{% hint style="info" %}
If you'd like to link to your eCommerce page from the above icons, replace **#** with the actual link to your page.&#x20;

Example:

```html
<a class="social-import social-bag" href="https://www.example.com/shop/"></a>
```

{% endhint %}

<figure><img src="/files/baXysKHimNoy8ZADemJK" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/lMrViG6e5EPFoCAikr9s" alt=""><figcaption></figcaption></figure>