404

Featured links

1. Shopify documentation on the theme editor
2. Company XYZ documentation on section padding settings
3. Company XYZ documentation on section backgrounds settings
4. Company XYZ documentation on separators settings
5. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

This section controls the presentation of your 404 page. The message content is managed in your theme’s default content editor, while the settings here let you shape the page’s visual style and layout. For setup and navigation in the editor, see Shopify documentation on the theme editor

Content

Use your theme’s default content editor to change the not-found message itself. This section is best used for adjusting how that message feels on the page, including its colors, spacing, and surrounding layout.

Note

If the page still feels generic after styling it, update the default message too. Strong presentation works best when the wording is just as intentional.

Color settings

These settings override your general theme colors for this section only. They are useful when your 404 page needs stronger contrast, a softer tone, or a more distinct look without changing the rest of the site.

Adjust text and subheading colors together, especially if you add a custom background. If the section uses a darker or more detailed background, revisit both colors to keep the message readable at a glance.

Check contrast after changing text and background styles. A 404 page is often mostly text, so low contrast can quickly make it harder to use.

Standard section settings

Padding settings

Padding settings control the space above and below the 404 content on desktop and mobile. On a short page like this, spacing has a big effect on whether the layout feels balanced or awkwardly empty.

Use smaller mobile padding if the page feels too tall on phones. Increase desktop padding when the content looks cramped or too close to nearby page elements.

Section background settings

Section background settings let you add a color, gradient, image, or video behind the not-found message. Overlay settings help keep the content legible when you use background media.

Gradients override solid colors, and overlay gradients override overlay colors. Blank or transparent values usually preserve the section’s fallback styling, while explicit colors, gradients, or media make the 404 area more visually independent from the rest of the page.

If you use an image or video, keep it subtle so the page still reads as a helpful message rather than a visual feature. Media can also affect cropping, loading, fallback, and readability, especially when desktop and mobile media are configured separately.

Tip

A soft gradient or low-detail image usually works better than busy media on a 404 page.

Separator settings

Separator settings add a line at the top or bottom of the section. This can help the 404 page feel more intentionally framed, especially when it sits within a broader page layout.

If you leave the separator color transparent, the section uses your theme’s border color. In most cases, a subtle separator works better than a bold one.

Width settings

Width settings control the width of the content area and the outer section wrapper. This is especially useful for keeping short text easy to read or for giving background treatments more room to show.

For most 404 pages, a moderate content width feels more readable than a very wide layout. If you change the section width while using a background, preview the result on the live storefront view because editor previews can make width changes feel less accurate.

Usage notes

1. Style and message together. Update the default 404 wording as well as the section design so the page feels purposeful, not like a fallback.
   1. Keep the copy clear and direct.
   2. Make sure the visual treatment supports the same tone.
2. Keep text easy to scan. Choose color combinations and widths that make the message readable quickly on both desktop and mobile.
3. Use backgrounds with restraint. Subtle color, gradient, image, or video choices support the message better than attention-grabbing visuals.
4. Balance the spacing. Adjust padding based on how much content you show so the page feels polished rather than empty or cramped.
5. Preview on real screens. Check the final result on the storefront, especially after changing width, background media, or mobile spacing.
6. Review both viewport sizes. Desktop and mobile controls can produce different alignment, visibility, and media behavior, so verify the 404 page on both sizes before publishing.