Add Payhip to Weebly

Embed a button on Weebly

If you want to add a button to your Weebly site, the process is a little tricky. This is because they create an iFrame (i.e. they put everything into a box). It makes adding to cart purchases not possible, but you can still do direct purchases with the following workaround.

If you’d like to add a button to your Weebly site that links to one of your products, click on Products at the top of your admin dashboard.

Find the product that you’d like the button to link to, select Share / Embed, and then go to the Embed Button tab of the modal that appears.

Screenshot showing the Share / Embed button on the products page in Payhip

Here you can preview your button, customizing its text, color, and type.

An example of the embed button tab of the Share / Embed modal for a product in Payhip

For Button Type, be sure to select "Direct Purchase" as "Add to Cart" buttons won't work on Weebly.

Once you’re done creating your button, click Get Your Embed Code. This will give you two snippets of code - the first is Javascript and the second is HTML.

The embed code for a button

Next, log into your Weebly site and go to Edit Site, which will take you to your editor.

The Weebly editor

From there, click Add Section > Embed Code.

Adding an Embed Code section on Weebly

Into the Code field, paste in the Javascript as is. When you paste in the HTML, add the attribute data-method=”fallback_window" after the Payhip URL and before the class, as shown below.

Pasting in the code snippets on Weebly

Then click Done/Publish to view your site.

A Weebly site with a Payhip button added

You can now test out your new button - clicking on it will launch the checkout modal.

The Payhip checkout modal, launched by clicking on a button added to a Weebly site