BizzyBeeShop system lets you (or your web developer) modify the graphical design of your web shop. It also allows you to modify existing functionalities or add some new functionalities to your web shop.
We will show you how to do it. We will show you example videos. We’ll even give you sample code snippets we used in our demos, and also the code we used in the real live production webs.
- Managing multiple Merchants and Webs
- Custom CSS
- Inserting Custom code into BizzyBeeShop template
- Developing with full access to HTML/CSS/JS code
- Appendix 1 – CUSTOMCODE snippets definition
Logging into Green Panel
In your web browser please open the link to Green Panel that you've gotten in your e-mail when you created your web shop.
Log into the system with your username and password you received in your email. Choose „Zapamti prijavu“ (Remember Login) so the system can remember you in the future.
After successful login, you have gained the access to the Green Panel system, where you can perform all tasks regarding the management of your webshop.
Managing multiple Merchants and Webs
Typically, when you open a new Merchant and the first Web shop, you obtain your username and password to Green Panel.
If you are developer, web designer, or SEO expert… working for several Merchants in the BizzyBeeShop system, you can get the unified access to several merchants with your single username/password.
This feature is called Multi-Merchant admin. To become Multi-Merchant admin, please contact our support, and request single multimerchant account access to multiple merchants.
If you have some knowledge of HTML/CSS technologies, you can easily redesign your BizzyBeeShop template.
Depending on the depth of your knowledge, you can make small or very large design changes.
Every CSS class in the BizzyBeeShop template can be overwritten with your custom CSS override declaration.
Every web shop has to have its own CSS custom declaration.
How to accomplish this is presented in the following YouTube video.
The video references the example on how to completely modify ELEGANCE skin with the customized design.
Code and files used in this example:
Please note: Implementing bad CSS code in Custom CSS editor can severely ruin the design of your web shop.
So, please ask a skilled web developer, with CSS knowledge to help you with this.
Inserting Custom code into BizzyBeeShop template
BizzyBeeShop templates contain certain predefined areas where you can insert your custom code.
You use Web Settings section in the Green Panel section for managing your Webshops.
How to use Custom code snippets is presented in our YouTube video:
Code used in this example:
The definition of the Custom code regions and how to use them can be found in the Appendix 1 – CUSTOMCODE snippets definition.
Please note: Implementing bad scripts and code in the Custom code snippets can severely ruin the design and functionality of your web shop.
To be able to write and implement Custom code, you need to be enrolled into Green Panels Web developer Role. Contact us for that.
Developing with full access to HTML/CSS/JS code
We developed the BizzyBeeShop system so that the application code is totally separated from the web design code. This gives the opportunity for web designers to work only on the HTML/CSS/JS code, without the need to dig deeper into server-side C# code.
Each web shop is assigned its Skin. The Skin is a graphical template that is already-working and is fully designed. Without a Skin no webshop can be working.
The Skin is comprised of a several types of files:
- .ASCX controls – containing plain HTML, and also server controls that will generate output HTML
- .CSS – CSS files
- .PNG, .JPG, .SVG... – images containing web graphics for the web shop
If you, as the web developer, don’t feel that making Custom CSS and using Custom code snippets is enough for you – then you might be interested in getting the full access to Skin code. This way you will be able to make the complete web design and functionalities that you want.
You can make great sites with this approach. Sites like these are made with pure Skin modification: www.se-mark.hr, www.sport-moda.hr, shop.zel-cos.hr, www.sudoper.hr, www.pet-centar.hr, www.maxi-pet.ro. www.dobarpartner.hr. There are many more.
How to develop your web shop with full access to Skin code is presented in this video:
There are many serve development platforms on the web today. BizzyBeeShop platform is based on the Microsoft ASP.NET© technologies. The Skin uses many of ASP.NET server side controls to render its HTML content. The developer who plans to build web shop solutions based on the BizzyBeeShop platform should get familiar with ASP.NET controls, how they are defined, used, and most importantly – how will they render HTML. The best way to get the reference to ASP.NET controls is here:
The developer will not be needing to create new ASP.NET controls, or even modify existing ASP.NET controls. Even though you can.
However, the developer should be very familiar on how these ASP.NET controls will render HTML code at the end. That is why we suggest you get yourself familiar with ASP.NET controls.
You can use any HTML Coding Tool to modify Skin files. However we recommend Microsoft’s native development tool – Visual Studio code.
You can download it for free here: https://code.visualstudio.com/.
Developer partner program and BizzyBeeShop developer certificate
To be sure you get the right support with Skin development, we build the BizzyBeeShop Partner program. Partner program will give you:
- The access to BizzyBeeShop internal development environment
- How-to-start Education for Skin development
- Support in the process of Skin development
- Access to many other resources you can use as an example in your web projects
BizzyBeeShop Developers are primary Frontend developers. There is no need and no possibility to code, build or modify server-side or backed-side code.
Partner program is intended for developers that will work closely with BizzyBeeShop to provide their customers the quality eCommerce projects. Developers will get the access to company resources such as development environment to start working and deliver the projects.
We want our Developer partners to earn money on quality projects by-themselves. BizzyBeeShop will provide the support needed.
Developers can contact us for enrolling into our partner program, just by sending the mail to firstname.lastname@example.org. The best way to start the conversation is by sending a few reference projects, you’ve been working on in the past. We will take a look at those.
Developers can then get 30 days trial access to development platform. In your development environment you can get one Skin to test and to work on. You choose the Skin. After 30 days of building and testing, BizzyBeeShop will evaluate your work. Developers that are able to do good work on the Skin development will get BizzyBeeShop Certified Developer certificate and more permanent access for all their future eCommerce projects.
Appendix 1 – CUSTOMCODE snippets definition
Header is a control that is placed on the top of all webshop pages where you can browser products, read News, and such. The Header control is not placed on the Checkout pages section.
CUSTOMCODE_header is the PlaceHolder for your code that will be placed right after the closing </header> tag.
This PlaceHolder is also placed in the Header control. However the placement in the Header control is not that important.
Everyhing you put in this PlaceHolder will be placed inside the page <head></head> tag.
Footer is a control that is placed near the bottom of all webshop pages where you can browser products, read News, and such. The Header control is not placed on the Checkout pages section.
CUSTOMCODE_footer is the PlaceHolder for your code that will be placed right after the closing </footer> tag.
Webshop contains Header links. You can display or hide any of those. But you can also add new content,like tags or such to the right of the existing links.
Webshop contains Footer links. You can display or hide any of those. But you can also add new content,like tags or such to the right of the existing links.
This code snippet appears only on the Product-detail pages. It will render right after the closed </main> tag.
This code snipped will appear on a page containing the list of products with Custom product lists. Maning on the pages such as Sale (Akcija), New products (Novi proizvodi).
This code snipped will appear on a standard page containing the list of products. This means the list of products when the buyer goes through product catgories.
This code snippet is rendered after the existing three patches on the product detail page. You can define your own patches and generate the CSS code to make them work in accordance with the product data placed in the Green Panel.
This code snippet is rendered after the existing three patches on the product detail page, but in the section where related products occur. It is rendered for each related product. You can define your own patches and generate the CSS code to make them work in accordance with the product data placed in the Green Panel.
This code snippet is rendered after the existing three patches on the product list page. It is rendered for each product in the list.
This code snippet is rendered after the existing three patches on the product list page, for the special product lists, such as “New product” list.
This code snippet is rendered after the existing three patches on the product list on the Homepage.
This code snippet is rendered right before the closing </main> tag in the Checkout process where the user presents User data.
This code snippet is rendered right before the closing </main> tag in the Checkout process where the user select Shipping method.
This code snippet is rendered right before the closing </main> tag in the Checkout process where the user select Payment method.
This code snippet is rendered right before the closing </main> tag in the Checkout process on the Confirm Order page.
This code snippet is rendered right before the closing </main> tag in the Checkout process where the user presents its Credit Card information.
Please be aware: Even though this snippet exists, it is always Read-Only. Currently, if you need to upload some logic on this page - feel free to send us the script. We will examine it, and upload it when we make sure it's safe.