Starting an online business is much easier than it used to be, but web design for your eCommerce store can still be challenging. It's possible to be both a business owner and a developer with design skills, but even then, your valuable time is better spent running and growing your business. That's why eCommerce website templates are available for a variety of platforms so you can build a great website without specialized knowledge. But let's be clear: not all eCommerce templates are of high quality. Unoptimized design and poor mobile functionality are common.

That's why 3dcart introduced the Core Templating Engine, a revolutionary theme framework that we use as the foundation for all current 3dcart themes. With Core templates, theme design has been overhauled to be both more flexible from a design standpoint and technically superior, offering vast improvements for developers and users whether behind the scenes or otherwise.

Let's take a closer look at the Core Templating Engine and the advantages it provides for 3dcart store design.

 

Introduction to the Core Templating Engine

The Core Templating Engine is a designed to provide several advantages to both store owners and eCommerce theme developers. The immediate benefits include mobile-friendly design, ultimate flexibility, and the ease of creating a high-quality user experience to raise your conversions. Let's go into detail about the structure of Core themes and why they offer a superior experience overall.

 

How are Core Themes Different from 3dcart's Legacy HTML5 Themes?

The new Core framework is a complete replacement of our previous HTML5 theme framework. This isn't to say that the Core Templating Engine doesn't use the HTML language — HTML5 was simply the name of the previous 3dcart theme standard. Core is a completely rewritten and refreshed theme engine that brings tons of improvements to 3dcart stores and provides a better browsing experience to your visitors. Plus, it's built with technical considerations in mind that will benefit visitors to the site in a number of ways.

 

Bootstrap Foundation

Bootstrap is the most popular and versatile framework for responsive, mobile-first website design. Bootstrap includes CSS, HTML, and JavaScript libraries that make it easy to implement several features that are ideal for high-performing online stores. Bootstrap also makes it much easier to create a responsive design, which is the preferred method of creating a mobile-friendly website according to Google's SEO guidelines. Responsive websites adapt to every screen size and maintain a consistent appearance across all devices.

bootstrap-home

By using Bootstrap as the foundation for the Core Templating Engine, 3dcart has opened many doors for website designers who seek to create and customize fully-functional eCommerce websites that include popular quality-of-life features like enhanced dropdown menus and much more. Our implementation of Bootstrap ensures that all 3dcart Core themes are responsive by default by taking a mobile-first approach: unlike older methods of web design, the desktop version is an extension based on the mobile version and not vice versa.

This is essential today when eCommerce statistics show that the majority of online shoppers prefer to browse and buy on mobile. This doesn't mean Core themes perform poorly on desktop, however — instead, your customers are assured a smooth, consistent experience no matter which device they use.

 

Google AMP (Accelerated Mobile Pages) for Products

amp-product-page

3dcart Core themes include built-in Google AMP functionality for your product pages. AMP is a powerful, efficient mobile standard that allows near-instantaneous loading on mobile devices, even if the customer has a slower data connection.

Google's mission with AMP is to improve the user experience for people browsing and shopping on mobile, so AMP-enabled web pages are considered more "useful" according to Google's SEO standards. This is one of several reasons that using a 3dcart Core theme will help your website rank higher in search results, as "more useful" web pages are prioritized.

 

AJAX and Other Site Speed Improvements

AJAX (Asynchronous JavaScript and XML) is a development technique using JavaScript, HTML, XML, and CSS to vastly smooth the user experience of websites by streamlining the way the web page exchanges information with the server. With AJAX, a page can update without needing to reload, so customers won't have to wait for pages to refresh. Considering the number of pages an online store customer will often need to visit, it's both useful and user-friendly to reduce the amount of time they spend waiting for pages to reload. That's why the Core Templating Engine has AJAX built in to bring this valuable functionality to your eCommerce website, so when customers add a product to their cart or sign up for your mailing list, the page they're viewing will not need to reload.

Code structure also affects page speed, as web browsers will load all the elements of a page in the order in which they're written within the code — and if that code is messy, the web browser will have to sift through whitespace, unnecessary formatting, or other clutter within the files. Unoptimized code will have visitors waiting for a page to become usable as their browsers load other parts of the website first. By optimizing the code structure in our Core templates and deferring the loading of CSS and JavaScript, your 3dcart website will display the important content first so your website is usable by your visitors right away.

The number of files a visitor's web browser needs to load also affects page speed, so Core takes the additional step of combining certain files where appropriate to further minimize the time it takes for your website to load. Between Google AMP, AJAX, and optimized coding structure, themes built with the Core Templating Engine will load at blazing fast speeds, getting shoppers right into the action without delay.

 

The Benefits of a Faster Website

Why is it so important for your website to be fast? Because customers hate waiting! It only takes a few seconds for a new visitor to decide to hit the Back button and look for a better, faster website. In fact, you only have about 3 seconds to make that priceless first impression. Not only is page load speed important for user experience on a website, it also affects SEO and can be the deciding factor in whether a customer decides to shop on your site or go elsewhere.

mobile-page-speed-test

This makes page speed essential to your conversion rate. It's crucial that your website avoids everything that could cause friction for a customer, and slow loading speeds cause friction to spare. If your site is slow enough, customers may give up and decide to shop somewhere else before they even get to read about your business or see your products. Even repeat visitors will quickly get tired of slow web pages and may give up on purchases they were otherwise intending to make.

Increasing page speed is an essential part of improving your website's user experience, and since customers prefer to shop on websites that are pleasant to use, a faster website will also have a higher conversion rate. Plus, Google takes site speed into account when ranking pages in search engine results, and places faster websites higher because they're more likely to be useful to searchers.

That's why 3dcart's Core Templating Engine places such an emphasis on speed: it helps everything from your brand recognition to your conversion rate to your SEO.

 

More User Experience Benefits of Core Themes

Thanks to its Bootstrap foundation, the Core Templating Engine makes it easier than ever to add in-demand user experience bonuses to 3dcart online stores. For example, sticky headers are a highly-recommended navigation aid that keeps the menu on the screen at all times, and they're included right out of the box in many Core themes. AJAX falls under the user experience category as well, since it allows customers to add items to their cart or sign up for your mailing list without needing to wait for the page to reload afterward.

vaporgod-sticky-menu

In the case that the website needs to generate a popup window, such as to quickly preview a cart, these open as modals instead of old-fashioned popups, making them far less obtrusive and much more streamlined. Modals are simply "cards" that appear within the existing window, as opposed to popups which force the browser to open another. Popups are slow, can cause problems on mobile, and are often blocked by the user's browser, so modals are superior in all respects.

Further, the shopping experience is made more intuitive with dynamic Add to Cart buttons that change to Choose Options as needed, when an item has multiple variants that need to be selected first. This keeps the message clear for your customers so they'll never have any doubts as to what clicking that button will do. This makes them feel welcome, and helps bring your brand across as honest.

ezgif-1-5d36c2a0e61d

Finally, you can even verify your human visitors without impeding their browsing experience by using an invisible CAPTCHA. According to Google, invisible CAPTCHAs use "a combination of machine learning and advanced risk analysis that adapts to new and emerging threats" to discern human visitors from robots without interrupting their shopping.

 

 

 

Increase Conversions with a Better View Cart and Checkout

The customer's ability to view and evaluate their shopping cart, and follow through with a smooth checkout, is crucial to your conversion rate. Abandoned carts are a serious problem in eCommerce and one of the best ways to battle them is to improve your website's shopping cart and checkout process as much as possible. That was another of our goals with Core themes.

Core themes bring extra convenience and usability to your View Cart page via plus and minus quantity buttons. This means the customer won't have to enter quantities manually, which is very handy on mobile where it's often annoying to enter text. A floating Proceed to Checkout button is also present to let customers finish their purchase directly from the View Cart page.

view-cart-core

Checkout is handled by a new frame that removes distractions such as navigation and site footers, which is proven to help increase conversions. The Shipping Address is collapsed by default to help avoid overwhelming the customer with detail. You can also choose between a multi-step and single-page checkout, the latter of which is preferred by many customers due to eliminating the need to load multiple checkout pages.

checkout-core-example

Google Address Verification additionally streamlines checkout on Core themes by helping to prevent errors when customers enter their shipping and billing address. Returning customers can also log into their existing account via a modal window that doesn't redirect them away from checkout, ensuring they don't lose their place. You can also have the option of letting customers log in with Facebook or use guest checkout.
places-autocomplete-suggest

We've left nothing out, even the small details. For example, by placing the field names inside the textboxes rather than labeling them above the field, we've reduced the amount of scrolling the customer needs to do. Overall, 3dcart Core checkout is faster, less confusing, and more appealing to customers — all necessities for increasing conversions.

 

Behind-the-Scenes Benefits of the Core Templating Engine

The Core Templating Engine works for designers through allowing them a modular approach to theme development, meant to enable maximum creativity. In a nutshell, this is done through Code Blocks and Variables, which work together to enable different sections and design elements on a website. With the redesigned engine, Code Blocks formerly reserved for the site's Frame can now be used elsewhere, opening up new design possibilities and avenues for customization.

 

Modular Design Means Stronger Customization

The Core Templating Engine utilizes template pages that each contain the code for different parts of a 3dcart website. For example, the code for the left sidebar is found in the leftbar.html file, with other components of the page layout each handled by respective files. The main template file is frame.html, which handles the overall user interface and navigation for a 3dcart store. In the vast majority of cases, frame.html is the only file that needs to be edited when creating a Core theme.

The use of Code Blocks and Variables enables the Core Templating engine to work like a set of building blocks for theme development, allowing themes to be built in a modular fashion and expanding the design possibilities at a theme developer's fingertips. It's engineered to be as unrestrictive and customizable as possible, allowing designers to really flex their capabilities.

Colors, fonts, and other visuals (besides the layout and included features) are controlled with CSS (cascading stylesheets), the most familiar method for a web designer.

 

Easier Customization with the Theme Editor and Page Editor

The Theme Editor is an easy way to customize your Core theme without editing code. Instead of needing development knowledge, you can choose colors and watch your theme update in real time before saving your changes. Some Core themes already come with multiple presets, allowing you to instantly apply a whole new look to your website.

core-theme-editor

The Page Editor is a new integration that lets you edit, move, and format text right on your website's content pages to make it much easier to create the layouts you envision. Rather than needing to edit the text in your 3dcart dashboard, you can work right on the page and see exactly how it will look.

3dcart-page-editor

The Core Theme Editor and Page Editor are being rolled out to all Core 3dcart themes, but may not yet be available on all of them.

 

How to Switch to a Core Theme

If you're new to 3dcart, you'll automatically get to choose from the Core Themes right when you create your eCommerce website. If you're an existing 3dcart merchant looking to switch from a legacy theme, start by choosing a new theme from our eCommerce Theme store. Check out themes you like by clicking on them and selecting Preview Theme to get a look at how the theme will appear on a live website.

Once you've chosen a theme, you'll need to add it to your online store. If the theme is free, you can find it in your 3dcart dashboard, ready to install. Otherwise, click Buy This Theme on the theme you desire. From there, it takes only seconds to install and activate the new Core theme on your online store.

If you want to customize your theme more deeply than the Theme Editor and Page Editor can make possible, the complete Core Templating Engine documentation explains everything you need to know to make all the customizations you want.

You do need to understand HTML and CSS to start, however, but don't despair if you're unfamiliar with website coding languages. Web Design Experts are available to help you customize your store to match your brand and your vision for your website.

 

Ready for a Revolution in Design?

The Core Templating Engine is the next generation in eCommerce web design and brings together every possible advantage for you and your customers. If you're an existing 3dcart merchant, we encourage you to switch over so you can reap the benefits of our Core themes.

If you're not on 3dcart but you want to sell online, there's no better place to start — and if you already have an existing online store, we can help you migrate to 3dcart as well. Start by signing up for a 15-day FREE Online Store trial to see the Core Templating Engine in action and learn if 3dcart is the best for your business.