Launching soon - Video

Store Design

Topic summary

  • Goal: Replace the image behind the newsletter signup on the Dawn theme’s “Launching soon” (password) page with a background video.

  • Context: The video is already hosted on Shopify CDN and used on the homepage; a direct link was shared.

  • Implemented solution: Edit Online Store > Edit Code > password.liquid and insert code before to render the background video on the password page. The original poster confirmed it works.

  • Follow-up request: Center the “ORCHI” logo at the top over the video.

  • Proposed approach: Add JavaScript (before ) that injects CSS for a fixed, centered top logo and appends a logo container. Key details include absolute positioning, z-index for overlay, full-width alignment, and a set logo height.

  • Outcomes:

    • Video background: confirmed successful.
    • Logo overlay: solution provided; final confirmation not yet posted.

  • Status: Largely resolved; awaiting confirmation on the logo placement. Code snippets and the video asset link are central to the solution.

Summarized with AI on December 22. AI used: gpt-5.
1

Hi

Theme: Dawn

www.orchi.com

I am customizing the launching soon landing page

I want to add a video behind the newsletter sign up instead of an image - how do I go about that?

The video is already uploaded the shopify and is used on the homepage

orchiworld_0-1723191800539.png
orchiworld_0-1723191800539.png1274Ă—849 120 KB

2

Hi @orchiworld ,

can you prodide link to the video?

3

This is the link: https://cdn.shopify.com/videos/c/o/v/a81f7ecb165f4cdab55916bae1be5c1c.mp4

4

Hi @orchiworld

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find password.liquid file
  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

1 Like
5

This works flawlessly!

How do I achieve to get the “ORCHI” logo at top center of the video?

6

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find password.liquid file
  4. Add the following code just above tag 
document.addEventListener("DOMContentLoaded", function() {
const body = document.body;

const styleElement = document.createElement('style');

styleElement.innerHTML = `
body.password.gradient {
  max-height: 100vh;
  overflow: hidden;
}

.fixed-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 41px;
  position: absolute;
  z-index: 10000;
  width: 100%;
}

.fixed-logo img {
  height: 25px;
}
`;
body.appendChild(styleElement);
const fixedLogo = document.createElement('div');
fixedLogo.classList.add('fixed-logo');
fixedLogo.innerHTML = `
![ORCHI_4b4c3cc4-504d-4eda-b7ea-802cd5f30a53.png?v=1718128332&width=500|500x112](upload://mYtVOtahbKMKqgAGEOO3Z5Rm11U.png)
`;
body.appendChild(fixedLogo);
    });

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka