How to manage blocks in CS Cart
Until recently changing the layout of your eCommerce website so that you could highlight new products or offerings would involve a developer making changes to the code to achieve this.
CS Cart has made this a thing of the past with the introduction of their block manager. You can now change category and product pages to include adverts, hero images, banners and up selling opportunities so that they line up with your other marketing efforts.
CS Cart gives you full control of how the information displayed in your store, and when correctly setup you can use this powerfully to display alternate marketing messages to different groups of people, logged in or logged out visitors as well as mobile, tablet and desktop devices.
When looking at the CS Cart block manager you will now be presented with a page of layouts full of different grey boxes. These are called ‘Blocks’ and ‘Grids’. So what are they?
Blocks
Blocks are the elements of which your CS Cart store is built up on. These elements include ‘My Account’, ‘Currencies’ and ‘Search’. But these will change depending on what you are selling and what you need on your CS Cart store. A block can be dragged around your grids if you would like to move it.
Grid
A grid helps to manage your blocks and layout a page; they allow you to create columns and sections. You can also nest grids allowing you to create more complex layouts. A factor to keep in mind when creating grids is that a block will naturally take the full width of the grid size. For example if your grid is only half the size of your web page, any block that you place inside that grid will never be bigger than the grid itself.
Container
The container is the main area where both your grid and blocks will be contained. This will be the basis of how your website pages will be laid out. For example, Header, Main content and Footer are the basic containers that most websites use.
Now that we know what grids, blocks and containers are, let’s take a look at how to add them into your CS Cart store. So we must always begin with a container. To insert a container scroll over to the top right hand of the screen and click the dark grey ‘Plus’ symbol. This will bring up a pop up for you to make your first container. Now make sure that when adding your container you do this in order, as you want them to be on your page. This is because once you have made your container they cannot be moved about like blocks can. The same goes for grids. Naming your grids and containers is always a good idea just to help keep your website organised when updating it.
Next, we can begin a adding grids. Find the container that you have just added and locate the dark grey ‘Plus’ symbol that will appear when you scroll over the container. You will be given the option to add a grid. Now you will be presented with a pop up similar to the container pop up. Decide how wide you require your grid to be and where you would like it to sit within your container. Once happy, click ‘Create’. You will now see a grid sitting within your container.
Lets add our first block. First, the grid that you have just added, along the light grey bar at the bottom of it a smaller dark grey ‘Plus’ symbol will appear. Once clicked, a pop up will appear with 3 columns, which contain a range of different options. Some of these options will require you to apply a particular template to them before hand otherwise they will appear as an empty block on your live site.
Once you have selected your block you can now move them around if needed. You can also deactivate grids, containers and blocks. To do this, find an element you would like to deactivate and scroll over the grid, container or block. A little power symbol will appear at the bottom of the block, grid or container. Click this and the element will now be disabled. Remember though for grids and containers, when you deactivate them; elements contained inside of the grid or container will also be deactivated. To activate them again simply click the same power symbol.
If you would like to remove a grid or block, scroll over which one you would like to remove and click on the dustbin icon in the right hand corner. You will be asked if you would like to permanently delete the block or grid. Press ok and now you will see that the block or grid has been removed. Remember if you delete a grid then it will remove all blocks inside the grid. Containers are not so easy to remove to you must make sure that they are in the correct place when you place them.
All that is left to do is check that the layout looks correct on your live CS-Cart store and that you are happy with how it looks.
If you would like more information on CS-Cart and would like to speak to one of our experts call us 0845 258 1208 or alternatively fill out our contact form here.
