Version 1.0.7

Fixed: Banner shifting bug when scrolling down the page.

Version 1.0.5

Fixed: 3rd level sub navigation not accessible in slide-out navigation.

Version 1.0.2

Fixed: Navigation “Menu” button and mobile navigation not accessible.

Version 1.0.1

Added: Color picker for mobile menu background.

Added: Color picker for nav title hover underline.

Added: Color picker for Banner Import links.

Added: Scroll down nav menu is less wide.

Added: Site Logo hover now shows hand cursor.

Fixed: Scroll down nav menu background flash.

Fixed: Disable Nav Parent Pages, sub pages not accessible on iOS.

Fixed: Firefox, poor performance on navigation hover.

Fixed: Main and Sub HIDE hover underlines, not working.

Version 1.0.0

Original theme release

Q: Will past purchasers of Nick's Marvel theme get support from Realmac?

A: Yes, we'll offer support to anyone that previously purchased the Marvel theme directly from Nick Cates. However, we always recommend asking css/html and site building related questions on our Community Forum. Q: I already purchased Marvel from Nick Cates, do I need to buy it again?

A: No, the Realmac version has few changes. Keep using the version you purchased. You can download the most recent version of the theme from Nick Cates, using his order lookup tool. Realmac Customers should use the Realmac order lookup tool. Q: Are there any updates or are you just taking over support?

A: No significant updates were needed for Marvel. However, if updates are required, Realmac will make those changes and publish an update. This will be available to customers that purchased directly from Realmac.

Q: The Marvel theme is fairly old, does it still work okay?

A: Yes, absolutely, it's a great theme and can produce amazing websites that look and perform great on the web. The age of this theme is reflected in the price.

Q: The Demo project uses some stacks I don't own, do I need them?

A: No. The example project uses Velvet and the Photo stack from Nick Cates Design, these are now available from Weaver's Space.

Please remember, that you don’t need these stacks to use the theme. They are optional.

Copy and paste these social icon snippets into the RapidWeaver Settings → Code → Body area. Once pasted, replace “#” with the page url to your social network.

Example 1: Importing into a designated theme social icon area:

<a class="social-youtube social-import" href="https://www.youtube.com/@realmacsoftware"></a>

Example 2: Basic icon linking without importing into a designated theme area:

<a class="social-youtube" href="https://www.youtube.com/@realmacsoftware"></a>

Example 3: Icon linking to a new external page, using “parent” rel tag:

<a class="social-youtube" target="_blank" href="https://www.youtube.com/@realmacsoftware"></a>

Icon List

About Me

<a class="social-aboutme social-import" href="#"></a>

AIM

<a class="social-aim social-import" href="#"></a>

Amazon

<a class="social-amazon social-import" href="#"></a>

Android

<a class="social-android social-import" href="#"></a>

Angie’s List

<a class="social-angie social-import" href="#"></a>

App.net

<a class="social-app-net social-import" href="#"></a>

App Store

<a class="social-app-store social-import" href="#"></a>

Bandcamp

<a class="social-bandcamp social-import" href="#"></a>

Behance

<a class="social-behance social-import" href="#"></a>

Blip

<a class="social-blip social-import" href="#"></a>

Blogger

<a class="social-blogger social-import" href="#"></a>

Comments

<a class="social-comments social-import" href="#"></a>

Delicious

<a class="social-delicious social-import" href="#"></a>

Deviant Ar

<a class="social-deviant-art social-import" href="#"></a>

Digg

<a class="social-digg social-import" href="#"></a>

Disporia

<a class="social-disporia social-import" href="#"></a>

Disqus

<a class="social-disqus social-import" href="#"></a>

Dribbble

<a class="social-dribbble social-import" href="#"></a>

Ebay

<a class="social-ebay social-import" href="#"></a>

Email

<a class="social-email social-import" href="mailto:my-email@gmail.com"></a>

Ello

<a class="social-ello social-import" href="#"></a>

Etsy

<a class="social-etsy social-import" href="#"></a>

Fab

<a class="social-fab social-import" href="#"></a>

Facebook

<a class="social-facebook social-import" href="#"></a>

Facebook Like

<a class="social-facebook-like social-import" href="#"></a>

Flickr

<a class="social-flickr social-import" href="#"></a>

Flip

<a class="social-flip social-import" href="#"></a>

Four Square

<a class="social-four-square social-import" href="#"></a>

Github

<a class="social-github social-import" href="#"></a>

Google

<a class="social-google social-import" href="#"></a>

Google Plus

<a class="social-google-plus social-import" href="#"></a>

Houzz

<a class="social-houzz social-import" href="#"></a>

Instagram

<a class="social-instagram social-import" href="#"></a>

IMDB

<a class="social-imdb social-import" href="#"></a>

iTunes

<a class="social-itunes social-import" href="#"></a>

LastFM

<a class="social-lastfm social-import" href="#"></a>

Link

<a class="social-link social-import" href="#"></a>

LinkedIn

<a class="social-linkedin social-import" href="#"></a>

Mixcloud

<a class="social-mixcloud social-import" href="#"></a>

MySpace

<a class="social-myspace social-import" href="#"></a>

Nick Cates

<a class="social-ncd social-import" href="#"></a>

Newsvine

<a class="social-newsvine social-import" href="#"></a>

Path

<a class="social-path social-import" href="#"></a>

Paypal

<a class="social-paypal social-import" href="#"></a>

Phone

<a class="social-phone social-import" href="tel:#"></a>

Picasa

<a class="social-picasa social-import" href="#"></a>

Pinterest

<a class="social-pinterest social-import" href="#"></a>

Pocket

<a class="social-pocket social-import" href="#"></a>

Pandora

<a class="social-pandora social-import" href="#"></a>

Reddit

<a class="social-reddit social-import" href="#"></a>

Reverb Nation

<a class="social-reverb-nation social-import" href="#"></a>

RSS

<a class="social-rss social-import" href="#"></a>

Skype

<a class="social-skype social-import" href="#"></a>

SoundCloud

<a class="social-soundcloud social-import" href="#"></a>

Spotify

<a class="social-spotify social-import" href="#"></a>

Stumble Upon

<a class="social-stumble-upon social-import" href="#"></a>

Strava

<a class="social-strava social-import" href="#"></a>

Trip Advisor

<a class="social-trip-advisor social-import" href="#"></a>

Tumblr

<a class="social-tumblr social-import" href="#"></a>

Typed

<a class="social-typed social-import" href="#"></a>

Twitter

<a class="social-twitter social-import" href="#"></a>

UStream

<a class="social-ustream social-import" href="#"></a>

Viddler

<a class="social-viddler social-import" href="#"></a>

Vine

<a class="social-vine social-import" href="#"></a>

Vimeo

<a class="social-vimeo social-import" href="#"></a>

VK

<a class="social-vk social-import" href="#"></a>

WordPress

<a class="social-wordpress social-import" href="#"></a>

Xing

<a class="social-xing social-import" href="#"></a>

Yahoo

<a class="social-yahoo social-import" href="#"></a>

Yelp

<a class="social-yelp social-import" href="#"></a>

YouTube

<a class="social-youtube social-import" href="#"></a>

500px

<a class="social-500 social-import" href="#"></a>

500px (alt)

<a class="social-500-alt social-import" href="#"></a>

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

Purchase Aspen Here or as part of our Premium Themes Bundle Here!

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.

Example video snippet:

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

1. Add your compressed .mp4 video file to RapidWeaver > View > Show Site Resources (Command-4).

2. In the Inspector > General Settings tab (Option-Command-1) > enable the Slogan field.

3. Paste the autoplay video code snippet into that Slogan field:

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

1. 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.

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.

Custom Site Logo

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

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.

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

• Copy your YouTube Embed code from here:

• Copy your Vimeo Embed code from here:

1. 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-.), then Format > Ignore Formatting (Command-.).

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.

1. Add your .wav or .mp3 file to the RapidWeaver Resources panel (Command-4).

2. Paste the below audio player code snippet in the RapidWeaver page/section where you'd like the audio player to appear:

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

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

• Highlight your code, and select Format > Ignore Formatting (Command-.).

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.

Aspen's Sidebar Import Stack

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

Aspen's Split stack

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

Change the "Menu" button text

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

To change the menu button text in the Aspen Theme, paste the below CSS code into the Inspector > HTML Code tab (Option-Command-3), > CSS sub-tab:

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.

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

2) Categories & Store Customization

3) Sell Online with Stacks and Ecwid

Cartloom eCommerce

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

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.

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

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

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

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

Shopping Basket

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

Shopping Cart

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

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

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

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

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

Shopping Basket

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

Shopping Cart

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

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

Version 1.0.7

Added: Theme banner alt tag.

Version 1.0.6

Added: GDPR compliance.

Version 1.0.5

Fixed: Large drop shadows on blog entry images.

Version 1.0.4

Fixed: Minor fixes

Version 1.0.3

Fixed: Minor layout corrections

Version 1.0.2

Added: Basic site footer, can be toggled hide/show in the Styles > Theme Tools > Hide Footer

Added: Styles > Theme Tools > Disable Parallax Effect

Version 1.0.1

Added: 2nd level sub page parents within the slide out menu, are now functional, and include an arrow marker.

Added: Style > Theme Tools > Hide Site Title

Fixed: Style option, Header – Max Width: 700px

Fixed: Style option, Hide Link Hover Underline

Version 1.0.0

Original theme release

Q: Will past purchasers of Nick's Aspen theme get support from Realmac?

A: Yes, we'll offer support to anyone that previously purchased the Aspen theme directly from Nick Cates. However, we always recommend asking css/html and site building related questions on our Community Forum. Q: I already purchased Aspen from Nick Cates, do I need to buy it again?

A: No, the Realmac version has few changes. Keep using the version you purchased. You can download the most recent version of the theme from Nick Cates, using his order lookup tool. Realmac Customers should use the Realmac order lookup tool. Q: Are there any updates or are you just taking over support?

A: No significant updates were needed for Aspen. However, if updates are required, Realmac will make those changes and publish an update. This will be available to customers that purchased directly from Realmac.

Q: The Aspen theme is fairly old, does it still work okay?

A: Yes, absolutely, it's a great theme and can produce amazing websites that look and perform great on the web. The age of this theme is reflected in the price.

Version 1.1.4

Fixed: Compatibility issues with some 3rd party stacks.

Version 1.1.3

Fixed: Featured Nav Link Hover – color picker

Added: Featured Nav Link Current – color picker

Version 1.1.2

Fixed: Invisible nav links at iPad break point

Fixed: Style option “Header Max Width – 700px”

Version 1.1.1

Added: GDPR compliance.

Version 1.0.?

Fixed: Layout color bugs when using dark theme color layouts.

Version 1.0.8

Fixed: Nav slideout color pickers added for dark color layouts.

Version 1.0.7

Fixed: Safari issue with HTML5 video autoplay banner.

Version 1.0.6

Added: New style option, Theme Tools > “Disable Banner Load Animation”

Version 1.0.5

Fixed: Extra right spacing bug, induced by long site titles or too many featured navigation links.

Version 1.0.4

Fixed: Logo height bug in Window’s Edge browser.

Version 1.0.3

Fixed: Featured Nav links not click-able when banner is hidden.

Fixed: Split stack background image not scrolling in Window’s Edge browser.

Version 1.0.2

Fixed: Banner Type – Hidden: Social icons not click-able

Fixed: Banner Type – Hidden: Photo Album images disappear when zoomed

Fixed: Royale Split stack library description

Added: Featured Nav Sub Arrows (with hide option)

Added: Styles > Slide Nav Colors > “Background”

Added: Styles > Theme Tools > “Slide Out Site Title Only”

Added: Styles > Theme Tools > “Transparent Hidden Banner Fill”

Version 1.0.1

Added: Page styles from Royale Preview site – are now available within the Royale Theme.

Added: Style option toggle, “Taller Mobile Header”. This would give a taller mobile header height when using a site logo only for branding.

Fixed: Site title going below the site logo. Site title and logo should rest on the same line.

Fixed: iOS background images not appearing for Split stack with background scroll effect is being used.

Version 1.0.0

Original theme release

All premium themes are compatible with RapidWeaver 8 and RapidWeaver Classic and can be purchased from the Realmac Store.

Introducing Marvel, a Premium RapidWeaver theme that's truly EPIC! Unleash your creativity with Marvel's built-in features including edge-to-edge page sections, a drag-and-drop image/video banner area, and a super slide out navigation panel that's responsive across all devices. With its customizable features, responsive design, and stunning styles, Marvel is the ultimate choice for those looking to create websites that are out of this world!

Preview Marvel Here

Purchase Marvel Here or as part of our Premium Themes Bundle Here!

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

Marvel's Main Features

Theme Presets

Use the theme styles as shown on the Marvel preview site. You can set Marvel's theme style site wide, or per page.

Site Wide

Go to Master Style > select desired theme style from the Theme Styles dropdown menu.

Per Page

Select page title from left hand menu > go to Inspector > Page Styles (Option-Command-5) > uncheck Use Master Style box > select theme style from Theme Styles dropdown menu.

Mixed Media Banners

Below are the different banner options available in RapidWeaver's Premium Marvel theme and tutorials on how to add them.

Custom Banner Image (Site Wide)

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

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

Custom Banner Image (Per Page)

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

1. Select page you'd like to add custom banner image to from left hand menu > go to Inspector > General Settings (Option-Command-1), then drag and drop your image in the Override Site Banner input box.

Custom HTML5 Video Banner (Per Page)

This tutorial will show you how to add an HTML5 Video Banner to your pages in the Marvel theme.

1. Add your .mp4 video to the RapidWeaver Resources panel (Command-4).

1. Go to Inspector > Page Sidebar (Option-Command-2), and add the below video snippet:

<video loop muted autoplay class="feature"><source src="%resource(my_video.mp4)%" type="video/mp4"></video>

• Highlight your code, go to Format > Clear Formatting (Option-Command-.), then Format > Ignore Formatting (Command-.).

• Replace “my_video” with the name of your video file (no spaces).

1. Go to Inspector > Page Styles (Option-Command-5) > uncheck "Use Master Style" box > Banner – Type, choose HTML or Embed Video.

In preview, your HTML5 video should now be playing!

4. Drop in a fall back image banner by following the above Custom Banner (Per Page) guide, just in case some browsers or devices don't support HTML5 video.

Custom YouTube/Vimeo Video Banner (Per Page)

This tutorial will show you how to embed a YouTube or Vimeo video banner to the Marvel theme.

1. Copy your YouTube or Vimeo embed code. Usually you can find this by clicking the "Share" button located on the video's page. Below is an example for Vimeo.

1. Go to Inspector > Page Sidebar (Option-Command-2), then paste your YouTube or Vimeo embed code snippet.

• Highlight your code, go to Format > Clear Formatting (Option-Command-.), then Format > Ignore Formatting (Command-.).

• Add class="feature" to the iframe tag.

1. Go to Inspector > Page Styles (Option-Command-5)> uncheck "Use Master Style" box > Banner – Type, choose HTML or Embed Video.

In preview, your YouTube or Vimeo video should now be displayed!

Custom Velvet Video Banner (Per Page)

This tutorial will show you how to embed a Velvet Video banner in the Marvel theme.

1. In edit mode, place your intended Velvet banner video, as the first Velvet stack in the page order.

• Go to Inspector > Page Styles (Option-Command-5) > under Theme Tools section, uncheck Load Responsive Tools.

• Go to Inspector > Page Styles (Option-Command-5) > Banner – Type, choose Velvet (Import First Video).

In preview, your Velvet Video banner should now be displayed!

Custom SuperFlex 3 Slideshow Banner (Per Page)

This tutorial will show you how to add a SuperFlex 3 slideshow banner to the Marvel theme.

1. In your SuperFlex 3 stack settings, enable the Import option.

1. Go to Inspector > Page Styles (Option-Command-5) > Banner – Type, choose SuperFlex 3 (Import).

In preview, your SuperFlex 3 slideshow banner should now be displayed!

Responsive Video Player

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

1. Copy your YouTube or Vimeo embed code. Usually you can find this by clicking the "Share" button located on the video's page. Below is an example for YouTube.

1. Paste the embed code into the content edit area.

• Highlight your code, go to Format > Clear Formatting (Option-Command-.), then Format > Ignore Formatting (Command-.).

In preview, your responsive video should now be displayed.

Responsive Audio Player

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

1. Add your .wav or .mp3 file to the RapidWeaver Resources panel (Command-4).

1. Paste the below audio player code snippet in the RapidWeaver page/section where you'd like the audio player to appear:

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

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

• Highlight your code, and select Format > Ignore Formatting (Command-.).

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

Featured Navigation Links

This tutorial will show you how to create featured navigation menu links in the Marvel theme.

1. Single-click a page link (left panel) to edit the page title.

2. Paste the below code snippet in front of the page title.

<i></i>

When in preview mode, you should now see your featured desktop navigation links.

Create Line Breaks in Marvel

This tutorial will show you how to create line breaks on your pages in the Marvel theme.

1. Paste the below code into your content area to create a line break, then highlight your code and go to Format > Ignore Formatting (Command-.).

<hr>

Create Link Arrows in Marvel

This tutorial will show you how to create link arrows on your pages in the Marvel theme.

1. To style links with forward arrow icons, highlight the text you'd like make a link, then select the link icon.

1. Add a Custom Attribute, give it the name “class”, and value “social-forward”. Finally click the "Set Link" button.

In RapidWeaver's preview mode you will now see those link arrows next to the links you set.

Upper Right – Mobile Menu Button

This tutorial will show you how to move the mobile menu button that is displayed on mobile devices when viewing your Marvel theme built website.

1. The below custom css will make the mobile menu button appear in the upper right corner of a mobile device. Paste the below code snippet in Settings > Code > CSS.

@media screen and (max-width: 800px) { .menu_stick { top: 0;bottom: auto; } .slideout.menu_btn { top: 20px; bottom: auto; } }

Marvel's Split Stack

This tutorial will show you how to create an “edge to edge” section with Marvel's Split stack.

When downloading Marvel, in the folder you’ll find the Marvel Split stack, double-click the stack to install. Using a Stacks page, you can drag in the Marvel Split stack to create an “edge to edge” section within the main content area.

* NOTE: After using the Split stack, all following content MUST be contained within Split stacks to avoid layout issues.

* NOTE: Make sure you select matching Text, Header, and Link colors in your Marvel Split stack's settings so that they match your selected colors for these theme elements.

* NOTE: Split stack use is not compatible with using layout sidebar option. In the Inspector > Page Styles (Option-Command-5) > Sidebar Content - Position > “Hide” must be chosen from the dropdown menu.

eCommerce with Marvel

Marvel comes packed with eCommerce features to help you build a successful eCommerce website. Give your customers an EPIC online shopping experience with Marvel.

Ecwid eCommerce

Ecwid is our preferred eCommerce platform and is fully compatible with Marvel. Get Ecwid for a beautiful online store to sell digital or physical products. Learn more, and sign up for a free plan.

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

2) Categories & Store Customization

3) Sell Online with Stacks and Ecwid

Cartloom eCommerce

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

Marvel 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 Marvel'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.

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

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

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

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

Shopping Basket

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

Shopping Cart

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

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

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

eCommerce Shopping Icons

To add a shopping icon to Marvel'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

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

Shopping Basket

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

Shopping Cart

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

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

Copy and paste these social icon snippets into the RapidWeaver Settings → Code → Body area. Once pasted, replace “#” with the page url to your social network.

Example 1: Importing into a designated theme social icon area:

<a class="social-youtube social-import" href="https://www.youtube.com/@realmacsoftware"></a>

Example 2: Basic icon linking without importing into a designated theme area:

<a class="social-youtube" href="https://www.youtube.com/@realmacsoftware"></a>

Example 3: Icon linking to a new external page, using “parent” rel tag:

<a class="social-youtube" target="_blank" href="https://www.youtube.com/@realmacsoftware"></a>

Icon List

About Me

<a class="social-aboutme social-import" href="#"></a>

AIM

<a class="social-aim social-import" href="#"></a>

Amazon

<a class="social-amazon social-import" href="#"></a>

Android

<a class="social-android social-import" href="#"></a>

Angie’s List

<a class="social-angie social-import" href="#"></a>

App.net

<a class="social-app-net social-import" href="#"></a>

App Store

<a class="social-app-store social-import" href="#"></a>

Bandcamp

<a class="social-bandcamp social-import" href="#"></a>

Behance

<a class="social-behance social-import" href="#"></a>

Blip

<a class="social-blip social-import" href="#"></a>

Blogger

<a class="social-blogger social-import" href="#"></a>

Comments

<a class="social-comments social-import" href="#"></a>

Delicious

<a class="social-delicious social-import" href="#"></a>

Deviant Ar

<a class="social-deviant-art social-import" href="#"></a>

Digg

<a class="social-digg social-import" href="#"></a>

Disporia

<a class="social-disporia social-import" href="#"></a>

Disqus

<a class="social-disqus social-import" href="#"></a>

Dribbble

<a class="social-dribbble social-import" href="#"></a>

Ebay

<a class="social-ebay social-import" href="#"></a>

Email

<a class="social-email social-import" href="mailto:my-email@gmail.com"></a>

Ello

<a class="social-ello social-import" href="#"></a>

Etsy

<a class="social-etsy social-import" href="#"></a>

Fab

<a class="social-fab social-import" href="#"></a>

Facebook

<a class="social-facebook social-import" href="#"></a>

Facebook Like

<a class="social-facebook-like social-import" href="#"></a>

Flickr

<a class="social-flickr social-import" href="#"></a>

Flip

<a class="social-flip social-import" href="#"></a>

Four Square

<a class="social-four-square social-import" href="#"></a>

Github

<a class="social-github social-import" href="#"></a>

Google

<a class="social-google social-import" href="#"></a>

Google Plus

<a class="social-google-plus social-import" href="#"></a>

Houzz

<a class="social-houzz social-import" href="#"></a>

Instagram

<a class="social-instagram social-import" href="#"></a>

IMDB

<a class="social-imdb social-import" href="#"></a>

iTunes

<a class="social-itunes social-import" href="#"></a>

LastFM

<a class="social-lastfm social-import" href="#"></a>

Link

<a class="social-link social-import" href="#"></a>

LinkedIn

<a class="social-linkedin social-import" href="#"></a>

Mixcloud

<a class="social-mixcloud social-import" href="#"></a>

MySpace

<a class="social-myspace social-import" href="#"></a>

Nick Cates

<a class="social-ncd social-import" href="#"></a>

Newsvine

<a class="social-newsvine social-import" href="#"></a>

Path

<a class="social-path social-import" href="#"></a>

Paypal

<a class="social-paypal social-import" href="#"></a>

Phone

<a class="social-phone social-import" href="tel:#"></a>

Picasa

<a class="social-picasa social-import" href="#"></a>

Pinterest

<a class="social-pinterest social-import" href="#"></a>

Pocket

<a class="social-pocket social-import" href="#"></a>

Pandora

<a class="social-pandora social-import" href="#"></a>

Reddit

<a class="social-reddit social-import" href="#"></a>

Reverb Nation

<a class="social-reverb-nation social-import" href="#"></a>

RSS

<a class="social-rss social-import" href="#"></a>

Skype

<a class="social-skype social-import" href="#"></a>

SoundCloud

<a class="social-soundcloud social-import" href="#"></a>

Spotify

<a class="social-spotify social-import" href="#"></a>

Stumble Upon

<a class="social-stumble-upon social-import" href="#"></a>

Strava

<a class="social-strava social-import" href="#"></a>

Trip Advisor

<a class="social-trip-advisor social-import" href="#"></a>

Tumblr

<a class="social-tumblr social-import" href="#"></a>

Typed

<a class="social-typed social-import" href="#"></a>

Twitter

<a class="social-twitter social-import" href="#"></a>

UStream

<a class="social-ustream social-import" href="#"></a>

Viddler

<a class="social-viddler social-import" href="#"></a>

Vine

<a class="social-vine social-import" href="#"></a>

Vimeo

<a class="social-vimeo social-import" href="#"></a>

VK

<a class="social-vk social-import" href="#"></a>

WordPress

<a class="social-wordpress social-import" href="#"></a>

Xing

<a class="social-xing social-import" href="#"></a>

Yahoo

<a class="social-yahoo social-import" href="#"></a>

Yelp

<a class="social-yelp social-import" href="#"></a>

YouTube

<a class="social-youtube social-import" href="#"></a>

500px

<a class="social-500 social-import" href="#"></a>

500px (alt)

<a class="social-500-alt social-import" href="#"></a>

Copy and paste these social icon snippets into the RapidWeaver Settings → Code → Body area. Once pasted, replace “#” with the page url to your social network.

Example 1: Importing into a designated theme social icon area:

Example 2: Basic icon linking without importing into a designated theme area:

Example 3: Icon linking to a new external page, using “parent” rel tag:

Icon List

About Me

<a class="social-aboutme social-import" href="#"></a>

AIM

<a class="social-aim social-import" href="#"></a>

Amazon

<a class="social-amazon social-import" href="#"></a>

Android

<a class="social-android social-import" href="#"></a>

Angie’s List

<a class="social-angie social-import" href="#"></a>

App.net

<a class="social-app-net social-import" href="#"></a>

App Store

<a class="social-app-store social-import" href="#"></a>

Bandcamp

<a class="social-bandcamp social-import" href="#"></a>

Behance

<a class="social-behance social-import" href="#"></a>

Blip

<a class="social-blip social-import" href="#"></a>

Blogger

<a class="social-blogger social-import" href="#"></a>

Comments

<a class="social-comments social-import" href="#"></a>

Delicious

<a class="social-delicious social-import" href="#"></a>

Deviant Ar

<a class="social-deviant-art social-import" href="#"></a>

Digg

<a class="social-digg social-import" href="#"></a>

Disporia

<a class="social-disporia social-import" href="#"></a>

Disqus

<a class="social-disqus social-import" href="#"></a>

Dribbble

<a class="social-dribbble social-import" href="#"></a>

Ebay

<a class="social-ebay social-import" href="#"></a>

Email

<a class="social-email social-import" href="mailto:my-email@gmail.com"></a>

Ello

<a class="social-ello social-import" href="#"></a>

Etsy

<a class="social-etsy social-import" href="#"></a>

Fab

<a class="social-fab social-import" href="#"></a>

Facebook

<a class="social-facebook social-import" href="#"></a>

Facebook Like

<a class="social-facebook-like social-import" href="#"></a>

Flickr

<a class="social-flickr social-import" href="#"></a>

Flip

<a class="social-flip social-import" href="#"></a>

Four Square

<a class="social-four-square social-import" href="#"></a>

Github

<a class="social-github social-import" href="#"></a>

Google

<a class="social-google social-import" href="#"></a>

Google Plus

<a class="social-google-plus social-import" href="#"></a>

Houzz

<a class="social-houzz social-import" href="#"></a>

Instagram

<a class="social-instagram social-import" href="#"></a>

IMDB

<a class="social-imdb social-import" href="#"></a>

iTunes

<a class="social-itunes social-import" href="#"></a>

LastFM

<a class="social-lastfm social-import" href="#"></a>

Link

<a class="social-link social-import" href="#"></a>

LinkedIn

<a class="social-linkedin social-import" href="#"></a>

Mixcloud

<a class="social-mixcloud social-import" href="#"></a>

MySpace

<a class="social-myspace social-import" href="#"></a>

Nick Cates

<a class="social-ncd social-import" href="#"></a>

Newsvine

<a class="social-newsvine social-import" href="#"></a>

Path

<a class="social-path social-import" href="#"></a>

Paypal

<a class="social-paypal social-import" href="#"></a>

Phone

<a class="social-phone social-import" href="tel:#"></a>

Picasa

<a class="social-picasa social-import" href="#"></a>

Pinterest

<a class="social-pinterest social-import" href="#"></a>

Pocket

<a class="social-pocket social-import" href="#"></a>

Pandora

<a class="social-pandora social-import" href="#"></a>

Reddit

<a class="social-reddit social-import" href="#"></a>

Reverb Nation

<a class="social-reverb-nation social-import" href="#"></a>

RSS

<a class="social-rss social-import" href="#"></a>

Skype

<a class="social-skype social-import" href="#"></a>

SoundCloud

<a class="social-soundcloud social-import" href="#"></a>

Spotify

<a class="social-spotify social-import" href="#"></a>

Stumble Upon

<a class="social-stumble-upon social-import" href="#"></a>

Strava

<a class="social-strava social-import" href="#"></a>

Trip Advisor

<a class="social-trip-advisor social-import" href="#"></a>

Tumblr

<a class="social-tumblr social-import" href="#"></a>

Typed

<a class="social-typed social-import" href="#"></a>

Twitter

<a class="social-twitter social-import" href="#"></a>

UStream

<a class="social-ustream social-import" href="#"></a>

Viddler

<a class="social-viddler social-import" href="#"></a>

Vine

<a class="social-vine social-import" href="#"></a>

Vimeo

<a class="social-vimeo social-import" href="#"></a>

VK

<a class="social-vk social-import" href="#"></a>

WordPress

<a class="social-wordpress social-import" href="#"></a>

Xing

<a class="social-xing social-import" href="#"></a>

Yahoo

<a class="social-yahoo social-import" href="#"></a>

Yelp

<a class="social-yelp social-import" href="#"></a>

YouTube

<a class="social-youtube social-import" href="#"></a>

500px

<a class="social-500 social-import" href="#"></a>

500px (alt)

<a class="social-500-alt social-import" href="#"></a>

Q: Will past purchasers of Nick's Royale theme get support from Realmac?

A: Yes, we'll offer support to anyone that previously purchased the Royale theme directly from Nick Cates. However, we always recommend asking css/html and site building related questions on our . Q: I already purchased Royale from Nick Cates, do I need to buy it again?

A: No, the Realmac version has few changes. Keep using the version you purchased. You can download the most recent version of the theme . Realmac Customers should use the . Q: Are there any updates or are you just taking over support?

A: No significant updates were needed for Royale. However, if updates are required, Realmac will make those changes and publish an update. This will be available to customers that purchased directly from Realmac.

Q: The Royale theme is fairly old, does it still work okay?

A: Yes, absolutely, it's a great theme and can produce amazing websites that look and perform great on the web. The age of this theme is reflected in the price.

Q: The Demo project uses some stacks I don't own, do I need them?

A: No. The example project uses Velvet and the Photo Base stack from Nick Cates Design, these are now available from .

Please remember, that you don’t need these stacks to use the theme. They are optional.

Introducing Royale, a Premium RapidWeaver theme that offers your website visitors an exquisite and luxurious experience. With its elegant banner animations, sophisticated responsive design, and premier customization options, your visitors will be immersed in a realm of opulence and exclusivity. Elevate your online presence to new heights of grandeur with Royale.

or as part of our !

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

Royale's Main Features

Theme Presets

Site Wide

Go to Master Style > select desired theme style from the Theme Styles dropdown menu.

Per Page

Mixed Media Banners

Below are the different banner options available in RapidWeaver's Premium Royale theme and tutorials on how to add them.

Custom Banner Image (Site Wide)

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

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

Custom Banner Image (Per Page)

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

Custom HTML5 Video Banner (Per Page)

This tutorial will show you how to add an HTML5 Video Banner to your pages in the Royale theme.

• Replace “my_video” with the name of your video file (no spaces).

In preview, your HTML5 video should now be playing!

Custom YouTube/Vimeo Video Banner (Per Page)

This tutorial will show you how to embed a YouTube or Vimeo video banner to the Royale theme.

1. Copy your YouTube or Vimeo embed code. Usually you can find this by clicking the "Share" button located on the video's page. Below is an example for Vimeo.

• Add class="feature" to the iframe tag.

In preview, your YouTube or Vimeo video should now be displayed!

Custom Velvet Video Banner (Per Page)

This tutorial will show you how to embed a Velvet Video banner to the Royale theme.

1. In edit mode, place your intended Velvet banner video, as the first Velvet stack in the page order.

In preview, your Velvet Video banner should now be displayed!

Custom SuperFlex 3 Slideshow Banner (Per Page)

This tutorial will show you how to add a SuperFlex 3 slideshow banner to the Royale theme.

1. In your SuperFlex 3 stack settings, enable the Import option.

In preview, your SuperFlex 3 slideshow banner should now be displayed!

Responsive Video Player

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

1. Copy your YouTube or Vimeo embed code. Usually you can find this by clicking the "Share" button located on the video's page. Below is an example for YouTube.

1. Paste the embed code into the content edit area.

In preview, your responsive video should now be displayed.

Responsive Audio Player

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

1. Paste the below audio player code snippet in the RapidWeaver page/section where you'd like the audio player to appear:

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

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

Featured Navigation Links

This tutorial will show you how to create featured navigation menu links in the Royale theme.

1. Single-click a page link (left panel) to edit the page title.

2. Paste the below code snippet in front of the page title.

When in preview mode, you should now see your featured desktop navigation links.

Create Line Breaks in Royale

This tutorial will show you how to create line breaks on your pages in the Royale theme.

Create Link Arrows in Royale

This tutorial will show you how to create link arrows on your pages in the Royale theme.

1. To style links with forward arrow icons, highlight the text you'd like make a link, then select the link icon.

1. Add a Custom Attribute, give it the name “class”, and value “social-forward”. Finally click the "Set Link" button.

In RapidWeaver's preview mode you will now see those link arrows next to the links you set.

Custom Site Logo Width Adjustment

By default, Royale limits the site logo width to 100px, but here’s some CSS to paste into Settings > Code > CSS, to adjust the logo width to your needs.

Then adjust the 200px value to best suit your site layout needs.

Royale's Split Stack

This tutorial will show you how to create an “edge to edge” section with Royale's Split stack.

When downloading Royale, in the folder you’ll find the Royale Split stack, double-click the stack to install. Using a Stacks page, you can drag in the Royale Split stack to create an “edge to edge” section within the main content area.

• NOTE: After using the Split stack, all following content MUST be contained within Split stacks to avoid layout issues.

• NOTE: Make sure you select matching Text, Header, and Link colors in your Royale Split stack's settings so that they match your selected colors for these theme elements.

eCommerce with Royale

Royale comes packed with eCommerce features to help you build a successful eCommerce website. Elevate your customers online shopping experience with Royale, a premium RapidWeaver Theme.

Ecwid eCommerce

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

2) Categories & Store Customization

3) Sell Online with Stacks and Ecwid