🏪 ショッピファイ

Step-by-Step Guide to Integrate "Notice" in Shopify.

1. Log in to Your Shopify Admin Panel

• Go to your Shopify store's admin panel by navigating to https://yourstore.myshopify.com/admin.
• Enter your credentials to log in.

2. Navigate to the Online Store and Customize Theme

• From the left-hand menu, go to Online Store > Themes.
• Find the theme you are currently using and click on the Customize button.

3. Select the Page or Section to Add the "Notice" Component

• 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.

4. Add a New HTML Block (Custom HTML Section)

• 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.

5. Insert the Required <link> and <script> Tags

• 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>

6. Insert the Notice Target Container

• 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".

7. Save Your Changes

• After adding the HTML code, click Save at the top right of the Theme Editor.

8. Preview and Test the "Notice" Component

• 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.