Adding embed code
After you create a Buy Button 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.
You can sell your products on WordPress, Squarespace, and Tumblr, on your own website, or wherever you've already built an audience online:
Did you know?
If you need help with adding embed code to publishing platforms outside of Shopify (such as Tumblr, Squarespace, WordPress.org blogs), contact your website provider or publishing platform directly for support.
You can also use embedded collections with custom themes to create an entire ecommerce site in WordPress.
Did you know?
Add embed code to a post
To add embed code to an individual post:
- In your Shopify admin, create a Buy Button and copy its embed code from the Embed Code dialog (or click Copy embed code to clipboard):
- From your WordPress Dashboard, click Posts:
- Click Add New to create a new post, or click the name of an existing post that you want to display a Buy Button.
- From the Add New Post or Edit Post page, change the text editor from Visual to Text mode:
- Paste the embed code into the editor's main text field in the place where you want the Buy Button or collection to appear:
- When you're done, click Save Draft, Preview, or Publish.
Add embed code to a menu
To add embed code to a menu on the homepage:
- From your WordPress dashboard, click Appearance:
- Click Customize to open the theme editor, and then click Widgets:
- Click the name of the area where you want to add the Buy Button or custom cart code:
- Open an existing Text widget, or click Add a Widget, and then click Text:
- Paste the embed code into the main text field within the Text widget:
- Save your changes.
Did you know?
If you want to change the behavior or appearance of your website's cart, you can add custom cart code to a menu on the homepage of your WordPress.org blog.
Use embedded collections to create an ecommerce site in WordPress
You can use embedded collections with custom themes to create an ecommerce site in WordPress. View a sample site ›
- Download the theme you want to use. This walkthrough uses the Hype theme, which is available at themezilla.com.
- From your WordPress dashboard, click Appearance.
- Upload the theme files, and then activate the theme:
- After you upload the theme, click it, and then click Customize:
- Click Static Front Page, and then click A static page:
- To select splash screen colors, click Color Options:
- From your WordPress dashboard, click Pages, and then click Add New:
- In the Page Attributes section, select Cover Page from the Template drop-down menu:
- Customize Cover Page:
- Log in to Shopify.
- From your Shopify admin, click Buy Button.
- Click Create a Buy Button, and then click Select collection:
- Customize the view:
- Click Generate the embed code, and copy the embed code:
- Return to your Wordpress Dashboard, and paste the embed code on the page where you want the collection to appear:
- Click Portfolio posts, and create a post:
- Write your post, and add a Featured Image:
- Save your changes. With the Hype theme, the embedded collection looks like this:
Adding embed code to your Shopify blog
You can add embed code to individual posts on your Shopify blog:
- From your Shopify admin, click Online Store.
- Click Blog Posts.
- From the Blog Posts page, click the title of a blog post you want to edit, or click Add blog post to create a new one:
- In the Write your blog post section, click Show HTML in the rich text editor:
- Paste your embed code into the main text field:
- Click Save.
Adding embed code to Squarespace
Some advanced customizations on Squarespace are theme-specific. These customizations aren't supported by Shopify — use them at your own risk!
You can add embed code to individual posts in Squarespace and to the menus on your homepage. In some cases, you might want to do both. For example, you can embed a cart on your homepage to receive purchases from Buy Buttons that you embed on individual posts.
To add embed code to page elements in Squarespace:
From your Squarespace dashboard, open the webpage where you want to add the embed code.
Find the element on the page where you want the Buy Button or embedded cart to appear, hover over the Page Content area, and then click EDIT:
Click the insert point where you want to add the embed code:
In the More section of the Content Blocks dialog, click Code:
From your Shopify admin, copy the embed code from the Embed Code dialog:
From your Squarespace dashboard, paste the embed code into the EDIT CODE dialog:Make sure that the text field is set to receive HTML.
Click SAVE on the EDIT CODE dialog.
Did you know?
If you add an embedded cart to a menu on your Squarespace homepage, it will receive orders from Buy Buttons that you embed on individual posts.
Adding embed code to Tumblr
Some advanced customizations on Tumblr are theme-specific. These customizations aren't supported by Shopify — use them at your own risk!
You can add embed code to individual posts in Tumblr and to the menu on your homepage
Add embed code to a post in Tumblr
To add embed code to an individual post:
- From your Tumblr dashboard, create a new Text post.
- Click the Gear icon, then click the Text Editor dropdown and select HTML:
- Paste your embed code into the Tumblr editor:
- Click Post.
Add embed code to a page header in Tumblr
To add embed code to the header on your Tumblr homepage:
- From your Tumblr dashboard, open the account menu, and then click Edit appearance:
- Click Edit Theme.
- Click Edit HTML:
- In the Edit HTML area, find the end of the
headerelement in the source HTML:
- Paste your embed code above the
- Save your changes.
Adding embed code to Wix
After you've created a Buy Button or collection in your Shopify admin, you can add it to your Wix website using the Wix Website Editor.
If you want to display more than one product on your Wix website, try embedding a collection instead of several separate Buy Buttons. You can create a new collection in your Shopify admin for the products that you want to display on Wix if you haven't already.
To sell products from Shopify on your Wix website:
- From your Shopify admin, create a Buy Button or collection, and then copy its embed code.
- From your Wix account, find the site you want to edit in the My Sites section, and then click Edit Site:
- In the Wix Website Editor, click the
+button, and then click More:
- Click HTML Code to add an HTML code widget to the page:
- Click Enter Code.
- On the HTML Settings dialog, paste the embed code for your Buy Button or collection in the Add your code here field: After you add the embed code, the Buy Button or collection appears automatically.
- Resize the HTML code widget to fit its contents, and to make sure the cart tab appears in the right place.
- When you're done, click Save.
Need help using the Wix Editor? Contact Wix Support.
These examples provide only a simple introduction to adding and customizing Buy Buttons using HTML and CSS code. If you want to make other modifications, refer to other online resources to learn more.
Setting up a grid for embedded Buy Buttons
If you want to display several Buy Buttons on a single page, you can use some simple HTML and CSS to arrange them in rows or columns. There are two steps to this process:
If you don't have access to a separate CSS file, you can embed the same CSS code directly into the webpage where you want to display the Buy Buttons by wrapping it in
You can change the names of these CSS classes to whatever you like, but make sure that you use the same names in the HTML that appear in the CSS.
After you've added the CSS code to your webpage or your CSS file, you can set up a grid to arrange your embedded Buy Buttons:
1. In your source HTML, add a new
div tag at the location on your webpage where you want the embeds to appear:
Make sure that the HTML you add in the following steps appears within this containing
2. Create a row by adding
my-product-row class within the
my-product-row. After you've done that, your code looks like this:
You can add as many
my-product-row containers as you want — they stack up vertically on your webpage.
3. Add the element where you’re going to put our actual embed code from Shopify:
my-product-embed. You can have multiple sets of
my-product-embed tags within a single row, with each one containing the embed code for a different Buy Button. The CSS in this example is set to have four embeds per row:
4. Paste the embed codes from your Shopify admin inside the different sets of
5. If you want to customize the dimensions of the grid, you can edit the
my-product-embed class in your CSS:
In this example, the
width property of
my-product-embed is 25%. This divides the total width of the grid (100%) into 4 sections, and you can add a separate embed code to each one. If you want only 3 embeds per row, you need to change the
width property to 33% (100/3). If you want 6 embeds per row, you need to change the
width property to 16% (100/6). Try to keep your percentages to round numbers. You can also set new widths for as many breakpoints as you like, but it's best to stick to 3 or 4 target screen sizes.
Add script tags separately
Some platforms (like Unbounce) require that you paste the embed code's
<script> tags in the page header, and the rest of the embed code on the page where you want the Buy Button to appear.
To add script tags separately:
1. From the embed code that's generated when you create a Buy Button, copy both the
<div> element and the
<script> element. For example:
2. Open the page header for the website where you want to embed a Buy Button.
3. Paste the first section of the embed code into the page header, and then remove all attributes from the
<div> tag except for
data-shop. For example:
4. Save your changes.
5. From the original embed code in your Shopify admin, copy only the
<div> element. For example:
6. Open the page on your website where you want to embed a Buy Button.
7. Paste the
<div> code snippet into the page.
8. Save your changes.