Contact information

Featured links

1. Shopify documentation on sections and blocks
2. Shopify documentation on customizing theme settings
3. Company XYZ documentation on section backgrounds settings
4. Company XYZ documentation on colors settings
5. Company XYZ documentation on visibility settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block to present important contact details in one easy-to-scan place. It is a practical way to surface the best ways to get in touch, whether customers need support, store details, pickup information, or opening hours. For a broader overview of how blocks are organized in the theme editor, see Shopify documentation on sections and blocks

Header settings

Use the header area to introduce the contact details and give the block clearer structure. A short caption, heading, and optional supporting text can help customers understand whether the details apply to support, a store location, appointments, or another contact purpose.

You can also add an icon for quick visual recognition. Leave the icon field blank if you want a cleaner text-only presentation, or use an emoji or supported icon name to make the block stand out.

Choose the heading type based on the page structure, not just the visual size. If the page already has a main title, a lower heading level usually keeps the content hierarchy cleaner.

Tip

Use a specific heading such as “Visit us,” “Customer support,” or “Pickup details” when the page includes more than one information block.

Contact details

The main content fields let you show only the contact methods that matter for this page. You do not need to fill every field, which makes it easier to keep the block focused and useful.

Phone and email are best for quick action, while address and hours work well for in-person visits and time-sensitive questions. The richer text fields are especially useful for multiline addresses, holiday hour notes, or short instructions.

You can also show social media icons here, but they depend on your social profile setup in Shopify documentation on customizing theme settings. If those profiles are incomplete or not meant for customer contact, it is usually better to leave the icons off.

Only display channels you actively monitor. A visible phone number, email address, or social profile creates an expectation that customers can use it.

Standard block settings

Block background settings

These settings let you place the block on a color, gradient, image, or video background. They are useful when you want the contact details to stand out as a dedicated panel, but stronger backgrounds can also affect readability and spacing. See the source-provided background settings reference.

If you use image or video backgrounds, check how the content reads across the full block area. Mobile-specific background media can help avoid awkward cropping or poor contrast on smaller screens.

Caution

If text sits over a photo or video, use an overlay strong enough to keep phone numbers, addresses, and hours easy to read.

Color settings

These settings override the broader theme colors for this block only. They are helpful when the contact area needs stronger contrast or a different visual emphasis than the surrounding content. See the source-provided color settings reference.

Adjust icon, body text, and subheading colors together so the block feels consistent. When using a custom background, double-check that every text element remains readable.

Visibility settings

Use visibility controls when this block should appear only on desktop or only on mobile. This is especially useful when contact details need different placement depending on screen size. See the source-provided visibility settings reference.

A mobile-only version can work well when you want tap-friendly contact details near the top of a smaller layout. A desktop-only version can make sense when the same information already appears elsewhere on mobile.

Usage notes

1. Keep details current. Review phone numbers, email addresses, hours, and addresses regularly so customers are never sent to outdated contact channels.
2. Match the page intent. Use a clear heading and include only the contact methods that fit the purpose of that page.
3. Prioritize readability. If you use custom colors or background media, make sure every detail stays easy to scan on desktop and mobile.
4. Use fallback styling intentionally. Leaving color or media fields blank can preserve the broader page styling, while explicit overrides make the contact block feel more independent.
5. Check both viewports. Desktop and mobile controls can change layout, alignment, visibility, and media behavior, so review both sizes before publishing.
6. Use social links selectively. Show social icons only when those profiles are fully set up and genuinely useful for customer contact.
7. Plan for mobile placement. Use visibility controls when the contact block needs a simpler or more prominent position on smaller screens.