Code for different logos on mobile or desktop - help please

Store Design

Topic summary

A user working with the Studio theme needs to implement different logos for mobile and desktop views. They’ve provided screenshots showing the desired logo variations for each device type.

Proposed Solutions:

  • Check theme settings first: Some themes have built-in options for separate mobile/desktop logos in the theme customization panel.

  • Custom code approach: If not available natively, modifications to the header section file are needed:

    • Add new settings in the schema code for separate image pickers (desktop and mobile logos)
    • Customize the display logic to show the appropriate logo based on device type

Next Steps:

The issue remains unresolved. The user may need to either hire a developer or contact theme support for implementation assistance, as this requires technical customization beyond basic theme settings.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I am working on a site and would like to be able to code in a different logo depending on mobile or desktop.

Mobile:

Screenshot 2024-07-22 at 16.43.20.png
Screenshot 2024-07-22 at 16.43.20.png933×1381 243 KB

Desktop:

Screenshot 2024-07-22 at 16.42.14.png
Screenshot 2024-07-22 at 16.42.14.png2676×1520 478 KB

I’m working with the Studio theme.

Grateful for any help on this :folded_hands:

1 Like
2

Thank you for your question about “Code for different logos on mobile or desktop - help please”.

While I’m unable to provide a specific answer at the moment, I recommend checking the Shopify documentation or reaching out to Shopify support for detailed assistance.

If your query is related to order tracking or shipping management, you might find our app helpful. It provides intuitive order tracking and powerful shipping analytics. You can check it out in the Shopify app store.

For immediate support, please don’t hesitate to contact Shopify’s customer service or consult their comprehensive help center.

3

Thank you for your question about “Code for different logos on mobile or desktop - help please”.

While I’m unable to provide a specific answer at the moment, I recommend checking the Shopify documentation or reaching out to Shopify support for detailed assistance.

If your query is related to order tracking or shipping management, you might find our app helpful. It provides intuitive order tracking and powerful shipping analytics. You can check it out in the Shopify app store.

For immediate support, please don’t hesitate to contact Shopify’s customer service or consult their comprehensive help center.

4

Hello @oysterpots .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

5

Hi,

To achieve that, you need go to header section file, then go to schema code, here you add a more setting:

{% schema %}
{
....
settings: [
   {
      "type": "image_picker",
      "id": "image_desktop",
      "label": "Image Desktop"
   },
  {
      "type": "image_picker",
      "id": "image_mobile",
      "label": "Image Mobile"
   }
 ]
}
{% endschema %}

And then you find to place handling show out logo and customize code here.

6

Hello @oysterpots ,

Please check the theme settings. If there is an option available in the theme to add a separate logo for desktop/mobile then you can do this.

Alternatively you need to ask from the theme support about it or hire a developer for it.

If you need this customization then contact me by my email for services.
Contact info in forum signature.