Shopify Installation

Learn how to install the Notedis feedback widget on your Shopify store.

Prerequisites

Active Shopify store (any plan)
Access to theme editor
Notedis account with site key

Note: All Shopify plans support custom code. No premium plan required.

Installation Steps

Step 1: Get Your Site Key

Log in to your Notedis dashboard
Navigate to Sites
Click the Edit button on your site (or create a new one)
Copy your Site Key (starts with site_)

Step 2: Access Theme Editor

Log in to your Shopify admin
Go to Online Store → Themes
Find your current theme (marked as "Current theme")
Click Actions → Edit code

Alternative Path: From your store admin, click Themes in the left sidebar.

Step 3: Edit Theme Layout

In the theme code editor:

In the left sidebar, navigate to Layout section
Click on theme.liquid (this is your main layout file)
Scroll to the bottom of the file, just before the closing </body> tag
Paste the Notedis widget code above </body>

Step 4: Add Notedis Widget Code

Paste this code before </body> in theme.liquid:

<!-- Notedis Feedback Widget -->
<script>
  window.notedisConfig = {
    siteKey: 'YOUR_SITE_KEY_HERE',
    apiUrl: 'https://notedis.test',
    position: 'bottom-right',
    color: '#3B82F6'
  };
</script>
<script src="https://notedis.test/js/widget.js" defer></script>

Replace YOUR_SITE_KEY_HERE with your actual site key from Step 1.

Example placement:

    <!-- Notedis Feedback Widget -->
    <script>
      window.notedisConfig = {
        siteKey: 'site_abc123',
        apiUrl: 'https://notedis.test',
        position: 'bottom-right',
        color: '#3B82F6'
      };
    </script>
    <script src="https://notedis.test/js/widget.js" defer></script>
  </body>
</html>

Step 5: Save and Test

Click Save in the top-right corner
Visit your live Shopify store
Look for the feedback button in the bottom-right corner
Click it to test the widget
Submit test feedback
Confirm it appears in your Notedis dashboard

Configuration Options

Customize the widget by modifying the notedisConfig object:

Position

Choose where the button appears:

window.notedisConfig = {
  siteKey: 'YOUR_SITE_KEY_HERE',
  apiUrl: 'https://notedis.test',
  position: 'bottom-right', // Options: bottom-right, bottom-left, top-right, top-left
  color: '#3B82F6'
};

Position Recommendations:

bottom-right - Default, most common placement
bottom-left - Good if chat widget is on right
top-right - Stays visible when scrolling
top-left - Use if other corners are occupied

Button Color

Match your Shopify theme colors:

window.notedisConfig = {
  siteKey: 'YOUR_SITE_KEY_HERE',
  apiUrl: 'https://notedis.test',
  position: 'bottom-right',
  color: '#5C6AC4' // Shopify purple
};

Color Tips:

Extract colors from Theme Customizer
Match your brand's primary color
Ensure good contrast with backgrounds
Test on both product and checkout pages

See Configuration for all available options.

Shopify-Specific Considerations

All Plans Supported

Good News:

All Shopify plans support custom code ✅
Basic, Shopify, Advanced, Plus all work ✅
No premium subscription required ✅
Free trial stores can test it ✅

Theme Compatibility

The widget works with all Shopify themes:

Official Themes:

Dawn (Shopify's default theme) ✅
Debut ✅
Brooklyn ✅
Narrative ✅
All other official themes ✅

Third-Party Themes:

Premium theme forest themes ✅
Custom themes ✅
Outdated themes ✅
Any theme with theme.liquid ✅

Online Store 2.0 Themes

For newer Shopify themes (Online Store 2.0):

The widget works perfectly with:

Sections everywhere
App blocks
Dynamic templates
JSON templates

Installation is the same: Add code to theme.liquid.

Alternative Installation Methods

Method 1: Theme Customizer (If Available)

Some themes support custom code via the customizer:

Go to Online Store → Themes → Customize
Click Theme settings (bottom-left)
Look for Custom CSS or Custom code section
Some themes have a "Footer scripts" or "Additional scripts" field
Paste the Notedis code there
Click Save

Note: This method is theme-dependent and not always available.

Method 2: Specific Template Installation

To add the widget to specific page types only:

For Product Pages Only:

In theme code editor, go to Templates section
Click product.liquid (or product.json for OS 2.0)
Add code before closing </body> or in a custom Liquid section
Save

For Collection Pages Only:

Edit collection.liquid or collection.json
Add code at appropriate location
Save

Note: Site-wide installation (theme.liquid) is recommended for consistency.

Shopify App Integration

Currently, Notedis is installed via code snippet (not a Shopify App).

Why Code Installation?

Faster setup (no app approval wait)
More control over placement
No monthly app fees
Works on all themes
Easier to customize

Shopify App (Coming Soon):

One-click installation
Visual configuration interface
Automatic updates
Listed in Shopify App Store

Verification

Test the Widget

After saving theme changes:

Visit your store: Go to your live Shopify store URL
Check all page types:
- Homepage ✅
- Product pages ✅
- Collection pages ✅
- Cart page ✅
- Checkout (see note below) ✅
Test functionality: Click button, capture screenshot, submit feedback
Verify in dashboard: Check Notedis dashboard for test submission

Checkout Page Behavior

Important Notes:

Shopify Basic/Shopify/Advanced Plans:

Widget appears on checkout page ✅
Full functionality available ✅

Shopify Plus:

Custom checkout scripts supported ✅
Widget works on checkout ✅
Additional configuration may be needed

Checkout Extensibility (New):

Shopify's new checkout may have limitations
Widget should still work on most checkout steps
Test thoroughly on your specific setup

Troubleshooting

Widget Not Appearing

Check These First:

Verify Code Placement
- Code must be in theme.liquid (Layout section)
- Should be above </body> tag
- Not in <head> section (won't work there)
Check Site Key
- Verify site key is correct
- Should start with site_
- No extra spaces or quotes around key
Save and Refresh
- Ensure you clicked Save in theme editor
- Clear browser cache: Ctrl+F5 or Cmd+Shift+R
- Try incognito/private browsing mode
Theme Conflicts
- Some themes have aggressive JavaScript optimization
- Try disabling theme minification temporarily
- Check for Content Security Policy restrictions
Shopify Editor Preview
- Widget may not appear in theme customizer preview
- Always test on your live store URL
- Preview mode has JavaScript limitations
Check Browser Console
- Press F12 to open developer tools
- Click Console tab
- Look for JavaScript errors
- Common issues: CSP errors, 404 errors, syntax errors

Widget Appears Multiple Times

Cause: Code added to multiple template files.

Solution:

Check theme.liquid - should have one instance
Check product.liquid, collection.liquid, index.liquid
Remove duplicate code, keep only one instance in theme.liquid
Save changes

Widget Conflicts with Shopify Chat

Symptom: Widget and Shopify Inbox chat overlap.

Solution 1: Change Position

position: 'bottom-left' // Move to opposite corner

Solution 2: Adjust Spacing with CSS

Add this code in theme.liquid <head> section or in Assets → theme.css:

<style>
#notedis-feedback-button {
  bottom: 80px !important; /* Move above chat */
}

/* Or move horizontally */
#notedis-feedback-button {
  right: 80px !important; /* Move left of chat */
}
</style>

Widget Conflicts with Other Apps

Common Conflicts:

Live chat apps (Tidio, Gorgias, Zendesk)
Review apps (Judge.me, Loox)
Popup apps (Privy, Justuno)
Accessibility widgets

Solution:

Change widget position to avoid overlap
Use custom CSS to adjust spacing
Contact support if persistent conflicts

Common Shopify Issues

Issue: Widget Hidden by Theme Elements

Symptom: Button is there but not clickable or partially hidden.

Cause: Theme CSS has higher z-index on elements.

Solution:
Add this CSS to Assets → theme.css or in <head> of theme.liquid:

#notedis-feedback-button {
  z-index: 999999 !important;
}

Issue: Widget Not on Checkout

Symptom: Widget appears on store pages but not checkout.

Possible Causes:

Shopify Basic/Standard: Should work, check code placement
Shopify Plus: May need checkout.liquid editing
Checkout Extensibility: May have restrictions

Solution:
For Shopify Plus with custom checkout:

Go to Settings → Checkout
Scroll to Order status page → Additional scripts
Paste Notedis code there for order confirmation page
For checkout steps, edit checkout.liquid if available

Issue: Mobile Menu Overlap

Symptom: Widget button overlaps mobile navigation.

Solution:
Add mobile-specific CSS:

@media (max-width: 768px) {
  #notedis-feedback-button {
    bottom: 100px !important; /* Move above mobile nav */
  }
}

Advanced Configuration

Match Shopify Theme Colors

Extract colors from your Shopify theme:

Go to Online Store → Themes → Customize
Click Theme settings → Colors
Note your accent or button color
Use hex code in widget config:

window.notedisConfig = {
  siteKey: 'YOUR_SITE_KEY_HERE',
  apiUrl: 'https://notedis.test',
  position: 'bottom-right',
  color: '#5C6AC4' // Your theme color
};

Exclude from Specific Pages

Hide widget on certain pages using Liquid conditionals:

{% unless template contains 'cart' or template contains 'customers' %}
  <!-- Notedis Feedback Widget -->
  <script>
    window.notedisConfig = {
      siteKey: 'YOUR_SITE_KEY_HERE',
      apiUrl: 'https://notedis.test',
      position: 'bottom-right',
      color: '#3B82F6'
    };
  </script>
  <script src="https://notedis.test/js/widget.js" defer></script>
{% endunless %}

Common Exclusions:

{% unless template == 'cart' %} - Hide on cart
{% unless template contains 'customers' %} - Hide on account pages
{% unless template == 'page.contact' %} - Hide on contact page

Conditional Loading by Device

Show widget only on desktop:

<script>
  // Only load on desktop (screen width > 768px)
  if (window.innerWidth > 768) {
    window.notedisConfig = {
      siteKey: 'YOUR_SITE_KEY_HERE',
      apiUrl: 'https://notedis.test',
      position: 'bottom-right',
      color: '#3B82F6'
    };

    const script = document.createElement('script');
    script.src = 'https://notedis.test/js/widget.js';
    script.defer = true;
    document.head.appendChild(script);
  }
</script>

Custom Styling for Shopify

Add custom CSS in Assets → theme.css or inline in theme.liquid:

/* Shopify-themed widget button */
#notedis-feedback-button {
  border-radius: 4px !important; /* Match Shopify buttons */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
}

/* Hover effect */
#notedis-feedback-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Mobile adjustments */
@media (max-width: 749px) {
  #notedis-feedback-button {
    bottom: 80px !important;
    font-size: 14px !important;
  }
}

/* Tablet adjustments (Shopify breakpoint) */
@media (min-width: 750px) and (max-width: 989px) {
  #notedis-feedback-button {
    right: 20px !important;
    bottom: 20px !important;
  }
}

Shopify Plus Features

Custom Checkout Scripts

For Shopify Plus stores with checkout.liquid access:

Go to Settings → Checkout
Scroll to Order status page
Under Additional scripts, add:

<script>
  window.notedisConfig = {
    siteKey: 'YOUR_SITE_KEY_HERE',
    apiUrl: 'https://notedis.test',
    position: 'bottom-right',
    color: '#3B82F6'
  };
</script>
<script src="https://notedis.test/js/widget.js" defer></script>

This adds the widget to order confirmation/thank you pages.

Multipass Integration

If using Shopify Multipass for SSO:

The widget:

Works normally with Multipass ✅
Captures customer email if logged in ✅
No special configuration needed ✅

Headless Shopify (Hydrogen/Custom Storefront)

For headless Shopify setups:

See the Next.js installation guide or React installation guide depending on your frontend framework.

Key Points:

Install widget in your custom frontend
Use Storefront API for product data
Widget captures feedback normally

E-Commerce Use Cases

Widget is particularly useful on:

Product Pages:

Report incorrect product information
Flag missing images or wrong descriptions
Report stock/pricing issues

Collection Pages:

Report filtering issues
Suggest missing products
Report layout problems

Cart/Checkout:

Report payment issues
Flag shipping calculation errors
Report coupon code problems

Order Confirmation:

Follow-up feedback on experience
Report delivery issues
General store feedback

Responsive Design

The widget is fully responsive on Shopify:

Desktop (> 990px):

Full-size button
Complete modal interface
All annotation tools

Tablet (750px - 989px):

Adapted button size
Touch-optimized modal
Streamlined controls

Mobile (< 749px):

Mobile-optimized button
Full-screen modal
Touch-friendly interface
Simplified annotations

Shopify Breakpoints:

Widget respects Shopify's standard breakpoints
Automatically adjusts for Shopify themes
No additional configuration needed

Performance Impact

Widget Performance on Shopify:

Loads asynchronously with defer attribute
No impact on Shopify page load speed
Minimal JavaScript payload (~50KB gzipped)
Won't affect Shopify speed score
Won't hurt SEO or Google rankings

Best Practices:

Widget loads after page content
Doesn't block theme rendering
Compatible with Shopify's CDN
Works with lazy loading themes

Removing the Widget

To remove the Notedis widget from your Shopify store:

Go to Online Store → Themes → Actions → Edit code
Open Layout → theme.liquid
Find the Notedis code block (search for "notedis")
Delete the entire code block
Click Save

Also Check:

Any custom template files (product.liquid, collection.liquid)
Custom CSS in theme.css or theme settings
Additional scripts in checkout settings (Shopify Plus)

The widget will be removed immediately from your live store.

Multi-Language and Multi-Currency

Multi-Language Stores

If your Shopify store uses multiple languages:

Current Support:

Widget UI is English only
Users can write feedback in any language
Primarily screenshot-based (visual)

Workaround:

Visual feedback transcends language
Screenshots show issues clearly
Users can describe in their language

Future Feature:

Multi-language support on roadmap
Contact support for specific languages

Multi-Currency Stores

The widget:

Works normally with multi-currency ✅
Captures URL with currency parameter ✅
No special configuration needed ✅

Shopify Markets Integration

For stores using Shopify Markets (international selling):

The widget:

Works across all markets ✅
Captures market-specific URLs ✅
Feedback shows which market ✅
No additional setup needed ✅

Use Cases:

Market-specific product issues
Translation errors
Shipping/pricing feedback by region

Support for Shopify Users

Getting Help

Documentation:

Shopify-Specific Support:

Email: [email protected]
Include your Shopify store URL (myshop.myshopify.com)
Mention your theme name
Specify Shopify plan (Basic, Shopify, Advanced, Plus)
Share screenshots of issues

Response Time:

Usually within 24 hours
Faster for urgent store issues

Next Steps

Configuration - Customize widget appearance
Customization - Advanced widget options
Features - Explore all Notedis features
Dashboard Guide - Manage feedback

Shopify Plan Comparison

Feature	Basic	Shopify	Advanced	Plus
Theme Code Editing	✅	✅	✅	✅
Notedis Widget	✅	✅	✅	✅
Checkout Widget	✅	✅	✅	✅
Custom Checkout Code	❌	❌	❌	✅

Good News: All Shopify plans support the Notedis widget!

Tips for Success

Best Practices

Installation:

Always edit theme.liquid for site-wide coverage
Place code just before </body> tag
Test on live store, not theme preview
Clear cache when testing changes

Configuration:

Match widget color to your theme
Choose position that doesn't conflict with chat
Test on all device sizes
Verify on product, collection, and checkout pages

Maintenance:

Check widget after theme updates
Test after switching themes
Monitor feedback submissions
Keep site key secure (don't share publicly)

Performance:

Widget loads asynchronously (no blocking)
No impact on Shopify speed score
Works with all Shopify optimizations
Compatible with lazy loading themes

Frequently Asked Questions

Do I need a Shopify Plus plan?

No, the Notedis widget works on all Shopify plans (Basic, Shopify, Advanced, Plus).

Will it slow down my store?

No, the widget loads asynchronously and has no impact on page speed or SEO.

Does it work on the checkout page?

Yes, it works on checkout pages for all Shopify plans.

Can I hide it on mobile?

Yes, use CSS media queries to hide on mobile if needed:

@media (max-width: 768px) {
  #notedis-feedback-button { display: none !important; }
}

Does it work with custom themes?

Yes, the widget works with all Shopify themes (official, third-party, and custom).

Can I use it on multiple stores?

Yes, create a separate site in Notedis dashboard for each store with unique site keys.

What if I switch themes?

You'll need to re-add the code to the new theme's theme.liquid file.

Does it capture customer emails?

If a customer is logged in, their email may be captured automatically (depending on browser settings).