How to get PRODUCT ID of the product for Shopify?

There are two ways to get Product ID of the product.

From Admin Panel

Steps

  • Login to your admin panel.
  • Take a look at left menu panel, click on Products
  • You will see a list of products you have on your store.
  • Click on product you wish to get Product ID of.
  • When you click on product, take a look at the URL
  • This highlighted code will be your Product ID. Copy it. ūüôā

From Product URL

Steps

  • Copy the product URL.
  • Paste in the browser, but add “.json” at the end of it.
  • For e.g (https://shopablestest.myshopify.com/products/ikea-chair and you add “.json” at the end of it¬†https://shopablestest.myshopify.com/products/ikea-chair.json)
  • You will see something like this.
  • This highlighted code will be your Product ID. Copy it.

For enable Shopify Checkout, you have to connect your Shopify store with Shopables account. Then in place of product URL you have to use these Product IDs. This will give you opportunity to give instant shopping experience directly from image.

How to connect your Shopify Store

This is how you connect your Shopify store with Shopables.

How to get Storefront API key?

Steps:

  1. From your Shopify admin, select Apps.
  2. Click Manage private apps.
  3. Click Create a new private app.
  4. Fill out the details private app. (e.g App name: Shopables & Email: hello@shopables.co)
  5. Scroll down a bit. In the Storefront API section, select Allow this app to access your storefront data using the Storefront API.
  6. Click on Save -> Create App
  7. Now you will get Storefront access token
Shopify Storefront API key

Now we need to get myshopify Store URL

Where to find Store URL?

Steps

  • Login to your Shopify Admin Panel. Take a look at left panel.
  • Click on Online Store¬†under Sales Channel tab.
  • You will see a sub menu in it click on “Domains”.
  • Copy your primary domain name which ends with myshopify.com. That’s it.

Now you have got both Storefront API key and Store URL. Let’s connect it with your Shopables account. Go to My Account page. You will “Connect Shopify Store”¬†option.

Paste both Storefront API key and Store URL. Click on SAVE. Done! You have successfully connected your shopify store with Shopables. You are ready to give visitors an option to checkout directly from image for the first time.

Try now: https://shopables.co

Whats new is Shopables 1.1 ?

Finally Shopables new update is finally out. We added bunch of new features and in this blog post we will describe each new feature.

  • Shoppable Slider Generator

Now you can generate shoppable images slider instantly within a minute. Just upload multiple images, click on each image and create tags. Select the behavior of tags (Opened, Closed & Hover) and select the theme (Dark or Light).

You’ll receive iframe code, select the code according to your images aspect ratio. If it is a square images slider select 1:1. If it is landscape select 16:9 etc.

Shoppable sliders can be great for showing multiple products in multiple images through a nice carousel style.

Shopables,slider generator,
Shoppable Slider Generator
  • Statistics

Now you can see the stats of your sliders and images to see how they are performing. You can see the views, clicks on the links and % click through rate.
In few days we will add countries lists as well so you can see from which countries you are getting views and clicks.

shopables
Shopables Statistic feature
  • Themes

Now you can change style of shoppable tags. We added two options. Dark and Light. If your images are mostly white background we recommend you to use dark theme and if it is more dark then you should use light theme. To make your tags more prominent.

shopables,dark, theme
Example of Dark theme
  • New Plans

Now you have got new plans. Lite and Pro plan. Lite will offer you limited creations which is 35 creations in total. You still get the same features as Pro plan but you are limited with creations. Creations means creating sliders or images.

There maybe few bugs, but we are working on fixing them to give you best value and experience.

Start creating!

Shopables Tags Behaviors

There are three different ways your shoppable tags can work. This blogpost will explain you each of them

  • Opened
  • Closed
  • Open on Hover

Opened

In this your tags and its details will be opened when someone will open the page where you added that shoppable. This is how it will look like

shopables,shopables.co

Closed

In this you tag details will be closed but tags will be animating. When people will click on tag it will show the details. This is how it will look like.

Open On Hover

This is our most recommenced behavior, as this catches more attention.  In this when someone will hover over the image then the tag details will appear. When they are not hovering they will only see animated tags. This is how it will look like. (Please hover over the image)

We’re on Product Hunt!

We’re up¬†on ProductHunt.com. Shopables is out now. Shopables.co allows you to create embeddable shoppable images within seconds. It’ll increase your click through rates and creates lot of attention because of its animated tags with lot of different behaviors.

Please support our launch by upvoting us here: https://www.producthunt.com/posts/shopables-co

Email us if you have any questions,