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.

Platform-specific walkthroughs

You can sell your products on WordPress, Squarespace, and Tumblr, on your own website, or wherever you've already built an audience online:

Advanced integrations

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.

Adding embed code to a WordPress.org blog

You can add embed code to individual posts and to the menu on the homepage of your WordPress.org blog.

You can also use embedded collections with custom themes to create an entire ecommerce site in WordPress.

Did you know?

Embedded Buy Buttons are compatible with the WordPress.org platform — but not with WordPress.com. This documentation describes WordPress 4.2.2. Your version might be different. Learn more ›

Add embed code to a post

To add embed code to an individual post:

  1. 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):
    Generate cart embed code
  2. From your WordPress Dashboard, click Posts:
    Wp posts
  3. Click Add New to create a new post, or click the name of an existing post that you want to display a Buy Button.
  4. From the Add New Post or Edit Post page, change the text editor from Visual to Text mode:
    Wordpress editor
  5. Paste the embed code into the editor's main text field in the place where you want the Buy Button or collection to appear:
    Wordpress editor embed
  6. 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:

  1. From your WordPress dashboard, click Appearance:
    Wordpress appearance
  2. Click Customize to open the theme editor, and then click Widgets:
    Wordpress customize
  3. Click the name of the area where you want to add the Buy Button or custom cart code:
    Wordpress sidebar
  4. Open an existing Text widget, or click Add a Widget, and then click Text:
    Wordpress choose widget
  5. Paste the embed code into the main text field within the Text widget:
    Buy button wordpress widget
  6. 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 ›

  1. Download the theme you want to use. This walkthrough uses the Hype theme, which is available at themezilla.com.
  2. From your WordPress dashboard, click Appearance.
  3. Upload the theme files, and then activate the theme:
    Wp activate theme
  4. After you upload the theme, click it, and then click Customize:
    Wp customize theme
  5. Click Static Front Page, and then click A static page:
    Wp static page
  6. To select splash screen colors, click Color Options:
    Wp color options

    Note

    Your theme's customization options might be different. This walkthrough uses the Hype theme, which is available at themezilla.com.

  7. From your WordPress dashboard, click Pages, and then click Add New:
    Wp new page
  8. In the Page Attributes section, select Cover Page from the Template drop-down menu:
    Wp cover page template
  9. Customize Cover Page:
    Wp cover page customize
  10. Log in to Shopify.
  11. From your Shopify admin, click Buy Button.
  12. Click Create a Buy Button, and then click Select collection:
    Wp select collection
  13. Customize the view:
    Wp customize collection
  14. Click Generate the embed code, and copy the embed code:
    Wp generate embed code
  15. Return to your Wordpress Dashboard, and paste the embed code on the page where you want the collection to appear:
    Wp paste embed code
  16. Click Portfolio posts, and create a post:
    Wp portfolio post
  17. Write your post, and add a Featured Image:
    Wp portfolio post featured image
  18. Save your changes. With the Hype theme, the embedded collection looks like this:
    Wp collection demo

Adding embed code to your Shopify blog

You can add embed code to individual posts on your Shopify blog:

  1. From your Shopify admin, click Online Store.
  2. Click Blog Posts.
  3. 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:
    Shopify add blog
  4. In the Write your blog post section, click Show HTML in the rich text editor:
    Shopify rte html
  5. Paste your embed code into the main text field:
    Shopify add embed
  6. Click Save.

Adding embed code to Squarespace

Caution

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:

  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, hover over the Page Content area, and then click EDIT:

    Squarespace edit page

  3. Click the insert point where you want to add the embed code:

    Squarespace insert point

  4. In the More section of the Content Blocks dialog, click Code:

    Squarespace code block

  5. From your Shopify admin, copy the embed code from the Embed Code dialog:

    Buy button embed code

  6. From your Squarespace dashboard, paste the embed code into the EDIT CODE dialog:

    Squarespace paste code
    Make sure that the text field is set to receive HTML.

  7. Click SAVE on the EDIT CODE dialog.

  8. Click SAVE again on the page editor:

    Squarespace save page
    Since 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.

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

Caution

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:

  1. From your Tumblr dashboard, create a new Text post.
  2. Click the Gear icon, then click the Text Editor dropdown and select HTML:
    Buy button tumblr gear
  3. Paste your embed code into the Tumblr editor:
    Buy button tumblr editor
  4. Click Post.

Add embed code to a page header in Tumblr

To add embed code to the header on your Tumblr homepage:

  1. From your Tumblr dashboard, open the account menu, and then click Edit appearance:
    Buy button tumblr account menu
  2. Click Edit Theme.
  3. Click Edit HTML:
    Buy button tumblr edit html
  4. In the Edit HTML area, find the end of the header element in the source HTML:
    Buy button tumblr header
  5. Paste your embed code above the </header> tag:
    Buy button tumblr embed
  6. 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:

  1. From your Shopify admin, create a Buy Button or collection, and then copy its embed code.
  2. From your Wix account, find the site you want to edit in the My Sites section, and then click Edit Site:
    Wix edit site
  3. In the Wix Website Editor, click the + button, and then click More:
    Wix add menu
  4. Click HTML Code to add an HTML code widget to the page:
    Wix html widget
  5. Click Enter Code.
  6. On the HTML Settings dialog, paste the embed code for your Buy Button or collection in the Add your code here field:
    Wix add code
    After you add the embed code, the Buy Button or collection appears automatically.
  7. Resize the HTML code widget to fit its contents, and to make sure the cart tab appears in the right place.
  8. When you're done, click Save.

Note

Need help using the Wix Editor? Contact Wix Support.

Advanced examples

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:

  1. adding custom CSS code

  2. creating the grid.

Add custom CSS code

To begin, you need to add CSS classes that build the grid layout. If you’re using a publishing platform or CMS that lets you insert new CSS code into a separate CSS file, place this code there:

.my-product-grid {
  padding: 0;
  margin: 0 auto;
  max-width: 1100px;
  box-sizing: border-box;
  display: block;
}

.my-product-row {
  display: block;
  width: 100%;
  clear: both;
}

.my-product-embed {
    padding: 0 10px 20px 10px;
    margin: 0;
    width: 25%;
    box-sizing: border-box;
    display: block;
    float: left;
}


@media screen and (max-width: 900px) {
  .my-product-embed {
    width: 33%;
  }
}

@media screen and (max-width: 600px) {
  .my-product-embed {
    width: 100%;
  }
}

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 style tags:

<style type="text/css">

.my-product-grid {
  padding: 0;
  margin: 0 auto;
  max-width: 1100px;
  box-sizing: border-box;
  display: block;
}

.my-product-row {
  display: block;
  width: 100%;
  clear: both;
}

.my-product-embed {
    padding: 0 10px 20px 10px;
    margin: 0;
    width: 25%;
    box-sizing: border-box;
    display: block;
    float: left;
}


@media screen and (max-width: 900px) {
  .my-product-embed {
    width: 33%;
  }
}

@media screen and (max-width: 600px) {
  .my-product-embed {
    width: 100%;
  }
}

</style>

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.

Create a grid

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:

<div class="my-product-grid">
    ... embed content ...
</div>

Make sure that the HTML you add in the following steps appears within this containing div element.

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:

<div class="my-product-grid">
    <div class="my-product-row">
        ... embed content ...
    </div>
</div>

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:

<div class="my-product-grid">
    <div class="my-product-row">
        <div class="my-product-embed">
            ... paste your first embed code here ...
        </div>
        <div class="my-product-embed">
            ... paste your second embed code here ...
        </div>
        <div class="my-product-embed">
            ... paste your third embed code here ...
        </div>
        <div class="my-product-embed">
            ... paste your fourth embed code here ...
        </div>
    </div>
</div>

4. Paste the embed codes from your Shopify admin inside the different sets of my-product-embed tags.

5. If you want to customize the dimensions of the grid, you can edit the my-product-embed class in your CSS:

.my-product-embed {
    padding: 0 10px 20px 10px;
    margin: 0;
    width: 25%;
    box-sizing: border-box;
    display: block;
    float: left;
}


@media screen and (max-width: 900px) {
  .my-product-embed {
    width: 33%;
  }
}

@media screen and (max-width: 600px) {
  .my-product-embed {
    width: 100%;
  }
}

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:

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Your product" data-product_handle="your-product" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-button_background_color="7db461" data-button_text_color="ffffff"></div>
<script type="text/javascript">
document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');
</script>

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-embed_type and data-shop. For example:

<div data-embed_type="product" data-shop="yourstorename.myshopify.com"></div>
<script type="text/javascript">
document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');
</script>

4. Save your changes.

5. From the original embed code in your Shopify admin, copy only the <div> element. For example:

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Your product" data-product_handle="your-product" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-button_background_color="7db461" data-button_text_color="ffffff"></div>

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.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free