Gift card

Featured links

1. Shopify documentation on the theme editor
2. Shopify documentation on sections and blocks
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

This section controls the main gift card page that recipients use to view and redeem their gift card. You can personalize the message, swap in branded artwork, and adjust the layout so the page feels clear, polished, and consistent with the rest of your store. For a broader overview of how these controls work in the editor, see Shopify documentation on the theme editor

Core settings

Use the heading and subheading to introduce the gift card and give recipients a short, helpful cue about what they can do next. If you leave these fields blank, the section can fall back to default theme content, which is helpful when you want a simpler setup.

The image setting lets you replace the built-in gift card artwork with your own branded visual. This works best when the image supports the page without competing with the gift card details.

Image style and aspect ratio settings control how the artwork is framed. Use the default ratio when your image is already designed for the space, or choose a fixed ratio when you want more consistent presentation across different images.

Mobile includes its own aspect ratio option. If the desktop crop feels too wide or too tall on smaller screens, adjust the mobile ratio instead of replacing the image.

Desktop layout settings determine how the image and gift card details share space. Column width changes which side feels more prominent, and gallery position controls whether the image appears on the left or right; on mobile, the layout always stacks into a single column. For more context on section and block behavior, see Shopify documentation on sections and blocks

Check custom artwork on both desktop and mobile before publishing. A crop that looks balanced on desktop can hide important parts of the image on smaller screens.

Color settings

This group lets you override the default text and subheading colors for this section. It is especially useful when you add a custom background and need stronger contrast or clearer visual hierarchy.

Keep readability as the priority. If you use a lighter image, gradient, or video background, make sure both the main message and supporting copy remain easy to scan at a glance.

Standard section settings

Section background settings

Section background settings control the visual canvas behind the gift card content. You can use a color, gradient, image, or video, then add an overlay to help the text and gift card details stand out.

This page usually works best with restrained background treatments. If you choose decorative media, adjust overlay strength and text colors together so the page still feels functional first.

Padding settings

Padding settings control the space above and below the content. Use them to make the page feel tighter and more utility-focused, or more spacious when you want a softer branded presentation.

Smaller padding can help key details appear sooner, especially on mobile. Larger padding works better when the section uses a stronger background treatment and needs more breathing room.

Separator settings

Separator settings add an optional line above or below the section. This can help define the gift card area more clearly when the page includes other content around it.

Keep separators subtle here. A light divider is usually enough to separate the page visually without distracting from the gift card itself.

Width settings

Width settings control the maximum width of the content and the width of the section wrapper. These settings are useful when you want the page to feel narrower and easier to read, or wider when pairing it with a more immersive background.

For most stores, a moderate content width keeps the experience focused. If you use a wider section background, preview the live page to make sure the layout still feels balanced and easy to read.

Note

Width changes can look different in the editor than on the live page, especially when backgrounds are involved.

Usage notes

1. Keep copy brief. Use a short heading and subheading that confirm what the recipient is viewing and what they should do next.
   1. Use blank fields when you want the default styling and fallback content to carry more of the page.
   2. Keep the message easy to read in both the issued and redeemed states.
2. Choose artwork that crops well. Simple branded visuals usually work better than detailed graphics that may lose impact on smaller screens.
   1. Review desktop and mobile separately, since crops and layout can shift between viewports.
   2. Treat separate mobile artwork as a way to preserve readability, not just to resize the same image.
3. Prioritize contrast. When using custom colors or backgrounds, make sure the gift card content remains easy to read immediately.
   1. Stronger local colors, gradients, or media can make the section feel more independent from surrounding styling.
   2. If you keep the default or blank styling, more of the theme’s fallback presentation will show through.
4. Use desktop layout intentionally. Give the larger column to the side that should carry more visual weight, knowing the page will stack on mobile.
   1. Recheck alignment and visibility on smaller screens, since the mobile layout can change how the page reads.
   2. Adjust the layout when the balance feels right on desktop but cramped on mobile.
5. Preview the full page. Check spacing, width, and background choices on the live storefront before finalizing the design.
   1. Pay extra attention to any form or redemption messaging so submitted, empty, and error states stay easy to scan.
   2. Confirm that the final page still feels clear when content, controls, and artwork appear together.