Install PetMySite on Shopify

Place the PetMySite script in the layout of your published Shopify theme.

Before you start

  • You need permission to edit your store's theme code. The store domain must match the website address in PetMySite.
  • Set up your website in PetMySite and note its public site key. Your chat provider must also be installed on the pages where your pet opens chat.

Copy your install code

In PetMySite, open your website, go to Installation, choose Shopify and select Copy code. It includes your website's public key. The example below shows its shape.

<script async src="https://cdn.petmysite.com/pet.js" data-site="YOUR_SITE_KEY"></script>
Example only. Copy your own code from Installation in your PetMySite website, where YOUR_SITE_KEY is already filled in.

Add the code in Shopify

  1. In Shopify admin, open Online Store → Themes. Duplicate your current theme as a backup before editing.
  2. On the published theme, open the actions menu and select Edit code. Open layout/theme.liquid.
  3. Paste your PetMySite install code immediately before the closing </body> tag, then save.

Editing a draft theme does not change your live storefront. Shopify checkout pages are outside your theme layout.

If the menus look different, see Shopify's custom code instructions.

Publish and verify

  1. Open a public page on the same domain you entered in PetMySite. Check that your pet appears and that your chat provider still works.
  2. Return to PetMySite's Installation page, continue to the last step and select Verify installation. It opens your site and waits for the pet to check in.

Troubleshooting

The pet doesn't appear

If the pet appears only in a theme preview, check that you edited the published theme. After a theme change or update, confirm theme.liquid still contains the script.

  • View the published page source and search for pet.js. If it is absent, revisit the code location and publish again.
  • Check the domain against your PetMySite website address. www. is ignored, but a different subdomain or staging address is a different website.
  • Keep just one PetMySite script on each page. If your site uses a Content Security Policy, allow petmysite.com and cdn.petmysite.com for scripts, connections, images and fonts, and permit WebAssembly for animation. A policy that forbids inline styles also blocks the current widget; contact support before changing that policy.

The pet appears but chat doesn't open

Keep your chat provider's own script active on the same pages. PetMySite opens that chat; it does not install the provider.

Other ways to install

Every method loads the same pet with the same settings. Use one method per website.

Still stuck? Email support@petmysite.com with your website address and the method you used.