Comprehensive Guide to Custom Code

Custom Code is a powerful tool that allows users with coding expertise to enhance their online store's appearance and functionality. By adding custom HTML, CSS, or tracking codes directly to your store pages, you can customize your storefront's style, improve marketing efforts, and integrate essential analytics tools like Google Analytics or Facebook Pixel.

This guide will walk you through the steps of adding, setting up, and enabling/disabling codes using the Custom Code app.

Adding Codes

Custom Code allows you to add multiple pieces of code simultaneously, with each managed independently. Follow these steps to add your code:

1. From your SHOPLINE admin panel, go to Apps > Custom Code. Install the app if it hasn't been installed yet.
2. On the app's homepage, click Add code.
   
3. Begin adding your codes on the Add code page.

Setting Up Codes

When setting up your custom code, it's important to understand how the configuration options work. Once you click Add, the code takes effect immediately.

• Code name: Assign a descriptive name to the code for easy management.
• Page trigger: Select the page template(s) where the code will be applied (e.g., custom pages). For applying codes to a specific page, use the Handlebars template syntax, such as {{#if page.handle ‘===’ ‘custom page handle’}}code content here{{/if}}
• Code content: Enter the code you want to apply to the pages. The app supports the Handlebars template language, which allows dynamic code placement.
• Display options: Choose the devices where the code will be applied: Desktop and mobile, Desktop only, or Mobile only.
• Insert position: Choose where the code will be inserted:
  • Top: The code will load before the page content, ideal for code that doesn't rely on page elements.
  • Bottom: The code will load after the page content, suitable for modifying elements that are already loaded.

After configuring the code, click Add to save it.

Enabling/Disabling Codes

Once you’ve added your custom code, it is Enabled by default. You can enable or disable the code based on your needs.

• Enabled: The code is active and applied to the page(s).
• Disabled: The code is inactive and will not be applied.