• Topic 主题 トピック Topic Topic
  • Sign in

Custom Code App


This article will introduce Custom Code, an app that lets you add codes to store pages in the following scenarios:

  1. Adding custom HTML or CSS codes to enrich online store marketing activities and storefront styles.
  2. Adding tracking codes for Google Analytics, Facebook Pixel, and other advertising platforms.


In This Article



Adding Codes

Custom Code allows multiple pieces of code to be added at the same time, with each piece managed independently. Here are the steps:

  1. From your SHOPLINE admin panel, go to Apps and open the Custom Code app.
  2. On the app homepage, click Add code.
Note: The custom code is effective for both publishing and unpublished themes.



Setting Codes


On the editing page of Custom Code, you need to pay attention to the logic of the configuration items, which take effect immediately once you click Add.

  • Code content: Refer to code snippets to be distributed on the page, supporting the Handlebars template language.
  • Display options: Select the device type to which the code is issued, which can be Desktop and mobile, Desktop only, or Mobile only.
  • Insert position: Select the position for code insertion. Top means the code will be loaded before page content, which is suitable for code that doesn’t rely on the page elements. Bottom means page content will be loaded before the code, which is suitable for modifying page elements that have been loaded.
  • Page trigger: Select the page template for code distribution. For example, the custom page means that codes will be distributed to all custom pages. If you wish to distribute codes to a specific resource page, you can use the Handlebars template syntax. Refer to the following code: {{#if page.handle ‘===’ ‘custom page handle’}}code content here{{/if}}
Note: Functions of different theme templates may vary. Consider these differences when optimizing theme element styles.



Enabling/Disabling Codes


After you add a custom code, it is set as Enabled by default, which you can change according to your needs.

  • Enabled: The code is read to use on the page.
  • Disabled: The code won’t be used on the page. 
Have more questions? Submit a request