# 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="" %} How to add an animated site title in the Aspen Theme {% endembed %} Example video snippet: ```html My Custom Website ``` *** ### Autoplay Video Banners This tutorial will show you how to set up an Autoplay Video Banner using the Aspen Theme. {% embed url="" %} How to add an Autoplay Video Banner to the Aspen Theme {% endembed %} 1. Add your compressed .mp4 video file to **RapidWeaver** > **View** > **Show Site Resources** ([**Command-4**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)). 2. In the **Inspector** > **General Settings tab** ([**Option-Command-1**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)) > enable the **Slogan field**. 3. Paste the autoplay video code snippet into that Slogan field: ```html

``` 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="" %} 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.

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

*** ### Custom Banner Images (Per Page) This tutorial will show you how to add a per page banner image to the Aspen theme. {% embed url="" %} 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="" %} 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="" %} 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:

Step 2: Select desired embed options > Copy the highlighted embed code

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

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-.**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)), then **Format** > **Ignore Formatting** ([**Command-.**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)).

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

*** ### Responsive Audio Player This tutorial will show you how to add a responsive audio player in the Aspen Theme. {% embed url="" %} 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**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)). 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

``` {% endcode %} 3. Add your audio filename within the resource () brackets in the above code. * Highlight your code, and select **Format** > **Ignore Formatting** ([**Command-.**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)). 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="" %} 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="" %} 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="" %} 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.

How to change the menu button text in Premium RapidWeaver Theme Aspen — How to change the menu button text in Aspen

To change the menu button text in the Aspen Theme, paste the below CSS code into the **Inspector** > **HTML Code tab** ([**Option-Command-3**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)), > **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="" %} **2) Categories & Store Customization** {% embed url="" %} **3) Sell Online with Stacks and Ecwid** {% embed url="" %} *** ### 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.

2. Paste the Cartloom Javascript snippet below in **Settings** > **Code** > **Head:** ```javascript ``` {% hint style="info" %} Replace **sellername** in the above snippet to match your actual Cartloom seller name. {% endhint %}

### **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 ``` Shopping Basket ```html ``` Shopping Cart ```html ```

1. Paste the below Cartloom Javascript snippet under **Settings** > **Code** > **Head**: ```javascript ``` {% hint style="info" %} Replace **sellername** in the above snippet to match your actual Cartloom seller name. {% endhint %}

### **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 ``` Shopping Basket ```html ``` Shopping Cart ```html ``` {% 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. Example: ```html ``` {% endhint %}