How to add an “add to cart” button in your virtual tour

What with petrol prices ever rising and certain pandemics we shall not name, the need for online virtual visits is growing exponentially. And this includes virtual tours of shops with the ability to shop for products right from the virtual tour! But how do you create a custom “add to cart” button in your virtual tour? 

Today we’ll show you step by step how that is done!

For the quick learners, here’s the quick guide: 
  1. get the product ID of the item you are selling
  2. create an “add to cart” link with the product ID: https://yourwebsite.com/cart/?add-to-cart=374
  3. Add a popup window to your virtual tour
  4. Add some product details
  5. Add the button and link it with the new link you created. 

Here’s everything again but in more detail: 

 
What you need: 

1. An online shop 

In this tutorial we will use a wordpress website that uses Woocommerce  as their shop engine. But you can use any link you like on your button. 

2. A virtual tour of your shop created in My360

Here's the full video:

Some helpful links: 

Get a GIF image for your CTA button: https://giphy.com/

Find some cool “add to cart” buttons: click here for google search

Here's the full tutorial with pictures and more detail:

First we have to create the “add to cart” button. 

Create an “add to cart” button for your virtual tour
  1. go to your woocommerce admin area and click on “products”
  2. Hover over your product to find the product ID
  3. Create your “add to cart” link

Create the link for your shop item like so: 

https://yourwebsite.com/cart/?add-to-cart=374

You need to change the website url and the product ID accordingly. 

Now we have the “add to cart” link, we have to add it to the virtual tour

Adding the "add to cart" button in your virtual tour

In the virtual tour editor, drag the blue ball to your image and select the “i” icon

Remove the default camera image and click on the “image” icon to add your own image (we are using a blue pulsating GIF image, but you can use any image you like) 

Resize your image so it is the right size for you (I recommend an icon of around 30 to 50px) 

Don’t worry about the default text – that does not show. 

Select “opens in popup” to configure the “popup” screen

Complete the popup content with text and images. 

Click on the “image” icon to upload an “add to cart” button. 

You can find lots of “add to cart” buttons in Google Image search

I recommend the images to be approx 300px wide

Once you added your “add to cart burron” in your virtual tour, you have to link it to the link you created earlier. 

So go ahead and click on the button and then select the “link” icon. 

Put your link in the link field and click on “ok” 

Make sure you “save” your project and then click on “publish” tour to see the results. 

If you followed the steps correctly, you will now have a popup button with an “add to cart” button in your virtual tour that leads straight to the check-out area of your website! 

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Other articles that may be of interest

Videos you may like:

How to add an "Add To Cart" button to your virtual tour | My360 Virtual Tour Guides

27 views July 14, 2022 9:43 am

Custom Transitions on your Virtual Tour | My360 Virtual Tour Software

40 views June 18, 2022 1:56 pm

Adding your property virtual tours to My360rea.com for FREE

49 views May 31, 2022 10:03 am

How to set maximum clicks on your virtual tour to force a contact form

18 views May 13, 2022 2:45 pm

How to shoot & create a virtual tour in just 30 minutes

62 views March 9, 2022 12:41 pm

How to Embed Your Virtual Tour on WIX | My360 Virtual Tour Software

303 views March 8, 2022 3:08 pm

Configure Max Clicks in your Virtual Tour | My360 Virtual Tour Software

510 views February 2, 2018 12:04 pm

Add Text to your virtual tour | My360 Virtual Tour Software

232 views February 2, 2018 11:56 am

Adding Images & Gifs to a virtual tour | My360 Virtual Tour Software

1.1K views February 2, 2018 11:54 am

Hide sensitive information in your virtual tour | My360 Virtual Tour Software

226 views February 2, 2018 11:29 am

We may share links to Amazon products on our articles. As an Amazon Associate we earn from qualifying purchases, this allows us to continue to give you free information. It does not make the product on Amazon any more expensive and helps keep this website and its information 100% free of charge!

Recent Posts

Stay Updated

Popular Videos

How to create a basic virtual tour
Play Video
How to add a single image to your tour
Play Video
How to embed your tour in your website
Play Video