Account

Featured links

1. Shopify documentation on sections and blocks
2. Shopify documentation on customizing sections
3. Company XYZ documentation on section backgrounds settings
4. Company XYZ documentation on section padding settings
5. Company XYZ documentation on separators settings
6. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to tailor the main legacy customer account view so it feels polished and on-brand. You can introduce the page with your own icon, heading, and supporting text, then adjust the colors, background, spacing, and layout to make the account area easier to read and navigate. For a broader overview of how section settings work in the theme editor, see Shopify documentation on sections and blocks

Core settings

The main content settings shape the page intro. Add an icon for a quick visual cue, then use the heading and subheading to explain what customers can do from their account area.

If you leave the heading or subheading blank, the section uses your theme’s default content. That is a good option when you want the standard wording but still want control over the page’s presentation.

Tip

Keep the heading short and use the subheading for helpful context, such as managing orders, addresses, or account details.

Color settings

These settings let you override the section’s default icon and text colors. They are most useful when you are using a custom background and need stronger contrast or a closer match to the rest of the page.

Adjust the icon, main text, and subheading together so the section feels cohesive. If one element is noticeably lighter or lower contrast than the others, the page can feel harder to scan.

When using an image, gradient, or video background, check text contrast on both desktop and mobile before publishing.

Standard section settings

For more details on editing section-specific controls in the editor, see Shopify documentation on customizing sections

Section background settings

Section background settings control the visual surface behind the account content. You can use a solid color, gradient, image, or video, then add an overlay to help text stand out.

Gradient settings override solid colors, and overlay gradients override overlay colors. Mobile-specific image and video options are useful when the desktop media crops awkwardly or feels too visually heavy on smaller screens.

Padding settings

Padding settings control the space above and below the account content. Use more padding when you want the page to feel more spacious, or reduce it when you want a tighter, more utility-focused layout.

Desktop and mobile spacing are set separately, so it is worth checking both views. Smaller mobile spacing often keeps the page easier to scan without feeling cramped.

Separator settings

Separator settings add an optional line at the top, bottom, or both edges of the section. This can help define the account area more clearly when it sits near other sections with similar backgrounds.

If you leave the separator color transparent, the section uses the theme’s border color. That is usually the simplest way to keep dividers visually consistent.

Width settings

Width settings control both the readable width of the account content and the overall span of the section. Content width is the main setting for readability, while section width matters most when you are also using a background treatment.

A narrower content width usually works best for account pages because the content is task-focused and text-heavy. The editor can underrepresent width changes, so preview the page on the live storefront before finalizing layout choices.

Usage notes

1. Keep the intro useful. Use the heading and subheading to orient customers quickly instead of repeating generic account wording.
2. Design for contrast. If you add a background image or video, use overlays and custom text colors only as needed to keep everything easy to read.
3. Favor readable widths. A moderate or narrow content width is usually more comfortable for scanning account details and order history.
4. Match spacing to the page role. Larger padding can make the page feel more branded, while tighter spacing supports a more functional account experience.
5. Preview mobile separately. Check mobile background media, spacing, and text contrast together so the page stays clear on smaller screens.
6. Check desktop and mobile together. Layout, alignment, and media behavior can differ by viewport, so review both views before publishing.
7. Leave defaults in place when you want fallback styling. Blank or transparent values usually preserve the theme’s built-in look, while explicit colors, gradients, or media choices make the section more self-contained.