# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.realmacsoftware.com/classic-manual/addons/premium-themes/aspen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.