Although Shopify integration is no longer available on WordPress, WordPress Business plan users can still purchase and embed Shopify’s Buy Button. In case you have added Shopify integration to a WordPress Business site previously, you can continue using it.
In this guide, we will take a look at How to embed Shopify products on your site to help you know more deeply about this topic.
Please kindly note that the instructions written below are referring to the WordPress Admin dashboard. You are allowed get to this dashboard by inserting /wp-admin into the end of your site’s url (for example: flower.wordpress.com/wp-admin)
How to embed Shopify products on your site
To paste the direct link to the product into a post or a page is considered the simplest way to show a Shopify product on your WordPress.com site. Please note that the embedded product will only be visible when the post is published. While modifying the post, you will just see the link you pasted.
Kindly note that the embeded item will be visible only when the post is set to public mode. While modifying the post, you will see the link you pasted. Please be certain that you use the pblic link to the product on your Shopify store (you can see the example below), not a link to the Shopify Dashboard.
Also, you are able to employ the Shopify shortcode to get more granular control over the appearance of every product.
Please go to your Shopify Dashboard and navigate to the product you want to add to your site to create the shortcode. Click on the Apps menu located in the top right, next to Duplicate, from the product page in the dashboard and select the option Generate WordPress.com Shortcode.
Then, you can either click the Create WordPress.com post with product to create a new post on your site and automatically add the product code:
or copy the shortcode and then paste it into your WordPress.com site.
How to the appearance of Shopify products
The default look settings for Shopify products on your WordPress.com can be found when you go to Settings → Shopify. From there you can configure the appearance for all Shopify items on your website. You are allowed to choose from two separated presentation styles (Simple or Centered), edit the size of the product image, edit the Buy Now button's behavior, and more.
The settings you choose on this page will make influence on all the Shopify products on your site. If you desire to have more granular control over the appearance of particular products – for instance, use a large image for one particular location in your site and small images for the other locations – you can insert special parameters into the product’s shortcode that will override all the defaults on the Settings → Shopify page.
Here are some parameters that the Shopify shortcode does support:
-
image_size="value": Set the size of the product image. Value could 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 instance, the shortcode given below would embed a product with a large product image:
shopify product="http://example.myshopify.com/products/example-product" image_size="large"
The shortcode given below 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 kindly note that your Shopify store has to be published and not protected with a password for the embedded products to correctly show up on your WordPress.com site. You can read how to do this in the documentation of Shopify.
Conclusion
Shopify is a commerce platform which gives everyone permission to sell online in an easy way, at their retail location, and everywhere in between. It offers a professional online storefront, the Shopify POS application to power retail sales, and a payment solution to accept credit cards. Currently, it powers over 80,000 retailers in more than 100 separated countries, which includes Tesla Motors, Encyclopedia Britannica, Gatorade, Amnesty International, CrossFit, Forbes, and many more. Hope the guide on embedding Shopify products on your site will be helpful to you!
