Code viewer

Overview #

The Code viewer section is designed to allow users to integrate custom code into their theme. This section is particularly useful for adding custom CSS or JavaScript to enhance the functionality or appearance of a site. It provides a flexible way to implement external services or override existing theme styles.

Key components and functionality #

Custom asset

The custom asset block allows users to add custom CSS or JavaScript files into their template. This is useful for implementing external services. Users should include the full asset tag, such as <script> for JavaScript or <link> for CSS.

Custom CSS

This block is intended for inserting custom CSS directly into the template. It allows users to override specific theme settings or CSS rules. Users should insert CSS without the <style> tags into the provided code field.

Custom JavaScript

The custom JavaScript block enables users to insert JavaScript directly into the template. This can be used to add embedded forms or services. Users should insert JavaScript without the <script> tags into the code field.

Usage notes #

• Responsive Design: Ensure that any custom code added is responsive and adapts well to different screen sizes.
• Performance: Be mindful of the performance impact of adding custom code, especially JavaScript, as it can affect page load times.
• Accessibility: Ensure that any customizations meet accessibility standards to provide a good user experience for all visitors.

Usage examples #

1. Adding a Custom Font:

   • Use the custom CSS block to include a custom font by linking to a font file or using a font service like Google Fonts. Insert the necessary CSS rules to apply the font to specific elements.

2. Implementing a Third-Party Widget:

   • Use the custom JavaScript block to add a third-party widget, such as a chat service. Insert the JavaScript code provided by the service into the code field.

3. Styling Adjustments:

   • Use the custom CSS block to make styling adjustments, such as changing the color scheme or layout of specific sections, by inserting the appropriate CSS rules.