Answers
Apr 11, 2022 - 12:10 PM
SHOULD YOU DESIGN YOUR WEBSITES?
We usually recommend for Shopping Cart Elite to handle the complete graphic design for you, or at the very least the CSS portion. However, if you are an agency or have an in-house design, there are a few things you should know about our design system.
1) Cloud Templates
a. We introduced Cloud Templates in 2014 when we realized that there was no way for us to continuing releasing new website features and mobile features to clients that did their custom design, without risking disrupting their design.
b. We converted the whole template into what we call blocks. Each block is equivalent to a template that can be controlled without disrupting neighboring blocks.
c. We developed a central management to control these blocks. This gave us the ability to upgrade existing blocks that we would personally control (ex: product page template or checkout templates) and deploy new blocks without risking the disruption of custom blocks controlled by clients (Ex: Header or Footer).
d. We also introduced blocks plugins and different version of Desktop and Mobile
e. Some blocks we keep 100% restricted from clients modifying, other we give 100% freedom to do customization with CSS and Design.
f. By embracing blocks, we create a compromise between Shopping Cart Elite and the client to use the same standard of deployment and customization of the website so we can both continue upgrading new feature while keeping the custom design in place. Before each client would go into the CSS/HTML files and make custom edits with no standards and there was no way for us to upgrade without disrupting their design.
2) Cloud Templates are Dynamically Built
a. Each week, and whenever you save a new edit, Shopping Cart Elite will rebuild your CSS and HTML files on the server and your FTP. YOU SHOULD NEVER EDIT THE FILES DIRECTLY FROM THE FTP DUE TO THIS. UNLESS CLOUD TEMPLATE SYNCHRONIZATION SETTING IS DISABLED. READ #7 FOR DETAILS
b. We introduced Dynamic Building and Deployment to themes for various reasons:
i. Allow a new theme to be triggered via a URL
ii. Allow to schedule different themes to run on different schedules
iii. Allow different themes to trigger for different customers when logging
iv. Allow different themes to be preserved for Holidays
v. Never worry if a theme will conflict with another theme or Shopping Cart Updates
3) Turnkey plugins and blocks that are Maintained by Shopping Cart Elite instead of third party developers
a. When we roll out a new feature, we are rolling out a new block that can be turned on and off. So if you want a custom feature deployed, we can do it globally and activate it through a toggle setting in the back office.
4) Mobile
a. We wanted a mobile that has 100% of all features as the desktop while allowing customization by the client the same way they can do it on the desktop.
b. Mobile had to get Cloud Templates as well
c. To create a Mobile Adaptive Template, we had to have a controlled environment that is constantly maintained.
d. We created a way Certain components must render only on Mobile while others only on Desktop a validation system via Shopping Cart Elite is in place
5) Caching
a. We use Cloudflare for CDN, and it does have caching of images, CSS, HTML, etc. This allows for your content to render faster around the world.
b. YOU MUST RESET YOUR CACHE PRIOR TO DO ANY DESIGN CHANGES.
c. Otherwise you will do your design, go live, and a few days later your design will start to miss elements. It is like painting in the dark. The problem would be the cache. While you were designing your website without resetting the cache every time, you would make changes and rely on the new CSS to take effect while the old one was being used from the cache. Once the new CSS propagates the website does not look the same. Then Shopping Cart Elite would have to get involved with two designers, one developer, and one manager to resolve this issue immediately, and go through all the code to ensure everything is validated. The time spent on training and resolving issues between the whole team exceeds three times the budget of what we would charge to do it for you.
6) Deep Front-End Integration
a. Cloud Templates are deeply integrated with all our back office settings. This means that anything you would move and change in a raw HTML (to reposition elements), is possible simply by changing settings in the back office. Sure, the learning curve is a little steeper, but the result and future updates will be much more pleasant and easy to manage.
b. We are constantly adding new settings and features. When a new feature comes out, it�s only a click away, because of the Cloud Templates integration, unlike writing a new code that can take days to fully complete.
c. In the end, you�re only designing/writing the frame around your content, again, by using our system settings this is very dynamic. Anything content or body related is totally customizable within our Blocks Editor.
d. Our Back office also carries Custom HTML Boxes for every module and pages. This means that you can insert any HTML above/below/next to/inside different modules and pages.
7) Disable Cloud Template
a. Not recommended, but possible, you can optionally disable the Cloud Template synchronization. This will allow you to re-upload a CSS files to the FTP, without these files being rewritten by our releases. The only reason you would do this is to keep your website static and not receive our front-end updates.
b. By disabling the sync and writing your own CSS, it will take you 15.000+ lines of CSS code to cover all of our features and modules. For this, it�s much more recommended to edit the already available CSS code.
c. CSS, JS and parts of HTML can easily be added/changed in our back office with sync enabled. So, keeping it on is much recommended.
8) System Validation
a. We introduced validation for our internal designers in external plugins to ensure they use proper syntax for JavaScript, CSS, etc. If you use the validator and it gives you an error, and it is a false positive. You can set it to �ANY� and it will pass through. However, please report this to us so we can find this false positive.
This is the reason we enforce our designers to go through training and certification to do CSS/HTML in Shopping Cart Elite. Otherwise, we risk your relationship over issues that should never have happened. If you still insist on doing your custom design and CSS, please consider the consequences.
We started documentation here but more is coming soon:
We usually recommend for Shopping Cart Elite to handle the complete graphic design for you, or at the very least the CSS portion. However, if you are an agency or have an in-house design, there are a few things you should know about our design system.
1) Cloud Templates
a. We introduced Cloud Templates in 2014 when we realized that there was no way for us to continuing releasing new website features and mobile features to clients that did their custom design, without risking disrupting their design.
b. We converted the whole template into what we call blocks. Each block is equivalent to a template that can be controlled without disrupting neighboring blocks.
c. We developed a central management to control these blocks. This gave us the ability to upgrade existing blocks that we would personally control (ex: product page template or checkout templates) and deploy new blocks without risking the disruption of custom blocks controlled by clients (Ex: Header or Footer).
d. We also introduced blocks plugins and different version of Desktop and Mobile
e. Some blocks we keep 100% restricted from clients modifying, other we give 100% freedom to do customization with CSS and Design.
f. By embracing blocks, we create a compromise between Shopping Cart Elite and the client to use the same standard of deployment and customization of the website so we can both continue upgrading new feature while keeping the custom design in place. Before each client would go into the CSS/HTML files and make custom edits with no standards and there was no way for us to upgrade without disrupting their design.
2) Cloud Templates are Dynamically Built
a. Each week, and whenever you save a new edit, Shopping Cart Elite will rebuild your CSS and HTML files on the server and your FTP. YOU SHOULD NEVER EDIT THE FILES DIRECTLY FROM THE FTP DUE TO THIS. UNLESS CLOUD TEMPLATE SYNCHRONIZATION SETTING IS DISABLED. READ #7 FOR DETAILS
b. We introduced Dynamic Building and Deployment to themes for various reasons:
i. Allow a new theme to be triggered via a URL
ii. Allow to schedule different themes to run on different schedules
iii. Allow different themes to trigger for different customers when logging
iv. Allow different themes to be preserved for Holidays
v. Never worry if a theme will conflict with another theme or Shopping Cart Updates
3) Turnkey plugins and blocks that are Maintained by Shopping Cart Elite instead of third party developers
a. When we roll out a new feature, we are rolling out a new block that can be turned on and off. So if you want a custom feature deployed, we can do it globally and activate it through a toggle setting in the back office.
4) Mobile
a. We wanted a mobile that has 100% of all features as the desktop while allowing customization by the client the same way they can do it on the desktop.
b. Mobile had to get Cloud Templates as well
c. To create a Mobile Adaptive Template, we had to have a controlled environment that is constantly maintained.
d. We created a way Certain components must render only on Mobile while others only on Desktop a validation system via Shopping Cart Elite is in place
5) Caching
a. We use Cloudflare for CDN, and it does have caching of images, CSS, HTML, etc. This allows for your content to render faster around the world.
b. YOU MUST RESET YOUR CACHE PRIOR TO DO ANY DESIGN CHANGES.
c. Otherwise you will do your design, go live, and a few days later your design will start to miss elements. It is like painting in the dark. The problem would be the cache. While you were designing your website without resetting the cache every time, you would make changes and rely on the new CSS to take effect while the old one was being used from the cache. Once the new CSS propagates the website does not look the same. Then Shopping Cart Elite would have to get involved with two designers, one developer, and one manager to resolve this issue immediately, and go through all the code to ensure everything is validated. The time spent on training and resolving issues between the whole team exceeds three times the budget of what we would charge to do it for you.
6) Deep Front-End Integration
a. Cloud Templates are deeply integrated with all our back office settings. This means that anything you would move and change in a raw HTML (to reposition elements), is possible simply by changing settings in the back office. Sure, the learning curve is a little steeper, but the result and future updates will be much more pleasant and easy to manage.
b. We are constantly adding new settings and features. When a new feature comes out, it�s only a click away, because of the Cloud Templates integration, unlike writing a new code that can take days to fully complete.
c. In the end, you�re only designing/writing the frame around your content, again, by using our system settings this is very dynamic. Anything content or body related is totally customizable within our Blocks Editor.
d. Our Back office also carries Custom HTML Boxes for every module and pages. This means that you can insert any HTML above/below/next to/inside different modules and pages.
7) Disable Cloud Template
a. Not recommended, but possible, you can optionally disable the Cloud Template synchronization. This will allow you to re-upload a CSS files to the FTP, without these files being rewritten by our releases. The only reason you would do this is to keep your website static and not receive our front-end updates.
b. By disabling the sync and writing your own CSS, it will take you 15.000+ lines of CSS code to cover all of our features and modules. For this, it�s much more recommended to edit the already available CSS code.
c. CSS, JS and parts of HTML can easily be added/changed in our back office with sync enabled. So, keeping it on is much recommended.
8) System Validation
a. We introduced validation for our internal designers in external plugins to ensure they use proper syntax for JavaScript, CSS, etc. If you use the validator and it gives you an error, and it is a false positive. You can set it to �ANY� and it will pass through. However, please report this to us so we can find this false positive.
This is the reason we enforce our designers to go through training and certification to do CSS/HTML in Shopping Cart Elite. Otherwise, we risk your relationship over issues that should never have happened. If you still insist on doing your custom design and CSS, please consider the consequences.
We started documentation here but more is coming soon:
