# 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](/cozmos-curator/control-bar.md#actions)

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

## Overlays

To customise overlay styles for *<mark style="color:purple;">**ALL**</mark>* sphere's in your space, go to Space Settings and then Overlays

<figure><img src="/files/7t8Yu63xwIc4k2uEwrMF" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/YCTfANIZcBUlG6sVqi5j" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/rIt8lHzJyFPGWCM6HRVw" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/CbKbGFRf7ubBkwcYjVbZ" alt=""><figcaption></figcaption></figure>

### Product Overlay

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

<figure><img src="/files/H9v2cVYhOVZpAqfMjtie" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/jZ7xLbROn7JvjQAIUBX8" alt=""><figcaption></figcaption></figure>

### 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

<figure><img src="/files/QXgNKgb1MiY1ZzkIEAl0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/2ITP75lA3uUxx6W47oCd" alt=""><figcaption></figcaption></figure>

### Overlay Content&#x20;

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

<figure><img src="/files/lksFzGPxbrVHFdtB4Vdl" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/YpZzqwdFihC0rIIsLblc" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Files Accepted for Overlays: SVG, PDF, PNG, JPG, GIF, HTML, JS
{% endhint %}

{% hint style="info" %}
HTML absolute links are complete web addresses that start with `http://` or `https://`, ensuring the link works no matter where the file is used.
{% endhint %}

### Links and Social Content &#x20;

To apply this action go to <mark style="color:yellow;">Curator -> Actions -> Links</mark>. 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!

<figure><img src="/files/TnpSJje25yBM1OlR67lq" alt=""><figcaption></figcaption></figure>

#### 2. Social content

For social content you'd need to go to <mark style="color:yellow;">Space Settings -></mark> [<mark style="color:yellow;">Social Media Integrations</mark>](/guides/social-media.md) 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.

<figure><img src="/files/j3OXTOKcNOCN8p5DOPcC" alt=""><figcaption></figcaption></figure>

### Single Image

Go to <mark style="color:yellow;">Curator -> Actions -> Image Overlays -> Single image.</mark> This action will open your image as an overlay.

### Content Carousel

Go to <mark style="color:yellow;">Curator -> Actions -> Image Overlays -> Content carousel.</mark>  Showcase multiple images and videos within a single overlay, creating an interactive slideshow experience. Simply create a tag, add your desired images and videos to it, then apply the content carousel action. You can select specific media from the tag and reorder them by dragging, giving your audience a seamless way to explore your content in one place!&#x20;

<figure><img src="/files/KYwYUq2AoabYtvPN1TX9" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/cOm3FDl0mUMrTSl82f9N" alt=""><figcaption></figcaption></figure>

### Video Overlay

Go to <mark style="color:yellow;">Curator -> Actions -> Video Overlay.</mark> By applying this action you can either select a video from your assets and set is as an overlay or insert video link:

<figure><img src="/files/ROqBQACR2pqLk33eDoI0" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
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.
{% endhint %}

## 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

{% hint style="info" %}
All overlay content must be uploaded in your Space before you can use them on the Canvas
{% endhint %}

## E-commerce Overlays&#x20;

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!&#x20;

{% hint style="info" %}
You must have your Shopify connected to your Cozmos space to be able to access E-commerce overlay settings
{% endhint %}

### Space level

To customise Ecommerce overlays for all of your spheres, go to Space Settings, Ecommerce UI and Overlays

<figure><img src="/files/Plox39sQpSz4l8F3gBs5" alt=""><figcaption></figcaption></figure>

Customise the style of the overlay, such as the typography, buttons and colours. You can do this for the different languages you have set up too!&#x20;

<figure><img src="/files/28N4lI7U62afeTs9w3Fs" alt=""><figcaption></figcaption></figure>

### Sphere level&#x20;

To customise Ecommerce overlays at Sphere level, then go to 'Work in Progress' sphere settings

<figure><img src="/files/YCTfANIZcBUlG6sVqi5j" alt=""><figcaption></figcaption></figure>

If your Shopify is connected, then the Ecommerce settings tab will show

<figure><img src="/files/hyQzequy64uDsX51Lqh0" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.cozmos.com/guides/overlays.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.