Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Showcase of Sweet Chocolate Websites

The word chocolate can be associated with many words: dark, white, milk, hot, sweet, spicy, etc. But have you tried to combine it with the word web design? We did. We searched the Web for websites in any way related to chocolate and what we found is worth to be collected in this showcase. The interesting thing is that you would probably never stumble upon some of the sites, so the overview below may provide you with a unique perspective and get your creative juices flowing.

As one would expect, chocolate website often use an appetizing brown dominant color. If you take time to look at the panel of colors associated with it, you will find out that there is a lot of combination working really well. Apart from this component, each site is unique and features an original identity, depending on product presentation and given information.

Further Reading on SmashingMag: Link

Feel free to explore the designs featured below. Some of them are nice examples for Flash used for product presentation. Some designs are very classy while others are more artistically designed. But they all have in common this fascinating sweetness everyone loves.

Similarities In Chocolate Website Designs Link

We found out that there are three common techniques that seem to crop up over and over again on various chocolate-related websites. A vast majority of the sites use a horizontal top-navigation, brilliant product and ingredient images as well as a dark brown color scheme which is often combined with vivid, strong colors.

CharlesChocolates6: the bright blue color scheme here is fun and fresh, but the thick footer navigation is what really makes the CharlesChocolates’ site stand out.

The navigation patterns are mostly common and convenient, however we’ve noticed quite a few uncommon navigation menus as well. The interesting part is that we’ve seen only a couple of typical boring stock templates. Apparently, most chocolate and confectionery website owners do care about their branding and their unique presentation on the Web. In fact, many sites try to be playful, creating an engaging, interactive and memorable user experience. That’s not something you will see in every industry, e.g. certainly not among medical websites.

Horizontal Top Navigation Link

Because chocolate websites vividly highlight product and ingredient images and therefore fill a large part of the layout with visuals, the choice of horizontal top navigation seems quite appropriate. The number of navigation options varies from five to nine links per navigation menu (excluding sub-navigation links). The most common navigation links lead to pages describing the manufacturor of the chocolate, shops where the chocolate is available and “gifts” pages where users can order business gifts, wedding gifts etc. Sometimes the navigation also contains a link to the recipes page.

Jeff de Bruges7
Offsetting each navigation element with it’s own double border makes each link stand out and adds visual interest to the header.


Godiva Chocolatier9
Placing the navigation directly under the header works well on the Godiva Chocolatier site.


Jacques Torres Chocolate11
Having the top navigation highlighted by a thin orange border makes it more visible to new visitors.


TCHO: Buy Dark Chocolate and Gifts13
The top navigation here is simple and a bit on the minimalist side. Placing it above the bold header text makes it stand out a bit more.


Chocri customized chocolate bars15
Classic tabbed navigation works well with multi-colored text and a subtle gradient.


Simple horizontal navigation is combined with a playful Flash-based navigation in the middle of the page.


Cadbury: Cadbury Chocolate19
A simple, traditional top navigation bar is user-friendly and almost always looks good.


Product and Ingredient Images Link

The quality of product photography on chocolate websites is remarkable. Images are often large and dominant and are given a lot of both horizontal and vertical space. In fact, chocolate, especially gourmet chocolate, is often very visually interesting. The ingredients that go into it can also be very aesthetically pleasing. So it only makes sense that a lot of designers are opting to include mouth-watering images of the chocolate being sold on a given site.

Festival Internacional de Chocolate de Obidos21
This site of a chocolate festival uses a striking background image as well as a nice chocolate photos on its main page.


Green & Blacks Organic Chocolate23
The broken chocolate bar used here gives a casual look to the site, while the embossed logo helps reinforce the brand.


Dagoba Organic Chocolate25
The combination of chocolate with blueberries and lavender reinforces the organic nature of Dagoba’s chocolate bars.


Mindy’s Hot Chocolate27
An almost-macro image of chocolate shavings in a chocolate martini, combined with other images of their offerings sets apart the Mindy’s Hot Chocolate website.


Patrick Roger29


Toberlone opts for limited product images, but including just a couple of well-placed images can have a positive impact.


Haigh’s Chocolates33
A large, close-up image of the product adds a ton of interest here without overwhelming the otherwise simple and minimalist design.


Showing the variety of possible chocolate bar customizations can go a long way toward enticing visitors to create (and order) their own customized chocolate bars.


Brown Color Scheme Link

Obviously, dark brown color scheme dominates on chocolate websites. However, very often the scheme is complemented with vibrant, dynamic colors such as bright green or red. In general, most sites do stick to the dark scheme, often with tiled or photographic backgrounds which are closely related to the main theme.

Dove Chocolate37
The Dove Chocolate site has an almost exclusively brown website design, with varying shades used to offset different parts of the site.


Divine Chocolate
The Divine Chocolate site uses brown in limited quantities, but it’s still prominent in the design.


Dark brown used throughout the design of Valrhona’s site makes one think of dark, high-end chocolate.


Varying shades of brown, from the very dark brown (almost black) of the background to the lighter browns of the navigation and header are all evocative of the many varieties of chocolate out there, and what can be made with them.


Promise Me Chocolate…41
The combination of dark brown and pink works really well together, especially on a site specifically targeting brides-to-be.


The Cocoa Tree
Using brown as an accent color sets apart The Cocoa Tree’s site. It feels fresh and light, something that’s often hard to accomplish while still bringing to mind chocolate.


Brookside Foods43
The Brookside Foods site brings together various shades of brown with black and gold to create a high-end looking site.


Unique Designs Link

Some chocolate websites fight for user’s attention with striking design elements and unconventional navigation schemes. Some of them are presented below. In these cases, (for site owners) the engaging and memorable user experience seems to play a very important role.

Max Brenner45
The Max Brenner website is set apart for a few reasons. The right-hand vertical navigation is one reason. But also the retro, grungy design with the animated eye (you’ll have to visit the actual site to see it).


The animation used on the Bloomsberry site is interesting and very well-done. The navigation is also atypical, with links easily identifiable but scattered throughout the main part of the home page.


Pierre Marcolini
The Pierre Marcolini site is very minimalist, with not a trace of brown showing up in the main part of the design.


Another site that uses no brown in the main design, but instead opts for colors reminiscent of the product’s packaging rather than its contents. The hand-drawn elements also make it stand out.


Chocolate Research Facility51
The animated chocolate dripping onto the screen is a bit gimmicky, but also adds a lot of interest to what would otherwise be a very simple site.


More Chocolate Website Examples Link







Chocolate Editions59








Kambly SA


Askinosie Chocolate65


You may be interested in the following related showcases:

(jb) (cs) (mm) (cc) (vf)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    Thanks for sharing amazing websites!!!

  2. 2

    Very delicious article but you’ve forgot a little great website : The interactivity for the e-shop is pretty cool ;-)

  3. 3

    yummy collection of chocolates.

  4. 4

    Nice one :D
    May I add also : Wedel from Poland and Green & Black’s organic


  5. 5

    Aww, it’s so sweet! :D

  6. 6

    So Sweeeeeeeeeet : )

  7. 7

    Philippe Schaillee

    July 15, 2010 1:10 am

    Another famous brand of Belgian chocolate you have overlooked ;-)

  8. 8
  9. 9


    July 15, 2010 1:18 am

    Thanks for the websites, very inspirational.

  10. 10

    Some are great, but most have bad navigation, loads slowly and are unclear. Thanks anyway for these good!

  11. 11


    July 15, 2010 1:23 am

    Very sweet post. I really like it. Thanks for sharing.

  12. 12

    damn… you’re tempting me :D

  13. 13

    Thanks for the post! It’s just unusual that I’d expect something more from Cadbury but it still looks good though.

    Now… I’m hungry for chocolate…

  14. 14

    Last not least:
    German manufactory from Munich with e-shop now. Delicious!!!

  15. 15
  16. 16

    Here´s another award winnig chocolate website/online-shop:

  17. 17

    Great collection, but is missing.

  18. 18

    You maybe can add this one too :

    France Chocolate WEISS

  19. 19
  20. 20

    Evil post! *runs out to buy chocolate*

  21. 21
  22. 22

    oh no, too bad. Now you got me tempted.

  23. 23
  24. 24

    A bit more analysis would have been nice. I’m sorry, but this type of article is hardly more than a google search. Things like:

    “Dark brown used throughout the design of Valrhona’s site makes one think of dark, high-end chocolate.”


    “Having the top navigation highlighted by a thin orange border makes it more visible to new visitors.”

    Are not exactly in-depth. Personally, I’d prefer to see fewer examples and more thought. Sorry.

    • 25

      I think the “thoughts” are up to every designer, if you are not capable to analyze and take the good from the bad you shouldn’t consider yourself a complete designer. Do you think the same about all the design books compiling extraordinary images, posters, websites, logos, etc? most of them don’t explain in “detail” every single one, their purpouse it’s to show what’s there, refreshing to the eye, and for all of us find inspiration, you should thank instead of critized just because you are not happy with the article. Go somewhere else. Sorry.

      • 26

        While I can see and agree with what you said, I feel the need to point out one little problem with these types of showcases that perhaps you haven’t considered. How many students, or even potential students are looking at these sites? People who are learning the trade? How can they learn why something made it into these showcases if we don’t tell them? I’ve been in the industry almost 10 years now and I’m always surprised when a student tells me they don’t know what good design is, they can point to these sites, but they don’t know why it got there. Other than “it’s pretty”. Yea, it is.. pretty sad.

        • 27

          Jen, I think it’s a student’s problem if they don’t know what good design is. Yes, seeing a showcase like this a budding designer may not know the reason these design were selected for. But after all, if a question arises, isn’t it a cause for a student to go to the library and learn? Gosh, if I make a conclusion that I don’t have a clear idea about something I’m studying, I just go and learn harder. Frankly speaking, I would not expect a website showcase to be a solid ground for my knowledge to be based on. A showcase like this has another purpose, in my opinion, and here I totally agree with Jessica’s comment.

      • 28

        I guess my question would be, why bother with the ‘article’ at all? What value is it? How is more than the results of a Google search or one of the many CSS galleries out there?

        Thank you for telling me to go elsewhere. I normally come to Smashing because it offers insight. If that’s no longer supposed to be the case, if it is only here to show lists of websites without significant comment, then I will probably take you up on your suggestion.

        I do congratulate you on being the ‘complete designer’ already. You must be very pleased to have progressed beyond the need for hearing what someone else might have to say about a design. I certainly think I have plenty to learn, and I’m always happy to read other people’s interpretations and to receive their insights. That way, maybe I too will one day reach your heights. I can at least aspire.

    • 29


  25. 30

    There is another outstanding one you left: in a clean, minimalistic style.

  26. 32

    Nice Site from Germany:

  27. 33

    nice choco

  28. 34

    Delicioussss :D

  29. 35

    Miam ! is missing…

  30. 36

    Not only talk about chocolates… Make a site with it!

  31. 37


    July 15, 2010 4:57 am

    Another one from the Åland Islands:

  32. 38

    I would also like to add Endangered Species Chocolate to this list. Adding conservation and chocolate together…perfect. You can find them at

  33. 39

    awesome collections. thanks

  34. 40

    Great Collection!
    Another good one is

  35. 41

    Well, good work … Delicious !!!

    I can add too :)


  36. 42


    July 15, 2010 5:55 am

    I’m surprised to see Kambly in this selection. The make very good cookies but they are not known as chocolate makers.
    Not many Swiss sites though but they are busy making chocolate…;-)

  37. 43

    Ryan from Chocomize

    July 15, 2010 6:06 am

    Hey everyone! It’s Ryan from For all the readers of Smashing Magazine’s delicious chocolate article:

    Enter the coupon code ‘smashmag’ at checkout for 10% off your entire order!

    Customize your own chocolate bar, choosing from 3 types of base chocolate and over 100 ingredients. With Chocomize, you can be WIlly Wonka!

  38. 44

    This makes me really want chocolate. Yummy.

  39. 45

    I love Max Brenner’s food almost as much as his chocolate, and his chocolate almost as much as his branding and website! YUMMY!

  40. 46

    Brett Kellgren

    July 15, 2010 6:42 am

    She has a nice, simple little chocolate stop as well…

  41. 47

    You forgot Beautiful site, beautiful chocolates.

  42. 48

    Beautiful site chocolate :

  43. 49

    Sunny Kumar

    July 15, 2010 7:51 am

    Great Collection…

  44. 50

    Fairy Tale Brownies is yummm too…

  45. 51

    Belinda White

    July 15, 2010 8:05 am

    Also see

    great chocolate website

  46. 52
  47. 53

    Carlos Braga

    July 15, 2010 8:37 am

    The chocolate may be sweet, but these sites are at average in flavor.

  48. 54

    How sweet it is!

  49. 55

    No Hershey’s??

  50. 56

    Valerie Kusler

    July 15, 2010 9:34 am

    Great article and now I MUST have chocolate. After seeing all the gourmet stuff though, I’m wondering if this Milky Way will suffice…

  51. 57

    This is my favorite showcase! I love the chocolate!

  52. 58

    I like the style of this one:

  53. 59

    Yummy :) Loved the showcase!

  54. 60

    You should also look at:

  55. 61

    Great showcase! This is something I normally wouldn’t think of for inspiration so I love that you’ve brought it to us. Some very attractive sites!

  56. 62

    The author deserves credit for their mastery of the “Google and screenshot” technique. I have to say I’m a little disappointed.

  57. 63

    Mhhh, delicious! <3

  58. 64

    Wow. You guys must be running out of ideas.

  59. 66

    GNAMMMMMM !!!!
    10+ !

  60. 67

    I gained one pound just by looking at these websites!

  61. 68

    I really like chocolate website

  62. 70

    Leigh Hyland

    July 15, 2010 3:01 pm

    Not so much a design feat (being its a wordpress template) but my 11 year old likes chocolate so much he started his own blog just so he coulddiscuss it. –, I have to say I applaud his efforts for his age.

  63. 71

    It would be a big drama for myself to work on such kind of project.. Water is dripping already!

  64. 72

    Great post, can’t believe the UK website got missed off the list – it is after all the queens choice!

  65. 73

    I put on three pounds just reading this article!

  66. 74

    Beautiful site at
    It makes great use of a slideshow on the front page, with no flash. does an excellent job of showcasing the product lineup.

  67. 75

    weird… first thoughts that popped up in my mind when i saw the “Chocolate Research Facility” were: HEY THAT’S A NICE GIMMICK FOR THE BP WEBSITE, TOO! Although i wouldn’t see chocolate as the tough brown liquid in that case…

  68. 76

    yummmmmmmmmmmmmmyy… all great website!

  69. 77

    also a nice one:

    have a look at the detailed drop-down-menu and the theme-pictures in the background.
    there are much more details to discover…

  70. 78

    Another cool site:

  71. 79


    July 16, 2010 1:39 am

    One site missing famous E.WEDEL –

  72. 80

    Like it!

  73. 81

    It would have been interesting to see how you thought the new Moo Free Chocolates site fitted in.

  74. 83
  75. 84

    A contribution from sweet loving Austria:

  76. 85

    Yummmy ^.^
    *nom nomm nommmm*

  77. 86

    Beautiful site chocolate

  78. 87

    Sjoerd Maessen

    July 16, 2010 9:10 am

    Nice collection of websites. One I also find very attractive is

    • 88

      Of course you “find it attractive”. Your company made the website, after all.

      I don’t really see the point in spamming links to bad designs on a website aimed at designers, but maybe that’s just me.

      Come to think of it, it must be me, since your competition appear to be doing the exact same thing with their sites.

  79. 89

    Matthew Hartman

    July 16, 2010 10:47 pm

    Thanks for sharing this delicious article =P

  80. 90

    Good & Fabulous Portfolio.

  81. 91

    what a great selection!

  82. 92

    diego mauricio

    July 17, 2010 3:54 pm

    other great chocolate website

  83. 93

    I would like to add the spanish site Chocolates de la abuela

  84. 94
  85. 95


    July 19, 2010 5:25 am

    One of my favourite chocolate related websites in this from, a small chocolate fountain supplier, that proves you can have a very small online business and still have a beautiful site. Many small businesses find it very hard to find someone who can build great looking sites, for a small fee and end up with some rather garish looking mess instead.

  86. 96

    I’d like to share this delicious site with you:

  87. 97

    July 15th, 2010 3:14 am

    A bit more analysis would have been nice. I’m sorry, but this type of article is hardly more than a google search. Things like:

    “Dark brown used throughout the design of Valrhona’s site makes one think of dark, high-end chocolate.”


    “Having the top navigation highlighted by a thin orange border makes it more visible to new visitors.”

    Are not exactly in-depth. Personally, I’d prefer to see fewer examples and more thought. Sorry.”
    — I fully endorse and concur with the tone and content of Patrick’s post.
    Such “articles” as this one are, in my view an embarrassment to a web citizen the stature of SmashingMagazine.
    As insightful as a page of Google results and 1/2 as useful it typifies the regurgitated and ultimately useless state of the world wide weed. Continues resprouted clones of the same nonintelligent parsings as useful as an ‘Article’ on President Obama – “He was tall and black”

    See, this is why we cant have nice things!

  88. 98

    I would like to recomend you the following site:

  89. 99

    One more! (brazilian)

  90. 100

    slightly unrelated but beautiful cakes

  91. 101

    Gotta love it, makes me hungry and want to over-indulge. Good analysis, too.
    Here’s my own favorite:

  92. 102

    Heh, I wasn’t hungry when I started to read this post, but…. well, now I’m absolutely ravenous for a bar of dark chocolate!

    Could you perhaps do a showcase of ecommerce auction sites, next? I’ve noticed that they use a similar color layout too (e.g. eBay and DubLi).

  93. 103

    Tomasz Woźniak

    July 21, 2010 5:56 am

    Godiva Chocolatier is so delicious! ; )

  94. 104

    You forgot one more: :)

  95. 105

    Vikesh Patel

    July 26, 2010 2:36 am

    Really good collection of websites.
    I especially like the Wispa website, as it’s the first website about chocolate which is made up of illustrations. Normally this sort of design is used on designer’s portfolio websites, but the design works really well here too.
    Its interesting to see that some of these web pages don’t have images of chocolates on the homepage, I think these are the best of your collection as they are unique in design and are not overloaded with content.

  96. 106


    July 27, 2010 4:40 am

    Look at these
    κατασκευή eshop

  97. 107

    roger cossey

    July 27, 2010 11:01 am

    Lots of very interesting American sites but not much for us poor Brits.

    What about these ones:

  98. 108

    Hey is it possible to publish some beautiful cake website designs. When i search i get only boring sites.

  99. 109

    Some great inspring ideas shown in these websites… I’m feeling hungry all of a sudden.

    Jerky Oats

  100. 110

    Rene Juan de la Cruz

    October 3, 2010 7:38 am

    Great website designs!!!!…You may also want to check this one too.
    Chocolate Cortés from Puerto Rico. Njoy!!!!

  101. 111

    EXL Interactive

    November 1, 2010 3:02 am

    Yummy chocolates are temptig me to have a yummy bite and keep yumming about them…the chcolates are funthese days. you can experiment alot with them…I lately heard about Chocolare Popcorns…they sounded odd at first but I really liked them…I love to have excuses to keep eating chcolates and keep finding reasons to eat them…what i liked, I would like to share it with you…here is where I found Chocolate Popcorns. Thanks Sugar-plum

  102. 112

    very inviting

  103. 113

    “Hey, maybe this post is often a bit off topic but in any occasion, i’ve been searching all around your blog and it seems actually superb. impassioned about your creating. I am constructing a new blog and struggling to produce it search great, and provide great top quality matter make any difference. I have discovered a much right here and that i search ahead to far more updates and will be again.”

  104. 114

    I personally LOVE this site: :)

  105. 115

    Daniel Roch

    July 15, 2013 5:08 pm

    Those websites are really good. Some of theme are really original, and it makes me want to eat more chocolate. But for some of theme, it seems quite difficult to find and buy products online, for example kambly.

    Here is anothere french and sweet chocolate website :

  106. 116

    it is a concentrate of sweet things ! I personnaly LOVE this one for the “artisan” aspect of wood, gold and.. chocolate : !


↑ Back to top