Skip to content

Gift card ​

This guide describes how to set up the Gift card section.

Use the section to specify how gift card content displays on the gift card page. Gift cards allow customers to purchase prepaid store credit. Refer to Shopify help: Selling gift cards.

A Gift card section on a store's Gift card page in the Theme editor.

The previous image shows an example store's Gift card page. In the upper left, part of the Theme editor's Gift card section menu is displayed. The menu's Logo max width option is set to 120 pixels. This option specifies a maximum width for the section's logo image. For example, in the previous image, the section's logo does not exceed 120 pixels wide.

For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.

Configure the Gift card section ​

To configure your Gift card section:

  1. In the Theme editor, at the top of the page, use the dropdown to select Gift card.

    Note

    The section is available only on the Gift card page template.

  2. From the side menu, select Gift card.

  3. Select a setting described in the following table.

Setting nameDescription
LogoUse the Logo picker to select an image to use as a logo in the section. Refer to Add, replace or remove an image or video inside a section or block.
Logo max widthAdjust the Logo max width slider between 20 and 450 pixels to specify a maximum width for the section's logo image.
Theme settingsIf available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSSSelect Custom CSS. In the CSS field, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.

Note

To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in the Theme editor.

To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the Theme editor.