Need help adding digital clock and move footer to video banner and make transparent

Shopify Discussion
, , , ,

Topic summary

Shopify landing page customization request focusing on header and footer layout.

Requested changes:

  • Restore a digital clock below the site logo in the header, positioned about 50px lower than shown in the provided screenshot.
  • Move the footer upward so it sits within the video section on the landing page only; keep all other pages with a normal footer layout.
  • Change the footer text color to white (#ffffff) to match the page styling.

Context/assets:

  • Two screenshots are attached and are central for understanding exact placement and styling expectations.

Status/outcome:

  • The author is seeking implementation help. No solutions or code have been provided yet; the request remains open.
Summarized with AI on January 6. AI used: gpt-5.
1

Hey Shopify community,

I need some help with adding some elements to my landingpage.

  1. I’d like to bring back my digital clock, which should appear directly below the logo in the header. A little further down compared to the attached photo, like 50 pixels

Skærmbillede 2025-08-03 kl. 00.08.52

  1. I also need assistance moving the footer up in the video section, this only applies for the landing all other pages should have a normal footer like the screenshot below. I would like to change the font color to white #ffffff like the rest of the page

Skærmbillede 2026-01-06 kl. 22.24.30
Skærmbillede 2026-01-06 kl. 22.24.301913×914 251 KB

I would appreciate any help out there

Best regards Mark-André

1 Like
2

Hey @Markbsh!

Can you please share your store url so that I can take a look and provide you the solution code.

3

Hey, yes of cause, here you go

www.andresatelier.dk
Password: AA0901

4

Thanks for sharing the store url and the password.

Upon checking in the developer tool I don’t see any timer that added or might disappeared. Can you confirm whether you’ve delete the code completely or tell me which code you use for the countdown. Because with that code, I’ll let you know exactly where it need to paste.

As, I didn’t add or delete that code that’s why it’s not easy for me to know which code it was.

Also regarding the footer I didn’t understand by little up. Can you explain it. Or whether you want me to increase the padding top bottom? And regarding the color if I make it #fffff then it will completely disappear.

Please share your requirements in detail.

8

I made the code with chatgpt, it won’t let me paste in to hear. I just pasted the picture with digital clock in chatgpt and told it to make me a similar one.

For what regards the footer i would like to make the white footer transparant, so all the footer content appears in the bottom half on the video banner. If this is not possible i would just like to remove the footer only from the landingpage

9

Well if you nee to remove the footer from the Home page only then you need to paste the following code shared below in the end of theme.liquid before closing the body tag.

{% if request.page_type == 'index' %}
  .footer-utilities.spacing-style {
 display: none !important;
}
{% endif %}

For the timer section you need to share code. You can paste the code in the Google Doc file and then share the public link of google doc here.

10

Hi @Markbsh

Have both of your issues been resolved?

11

Hi,

Hope this will help

  • Add the digital clock directly below the logo in header.liquid

Example structure

<div class="header__logo">
  <!-- logo -->
</div>

<div class="header-clock">
  <!-- digital clock code -->
</div>
  • Then add spacing using CSS instead of hardcoding pixels into HTML.

CSS example

.header-clock {
  margin-top: 50px;
  text-align: center;
}
  • Moving footer up into video section (landing page only)
  • Change footer font color to white with landing page only CSS
12

Hi that sounds doable. You can adjust header spacing and add the clock with CSS. The footer can be moved only on landing page using page specific code. I recommend editing theme CSS and liquid

13

The code does not work

14

Will you try and help

15

Hi,

No i still need help solving the problem, would appreciate your help

1 Like
16

Hi @Markbsh

Okay, please tell me what issue you’re facing, and also send me the Collaborate code so I can properly check it and update you.

Best regards,
Devcoder :laptop:

17

I’m unable to fix it myself, are you able to fix it if i give you access to my site?

I need your email, so i can add you as a collaborator

1 Like
19

The collaborator code is 7320

I hope you can help me out asap

ons. 7. jan. 2026 kl. 22.27 skrev devcoders <notifications@community.shopify.com>:

1 Like
20

Hi @Markbsh

I’ve sent you the request — please accept it.

21

Just accept it

tors. 8. jan. 2026 kl. 02.27 skrev devcoders <notifications@community.shopify.com>:

1 Like
23

Hi @Markbsh

I’ve created a duplicate of your main theme and implemented the changes there. Please check both tasks and let me know if you need any further changes.

Preview theme:
https://andresatelier.dk/?preview_theme_id=191932170572

image
image1347×614 138 KB

24

NIce try

That sounds great, thank you for the update. I really appreciate the effort and the clear workflow you followed. I will review both tasks and get back to you if anything else is needed. Nice work on handling this so smoothly.

1 Like
25

Hi @roheenigill

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts. :white_check_mark:

Best regards,
Devcoder :laptop: