Loading...

Shopify Integration

Add Wewell's intelligent beauty widgets to your Shopify store in minutes

Overview

Integrating Wewell with Shopify is straightforward and can be done in two ways. Choose the method that works best for your comfort level with code editing.

Recommended

Theme Editor (Easy)

Use Shopify's built-in theme customization tools

  • No coding required
  • User-friendly interface
  • Less risk of errors

Code Editor (Advanced)

Direct access to theme files for maximum control

  • More flexibility
  • Better for developers
  • Requires coding knowledge

Method 1: Theme Editor (Recommended)

1

Access Theme Customization

From your Shopify admin, navigate to Online Store → Themes

Click "Customize" on your active theme
2

Open Theme Settings

In the theme customizer, click on "Theme Settings" at the bottom of the left sidebar

Theme Customizer
Theme Settings
3

Find Additional Scripts Section

Look for sections like:

  • "Additional Scripts"
  • "Custom Code"
  • "Footer Scripts"
  • "Additional Content & Scripts"
Section names vary by theme. Look for any script or code-related settings.
4

Add Wewell Script

Paste the following code into the additional scripts field:

Shopify Script 
<script type="module" src="https://widget.wewell.io/wewell.es.js?v=1"></script>
5

Save Changes

Click "Save" to apply the changes to your theme

Your Wewell widgets are now active on your store!

Method 2: Code Editor (Advanced)

Important Notice

Always backup your theme before making code changes. This method requires basic HTML knowledge.

1

Access Theme Code

Go to Online Store → Themes → Actions → Edit Code

Online Store
Themes
Actions
Edit Code
2

Locate theme.liquid File

In the file explorer, expand "Layout" and click on "theme.liquid"

Layout → theme.liquid
3

Find Closing Body Tag

Search for </body> in the file (usually near the bottom)

Use Ctrl+F (Cmd+F on Mac) to search quickly
4

Insert Wewell Script

Add the script just before the closing </body> tag:

theme.liquid 
    <!-- Wewell Beauty Widget -->
  <script type="module" src="https://widget.wewell.io/wewell.es.js?v=1"></script>
</body>
5

Save File

Click "Save" to save your changes

Integration complete! Test your store to verify everything works.

Verification & Testing

How to Verify Integration

Success Indicators

Widget Appears

Wewell buttons or interfaces are visible on product pages

Questionnaire Works

Customers can complete the skin matching questionnaire

Ingredient Scanner

Ingredient analysis tool is functional and responsive

Troubleshooting

Widget Not Appearing

Verify script is added correctly
Check API key and Shop ID are correct
Clear browser cache and refresh
Test in incognito/private browsing mode

Console Errors

Check browser developer console for errors
Ensure script URL is accessible
Verify no conflicting scripts

Theme Conflicts

Test with default Shopify theme
Check for CSS conflicts
Contact theme developer if needed

Need Help?

If you're still experiencing issues, our support team is here to help:

Email Support
Contact Form