Want to add a tracking script, custom CSS, or HTML to your shop or landing pages? Tentary offers several ways to insert custom code: globally for your entire shop, per landing page, or as a visible element on a landing page. This article explains how and where to add custom code.
Content
- Requirement: Custom domain
- Add custom code to your shop
- Add custom code to a landing page
- Use the Custom Code element on a landing page
- FAQ
Requirement: Custom domain
For security reasons, custom code is only executed if you use a custom domain. If you use a free Tentary subdomain, the code will not be inserted. This applies to shop code, landing page code, and the Custom Code element equally.
Add custom code to your shop
The shop code feature lets you insert JavaScript, CSS, or HTML across all pages of your shop. This is ideal for tracking scripts (e.g. Google Analytics, Matomo), chat widgets, or custom styles.
- Go to the navigation item Online Store > Code.
- You'll see two sections:
-
Header: This code is added at the end of the
<head>tag. Use this for tracking scripts, meta tags, or CSS styles. -
Footer: This code is added at the end of the
<body>tag. Use this for JavaScript scripts or chat widgets.
-
Header: This code is added at the end of the
- Paste your code into the appropriate field.
- Optional: Enable the checkbox Also insert in all landing pages if the code should also load on your landing pages.
- Click Save.
Add custom code to a landing page
In addition to the global shop code, you can add custom code in the header and footer of each individual landing page. This is useful when you only need code on a specific page, e.g. a conversion tracking pixel.
- Go to Landing Pages and open the desired landing page in the editor.
- Click the gear icon in the top right to open the page settings.
- Scroll to the Custom code section.
- You'll see the same two fields as in the shop:
-
Header: added at the end of the
<head>tag -
Footer: added at the end of the
<body>tag
-
Header: added at the end of the
- Paste your code and save the landing page.
Use the Custom Code element on a landing page
The landing page builder also includes a Custom Code element. Unlike header/footer code, this element is displayed directly on the page at the position you choose. It's great for embedded widgets, third-party forms, or custom HTML blocks.
- Open the landing page in the editor.
- Click on + Add Element
- Select the Custom Code element from the category Special.
- Click on the element to open its settings.
- Enter your code in the HTML Code field. You can combine HTML, CSS, and JavaScript.
- Save the landing page. The code is not executed in the editor, only on the published page.
FAQ
What types of code can I add?
You can add JavaScript (in <script> tags), CSS (in <style> tags), and HTML.
Is there a size limit?
Yes, each field allows a maximum of 30 KB.
Can broken code break my shop?
Custom code is not validated. Incorrect code can cause your shop or checkout to stop working properly. It's best to test changes on a landing page first before adding code globally to your shop.
What's the difference between shop code and landing page code?
The shop code under Online Store > Code applies to all pages of your shop. If you enable the Also insert in all landing pages checkbox, it also applies to all landing pages. The code in the landing page settings only applies to that specific page.
When should I use the Custom Code element instead of header/footer code?
Use the element when the code should display something visible on the page, such as an embedded form or widget. For invisible scripts like tracking or analytics, header or footer code is the better choice.
Is the code visible in the editor?
No. Custom code is not executed in the editor or preview. You'll only see the result on the published page.
