Step-by-Step Guide to Integrate "Notice" in Shopify.
- Go to your Shopify store's admin panel by navigating to
https://yourstore.myshopify.com/admin
. - Enter your credentials to log in.
- From the left-hand menu, go to
Online Store
> Themes
. - Find the theme you are currently using and click on the
Customize
button.
- Once in the Theme Editor, use the page selector at the top to choose the specific page or section where you want to display the "Notice" component.
- You can choose from options like Home page, Product page, Collection page, or any other page.
- Click on
Add Section
or navigate to the area in the sidebar where you want to add the HTML block. - Look for an option called
Custom HTML
or Custom Liquid
(depending on your theme) and select it.
- Inside the HTML block editor, first add the following
<link>
and <script>
tags to include the necessary styles and scripts:
<link href="https://bundle.notice.studio/index.css" rel="stylesheet" />
<script defer="defer" charset="UTF-8" src="https://bundle.notice.studio/index.js"></script>
- Immediately after the script and link tags, insert the following
div
:
<div class="notice-target-container" project-id="[your-project-id]"></div>
- Replace
[your-project-id]
with your actual project ID provided by "Notice".
- After adding the HTML code, click
Save
at the top right of the Theme Editor.
- Preview the page where you added the HTML block to ensure the "Notice" component is displaying correctly.
- If the "Notice" does not appear, try clearing your browser cache or checking the console for any errors.