Your 404 page is one of the most overlooked parts of your Shopify store — but it’s also a hidden opportunity to turn a frustrating moment into a branded experience your customers will actually remember.
In this 7-minute tutorial, I’ll show you how to fully customize your 404 page using ChatGPT and Shopify’s native theme editor.
You don’t need to install any apps or write a single line of code yourself to follow this guide. It’s fast, free, and beginner-friendly.
Step 1: Access your 404.liquid
- Backup your theme:
- Go to Online Store > Themes > Duplicate
- Go to Online Store > Themes > Edit code
- Search for 404.liquid
- Open the file — this is the template for all 404 pages
Step 2: Generate your new design and replace the default code
- Use ChatGPT to generate a custom 404 layout
- Copy the entire HTML + CSS
- Paste it into main-404.liquid, replacing the existing code
Markdown
You are a Shopify expert and brand copywriter.
Create a custom 404 page for a **playful** ecommerce store that sells **snowboards**. The goal is to turn the 404 page into a fun, branded experience that includes:
- A fun headline
- A short, on-brand message
- A GIF (use this one: https://cdn.dribbble.com/userupload/20420676/file/original-aac8f7f838812fa53cd92617fad5f892.gif) — integrate it as if the caveman is reacting to the broken page
- A CTA button that links back to the homepage
Design requirements:
- Wrap everything in **responsive HTML with inline CSS**
- Use Shopify’s native layout structure and classes (e.g., `.template-404`, `.button`, `.page-width`)
- Center the content and match the store’s default typography and spacing
- Match the **background color** of the page to the GIF (if the GIF can’t be edited, adjust the page background to blend visually)
- Make sure the layout is **mobile-friendly, lightweight, and fast**
- Use semantic HTML, accessible markup (e.g., alt text), and lazy-load images if applicable
**Output the complete HTML + CSS**, formatted for use in Shopify’s `main-404.liquid` file. The code should be clean, modern, and ready to copy-paste directly — no external scripts or dependencies.
Step 3: Save + Preview
- Click Save in the top right corner
- Go to any broken URL on your site (e.g. /not-a-real-page)
- You’ll see your new custom, branded 404 page live
Step 4: Customize the layout + CTAs
- You can guide users in more helpful and branded ways by replacing or adding different CTA elements. Here are some ideas:
- Add a list of products
- Add a Search Field
- Add a Contact Us Button
- Prompting Tips
- Define Functionality: What should the 404 page do? (e.g. show a fun message, display bestsellers, include search)
- Provide Context: Include 2–3 screenshots of your current Shopify setup, such as the Edit Theme Files page and the Customize Theme interface.
- Share Inspiration: Include URLs or screenshots of 404 pages or designs you like — especially ones with GIFs, product carousels, or creative CTAs.
- Request Clean Code: Ask for responsive HTML, inline CSS, semantic markup, lazy-loading for media, and accessibility features.
Markdown
Rewrite the **entire HTML/CSS code** as seen in the Shopify main-404.liquid format — ready for copy-pasting, making the following update. We want to replace the “”A CTA button that links back to the homepage” with a A “Search for products” input field https://shopify.dev/docs/api/liquid/objects/search that allows visitors to search for products or help using it. Please make sure to update the copy of the page so it reflects this new design.Step 5: Finalize
- Replace the placeholder GIF or image link with one hosted in your Shopify admin for faster load times and better reliability.
- Check all links (homepage, collections, contact page) to ensure they work as expected
- Once everything looks good, click “Save”.
Next Steps
You just made your 404 page more on-brand and customer-friendly — and you didn’t need any technical help.
If you liked this approach to customizing your Shopify store — you’ll probably love: Vibe Coding on Shopify: Build Custom Sections Without Using Any Apps.