Skip to main content

How to add Images/Videos/Google Maps onto Checkout Pages

How to add/embed Images/Videos/Google Maps onto a checkout page sidebar copy

P
Written by Partner Training
Updated yesterday

Adding content like images and videos onto your checkout page not only help to spruce the page up but it also allows you to visually describe and/or demonstrate what it is you are selling or offering. Additionally, embedding Google maps onto the sidebar copy will also help contacts find a location you may be wanting them to physically go to after they complete the checkout page.

This comes extremely handy when you are hosting an event outside of your gym and instead at a different venue, by embedding exact location from Google Maps directly onto your page your contacts would be able to easily find where the venue would be and perhaps even plan out which route would be best for them to travel to said location.

The guide below will provide you with a full tutorial on how to add each type of content mentioned above onto your checkout pages.


Adding Images

  • Left Side Menu Bar > Checkout Pages

Under "Checkout Pages" page, scroll down to "General" section then click "Edit Checkout Page" button.

Under "Add / Edit Checkout Page" page, scroll down to "General Settings" until you find the side bar copy section and click the "Insert/edit image" button.

After clicking it, there will be a pop up window and click this button right beside the "Source" field.

You will be routed to "Image Manager" window and from here, you can either select an image from the shared folder or manually upload from the local drive on your computer.

Once you selected an image, you can set your preferred dimensions and then click the "Ok" button.


Adding Videos

  • Left Side Menu Bar > Checkout Pages

Under "Checkout Pages" page, scroll down to "General" section then click "Edit Checkout Page" button.

Under "Add / Edit Checkout Page" page, scroll down to "General Settings" until you find the side bar copy section and click the "Insert/edit media" button.

Now you can either upload a video if you have it saved on your computer or you can just get the embedded code for the video and use it that way.

If you don't know how to get the embedded code, here's an example:

Go to YouTube then search for the video you plan on using. After finding the video, click the three little dots, and click the "Share" button.

After clicking the "Share" button, select the "Embed" option, then click "Copy".

Now go back to embed option within Spark and paste that inside the embed option.

Click "Ok" and it should appear on your side bar copy:

Now you go back in and edit the video dimensions because you want to make it look like a perfect fit on your page, and you would alter the Dimensions to be 321x181.


Note: If you want your videos to automatically play upon opening the checkout page, you will want to add this bit of code after the embed link:

  • HTML Code: autoplay=1&mute=1

Videos will only autoplay on devices such as desktops and laptops, they will NOT autoplay on smaller devices such as smartphones.


Adding Google Maps

  • Left Side Menu Bar > Checkout Pages

Under "Checkout Pages" page, scroll down to "General" section then click "Edit Checkout Page" button.

Under "Add / Edit Checkout Page" page, scroll down to "General Settings" until you find the side bar copy section and click the "Insert/edit media" button.

On the pop up window, click "Embed" tab.

Go to Google Maps website and type into the search bar the address or the place you want to put in.

After searching it, click the "Share" button. On the pop up window, click "Embed a map" tab, and then click "COPY HTML".

Go back to Spark, paste the HTML you copied to the "Embed" tab, and click "Ok".

Did this answer your question?