Thank you very much for your purchase.

Sold Theme

I appreciate your support and hope this helps you rule your next web project like a boss and sell lots of stuff. Here's how to get the most out of the Sold Theme for Rapidweaver...

To help with the demo project file, please drag the images from the folder called "demo images" in the disk image to the resources section so that the demo works as planned. Thanks.

1. Setting up the Carousel

I would recommend putting this badboy into the EC1. It looks much better there.

Simply drag in the snippet and edit to suit your project. There are 3 slides included in the snippet but you can easily add more. The minimum number is 3 though to keep the effect. The demo project blueprint has 5. Feel free to copy&paste that one into your project to see how the colours work, text is laid out and give you a head start for editing. You can use those settings too.

The easiest way would be to drag your images into the resources pane and then match the names in the snippet to the filenames in the resources. Some people however may want to link to external images (like in an image warehouse) which is fine but just remember to change the link to "http://www.yourdomain.com/image.jpg"

Image sizes should be 565px x 377px

Also, add the preloader from the disk image to the resources if you want to show it. Sometimes people don't like these so I added it as an extra and also this allows you to make your own preloader graphic! Make one of your logo, get creative and name it "preloader.gif" and add it to your resources panel.

Carousel dragged into stacks

Edit colours and layout

My demo project version on the homepage is a nice variety to use that out of the box but if you want to customise it's all here.

It was best to leave colour control to here as if it was in the pages styles inspector it would be too confusing as the colour can be changed for each individual slide! It would be a nightmare of colour options :p

If you just want a photo in the slide then delete the four lines indicated by the green arrow. And if you want to specify the exact x and y heights of the text, you can do that.

Advanced customisation

To keep it simple, I would just drag in the above snippet for 3 slides and then copy&paste for more. Or use the 5 slides snippet from the demo. Add in your images to the resources and edit the text. That's it. You now have a working carousel really quickly. Above has a few further tweaks to text colour and text alignment. They are pretty straightforward and not really necessary unless you have something specific in mind.

But if you want to go even deeper there is another (optional) snippet that isn't needed to run the carousel but would give you more functionality if you want.

2. Icon Font

Just drag the snippet into the content, sidebar or anywhere:

<i class="icon-NAME"></i>

Change the "NAME" to anything you like from this page: http://fortawesome.github.com/Font-Awesome/

It will then appear in your project : )

3. Setting up shop

Time to sell some stuff with this simple and easy built in shopping Paypal cart.

Create your first product

Drag in the "sold shopping cart (1/2) product example" snippet to your body content.

Edit the elements to your needs. Highlighted in green below are all the bits you need to change for your product.:

  • Product title x2
  • Price x2
  • Description for overlay
  • Optional front page description (product-meta)
  • Optional chance to change "buy now" to "add to cart" etc and also "descrption" to "more details" or whatever

We will set the currency later so don't worry about that. In the page inspector you can change the colours for the buy now buttons and price tags and cart buttons too.

Also create two images and put those into a folder in the resources pane called "products". Name them the same as you changed above and create one for the shop normal layout (290px 210px) and one for the pop-up state (800px wide).

Create your second product

Copy and paste between the <li> parts to make the second, third, fourth, fifth products...

The demp project includes 18 products so feel free to copy&paste that example into your project as a great blueprint to then easily edit away to input all your data.

Setting up carts always takes time but worth it when you start selling the goods.

Variable product

The snippet "Sold Shopping Cart 2 Products Example" includes a variable product - the sushi example.

This is great if you want to sell a t-shirt for example and it comes in red and white or large and small and medium. Set it up as that snippet by editing it to suit your product.

Setting up the cart

The final step is to drag the "sold shopping cart (2/2)" into the custom javascript space.

Then just change three things:

  1. Currency sign to the sign of your choice, the demo has £ and the snippet $
  2. Change the email address from mine to your PayPal email address
  3. Change the currency code to your currency code for the shop. The demo is GBP for sterling and USD in the snippet for dollars.

That's it, happy selling!!

Tips

  1. If things are not playing nice, highlight the snippet in the page and then Format and "ignore formatting"
  2. This theme is optimised for speed. To keep things snappy, before you export go to Rapidweaver preferences and select Enable smart publishing; consolidate common files; consolidate CSS files then export / publish and your site should be as fast as it gets.
  3. The original CSS and Javascript files are included in the theme under "originals" should you need to edit them; the ones used in the theme are minified.
  4. Use the demo Sold project file included with this theme to see how all this fits together and feel free to use it as a blueprint to build on to make it quicker adn easier to complete your project
  5. To help you with the Carousel colour selection use this colour picker tool to get the hexidecimal: http://www.colorpicker.com or http://www.colorschemer.com/online.html

Need any further help?

Enjoy this theme, and if you have any questions, need further assistance, have comments or what not, please contact me at http://support.yuzoolthemes.com.

There’ll be amends posted there to themes and update information as well as any bug fixes and your chance to raise a support ticket too.

Cheers and happy weaving,
Michael Frankland
Yuzoolthemes.com