Knowledgebase: Site Design
How do I edit my store's design?

Design Basics

Your 3dcart store's templates and themes can be customized in many ways. While we make every attempt to make customization as easy as possible; some design changes will require at the very least a basic grasp of HTML and coding knowledge*.

*Important
3dcart support is neither able nor qualified to offer HTML support. The basic intent of this article is to instruct and guide you on the various options available to you when editing your site's design. If you are unfamiliar with HTML or design coding of any type, perhaps our custom design services can provide their services to you.

This article will detail the various DiY design options available to you. First let's look at the simple methods for design changes. Before attempting to edit any of your 3dcart templates, please try these beginning options first:


WYSIWYG

Pronounced as "wizzy-wig," this acronym stands for "what you see is what you get." With it, you can add formatted text into certain areas of your site using an interface that's very similar to a word processor.

Many areas of your site such as the Product's description, category headers, global header and footer sections will contain a WYSIWYG link within them.

More information on using WYSIWYG can be found here.


Titles & Content

Along with WYSIWYG, you also have several other locations for making basic changes to the various pages that make up your site. By going to Content ->Titles & Content, you will see a listing of your site pages. Clicking on the name of the page (or its respective "Action ->Edit" button) for either of these pages will allow you to edit the Header (Top) and Footer (bottom) sections of any of those pages. Furthermore, these sections will also contain WYSIWYG for your ease.


System Messages & Store Language

In some cases, you may want to make a basic change that only applies to a certain element of the site. Before editing the HTML templates, give these two sections a try to see if they can meet your needs.

System Messages

This section is available by going to Settings ->Design ->System Messages, and it allows you to control the various error messages and notifications that come up in the cart. For example, if you'd like to change the standard Error message that comes up when a customer types in their password incorrectly, System Messages is the place to see. More information can be found here.

Store Language

Alternately, there's the Settings ->Design ->Store Language section. This area will control approximately 97% of the labeling your store uses. For example, let's say that instead of having the buttons read "Add to Cart" you'd like to have them to read "Add to Basket." Store Language is your place.

You'd be surprised at the amount of information you can find in Store Language, so before editing any template, always check Store Language first. Some of the sections you can change include:

  • Remove the Powered by 3dcart tag on your store's footer.
  • Change the default "Free Shipping" icon
  • List your product features with individual tags instead of "Feature 1, Feature 2:" etc
  • Much much more.

Alternately, the Store Language section is also where you'd go if you'd like to change the actual language of your site. For more information on this topic, please click here.


Editing Your HTML Templates

Please Note
We really mean it when we say you need some level of HTML knowledge. While our support team can point you in the right direction (where to go, how to get there, etc), please keep in mind that support is neither trained nor qualified to offer HTML support of any kind.

If HTML coding is something you're not comfortable or knowledgeable with, perhaps our Design Team can help. Reach out to your sales representative for more information on custom design.

Ok, so now we're up to editing HTML. If neither of the above solutions will work for your needs, and you find that you need to edit your HTML template(s), there are a few things you should know.

Make Backups!

Before making a change of any kind, make a backup of your raw, unedited templates. Save these to your desktop as a precaution in case something doesn't behave as you intend. Your backup process will depend on how you plan to access and edit your template files.

There are two separate ways to access your site's templates. These are:

  • Template Editor
    • To access the built in template editor go to Settings ->Design ->Theme & Styles and click on the "Edit Template (HTML)" button found along the top right. Select the template you'd like to back up/edit and click its edit button. To make a back up, CTRL-A (select all) in the box where all the coding is, CTRL-C (copy) it and CTRL-V (paste) it into a text editor like your computer's notepad program. Be sure to save the file with the same name as it has listed in the template editor. This helps minimize confusion later on when finding your file(s)
  • FTP
    • A better way of accessing your template files is via FTP. When you signed up with 3dcart, you were sent your account's FTP login credentials. Use these to connect to your store and navigate via FTP to web/assets/templates/[themefolder] where "themefolder" is the theme your store is using. For example, if your site is using the default theme v40001, your FTP path will be web/assets/templates/v40001

Your theme folder will contain your site's frame.html file as well as any images and CSS files unique to the theme itself. With FTP you can download these all at once instead of the "one by one" method available in the built-in Template Editor.


Template Structure

When editing your 3dcart HTML template files, you should also be aware of the structure and heirarchy that comes into play.

  • Template Structure - frame.html
    • Your site's design theme is made up of a series of images and cascading style sheet (CSS) elements which control the specific colors, look and feel of the site. The formatting and placement of those elements are controlled by your theme's frame.html file.

      The frame.html file basically controls the top, bottom, sides and background of your site. All of the pages that make up your store (like the home page, category pages, product listings, view cart, checkout, etc.) these are all nested in the middle of the frame. In essence, this is why we use the word "frame" in the file's name.
  • Template Structure – default.css
    • So we've established that the frame.html controls the layout of the design's elements. It dictates where the elements will reside. The coloring and look of the theme is controlled by the Cascading Style Sheet or CSS file for short. Try to think of your site as a house; the frame.html is the builder's blueprint which dictates where the elements will be; and the CSS is the interior designer which controls how those elements will look.

      With CSS you can control many design elements of the site including background colors, font sizes, font colors, and many other features. Please click here for our CSS article and here for more information on CSS from w3schools.com

Note
When you edit your site's CSS, the store will automatically switch to using default_modified.css

  • Template Structure - Common Folder
    • One final consideration to your site's design is the common folder which houses all of the other html templates. As we mentioned, the Theme's frame and CSS files control the look and feel of your site. The frame also contains all of the other page templates in its middle section. These other templates are serving from the site's Common folder.

      The common folder is maintained and updated by 3dcart and therefore cannot be written to. However, if there's a common template file that you'd like to edit, simply download a copy of it via FTP and upload it to your site's theme folder. Your store will automatically use it instead.

      If you are using an HTML5 theme, your common folder will be found (via FTP) by going to web/assets/templates/common-html5
      On the other hand, if you are using an older, non-HTML5 theme, the common folder used will be web/assets/template/common

      The file can be edited freely once it's in your theme folder.

Note
If you use the built in template editor, clicking edit on any of the common files will automatically copy it to your theme folder.

 

Special Note

From time to time, 3dcart may update its product offering or introduce new features into the store software. When updates are made they apply only to files in the common folders.

In many cases these updated features will rely on elements contained in the common templates. Therefore if you have a highly customized site with copies of common template files in its theme, you might not see the new features.


Closing Notes

In closing, we want to leave you with these final notes on editing your HTML templates.

Dynamic Variables

When editing your template files, you'll notice certain elements listed in brackets like [productid] ot [store_name] and others. These are 3dcart's dynamic variable tags and are used by the ASP coding of the software to insert elements. For example [store_name] will insert whatever is listed in the Store Name field found in Settings ->General ->Store Settings.

Please be sure to preserve these bracketed items when editing your templates.

Comment Tags

You will also notice comment tags in several areas of the HTML code.

Comments tags are normally used by designers to notate a certain area of coding. The formatting of the comment tag prevents it from displaying on the live site's HTML.

For example the following will only display the sentence and ignore the "Start:" and "End:" portions when rendered live.

<!--START: Inserted sentence -->
<p>The quick brown fox jumps over the lazy dog.</p>
<!--END: Inserted sentence -->

With your 3dcart store's templates, the comment tags serve two purposes.

First, they're a good way of seeing what the specific code is in reference to:

Example: <!--START: PAYPALEXPRESS-->

Secondly and perhaps more importantly, the comment tags are also used by the ASP coding to reference certain functions. Therefore, when editing your templates, please be sure to leave the comment tags unedited as well since they can also affect how certain cart functions will work.


Again, we do our best to make customizations as easy and as painless as possible. However some changes will be better suited for HTML editing. Fortunately, the Internet is filled with many valuable resources and tutorials to help you get started.

Perhaps the most valuable are the free tutorials available at www.w3schools.com 

Good luck with your edits and enjoy your new journey towards web design!


Help Desk Software by Kayako fusion