BigCommerce Web Design : Basic Tutorial

Are you planning to use a design template the same way as it is released? Think twice - it is not viable to follow such a practice, as your business has its own branding and appearance. This way you need to update the BigCommenrce website design. For making customizations it is important to change things according to your branding choice. This is one of the best features available with BigCommerce that allows to customize every design aspect of your websites appearance, using the design section. We are posting this not to tell you a specific change, but to give you an overview about how things work with Design section of your BigCommerce Control Panel. For your existing eCommerce website you might have created an effective website design, before making any change it is always recommended to keep a backup copy of your website, as if anything goes wrong or if you have changed your mind the things can be revert back to their orignal. In order to access the design section, click on the design link on the top of Control panel followed by the button “Browse template files”. Coming to the windows, in the right side you can edit files by using either HTML or CSS. At first when you enter this design section inside control panel default.html file is displayed to you.

 Bigcommerce tutorial

On the left side of this window there are two scroll bars that will help you to locate different sections available on your website. A webmaster can edit any html file available in the website's template by selecting the respective filename using either of the two sections available in the left side of the screen. Now coming to the bottom scroll bar, it is divided into four main sections, Let us explore them one by one.

Bigcommerce tutorial

1.Style Sheets Style sheet are responsible for appearance of several parts of your website. You can control fonts, colors and spacing between various aspects of your website. The major two style sheets which designers need to edit are main.css style sheet and the template style sheet, you can define it's name, otherwise it's by default name is blue.css.

2. Layouts Every page in your website has a layout. This layout file is accountable for communicating with the shopping cart platform to display the content on the page. At which location of your page, which things will get displayed. This way bigCommerce offers the freedom to design a different layout for every single page, however practically it is not recommended but indeed this level of control is available in BigCommerce. You can follow your own smart ways to keep a usable web design, however difference in layouts could really distract your customers, but for some special requirements it is an added flexibility that can be very useful. Default.html file holds all the layouts of your website.

3. Panels Panels are available in layouts of several pages and appear like %%Panel.IDofpanel%%. There are many pre-configured panels which allows a webmaster to add sections to the main pages. Lets take an instance the HomeSalesProducts.html shows a box containing all the products which you have kept a special price. Another file available on the sidebar panel is SideCartContents.html, this displays all the products which are added by the customers to their shopping carts. Next comes SideNewsletterBox.html panel that creates sidebar part that lets customers to register for your newsletters. There are many more panel to select from which can be used for adding functionality to your webpages.

4. Snippets Snippets are the real forces which carry the codes used to perform several functions on your website. They always appear like %%Snippet.IDofsnippet%%. Snippets are present all over the website including layouts and panels. It is not recommended to modify anything in the Snippet unless you an expert programmer. To learn more about implementing rich snippets in BigCommerce, visit our earlier post here. We hope that the above mentioned briefing about various design sections in BigCommerce control panel helped you to better understand the design features. This will definitely assist you to make innovative changes to your BigCommerce website as better designs can increase an eCommerce website's profit. While making some design changes with BigCommerce, if you have discovered anything new that enhanced you designed experience please share those experiences with us.

< 4 Great Tips to Optimize Sales of Magento Ecommerce Store