Shortcodes, Upgrades

Shopify (retired)

Shopify integration is no longer available on WordPress.com. If you previously added Shopify integration to a WordPress.com Business site, you may continue using it. However, no new integrations may be added.

The instructions from this guide are referring to the WP Admin dashboard. You can get to this dashboard by adding /wp-admin to the end of your site’s url (e.g.: example.wordpress.com/wp-admin)

Embedding Shopify products in your site

The simplest way to show a Shopify product on your WordPress.com site is to paste the direct link to the product into a post or a page.

Note that the embedded product will only be visible when the post is published. While editing the post, you will just see the link you pasted.

Example of a Shopify product link in a post

Example of a Shopify product link in a post

Example of a Shopify product embedded in a post on WordPress.com

Example of a Shopify product embedded in a post on WordPress.com

Make sure you use the public link to the product on your Shopify store (see example below), not a link to the Shopify Dashboard.

product url

To get more granular control over the appearance of individual products, you can use the Shopify shortcode.

To generate the shortcode, go to your Shopify dashboard and navigate to the product you want to add to your site. From the product’s page in the dashboard, click on the Apps menu in the top right (next to Duplicate), and choose the option Generate WordPress.com Shortcode.

screen-shot-2014-02-10-at-4-20-28-pm

Next, you can either copy the shortcode and then paste it into your WordPress.com site, or click the Create WordPress.com post with product to create a new post on your site and automatically add the product code:

screen-shot-2014-02-10-at-4-28-56-pm

↑ Table of Contents ↑

Customizing the appearance of Shopify products

The default appearance settings for Shopify products on your WordPress.com can be found under Settings → Shopify. From there you can change the appearance for all Shopify products on your site. You can choose from two different presentation styles (Simple or Centered), change the size of the product image, change the behavior of the Buy Now button, and more.

The settings you choose on this page will affect all the Shopify products on your site. If you want to have more granular control over the appearance of specific products – for example, use a large image for one specific location in your site and small images for all other locations – you can add special parameters to the product’s shortcode that will override all the defaults on the Settings → Shopify page.

The Shopify shortcode supports the following parameters:

  • image_size="value": Set the size of the product image. Value can be small, medium, large, or grande
  • style="value": Set the presentation style of the embedded product. Value can be simple, or centered.
  • destination="value": Set the destination for the link and Buy Now button. Value can be checkout, cart, or product (Note: to use the product destination, you must have a full Shopify store, as included in the Basic Shopify plan).
  • button_text="value": Set the label for the Buy Now button. Value can be any text, for example Buy Me!.
  • border_padding="value": Set the spacing inside the border (for example, the spacing between the border and the product image). Value can in pixels or ems, for example 16px or 1em.
  • text_color="value": Set the text color for the product name and details. Values can be in Hexadecimal, RGB, or RGBA. For example, for the color Black, use #000000, or RGB(0, 0, 0), or RGBA(0, 0, 0, 1).
  • background_color="value": Set the background color. Values can be in Hexadecimal, RGB, or RGBA.
  • border_color="value": Set the border color. Values can be in Hexadecimal, RGB, or RGBA.
  • button_background="value": Set the background color for the button. Values can be in Hexadecimal, RGB, or RGBA.
  • button_text_color="value": Set the text color for the button. Values can be in Hexadecimal, RGB, or RGBA.

For example, the following shortcode would embed a product with a large product image:

[shopify product="http://example.myshopify.com/products/example-product" image_size="large"]

The following shortcode would embed a product with dark background and light text:

[shopify product="http://example.myshopify.com/products/example-product" text_color="#eeeeee" background_color="#222222" border_color="#eeeeee" button_background="#eeeeee" button_text_color="#222222"]

Please note that your Shopify store has to be published and not protected with a password for the embedded products to show up correctly on your WordPress.com site.  You can read how to do this in Shopify’s documentation.

Not a Business user? See the WordPress.com Business page for more information.

↑ Table of Contents ↑

Help from Shopify

Shopify is a commerce platform that allows anyone to easily sell online, at their retail location, and everywhere in between. Shopify offers a professional online storefront, a payment solution to accept credit cards, and the Shopify POS application to power retail sales. Shopify currently powers over 80,000 retailers in 100+ different countries, including: Tesla Motors, Gatorade, Forbes, Amnesty International, Encyclopedia Britannica, CrossFit, and many more.

For more help configuring your products, visit Shopify’s help section or contact them with questions.

Not quite what you're looking for?

Get Help