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:
.footer__copyright with a mobile media query, but this would hide the footer across all pages, not just product pages.{% if template == 'product' %}) but didn’t provide complete implementation details.Solution:
The working solution involved:
theme.liquid in the theme code editor</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.
How can I hide the footer of my product page on mobile devices only? I originally wanted to move the footer to the very bottom of the page but no one seems to have a solution that works so now I just want to hide the footer on my product pages for mobile view only. I’ve included a screen shot of how the mobile view looks.
Theme: Origin 15.1
URL: https://billon.maison/products/rockera & https://billon.maison/products/rockero
ScreenShot:
@MaisonBillonDon - it will need code tweak as product pages do not have any separate unique ids, if you can accept me as collab then I can do it
Hello @MaisonBillonDon
Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.
@media screen and (max-width: 749px)
{
.footer__copyright {
display:none;
}
}
@suyash1 how can I accept you as a collaborator?
I only wanted to hide the footer on product pages only.
Hello @MaisonBillonDon
Go to Online Store, then Theme, and select Edit Code.
Search for Layout/theme.liquid Add the provided code at the end of the file.
{% if template == 'product' %}
{% endif %}
Hi MaisonBillonDon
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.liquid and add this code at the end of the file
@media screen and (max-width: 749px)
{
.footer__copyright {
display: none !important;
}
}
{% endif %}
Best,
Liz
@devcoders @LizHoang Neither of these code solutions worked. Could it be possible that the ‘product’ could be named something different based on the template?
Hello @MaisonBillonDon
Can you send me a screenshot of the code you added?
{% if template == 'product' %}
{% endif %}
@devcoders Here is a screen shot:
@MaisonBillonDon - take this code out of tag, this red box code should start after tag and end before
Thank You this worked! @suyash1
Thank you @devcoders I’ve accepted your solution ! 
Hello @MaisonBillonDon
You’re very welcome! I’m thrilled to hear that you’re pleased with the outcome. Don’t hesitate to reach out if you need further assistance.
like and accepting the All solution. Thank you!
