Shopify for WordPress.com
WordPress.com Business users can promote and sell products by embedding Shopify products directly into WordPress blog posts and pages.
Easily embed products from your Shopify store into your blog by copy and pasting a product URL into a blog post. That link is replaced automatically with the product’s image, name, details and a customizable “buy” button.
- Getting started
- Embed a product into WordPress.com
- Generating WordPress.com shortcodes
- Disconnect WordPress.com account
In this article:
After you've installed the app from the Shopify App Store, click Connect to your WordPress.com account to login and authorize your WordPress.com blog.
On the WordPress.com left sidebar, click the eCommerce Plugins tab.
Click the Activate button to activate the Shopify plugin.
On the WordPress.com left sidebar, click the Shopify link located under the Settings menu.
Enter in your Shopify store name, and click the Connect this account button, to connect to your store.
To customize the look of your embedded products, edit these settings and click the Save settings button.
Embed a product into WordPress.com
To embed a Shopify product into a WordPress.com blog post or page:
Navigate to a product page in your Shopify store, and copy the URL.
Navigate to a WordPress.com blog post or page, paste the URL into the body of the post.
When you publish your WordPress.com blog post, the product URL will automatically embed your product image, information, and a "buy" button.
Generating WordPress.com shortcodes
For advanced WordPress.com users, this app provides a shortcode generator to further customize the look of an embedded product. To generate a WordPress.com shortcode:
On a Shopify product page, hover over the
...button and click the "Generate WordPress.com Shortcode" from the drop-down menu.
Click the Create WordPress post button to create a new WordPress blog post with the shortcode already inserted. Or click the Copy to clipboard link to copy the shortcode and paste anywhere yourself.
The following shortcode parameters can be added, to further customize the look of an embedded product:
- 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, orcentered.
- destination="value": Set the destination for the link and Buy Now button. Value can becheckout, 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 or1em.
- 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.
- border_color="value": Set the border color.
- button_background="value": Set the background color for the button.
- button_text_color="value": Set the text color for the button.
Disconnect WordPress.com account
You may only have one WordPress.com account connected per Shopify account. To disconnect a WordPress.com account:
In your Shopify admin, click on the app banner in the Apps page.
Click Connect to a different WordPress.com account link.