Arguably one of the most important aspects of a website is its design. The look of your eCommerce website is often the first, and most lasting, impression that’s left on potential customers. Good web design can establish trust in the customer, and make the shopping experience user friendly — especially if it’s responsive and easy to navigate. 

The best eCommerce solutions offer merchants several ways to customize their online stores to achieve a truly unique, brand-cohesive look. With 3dcart, merchants are free to fully customize a long list of modern themes to their liking, putting the power in their hands to create an experience that they know their customers will love. If you’re just starting out and would like to start editing your 3dcart theme, or if you’re redesigning your established website, then let’s dive into the best ways to do that.

 

Choosing a Theme

Before you can start editing a theme, you’ll need to choose a theme that’s right for your business. Although you can use and edit the default theme that your new store is using, you can also choose from the wide variety of themes that 3dcart has to offer. Our themes come with unique design elements and features, including sticky menus, parallax sliders, homepage banners, and much more. There’s more than 40 free themes to choose from that are professionally designed and easy to customize; however, if you’d like more advanced features, you can also choose a premium theme.

In the 3dcart Theme Store, you can preview any theme to get a closer look at how it works and what it will look like in action. Once you’ve chosen a theme that you’re happy with, click on “Get this theme” and enter your store’s URL. You’ll then be prompted to log into your Online Store Manager, where you will then be asked to confirm your theme “purchase,” even if you’re installing a free theme. After clicking confirm, you can find your new theme under the “Installed Themes” section of your Themes & Styles page, from which you can select it and either preview it, reinstall it, uninstall it, or apply it. 

After you apply your theme, it will be live on your online store, and ready to customize!

Changing Your Site’s Theme

Let’s say that you’re not happy with the theme that you’ve chosen. You’ve played around with it on your online store, and you’ve decided that it’s just not the look that you’re going for. Don’t worry — it’s easy to change your theme to a new one. All you need to do is either scroll through the list of available themes on the Themes & Style page, select your new theme and click “Install Theme.” Your previous theme will be replaced with your new one, and you can see your old theme in your list of Installed. 

You may notice that, within this selection of themes, there are themes labelled as “core” themes and “HTML5” themes. Let’s explain what that means.

What is a Core Theme?

The newest and best 3dcart themes available are “Core Themes,” which means they’ve been built and designed using our modern Core Framework. These themes are all responsive and ready for use on any device, whether your customer is on mobile or desktop. You’ll also be able to use the Core Theme Editor to customize these themes, which we’ll discuss coming up. While there are HTML5 themes available, those themes are older and may not be responsive on every device; we recommend that you choose a Core Theme for your online store.



Core Theme Editor

Once you’ve chosen your favorite 3dcart Core theme, it’s time to start editing. To do this, you’ll need to navigate to Settings, then Design, and then Themes & Styles within your Online Store Manager. Here, you’ll see the Themes & Styles page, which shows you which theme you currently have activated on your store, which themes you have installed, and a selection of themes available for you to use. 

By clicking “Customize Theme,” you’ll automatically be redirected to the Core Theme Editor, which will make available to you several editing options for the specific theme you’ve chosen. These options will allow you to make general aesthetic changes to your website’s theme. Keep in mind that the options made available to you may differ from theme to theme, because not every theme has the exact same features.

Within the Theme Editor, you’ll see the following options:

  • Theme Presets: Each theme comes with a select number of presets, which are color palettes that can give your site an instant, cohesive, and unique look without manually selecting individual colors.
  • Header: This section gives you the option to change the color of your navigation bar and the text within it.
  • Text & Buttons: Here, you can determine the color of your site’s headings, body text, buttons, and more.
  • Typography: These options allow you to change the size of your site’s text and headings, via a selection of pixel sizes.
  • Products: This section allows you to change the color of text associated with your products, such as the color of sale text and the color of rating stars below your products.
  • Footer: Here, you can change the color of your website’s footer and footer text found at the bottom of each page.

To choose your desired color in any of these sections, simply click on the default color box with the hex code inside of it. This will prompt a color picker that you can use to produce the color you want, or you can type in the specific hex code of your color if you have that information. The hex code approach is best if you already have established branding with a specific color.

 

Page Editor with HTML Builder

To make more radical changes to the look of your site’s pages, you can use our Page Editor, which uses the built-in Drag ‘n Drop HTML Builder, to add content in a modular fashion to your home page, menu pages, and extra pages. 

To navigate to the Page Editor’s Drag ‘n Drop HTML Builder, go to Content, then Site Content. In this section, you can click on “Edit” in the Home Page section to edit the home page, and then click “Launch Page Editor.” You can also edit the menu pages in the Top Menu Links section or the extra pages in the Footer Extra Pages section. For more details, check out our Knowledge Base article.

Once you’ve entered the Drag ‘n Drop HTML Builder, you’ll be working within an empty, highlighted building space with the label “Click to add content” in the center. If you’re working on your home page, you’ll have two of these workspaces available to customize in the header and the footer. On your extra content pages and menu pages, you have one workspace to edit. However, do note that you can add more than one content element to each workspace.

After clicking the workspace, the builder will prompt you to select from a few basic design elements for text and images, such as heading type, list formatting, and more. For more content options, you can click “more,” which will give you a wide range of options to choose from, including:

  • Articles
  • Headlines
  • Photos & galleries
  • Profiles
  • Contact modules
  • Buttons
  • Interactive content (video, maps, etc.)
  • And much more…

Each content element is contained within a “block” that you can control in several ways, including size, padding, background color, and more. You can also control the element’s text, images, and its location on the page within the block’s settings.

Don’t forget: the changes you’re making to your site in the Page Editor are not being made in real time. In order for the edits to reflect on your live site, you’ll need to save your layout first.

 

Editing CSS & HTML

If you’d like to make more advanced alterations to your 3dcart theme, you can freely edit its HTML and CSS code. However, we stress that coding knowledge is extremely beneficial if you decide to edit this code. If you don’t feel comfortable doing these customizations, you can reach out to 3dcart’s Design Team for assistance. In the case that you make an unwanted change, our technical support representatives are not qualified to offer HTML support; however, they can point you towards where you need to go if you do want to start editing yourself.

Before you start editing, it’s important to make backups of your current theme’s code. There’s two main ways that you can access, back up and edit this code: Template Editor and FTP.

To access your theme’s code using the built in Template Editor, navigate to Settings, then Design, and then Themes & Styles. Next, click on the “Edit Template (HTML” button on the top right of the page. Here, you’ll be able to select the template you’d like to either back up or edit; click the edit button to get started. To make a backup of this code before you edit, copy and paste all of the code in this box into a text editor of your choice. Then save the file with the same name that’s listed on the template editor. With your original code safely backed up, you can begin editing.

You can also use FTP to access your site’s code by using the FTP login credentials provided to you when you signed up with 3dcart. Once you connect your store, navigate via FTP to “web/assets/templates/[themefolder]” where, in this case, “themefolder” is the name of your store’s theme file. The theme folder contains your site’s frame.html, as well as any images and CSS files unique to that theme. You can download all of these files at once using FTP.

For more detailed instructions on editing your store’s design with code, please refer to our Knowledge Base article on the topic.

 

Wrapping Up

It’s no secret that effective web design is crucial for online business success. Luckily, editing your 3dcart theme to best fit your business’s aesthetic and needs is easy if you use the tools provided to you. With the new Core Theme editor and the Page Editor with HTML Builder, you’ll be able to achieve a truly one-of-a-kind look on your online store that will keep customers coming back. If you have the coding skills to make more advanced changes, then you’re also freely able to edit your theme even further by diving into its HTML and CSS. 

While our platform is built with ease of use in mind, and you can make any customization you wish yourself, you can always consult our Design Team on the theme design packages that they provide for further assistance.