🟦Overlays

What are Overlays?

Overlays are in-sphere pages. They can be used to give you a closer look at a product and product information, or to take you to an external link, without leaving the sphere (a pop-up that Lays Over the sphere😉) . Overlays are applied in actions on the canvas.

Types of Overlays

Product overlay
Info overlay
Overlay Content
Links and Social Content
Single Image
Video

Overlays

To customise overlay styles for ALL sphere's in your space, go to Space Settings and then Overlays

To customise overlays in a specific sphere, go to 'Work In Progress' sphere settings, and click on 'Overlays'

Here you can customise the colour style for the overlays within the sphere

Product Overlay

To get to Product Overlay settings, you must go to settings within a ‘Work In Progress’ sphere and click on 'General'.

Customise the information icon in the corner of your overlay by uploading an image. Here, you can upload it directly from your computer

Change the colour and icon, and get a preview of what it would look like

Info Overlay

Info overlays are used for crucial information, such as privacy policies and legal disclaimers

Upload an image, change the title name and add in your content

Then click the preview button to see what the overlay will look like!

Overlay Content

To upload content for your overlays, go to Assests and then Overlay Content

Files Accepted for Overlays: SVG, PDF, PNG, JPG, GIF, HTML, JS

HTML absolute links are complete web addresses that start with http:// or https://, ensuring the link works no matter where the file is used.

To apply this action go to Curator -> Actions -> Links. There are two sub-types in this overlay type (external links will just redirect user, not create an overlay):

1. Iframe link

With Iframe link you can simply add a link and we will show it's content in an overlay!

For social content you'd need to go to Space Settings -> Social Media Integrations and then connect social content you want to use in overlays. You can also style each overlay for different social media integrations in the same settings.

Single Image

Go to Curator -> Actions -> Single image. This action will open your image as an overlay.

Video Overlay

Go to Curator -> Actions -> Video Overlay. By applying this action you can either select a video from your assets and set is as an overlay or insert video link:

The difference between inserting video link and using Socail Media integrations to add Social Content overlay is mainly visual and in styling: video overlay takes its styling from Overlays Settings and Social Content overlay from Social Media integrations.

How to Apply Overlays in Curator

Click on the object you want to have an overlay. Apply an action and choose the content you want to be displayed in the overlay

All overlay content must be uploaded in your Space before you can use them on the Canvas

E-commerce Overlays

If you have your Shopify shop connected to your Cozmos Space, then you can set up specific E-commerce overlays such as Products, Sign In and Shopping Cart overlays!

You must have your Shopify connected to your Cozmos space to be able to access E-commerce overlay settings