How can I hide the footer of my product page on mobile devices only?

Store Design
, , , , , , , , , , , , , ,

Topic summary

A user needed to hide the footer on product pages for mobile devices only in their Shopify Origin 15.1 theme. The initial goal was repositioning the footer to the bottom, but when that proved difficult, they opted for hiding it entirely on mobile.

Initial Attempts:

  • One responder offered CSS targeting .footer__copyright with a mobile media query, but this would hide the footer across all pages, not just product pages.
  • Another suggested using a Liquid template conditional ({% if template == 'product' %}) but didn’t provide complete implementation details.

Solution:
The working solution involved:

  1. Opening theme.liquid in the theme code editor
  2. Adding a Liquid conditional check for product templates with embedded CSS
  3. Placing the code after the closing </style> tag and before </body>

The key issue was code placement—the user initially inserted the snippet inside existing style tags, which prevented it from working. Once repositioned correctly outside the style block, the footer successfully hid on mobile product pages only.

Status: Resolved. The user confirmed the solution worked and marked it as accepted.

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

Hello @MaisonBillonDon

Can you send me a screenshot of the code you added?

{% if template == 'product' %}
  
{% endif %}