Adding Buy Button code to HTML

After you创建一个购买按钮in your Shopify admin, you're ready to add it to your own website or blog.

The process of adding embed code to your website's source HTML is a bit different depending on how and where you want your Buy Buttons and cart to appear, on your publishing platform, and sometimes on the theme you're using on that platform.

Adding embed code to WordPress

You can add embed code to posts, pages, or templates on your WordPress site.

Add embed code to a WordPress post or page

1. In Shopify,创建一个购买按钮and copy its embed code from theEmbed Codedialog (or clickCopy embed code to clipboard).
2. From your WordPress dashboard, go to your posts or pages.
3. Either create a new post or page, or edit an existing one.
4. Inside the block editor, click the+button, search forCustom HTML, and then click to insert a Custom HTML block.
5. 粘贴embed code into the text field provided by the Custom HTML block.
6. Optional: Move the Custom HTML block or preview how your Buy Button will appear:
   • To move the Custom HTML block, click the arrow buttons in the block's toolbar, or drag the block to a new location.
   • To preview the Buy Button, clickPreviewon the block toolbar.
7. When you're done, click theSave Draft,Preview, orPublishbutton for your post or page.

If you use WordPress'sClassic Editor Plugin, then instead of using a Custom HTML block, change the text editor fromVisualtoTextmode and paste the embed code in the editor.

Add embed code to a WordPress template

If your WordPress theme supports the site editor, then you can add an Embedded Buy Button to any of your site’s templates.

Steps:

1. In Shopify,创建一个购买按钮and copy its embed code from theEmbed Codedialog (or clickCopy embed code to clipboard).
2. In your WordPress dashboard, go to theEditor.
3. Navigate to the template that you’d like to edit.
4. Inside the block editor, click the+button, search forCustom HTML, and then click to insert a Custom HTML block.
5. 粘贴embed code into the text field provided by the Custom HTML block.
6. Optional: Move the Custom HTML block or preview how your Buy Button will appear:
   • To move the Custom HTML block, click the arrow buttons in the block's toolbar, or drag the block to a new location.
   • To preview the Buy Button, clickPreviewon the block toolbar.
7. When you're done, click thePreview, orSavebutton for the template.

Adding embed code to your Shopify blog

Steps:

1. From theBlog Postspage, click the title of a blog post you want to edit, or clickAdd blog postto create a new one.
2. In theWrite your blog postsection, clickShow HTMLin the rich text editor.
3. Paste your embed code into the main text field.
4. ClickSave.

Adding embed code to Squarespace

You can add embed code to individual posts in Squarespace and to the menus on your home page. In some cases, you might want to do both. For example, you can embed a cart on your home page to receive purchases from Buy Buttons that you embed on individual posts.

Steps:

1. From your Squarespace dashboard, open the webpage where you want to add the embed code.
2. Find the element on the page where you want the Buy Button or embedded cart to appear, move your cursor over thePage Contentarea, and then clickEDIT.
3. Click the insert point where you want to add the embed code.
4. In theMoresection of theContent Blocksdialog, clickCode.
5. From your Shopify admin, copy the embed code from theEmbed Codedialog.
6. From your Squarespace dashboard, paste the embed code into theCODEdialog. Make sure that the text field is set to receiveHTML.
7. ClickAPPLYon theEDIT CODEdialog.
8. ClickSAVEagain on the page editor. Because Squarespace disables JavaScript in its dashboard, you need to preview your page separately to see the Buy Button or embedded cart that you've added.

If you complete the steps and your Buy Button is not loading, then you might need to disable Ajax loading. To see more details, go to启用或说able Ajax.

Adding embed code to Wix

After you'vecreated a Buy Button or collectionin your Shopify admin, you can add it to your Wix website using the Wix Website Editor.

如果你想display more than one product on your Wix website without editing the embed code, then you can embed a collection. You cancreate a new collectionin your Shopify admin for the products that you want to display on Wix.

Steps:

1. From your Shopify admin,创建一个购买按钮for a product or collection, and then copy its embed code.

1. From your Wix account, find the site you want to edit in theMy Sitessection, and then clickEdit Site.
2. In the Wix Website Editor, click the+button, and then clickMore.
3. ClickHTML Codeto add an HTML code widget to the page.
4. ClickEnter Code.
5. On theHTML Settingsdialog, paste the embed code for your Buy Button or collection in theAdd your code here字段,然后单击Update.
6. Resize the HTML code widget to fit its contents. If you are creating an embed with a cart, then make sure the cart tab appears in the right place.
7. When you're done, clickSave.

Embed multiple products or collections

Steps:

1. From your Shopify admin,创建一个购买按钮for a product or collection, and then copy its embed code.
2. 粘贴code into a code editor or the Wix website builder. Repeat the first two steps until you have created the Buy Buttons you need.
3. Edit the embed codes to make sure they display in the proper alignment.
4. From your Wix account, find the site you want to edit in theMy Sitessection, and then clickEdit Site.
5. In the Wix Website Editor, click the+button, and then clickMore.
6. ClickHTML Codeto add an HTML code widget to the page.
7. ClickEnter Code.
8. On theHTML Settingsdialog, paste the edited code for your Buy Buttons in theAdd your code here字段,然后单击Update.
9. Resize the HTML code widget to fit its contents. If you are creating an embed with a cart, then make sure the cart tab appears in the right place.
10. When you're done, clickSave.

Add script tags separately

Some platforms (like Unbounce) require that you paste the embed code's

1. Open the page header for the website where you want to embed a Buy Button.

2. 粘贴entire