3d logo for site

Store Design
, ,
1

How can I add my logo in 3D format, specifically glb, to the site so that it appears in all locations like a regular logo? I can’t figure it out. Thank you for your attention.

2

hey @user4645 first you have to make a 3d logo in GIF format and then you have drag down the GIF in where ever you want

3

Yes, that’s an option, but I don’t like the quality of the gif and I’d like to do it through code like here.

https://modern-muse-style.myshopify.com

Pass:

modern muse style

4

:bomb: Be aware of wearing the designer hat just slap in golly gee cool doodads and widgets into themes not built for such stuff or branding not built for it.
It just adds more cruft customers need to load and burn battery on rather than getting to actual product.
It’s how merchants make websites look like dropshipping sites look like slapdash dropshipping sites then are shocked when the money doesn’t come pouring in.
It’s right up there with stripping all the whitespace from a design or putting everything in boxes.

Hi @user4645 a 3D logo is an advance customization beyond the scope of the forums, unless the theme already supports it having an actual 3D logo especially if by “all locations” that means it needs to be sitewide AND pagewide and not just in the header(e.g. product badges) , and more especially if it needs to be interactive/dynamic to the page content.
Hire help.

Or if the “logo” is it’s own section try asking the sidekick “AI” to generate the block, and or use what it makes as a starting point.

Otherwise use a gif/video by searching posts about replacing logo image with video and the theme name:
https://community.shopify.com/search?q=replace+logo+video + theme name??

5

Hi, @user4645
You can implement it by following steps.

1. Add the <model-viewer> JS

Shopify doesn’t automatically include it, so you need to add this to your theme (typically in theme.liquid <head>):

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></scri

2. Updated HTML Example for Shopify Header

<a href="/" class="header-logo__3d-container" style="width:200px; height:200px;">
  <model-viewer 
    src="https://cdn.shopify.com/3d/models/48dec928e68e9349/uploads_files_3749981_Audi_TT_RS_2019.glb" 
    alt="Store Logo" 
    auto-rotate 
    camera-controls 
    interaction-prompt="none"
    style="width:100%; height:100%;">
  </model-viewer>
</a>

change the src to your 3d file link

6

Hi @user4645

You cannot use a .glb 3D file as a Shopify logo. Shopify logos only support image files (PNG, JPG, SVG). A .glb can only be added via custom code (e.g., <model-viewer>), and it won’t work like a normal logo everywhere.

8

Hi,

Hope this will help

Shopify logos only support image files not .glb

  • Convert your 3D logo to a static image which is a most common fix
  • Use the 3D logo only in the header by using custom code, need to use “model-viewer”