How do I edit my store's design?
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*.
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:
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:
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
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.
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:
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.
When editing your 3dcart HTML template files, you should also be aware of the structure and heirarchy that comes into play.
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.
In closing, we want to leave you with these final notes on editing your HTML templates.
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.
You will also notice comment tags in several areas of the HTML code.
<!--START: 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!