Code snippets allow you to add custom HTML, CSS, or JavaScript code to your store. This lets you integrate external analytics tools, add custom features, or adjust your store's appearance without modifying its core structure.
When to use code snippets
Code snippets are useful in many situations. You can use them to:
Add analytics tools (Google Analytics, Meta Pixel, Hotjar)
Integrate live chat or support widgets
Insert custom CSS styles to adjust the look of store elements
Add marketing scripts, such as conversion tracking codes
Place custom banners, messages, or interactive elements
How to add a code snippet
Go to settings
Open your Shopable panel and click the settings icon in the left menu.
Select "Code snippets"
In the settings menu, you'll find the "Code snippets" tab. This is where you manage all codes added to your store.
Add a new snippet
Click the "Save changes" button (or the appropriate add button). You'll see two fields:
Code snippet placed in the
<head>tag – use this for codes that should load before the page displays. This is the ideal place for analytics tools, Meta Pixel, Google Analytics, or other tracking scripts.Code snippet placed before the closing
</body>tag – add codes here that should load after the main page content. This is a good place for live chats, pop-ups, or scripts that don't need to block page rendering.
Paste your code
Copy the code from the tool you want to integrate and paste it in the appropriate field. Make sure the code is complete and includes all required tags.
Save changes
Click "Save changes" to activate the snippet. The code will be added to all pages of your store.
Important: Code snippets work globally – they'll be added to every page of your store. Make sure you only add the scripts you need.
What to watch out for
Check code validity
Invalid code can affect your store's performance. Before pasting, make sure the code comes from a trusted source and is properly formatted.
Place codes in the right locations
Some scripts (like Google Analytics) should be in <head>, others (like live chats) work better before </body>. Check the documentation of the tool you're integrating.
Test after adding
After saving changes, open your store and verify everything works correctly. You can use browser developer tools to check if the script loaded without errors.
Don't duplicate codes
If you add the same code more than once, it may cause performance issues or tool malfunctions. Make sure each code is added only once.
Common use cases
Google Analytics
Paste the tracking code in the
<head>section to collect traffic data in your store.Meta Pixel
Add Meta Pixel in
<head>to track conversions and optimize ad campaigns.Live chat
Most chat tools (e.g., Intercom, Crisp) recommend placing the code before
</body>.