eCommerce, Shortcodes, Upgrades

Shopify

WordPress.com Business allows you to promote and sell products from your Shopify store by linking to them in your posts and pages. The link is replaced automatically with the product’s image, name, details, a Buy Now button, etc.

This page will guide you through the process of setting up Shopify on your site, embedding products from Shopify, and customizing their appearance.

See the WordPress.com Business page for more information about the features available with WordPress.com Business.

Connecting Shopify

In your Dashboard, go to eCommerce Plugins and click on Activate under Shopify.

Next, go to Settings → Shopify and enter the address of your Shopify shop. This is the same address you use when you login to Shopify from the Shopify front page. Click on Connect this account to continue.

Screen Shot 2014-02-17 at 00.46.34

You will be redirected to Shopify and be prompted to install the Shopify for WordPress app for Shopify. This will allow you to create new entries on your WordPress.com site right from the Shopify dashboard. Click on Install App to continue.

Screen Shot 2014-02-17 at 00.58.39

After the app is installed, your WordPress.com site is ready to use with your Shopify store.

↑ Table of Contents ↑

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.
  • 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