Cozmos Knowledgebase
  • Welcome to Cozmos
  • Quick start
  • Release Notes
  • Inspiration
  • Cozmos Space
    • Overview
    • Space Core Areas
    • User Management
    • Settings
  • Cozmos Curator
    • Overview
    • Control Bar
    • Contextual Edit Panels
    • Generating & Publishing
  • Guides
    • Accessibility
    • Analytics
      • Matomo Analytics
      • A/B Testing with Matomo
      • Tracking Custom Sphere Events with GTM
      • GTM Cookie Consent
    • Animations
      • Journeying
    • Asset Libraries
    • Audio
    • Backgrounds
    • Clusters
      • Cluster Packing
    • Domain Management
    • Ecommerce
      • Shopify Integration
        • Shopify Multipass
      • Ideal360
    • Figma Plugin
    • Navigation
      • Navigation Buttons
      • Navigation Arrows
    • Overlays
    • Social Media
      • Facebook
      • X (Twitter)
      • YouTube
      • TikTok
      • Snapchat
      • Twitch
      • Linkfire
    • SEO
    • Templates
    • Using Generative AI
      • Midjourney guide for Cozmos
    • Video
      • Video Backgrounds
    • Copy a Sphere
  • Help
    • FAQs
    • Glossary of Terms
    • Support
    • Data Deletion
  • Terms of Use
  • Privacy Policy
Powered by GitBook
On this page
  • What are Overlays?
  • Types of Overlays
  • Overlays
  • Product Overlay
  • Info Overlay
  • Overlay Content
  • Links and Social Content
  • Single Image
  • Content Carousel
  • Video Overlay
  • How to Apply Overlays in Curator
  • E-commerce Overlays
  • Space level
  • Sphere level

Was this helpful?

  1. Guides

Overlays

PreviousNavigation ArrowsNextSocial Media

Last updated 6 months ago

Was this helpful?

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.

  • Product overlay

  • Info overlay

  • Overlay Content

  • Links and Social Content

  • Single Image

  • Content Carousel

  • 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.

Links and Social Content

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!

2. Social content

Single Image

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

Content Carousel

Go to Curator -> Actions -> Image Overlays -> Content carousel. 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!

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

Space level

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

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!

Sphere level

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

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

For social content you'd need to go to Space Settings -> 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.

Social Media Integrations
Types of Overlays