3d logo below the header

Store Design

Topic summary

Main issue: A 3D logo embedded via a Custom Liquid block rendered below the header instead of centered within it, because the Custom Liquid section isn’t part of the header area.

Details provided: The store URL was shared, along with the model-viewer markup (a web component for displaying 3D models), including auto-rotate, camera controls, and a 70px height.

Fix suggested: Add a style block to theme.liquid (above the closing body tag) to set the header class to position: absolute and full width (max-width: 100%, width: 100%). Steps: Online Store > Edit Code > theme.liquid > insert the CSS.

Outcome: After applying the CSS, the header displayed as intended and the 3D logo appeared in the correct position. Screenshots confirmed the result.

Status: Resolved. No further disagreements or outstanding questions. Attachments (images) illustrate the successful layout but are not essential to understanding the solution.

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

My 3D logo added through a “Custom Liquid” block appears below the header instead of being centered inside the header. Even with the correct code, the 3D model does not show in the middle of the header because the “Custom Liquid” section is not part of the header area.

1 Like
2

Hey @kleo1

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

@kleo1 can you please share this page link?

4

hello yes here it is https://kleo.store/

5

hello yes https://kleo.store/ here it is

6

this is my liquid personalisation

<model-viewer src="https://cdn.shopify.com/3d/models/c55d4a366f1b3927/Model_Compressed_4_.glb" alt="A 3D model" skybox-image="" auto-rotate rotation-per-second="30deg" environment-image="https://cdn.shopify.com/s/files/1/0905/6501/7945/files/cloudshighres_1.webp?v=1764328590" min-camera-orbit="auto auto 40m" max-camera-orbit="auto auto 40m" camera-controls exposure="2.5" style="width: 100%; height: 70px;"> </model-viewer>

1 Like
7

Hey @kleo1

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.header {
    position: absolute !important;
    max-width: 100% !important;
    width: 100% !important;
}
</style>

RESULT:

image
image1897×837 108 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

8

i did and it worked thank you so much for your time and your help i appreciate it

Capture.PNG
Capture.PNG1920×341 53.9 KB

1 Like
9

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Cheers,
Moeed