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.
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.
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.
After the app is installed, your WordPress.com site is ready to use with your Shopify store.
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.
Make sure you use the public link to the product on your Shopify store (see example below), not a link to the Shopify Dashboard.
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.
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:
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
style="value": Set the presentation style of the embedded product. Value can be
destination="value": Set the destination for the link and Buy Now button. Value can be
button_text="value": Set the label for the Buy Now button. Value can be any text, for example
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
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
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.
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.