diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index c9b726affde..1d99722e48b 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -176,3 +176,29 @@
     margin-left: 0px !important;
 }
 */
+
+#website-top-edit-snippet-option {
+    padding: 1px 8px 2px;
+    font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
+    float: left;
+    margin-top: 6px;
+    border: 1px solid #a6a6a6;
+    border-bottom-color: #979797;
+    background: #eeeeee;
+    border-radius: 3px;
+}
+#website-top-edit-snippet-option > * {
+    display: inline-block;
+    height: 22px;
+    padding: 4px 6px;
+    outline: 0;
+    border: 0;
+}
+#website-top-edit-snippet-option a.button .icon {
+    cursor: inherit;
+    background-repeat: no-repeat;
+    margin-top: 1px;
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+}
\ No newline at end of file
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 32e77acedab..b4c35042350 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -220,6 +220,11 @@
         // editor.ui.items -> possible commands &al
         // editor.applyStyle(new CKEDITOR.style({element: "span",styles: {color: "#(color)"},overrides: [{element: "font",attributes: {color: null}}]}, {color: '#ff0000'}));
 
+        init: function (EditorBar) {
+            this.EditorBar = EditorBar;
+            this._super.apply(this, arguments);
+        },
+
         start_edition: function ($elements) {
             var self = this;
             $elements
@@ -229,6 +234,7 @@
                     var $node = $(node);
                     var editor = CKEDITOR.inline(this, self._config());
                     editor.on('instanceReady', function () {
+                        self.trigger('instanceReady');
                         observer.observe(node, OBSERVER_CONFIG);
                     });
                     $node.one('content_changed', function () {
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index 5ebf7aecc8d..8662bc1522d 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -2,84 +2,106 @@
     'use strict';
 
     var website = openerp.website;
+    website.templates.push('/website/static/src/xml/website.snippets.xml');
+
     website.EditorBar.include({
         events: _.extend({}, website.EditorBar.prototype.events, {
             'click button[data-action=snippet]': 'snippet',
         }),
         start: function () {
             return this._super().then(function () {
+
                 this.$buttons.snippet = this.$('button[data-action=snippet]');
-                window.snippets = this.snippets = new website.Snippets();
+                window.snippets = this.snippets = new website.snippet.BuildingBlock();
                 this.snippets.appendTo($(document.body));
+
             }.bind(this));
         },
+        edit: function () {
+            var res = this._super.apply(this, arguments);
+            var self = this;
+            var instanceReady = false;
+            this.rte.on('instanceReady', this, function () {
+                clearTimeout(instanceReady);
+                instanceReady = setTimeout(function () { self.snippetBind(); }, 0);
+            });
+            return res;
+        },
         snippet: function (ev) {
             this.snippets.toggle();
         },
-    });
 
-    website.RTE.include({
-        start_edition: function ($elements) {
-            this.snippet_carousel();
-            return this._super($elements);
-        },
-        // TODO clean
-        snippet_carousel: function () {
+        snippetBind: function () {
             var self = this;
-            $('.carousel').each(function () {
-                var $carousel = $(this);
-                var $options = $('.js_carousel_options', $carousel);
-                $options.on('click', '.label', function (e) {
-                    e.preventDefault();
-                    var $button = $(e.currentTarget);
-                    var $c = $button.parents(".carousel:first");
-                    var $carousel_inner = $c.find('.carousel-inner');
+            var $snipped_id = false;
+            var snipped_event_flag = false;
+            $("[data-snippet-id]")
+                .filter(function() {
+                    return !!website.snippet.editorRegistry[$(this).data("snippet-id")];
+                })
+                .on('click', function (event) {
+                    if (snipped_event_flag) {
+                        return;
+                    }
 
-                    if($button.hasClass("js_add")) {
-                        var cycle = $carousel_inner.find('.item').size();
-                        $carousel_inner.append(openerp.qweb.render('website.carousel'));
-                        $c.carousel(cycle);
+                    snipped_event_flag = true;
+                    setTimeout(function () {snipped_event_flag = false;}, 0);
+
+                    if ($snipped_id && $snipped_id.get(0) == event.currentTarget) {
+                        return;
                     }
-                    else if ($carousel_inner.find('.item').size() > 1) {
-                        $carousel_inner
-                            .find('.item.active').remove().end()
-                            .find('.item:first').addClass('active');
-                        $c.carousel(0);
-                        self.trigger('change', self, null);
+
+                    self.snippetblur($snipped_id);
+
+                    $snipped_id = $(event.currentTarget);
+
+                    if (typeof $snipped_id.data("snippet-editor") === 'undefined' &&
+                            website.snippet.editorRegistry[$snipped_id.data("snippet-id")]) {
+                        $snipped_id.data("snippet-editor", new website.snippet.editorRegistry[$snipped_id.data("snippet-id")](self, $snipped_id));
+                    }
+                    self.snippetFocus($snipped_id);
+                });
+            $("body > :not(:has(#website-top-view))").on('click', function (ev) {
+                    if (!snipped_event_flag && $snipped_id) {
+                        self.snippetblur($snipped_id);
+                        $snipped_id = false;
                     }
                 });
-                $options.on('change', 'select[name="carousel-background"]', function () {
-                    $('.carousel-inner .item.active', $carousel).css('background-image', 'url(' + $(this).val() + ')');
-                    $(this).val("");
-                });
-                $options.on('change', 'select[name="carousel-style"]', function () {
-                    var $container = $('.carousel-inner .item.active .container', $carousel);
-                    $('.content_image', $container).remove();
-                    switch ($(this).val()) {
-                        case 'no_image':
-                            $('.content', $container).attr("class", "content");
-                            break;
-                        case 'image_left':
-                            $('.content', $container).attr("class", "content col-md-6")
-                                .before('<div class="content_image col-md-5"><img class="img-rounded img-responsive" src="/website/static/src/img/china.jpg"></div>');
-                        break;
-                        case 'image_right':
-                            $('.content', $container).attr("class", "content col-md-6")
-                                .after('<div class="content_image col-md-5 col-lg-offset-1"><img class="img-rounded img-responsive" src="/website/static/src/img/china.jpg"></div>');
-                        break;
-                    }
-                    $(this).val("");
-                });
-                $options.show();
-            });
+        },
+
+        snippetblur: function ($snipped_id) {
+            if ($snipped_id) {
+                if ($snipped_id.data("snippet-editor")) {
+                    $snipped_id.data("snippet-editor").onBlur();
+                }
+                if ($snipped_id.data("snippet-view")) {
+                    $snipped_id.data("snippet-view").onBlurEdit();
+                }
+            }
+        },
+        snippetFocus: function ($snipped_id) {
+            if ($snipped_id) {
+                if ($snipped_id.data("snippet-view")) {
+                    $snipped_id.data("snippet-view").onFocusEdit();
+                }
+                if ($snipped_id.data("snippet-editor")) {
+                    $snipped_id.data("snippet-editor").onFocus();
+                }
+            }
         },
     });
 
     /* ----- SNIPPET SELECTOR ---- */
-    website.Snippets = openerp.Widget.extend({
+    
+    website.snippet = {};
+
+    website.snippet.BuildingBlock = openerp.Widget.extend({
         template: 'website.snippets',
         init: function () {
             this._super.apply(this, arguments);
+            if(!$('#oe_manipulators').length){
+                $("<div id='oe_manipulators'></div>").appendTo('body');
+            }
         },
         start: function() {
             var self = this;
@@ -90,7 +112,9 @@
                 dataType: "text",
                 success: function(snippets){
                     self.$el.html(snippets);
-                    self.start_snippets();
+                    self.$('.oe_snippet').each(function(index,snippet){
+                        self.make_snippet_draggable($(snippet));
+                    });
                 },
             });
 
@@ -104,26 +128,25 @@
             return obj;
         },
 
-        // setup widget and drag and drop
-        start_snippets: function(){
+        // activate drag and drop for the snippets in the snippet toolbar
+        make_snippet_draggable: function($snippet){
             var self = this;
 
-            this.$('.oe_snippet').draggable({
+            $snippet.draggable({
                 helper: 'clone',
                 zIndex: '1000',
                 appendTo: 'body',
                 start: function(){
-                    var snippet = $(this);
-                    var action  = snippet.data('action');
+                    var action  = $snippet.data('action');
 
                     self.deactivate_snippet_manipulators();
                     if( action === 'insert'){
                         self.activate_insertion_zones({
-                            siblings: snippet.data('selector-siblings'),
-                            childs:   snippet.data('selector-childs')
+                            siblings: $snippet.data('selector-siblings'),
+                            childs:   $snippet.data('selector-childs')
                         });
                     }else if( action === 'mutate' ){
-                        self.activate_overlay_zones(snippet.data('selector'));
+                        self.activate_overlay_zones($snippet.data('selector'));
                     }
 
                     $('.oe_drop_zone').droppable({
@@ -138,11 +161,13 @@
                         },
                         drop:   function(){
                             if( action === 'insert' ){
-                                $(".oe_drop_zone.oe_hover")
-                                    .replaceWith(snippet.find('.oe_snippet_body').clone())
-                                    .removeClass('oe_snippet_body');
+                                var $toInsert = $snippet.find('.oe_snippet_body').clone();
+                                $toInsert.removeClass('oe_snippet_body');
+                                $toInsert.addClass('oe_snippet_instance');
+                                $toInsert.data('snippet-id',$snippet.data('snippet-id'));
+                                $(".oe_drop_zone.oe_hover").replaceWith($toInsert);
                             }else if( action === 'mutate' ){
-                                self.path_eval(snippet.data('action-function'))( $(".oe_drop_zone.oe_hover").data('target') );
+                                self.path_eval($snippet.data('action-function'))( $(".oe_drop_zone.oe_hover").data('target') );
                             }
                         },
                     });
@@ -152,8 +177,38 @@
                     self.activate_snippet_manipulators();
                 },
             });
-
         },
+
+        // return the original snippet in the editor bar from a snippet id (string)
+        get_snippet_from_id: function(id){
+            return $('.oe_snippet').filter(function(){
+                    return $(this).data('snippet-id') === id;
+                }).first();
+        },
+        // WIP
+        make_draggable_instance: function($instance){
+            var self = this;
+            var $snippet = get_snippet_from_id($instance.data('snippet-id'));
+
+            $instance.draggable({
+                helper:   'clone',
+                zIndex:   '1000',
+                appendTo: 'body',
+                start: function(){
+                    var action = $snippet.data('action');
+                    if(action === 'insert'){
+
+                        self.deactivate_snippet_manipulators();
+                        self.activate_insertion_zones({
+                            siblings: $snippet.data('selector-siblings'),
+                            child: $snippet.data('selector-childs')
+                        });
+
+                    }
+                }
+            });
+        },
+
         // Create element insertion drop zones. two css selectors can be provided
         // selector.childs -> will insert drop zones as direct child of the selected elements
         //   in case the selected elements have children themselves, dropzones will be interleaved
@@ -161,25 +216,23 @@
         // selector.siblings -> will insert drop zones after and before selected elements
         activate_insertion_zones: function(selector){
             var self = this;
-            var i, len, $zones;
             var child_selector   =  selector.childs   || '';
             var sibling_selector =  selector.siblings || '';
             var zone_template = "<div class='oe_drop_zone oe_insert'></div>";
-            var $drop_zone = $('.oe_drop_zone');
 
-            $drop_zone.remove();
+            $('.oe_drop_zone').remove();
 
             if(child_selector){
-                $zones = $(child_selector);
-                for(i = 0, len = $zones.length; i < len; i++ ){
+                var $zones = $(child_selector);
+                for( var i = 0, len = $zones.length; i < len; i++ ){
                     $zones.eq(i).find('> *:not(.oe_drop_zone)').after(zone_template);
                     $zones.eq(i).prepend(zone_template);
                 }
             }
 
             if(sibling_selector){
-                $zones = $(sibling_selector);
-                for(i = 0, len = $zones.length; i < len; i++ ){
+                var $zones = $(sibling_selector);
+                for( var i = 0, len = $zones.length; i < len; i++ ){
                     if($zones.eq(i).prev('.oe_drop_zone').length === 0){
                         $zones.eq(i).before(zone_template);
                     }
@@ -191,12 +244,12 @@
 
             // Cleaning up unnecessary zones
             $('.oe_snippets .oe_drop_zone').remove();   // no zone in the snippet selector ...
-            $('#website-top-view').find('.oe_drop_zone').remove();   // no zone in the top bars ...
-            $('#website-top-edit').find('.oe_drop_zone').remove();
+            $('#website-top-view .oe_drop_zone').remove();   // no zone in the top bars ...
+            $('#website-top-edit .oe_drop_zone').remove();
             var count;
             do {
                 count = 0;
-                $zones = $('.oe_drop_zone + .oe_drop_zone');    // no two consecutive zones
+                var $zones = $('.oe_drop_zone + .oe_drop_zone');    // no two consecutive zones
                 count += $zones.length;
                 $zones.remove();
 
@@ -206,23 +259,25 @@
             }while(count > 0);
 
             // Cleaning up zones placed between floating or inline elements. We do not like these kind of zones.
-            $zones = $drop_zone;
-            for(i = 0, len = $zones.length; i < len; i++ ){
+            var $zones = $('.oe_drop_zone');
+            for( var i = 0, len = $zones.length; i < len; i++ ){
                 var zone = $zones.eq(i);
                 var prev = zone.prev();
                 var next = zone.next();
-                var float_prev = prev.css('float')   || 'none';
-                var float_next = next.css('float')   || 'none';
-                var disp_prev  = prev.css('display') ||  null;
-                var disp_next  = next.css('display') ||  null;
+                var float_prev = zone.prev().css('float')   || 'none';
+                var float_next = zone.next().css('float')   || 'none';
+                var disp_prev  = zone.prev().css('display') ||  null;
+                var disp_next  = zone.next().css('display') ||  null;
                 if(     (float_prev === 'left' || float_prev === 'right')
                     &&  (float_next === 'left' || float_next === 'right')  ){
                     zone.remove();
+                    continue;
                 }else if( !( disp_prev === null
                           || disp_next === null
                           || disp_prev === 'block'
                           || disp_next === 'block' )){
                     zone.remove();
+                    continue;
                 }
             }
         },
@@ -230,9 +285,10 @@
             $('.oe_drop_zone').remove();
         },
 
+        // generate drop zones covering the elements selected by the selector
         activate_overlay_zones: function(selector){
             var $targets = $(selector);
-
+            
             function is_visible($el){
                 return     $el.css('display')    != 'none'
                         && $el.css('opacity')    != '0'
@@ -247,7 +303,7 @@
                 var parents = $(this).parents().filter(function(){ return !is_visible($(this)); });
                 return parents.length === 0;
             });
-
+            
             var zone_template = "<div class='oe_drop_zone oe_overlay'></div>";
             $('.oe_drop_zone').remove();
 
@@ -255,10 +311,12 @@
                 var $target = $targets.eq(i);
                 var $zone = $(zone_template);
                 this.cover_target($zone,$target);
-                $zone.appendTo('body');
+                $zone.appendTo('#oe_manipulators');
                 $zone.data('target',$target);
             }
         },
+
+        // puts $el at the same absolute position as $target
         cover_target: function($el, $target){
             $el.css({
                 'position': 'absolute',
@@ -267,62 +325,89 @@
             });
             $el.css($target.offset());
         },
+
+        // activates the manipulator boxes (with resizing handles) for all snippets
         activate_snippet_manipulators: function(){
             var self = this;
+            // we generate overlay drop zones only to get an idea of where the snippet are, the drop
+            // zones are replaced by manipulators
             this.activate_overlay_zones('#wrap .container');
-            var $snippets = $('.oe_drop_zone');
 
-            for(var i = 0, len = $snippets.length; i < len; i++){
-                var $snippet = $snippets.eq(i);
+            var $active_manipulator = null;
+            var locked = false;
+
+            $('.oe_drop_zone').each(function(){;
+
+                var $zone = $(this);
+                var $snippet = $zone.data('target');
                 var $manipulator = $(openerp.qweb.render('website.snippet_manipulator'));
-                $manipulator.css({
-                    'top':    $snippet.css('top'),
-                    'left':   $snippet.css('left'),
-                    'width':  $snippet.css('width'),
-                    'height': $snippet.css('height'),
+
+                self.cover_target($manipulator, $zone);
+                $manipulator.data('target',$snippet);
+                $manipulator.appendTo('#oe_manipulators');
+                $zone.remove();
+
+                $manipulator.mouseover(function(){
+                    if(!locked && $active_manipulator != $manipulator){
+                        if($active_manipulator){
+                            $active_manipulator.removeClass('oe_selected');
+                        }
+                        $active_manipulator = $manipulator;
+                        $manipulator.addClass('oe_selected');
+                    }
                 });
-                $manipulator.data('target',$snippet.data('target'));
-                $manipulator.appendTo('body');
-                $snippet.remove();
+                /*$manipulator.mouseleave(function(){
+                    if(!locked && $active_manipulator){
+                        $active_manipulator.removeClass('oe_selected');
+                        $active_manipulator = null;
+                    }
+                });*/
+                /*
+                $manipulator.click(function(){
+                    if($active_manipulator === $manipulator){
+                        selected = !selected;
+                        $manipulator.toggleClass('oe_selected',selected);
+                    }
+                });
+                */
 
                 $manipulator.find('.oe_handle').mousedown(function(event){
+                    locked = true;
                     var $handle = $(this);
-                    var $manipulator = $handle.parent();
-                    var $snippet = $manipulator.data('target');
                     var x = event.pageX;
                     var y = event.pageY;
 
                     var pt = $snippet.css('padding-top');
-                    var pb = $snippet.css('padding-bottom');
-                    pt = Number(pt.slice(0, -2)) || 0; //FIXME something cleaner to remove 'px'
-                    pb = Number(pb.slice(0, -2)) || 0;
-
+                    var pb = $snippet.css('padding-bottom'); 
+                    pt = Number(pt.slice(0,pt.length - 2)) || 0; //FIXME something cleaner to remove 'px'
+                    pb = Number(pb.slice(0,pb.length - 2)) || 0;
+                    
                     $manipulator.addClass('oe_hover');
                     event.preventDefault();
 
-                    $(document.body).on({
-                        mousemove: function(event){
-                            var dx = event.pageX - x;
-                            var dy = event.pageY - y;
-                            event.preventDefault();
-                            if($handle.hasClass('n') || $handle.hasClass('nw') || $handle.hasClass('ne')){
-                                $snippet.css('padding-top',pt-dy+'px');
-                                self.cover_target($manipulator,$snippet);
-                            }else if($handle.hasClass('s') || $handle.hasClass('sw') || $handle.hasClass('se')){
-
-                                $snippet.css('padding-bottom',pb+dy+'px');
-                                self.cover_target($manipulator,$snippet);
-                            }
-                        },
-                        mouseup: function(){
-                            $body.off('mouseup mousemove');
-                            self.deactivate_snippet_manipulators();
-                            self.activate_snippet_manipulators();
+                    $('body').mousemove(function(event){
+                        var dx = event.pageX - x;
+                        var dy = event.pageY - y;
+                        event.preventDefault();
+                        if($handle.hasClass('n') || $handle.hasClass('nw') || $handle.hasClass('ne')){
+                            $snippet.css('padding-top',pt-dy+'px');
+                            self.cover_target($manipulator,$snippet);
+                        }else if($handle.hasClass('s') || $handle.hasClass('sw') || $handle.hasClass('se')){
+                            $snippet.css('padding-bottom',pb+dy+'px');
+                            self.cover_target($manipulator,$snippet);
                         }
                     });
-                });
 
-            }
+                    $('body').mouseup(function(){
+                        locked = false;
+                        $('body').unbind('mousemove');
+                        $('body').unbind('mouseup');
+                        self.deactivate_snippet_manipulators();
+                        self.activate_snippet_manipulators();
+                    });
+                });
+                    
+            });
         },
         deactivate_snippet_manipulators: function(){
             $('.oe_snippet_manipulator').remove();
@@ -337,4 +422,145 @@
             }
         },
     });
+
+
+    website.snippet.viewRegistry = {};
+    website.snippet.View = openerp.Class.extend({
+        $: function () {
+            return this.$el.find.apply(this.$el, arguments);
+        },
+        init: function (dom) {
+            this.$el = $(dom);
+            this._super.apply(this, arguments);
+        },
+        /* onFocusEdit
+        *  if they are an editor for this snippet-id 
+        *  Called before onFocus of snippet editor
+        */
+        onFocusEdit : function () {},
+
+        /* onBlurEdit
+        *  if they are an editor for this snippet-id 
+        *  Called after onBlur of snippet editor
+        */
+        onBlurEdit : function () {},
+
+        /* getOptions
+        *  get the options saved in the html view
+        */
+        getOptions: function () {
+            var options = this.$el.data("snippet-options");
+            return options ? JSON.parse(options) : undefined;
+        },
+    });
+
+
+    website.snippet.editorRegistry = {};
+    website.snippet.Editor = openerp.Widget.extend({
+        init: function (parent, dom) {
+            this.$target = $(dom);
+            this.parent = parent;
+            this._super.apply(this, arguments);
+            this.renderElement();
+            this.start();
+        },
+
+        renderElement: function() {
+            var $el;
+            if (this.template) {
+                $el = $(openerp.qweb.render(this.template, {widget: this}).trim());
+            } else {
+                $el = this._make_descriptive();
+            }
+            $el = $('<li id="website-top-edit-snippet-option"></li>').append($el);
+            this.replaceElement($el);
+        },
+
+        /* onFocus
+        *  called when the user click inside the snippet dom
+        */
+        onFocus : function () {
+            this.$el.prependTo(this.parent.$('#website-top-edit .nav.pull-right'));
+        },
+
+        /* onFocus
+        *  called when the user click outide the snippet dom
+        */
+        onBlur : function () {
+            this.$el.detach();
+        },
+
+        /* setOptions
+        *  saved the options in the html view
+        */
+        setOptions: function (options) {
+            $target.attr("data-snippet-options", JSON.stringify(options));
+        },
+
+        /* getOptions
+        *  get the options saved in the html view
+        */
+        getOptions: function () {
+            var options = this.$target.data("snippet-options");
+            return options ? JSON.parse(options) : undefined;
+        },
+    });
+
+
+    website.snippet.editorRegistry.carousel = website.snippet.Editor.extend({
+        template : "website.snippets.EditorBar.carousel",
+        start : function () {
+            var self = this;
+
+            self.$(".js_add").on('click', function (e) {
+                e.preventDefault();
+                var $inner = self.$target.find('.carousel-inner');
+                var cycle = $inner.find('.item').size();
+                $inner.append(openerp.qweb.render('website.carousel'));
+                self.$target.carousel(cycle);
+            });
+
+
+            self.$(".js_remove").on('click', function (e) {
+                e.preventDefault();
+                var $inner = self.$target.find('.carousel-inner');
+                if ($inner.find('.item').size() > 1) {
+                    $inner
+                        .find('.item.active').remove().end()
+                        .find('.item:first').addClass('active');
+                    self.$target.carousel(0);
+                }
+            });
+
+
+            var bg = this.$target.find('.carousel-inner .item.active').css('background-image').replace(/url\((.*)\)/g, '\$1');
+            this.$( 'select[name="carousel-background"] option[value="'+bg+'"], select[name="carousel-background"] option[value="'+bg.replace(window.location.protocol+'//'+window.location.host, '')+'"]')
+                .prop('selected', true);
+            self.$('select[name="carousel-background"]').on('change', function () {
+                self.$target.find('.carousel-inner .item.active').css('background-image', 'url(' + $(this).val() + ')');
+                $(this).val("");
+            });
+
+
+            self.$('select[name="carousel-style"]').on('change', function () {
+                var $container = self.$target.find('.carousel-inner .item.active .container');
+                $('.content_image', $container).remove();
+                switch ($(this).val()) {
+                    case 'no_image':
+                        $('.content', $container).attr("class", "content");
+                        break;
+                    case 'image_left':
+                        $('.content', $container).attr("class", "content col-md-6")
+                            .before('<div class="content_image col-md-5"><img class="img-rounded img-responsive" src="/website/static/src/img/china.jpg"></div>');
+                    break;
+                    case 'image_right':
+                        $('.content', $container).attr("class", "content col-md-6")
+                            .after('<div class="content_image col-md-5 col-lg-offset-1"><img class="img-rounded img-responsive" src="/website/static/src/img/china.jpg"></div>');
+                    break;
+                }
+                $(this).val("");
+            });
+        }
+    });
+
 })();
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml
new file mode 100644
index 00000000000..8665a1ce06e
--- /dev/null
+++ b/addons/website/static/src/xml/website.snippets.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="website.snippets.EditorBar.carousel">
+        <a href="#" class="button js_add"><i class="icon icon-plus-sign"></i></a>
+        <a href="#" class="button js_remove"><i class="icon icon-minus-sign"></i></a>
+        <select name="carousel-background">
+            <option value="">Chose an other background</option>
+            <option value="/website/static/src/img/greenfields.jpg">greenfields</option>
+            <option value="/website/static/src/img/landscape.png">landscape</option>
+            <option value="/website/static/src/img/aqua.jpg">aqua</option>
+        </select>
+        <select name="carousel-style">
+            <option value="">Chose an other style</option>
+            <option value="no_image">No image</option>
+            <option value="image_left">Image left</option>
+            <option value="image_right">Image right</option>
+        </select>
+    </t>
+
+</templates>
diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml
index 25f3869826e..a48068b82ed 100644
--- a/addons/website/views/views.xml
+++ b/addons/website/views/views.xml
@@ -156,24 +156,9 @@
 
         <template id="homepage" page="True">
             <t t-call="website.layout">
+                <div data-snippet-id="carousel"> TEST <br/> <br/> </div>
                 <section>
-                    <div id="myCarousel" class="carousel slide" data-interval="1000000">
-                        <div class="oe_carousel_options js_carousel_options" t-ignore="1" t-if="editable">
-                            <span class="label label-default js_add"><i class="icon-plus-sign"></i></span>
-                            <span class="label label-default js_remove"><i class="icon-minus-sign"></i></span>
-                            <select name="carousel-background" class="form-control">
-                                <option value="">Chose an other background</option>
-                                <option value="/website/static/src/img/greenfields.jpg">greenfields</option>
-                                <option value="/website/static/src/img/landscape.png">landscape</option>
-                                <option value="/website/static/src/img/aqua.jpg">aqua</option>
-                            </select>
-                            <select name="carousel-style" class="form-control">
-                                <option value="">Chose an other style</option>
-                                <option value="no_image">No image</option>
-                                <option value="image_left">Image left</option>
-                                <option value="image_right">Image right</option>
-                            </select>
-                        </div>
+                    <div id="myCarousel" data-snippet-id="carousel" class="carousel slide" data-interval="1000000">
                         <!-- Carousel items -->
                         <div class="carousel-inner">
                             <div class="item active" style="background-image: url(/website/static/src/img/greenfields.jpg); background-size: cover;">