Scentsy Website using jCarousel
There is a really fun and cool way to add a lot of shopping items to a single web page using jCarousel. This tutorial is specifically on how I used jCarousel on my Scentsy website to load all of the products on one page for easy browsing.
Once you’ve added the jCarousel to your website, check out my follow up block on how to add a header block with your picture, contact details and additional information: http://heather101.com/scentsy/scentsy-website-header-block
jCarousel is an Open Source, jQuery plugin for controlling a list of items in horizontal or vertical order. I have used jCarousel to call a group of images with their accompanying title and price, and then linked each one to the corresponding product. Once I update it my JavaScript file, it will update it on every consultant’s website. So when I add the new Warmer of the Month, your site will update too.
I am happy to share this code with Scentsy Consultants, but ask that they do not remove the comment text that let’s anyone viewing the source code know where to go to get a copy of it. This text will not be visible on your website, but only to those looking to see how it was put together. I am able to see what websites are using the scripts.
I use Safari as my web browser when editing my Scentsy.com website. The reason for this is the TinyMCE editor that is used by Scentsy.com ends up deleting some of my code when I go back into to edit it. If I use Safari, all the code stays. If you don’t use Safari and down want to download it, make sure that you select the “Source” button in the top left before pasting in the code. You will need to save any changes you make to the code in a separate text file, in case you want to edit it later.
So for those who are saying, “Yeah, yeah, I don’t care how you did it. Where’s the code?” Simply click in the textbox below and then copy (CTRL+C) the code. Then go to your Scentsy Consultant Login -> Profile -> Your Website Information -> Personalize.
Now for those of you who don’t want to blindly paste in someone’s code into their website, here is a breakdown of what each section of the code is doing.
</td></tr><tr><td colspan=”2″> </td></tr></table>
The first line of code breaks the Scentsy formatting of the left sidebar with your information. Notice in the image above I have unchecked everything except for “Show Me On Locator.” This means that you will need to add that information yourself.
Throughout the code you will see comment tags that look like this:
<!– Some boring text –>
Those comment tags are only seen by people viewing the source and are there as guides for you on where to put additional information.
<div style=”margin:-230px 0px 0 0px; background: url(‘http://heather101.com/jcarousel/lib/images2/index_r8_c6.jpg’); padding-top: 5px;”>
The above code defines the color of the background, which is the yellow that is used in the footer of all Scentsy consultant websites. The margin:-230px shifts this area up 230px, so it will cover the area that was normally allotted to the sidebar information. If you want to add something before your carousel of products, do it after this line. There is a comment area showing you were to do that. You can remove that comment completely and replace it with what you’d like it to be, which could be your name, email, phone, etc. You could use the TinyMCE editor Scentsy provides to style the text how you’d like it to be, click on Source, and then copy and paste the code over the comment. In a future lesson I’ll show how I made that area into a “Join My Team” box.
<script type=”text/javascript” src=”http://heather101.com/jcarousel/lib/jquery-1.2.3.pack.js”></script>
The next five lines, similar to the one above, are what call the files from my site to make the jCarousel work, followed by the comment to direct others back to this tutorial.
<h2>Scentsy Multipacks </h2> / <ul id=”mycarousel” class=”jcarousel-skin-tango”></ul>
These double lines are the header and the jCarousel for each section of product. There are four sets total.
<!–If you would like any information to be added AFTER the Carousel’s of product, place that information here.–>
This is a comment to show you were you can put information to be displayed after your four jCarousels. Just erase the comment completely and paste your text in the same spot.
<table><tr><td> </td></tr><tr><td colspan=”2″></span></td></tr&
This last line is what completes the table from above and allows the footer from Scentsy to function properly.
Please feel free to add any comments, questions, or suggestions below.
June 11th, 2009 at 12:19 pm
Hi Heather,
OK..I have tried and tried for a couple of hours now to setup my Scentsy website with the Carousel look like yours using the step by step you showed. I even installed Safari. It is not working. What am I doing wrong?
Please help1 Would love to have this Carousel website.
Thanks.
Melissa McKee
[Reply]
June 11th, 2009 at 1:26 pm
Hi Melissa,
I’m looking at the source code on your website, and it’s not showing right. That you so much for catching this. It looks like my blog formatted some of the quotation marks inside the code wrong. I’ve fixed it now. I also tested it by copying and pasting the code into my website, directly from the blog, using both Safari and Firefox. Both browsers worked. I feel bad you spent so long with it, but hopefully this will work for you now. Please let me know if there are any problems.
Best,
Heather
[Reply]
June 11th, 2009 at 4:15 pm
Heather,
I am in business.
Thank you so much for taking the time to look at it and letting me know what was going on.
Thanks again.
Melissa
[Reply]
June 17th, 2009 at 9:52 am
Hi Heather
I love this Carousel I am trying to get it to work with IE 7 and everything works right except the plug-in. It stalls on the Dandy Brown and will not show the Dandy White. It will show in Safari. There is also 2 groovy browns and no groovy black probable a typo. It is that way on your site too, maybe the library needs to be updated.Is there anything I can do to get it to work correctly on IE since most of our customers will be using IE. Now back to adding my own Text and Specials offers.
Thank you so much for sharing.
Dana
[Reply]
Heather Reply:
June 17th, 2009 at 12:32 pm
Hi Dana,
Thanks for catching that Groovy Black. I fixed it. I’ve been playing around with IE, but will have to come back to it later to see what the issue is with it. For now I just loaded two sets of the plugins so it will rotate through all of them before it stops.
[Reply]
June 17th, 2009 at 10:13 pm
Well I have the carousel and it looks great. not sure if you had noticed that all the bars lock up if the arrow is pushed one time too many to the right in IE what you did to the plugin bar seems to have fixed it it will continually loop around either direction.
Thanks again it is great.
Dana
[Reply]
Heather Reply:
June 18th, 2009 at 11:55 am
Yeah I did notice that. I sent a request to the jquery group to see if anyone else knew of a solution, and they found a trailing comma that was causing the problem in IE. It’s fixed now. Sweet! Thanks so much for your feedback so I could get this fixed.
[Reply]
July 8th, 2009 at 2:49 pm
copied code and pasted perfectly, only problem is that it sits on top of welcome note! any suggestions?
thanks,
iris
[Reply]
Heather Reply:
July 8th, 2009 at 3:51 pm
Whoa that’s really weird. No one else has had that problem yet. What browser are you using? It looks like the code is up in the header of the page. I’m not sure how it could have got up there unless Scentsy changed something.
[Reply]
Rishia Reply:
August 7th, 2009 at 11:29 pm
Hi Heather,
I’m having the same problem that Iris is (was) having. When I would paste the code the picture is sitting on top to the welcome. What am I doing wrong and where should I paste the code? Need Help!!
Rishia
[Reply]
July 8th, 2009 at 7:17 pm
HaHa, not what i wanted to here! I’m using Mozilla Firefox.
[Reply]
Heather Reply:
July 17th, 2009 at 1:17 pm
Looks like you got it fixed. Yay!
[Reply]
July 18th, 2009 at 10:35 am
Hello Heather and first I would like to say thanks for your assistance with this particular issues. But my problem is that I cannot locate the part that states “Buy Scentsy Multipacks” in order to paste my header information. Can you tell me where I am going wrong? Thanks again.
[Reply]
Heather Reply:
July 18th, 2009 at 10:43 am
Rhonda,
Thanks for catching that. In this code I just have <h2>Scentsy Multipacks </h2> but looks like on my website I said, “Buy Scentsy Multipacks.” I’ll fix that. I’ll also post the full code for the carousel and header on the other blog so you don’t have to piece it together.
[Reply]
July 18th, 2009 at 2:38 pm
Thanks a bunch.
[Reply]
July 19th, 2009 at 1:12 pm
Heather–
Thanks such so much for posting this info.
Now don’t laugh at me but how do I add the jcarousel to my website to get started?
[Reply]
Heather Reply:
July 19th, 2009 at 1:29 pm
You don’t. The code pulls the jCarousel from my website. So that means when I update it each month for the new warmer, your site will be updated too.
[Reply]
July 22nd, 2009 at 2:35 pm
Hi Heather, let me start by saying this is a great tool and I got excited once I learned that it was available to Scenty Consultants. This code is not working for me at all. I am pretty good with the basic html codes…but this is weird. When I copy and paste the code into “Source” under Personalize the code gets jumbled up and letters are missing and/or taken out off some lines. Example: This
Turns into this:
I even tried to manually add each individual line into Source and that worked one time. I could see the table on my website. But when I went back to add/edit wording and paragraphs. It went nuts again. I am not using Safari. I have Internet Explorer 8. HELP! I want to use this template.
[Reply]
Heather Reply:
July 22nd, 2009 at 2:47 pm
Denise,
Can you download Safari and try it with that browser? The editor features bar from Scentsy tends to mess things up quite a lot. I’ll admin, I’ve never tried it with Explorer.
[Reply]
July 23rd, 2009 at 6:16 am
Thanks Heather! Turns out I already had Safari on my computer from downloading Itunes. That worked. You’re awesome! *you can delete my message if you like*
[Reply]
July 31st, 2009 at 2:28 pm
HI Heather,
Thanks for this great info. I am having some difficulties with spacing my personal message. Can you offer me some info on how I can change it?Also when the new catalog comes out will I be able to change it?
Thanks for being so awesome!
Sharon
[Reply]
July 31st, 2009 at 7:16 pm
Hi Heather,
I have read and re-read and rebooted and downloaded Safari and I still cannot get this to work. Can you help me?
Thanks,
Kathy
[Reply]
August 1st, 2009 at 9:09 am
Hi heather. Is there any way I can get a code for just the extras of scentsy (bricks, bars, cc, rs, bulbs, etc) instead of all of the warmers included? Thank you!
[Reply]
Heather Reply:
August 1st, 2009 at 10:30 am
You can use the exact same code, just take out the carousels you don’t want. So If you don’t want the warmers take out these two lines –
<h2>Scentsy Multipacks </h2>
<ul id=”mycarousel” class=”jcarousel-skin-tango”></ul>
[Reply]
August 1st, 2009 at 10:51 pm
You’re awesome! I looked into my Director’s website, and viewed her source, Saw your website – you’re right about leaving your comment. It helped me direct to your website here and I’m so glad to find this source to make my website interesting for my clients!!
Thanks!
Sherry
[Reply]
August 3rd, 2009 at 2:32 pm
Hello Heather, I used you code and I love my website now: I still cannot figure out how to add the personal info though. Not much of a computer person…Help?
[Reply]
August 6th, 2009 at 10:40 pm
You are sooooooooo nice to share with us all. I added it to my website and I can’t believe it because I have no clue how to do a website. Thanks a million!!!!! Lisa
[Reply]
August 17th, 2009 at 1:03 pm
Heather,
THANK YOU SOOOOOOOOOO MUCH!! This def. makes the site look amazing!
Melissa
[Reply]
August 20th, 2009 at 7:18 pm
When I go back to add my code for statcounter, it messes up the whole page now that I have your code installed (w/o statcounter it is fine). Is there a way around this?
Thanks! I love how this looks!
[Reply]
August 20th, 2009 at 7:24 pm
nevermind, re-did it and it worked lol
[Reply]
August 31st, 2009 at 4:45 pm
Could you advise what I am doing wrong?
[Reply]
August 31st, 2009 at 8:11 pm
Hi Heather,
I am just wondering if you will have the website updated to reflect the new catalog? My customers just love going right to my page and see all of Scentsy’s wonderful products right there infront of them.
Your are truley AWESOME!!!!
[Reply]
September 1st, 2009 at 1:34 am
Is there any more information about captcha code in your hand? May I know more?
[Reply]
September 2nd, 2009 at 8:19 am
Do you know when the websites will be updated with the new products and pricing? Everyone loves my website, but they are confused since the old products are still there along with the August pricing and no new products in the carousel yet.
Thanks so much!!!
[Reply]
September 2nd, 2009 at 8:56 am
Hey Heather. Just wondering the same thing as Kelly. You did a very GREAT job in the past and hopefully you will be able to provide us the same service. Thanks again.
[Reply]
September 2nd, 2009 at 8:58 am
Working on it
There is a lot to add and have other projects on a deadline.
[Reply]
September 2nd, 2009 at 12:43 pm
Just a heads up (I know you’re busy and working on it) but the weave scarlett plug in, shows the weave green code and when you click on it still pulls weave green.
Thanks!
[Reply]
Heather Reply:
September 2nd, 2009 at 12:53 pm
Thanks! Let me know if there are other mistakes.
[Reply]
September 2nd, 2009 at 4:40 pm
the weave denim says denim green.
Also, will the mid sized warmers and travel tins be posted?
[Reply]
September 2nd, 2009 at 5:41 pm
Thanks so much Heather!
[Reply]
September 2nd, 2009 at 6:59 pm
I just wanted to say Thank You So Much! I love it. Thank You for sharing this with everyone.
[Reply]
September 2nd, 2009 at 8:45 pm
Heather, I can’t think you enough for being so selfless in sharing your codes. I came across this site (http://www.scentsy.com/afaulkcon), and was wondering if I may be overlooking a link on your site for updating my page to include the items shown in the carousel on the above-mentioned site.
[Reply]
September 3rd, 2009 at 2:41 pm
Hi Heather,
First of all, Thank you sooooo much for sharing this with us and allowing us to use this to improve our website for our clients. You are awesome.
I seem to be having trouble with uploading the codes onto my website. Could I be doing something wrong?
Thanks.
Cathy
[Reply]
September 7th, 2009 at 9:17 am
Thanks so much, Heather! I took your code and imparted some of my own knowledge of HTML and now my website looks GREAT! Just one question – are you going to add a new carousel for the mid-size warmers in the near future? Thanks!
[Reply]
September 17th, 2009 at 2:42 pm
I feel like I should pay you for this information. I am getting ready to ty and do it. I am so thankful!
[Reply]
September 28th, 2009 at 6:28 pm
heather,
Thank you SOOOO MUCH for this information! My downline and I have been trying and trying to find out how to do this for a while now! I am having an issue however and would love your assistance. Your code is working find in my site, I just can’t get my personal message or contact information in there at all. I also can’t get my site counter to work at the bottom. And one of my downline would like to get her picture working as well, however I am the technical one of the group so if you could respond to me I would appreciate it very much!
[Reply]
November 12th, 2009 at 3:39 pm
Heather,
My wife and I are new to Scentsy. Just getting setup.
I was wondering where do you get the images, text, etc each time that Scentsy puts out new stuff. I see where there used to be a resource area for images and templates, but I can not find it any more.
Are we allowed to copy images from the official Scentsy site to use on our personal external site?
thanks
Bruce
[Reply]
March 24th, 2010 at 8:49 am
Heather,
I love this, but is there any way you could do a Canadian one with Canadian pricing?
[Reply]
September 9th, 2011 at 3:50 pm
Hello, I was wondering if this was still usable. I see the last comment was well over a year ago. Do you still update this? If not, could you point me in the direction of a Scentsy layout type of site? Thank you in advance.
[Reply]
Heather Reply:
October 27th, 2011 at 8:53 pm
I don’t think this will work anymore. I haven’t had a Scentsy website in several years and no longer sell it. I’m not sure what they allow you to do on your website now.
[Reply]