Navigation

Getting Started

How-To Help Videos

Admin Settings

Business Hub

Customize Your Store

Customer Account Area

FAQs & Troubleshooting

Other Resources

  1. DecoNetwork Help
  2. Website Configuration
  3. Website Backend Settings

How to Add and Edit CSS & HTML Code to a Website

Avatar
Lee Prazner
Updated

DecoNetwork allows you to extend and fine-tune your website beyond the standard drag-and-drop editor by adding custom CSS and HTML code. This is typically used for advanced styling, layout overrides, or third-party integrations such as live chat, analytics, and site verification.

In this article

Prerequisites

  • Admin, Websites Manager, or Web Developer access to your DecoNetwork website
  • A basic understanding of HTML and CSS (recommended)

Why use custom CSS and HTML

  • Override styling such as colors, spacing, and font sizes.
  • Create advanced layouts not achievable with drag-and-drop widgets.
  • Customize the website header, which is not fully drag-and-drop.
  • Integrate third-party tools such as live chat, analytics scripts, or site verification tags.

Step 1: Access custom CSS and HTML

  1. Go to Websites → Edit Website.
  2. Select Customize Template CSS to edit CSS.
  3. Select Customize Template HTML to edit HTML layouts or add code snippets.

CreateCustomCSS.png

Navigate to the Customize Template options from the website editor

Step 2: Add and enable custom CSS

Custom CSS is typically used to adjust the visual styling of your website, such as overriding colors, font sizes, margins, or other design elements.

  1. Open Customize Template CSS.
  2. Enable Custom CSS.
  3. Add your custom CSS code.
  4. Click Save, then Publish.

Step 3: Edit custom HTML layouts

HTML controls the structure and layout of your website. In most cases, you should avoid extensive HTML customization and rely on the drag-and-drop editor instead.

The primary exception is the website header, which is not fully drag-and-drop. Many users customize the header layout using custom HTML.

  1. Open Customize Template HTML.
  2. Select a layout (for example, Default).
  3. Enable Override Default Layout.
  4. Edit the HTML code as required.
Custom HTML changes should be used sparingly. Most page content can be built using widgets and the WYSIWYG editor under Website Pages.

Step 4: Use custom code snippets

DecoNetwork provides Custom Code Snippets to make adding third-party code easier and safer. This is commonly used for live chat tools, analytics tracking, search engine or site-verification meta tags, and other external scripts.

  1. Open Customize Template HTML, then click Add Custom Layout.
  2. This opens the Edit Template page with the Custom Code Snippets tab selected by default.
  3. Paste the provided code snippet into the matching field:
    • Head Snippet : injected into the page's <head>. Use this for site trackers/analytics tags and search engine or service domain-verification meta tags (for example, Norton Safe Web).
    • Body Snippet: injected into the page body.
    • Footer Snippet: injected near the page footer.
    • jQuery Snippet: runs as jQuery-ready JavaScript.
  4. Click Save, then Publish so the change goes live.

This panel is used for code from third party services like site trackers/analytics, search engine domain verification, etc. Notes that each field corresponds to a specific part of the website template.

Third-party providers will usually tell you exactly which field to use, most often Head Snippet for tracking codes and verification tags. Match that instruction when selecting the snippet field.

Custom Code Snippets Page - New Layout.png

The Custom Code Snippets panel, reached from Customize Template HTML → Add Custom Layout

Best-practice tips

  • Use drag-and-drop widgets wherever possible before resorting to custom code.
  • Limit custom HTML to structural elements such as headers.
  • Document any custom code added for future maintenance.
  • Test changes on a staging or low-traffic site before applying them broadly.

Troubleshooting

Problem: CSS changes aren't visible.
Cause: Custom CSS isn't enabled, or the site hasn't been published.
Solution: Confirm Custom CSS is enabled and the site is published.

Problem: Layout issues after HTML edits.
Cause: A custom HTML change conflicts with the template.
Solution: Revert to the default layout to isolate the problem.

Problem: A third-party tool or verification isn't working.
Cause: The snippet was pasted into the wrong field.
Solution: Verify the snippet is in the correct field; Head Snippet, Body Snippet, Footer Snippet, or jQuery Snippet, matching the provider's instructions.

FAQs

Do I need to use custom CSS or HTML to build my site?

No. Most websites can be built entirely using the drag-and-drop editor and widgets.

What part of the site usually requires custom HTML?

The website header is the most common use case, as it is not fully drag-and-drop.

Can incorrect code break my site?

Yes. Incorrect CSS or HTML can cause layout or display issues, which is why custom code should be added carefully.

Which field should I use for a site verification meta tag?

Use Head Snippet. It's injected into the page's <head>, which is where services like search engines and Norton Safe Web look for verification tags.

Additional Resources

Still have questions? Use the Search Tool at the top of the page to find more related guides. Need help? Click the Help Icon.png icon to submit a support ticket – our Client Services team is ready to assist!

Related articles

Comments

0 comments

Please sign in to leave a comment.