Skip to main content

Gift Card Design Editor

The Gift Card plugin includes a powerful WYSIWYG drag-and-drop editor, enabling you to create custom voucher designs effortlessly. With just a few clicks, you can craft visually stunning and personalized gift cards by adding text, images, shapes, and QR codes—all without any coding skills.

Access the Gift Card Design Editor via Content > Gift Card Designs in the Shopware Administration sidebar menu.

Creating a New Design

  1. Navigate to the Gift Card Design Editor.
  2. Click the "Create" button to start designing your gift card.
  3. Once your design is completed, select it for a product to begin selling it. Refer to the Gift Card Products page for detailed instructions.

Designing Your Custom Gift Card

Gift card designs are created using layers, providing flexibility and control over your design. There are four types of layers available:

Layer Types

  • Text Layer
    Use this layer to add text elements, which can include Twig code for dynamic content like the gift card code or order date.
  • Image Layer
    Add images to your design, such as a full-background image or decorative elements.
  • Rectangle Layer
    Use this layer to add flexible rectangles. You can define the background color, size, and position to create shapes in your design.
  • QR Code Layer
    Include a QR code, making it easy to redeem gift cards in a physical store.

PDF Preview Feature

Due to slight discrepancies between your browser's rendering engine and Shopware's PDF rendering engine, the final PDF output may differ slightly from the editor preview. To ensure your design meets your expectations, use the PDF Preview button (located below the Save button) to generate an accurate preview of the final PDF.

Twig Code in Text Layers

You can include Twig code in your text layers by enabling the "Render as Twig Code" checkbox. This allows for dynamic content generation.

Available Twig Context Variables

  • config -> ProductGiftcardEntity.
  • context -> SalesChannelContext.
  • giftcard -> GiftcardStruct.
  • templateConfig -> configuration array.
  • design -> GiftcardDesignEntity.

Common Twig Snippets

Display the Gift Card Code

{{ giftcard.code }}

Display the Gift Card Code with spaces

{% apply spaceless %}
{% for char in giftcard.code|split('') %}
{{ char }}
{% if loop.index % 4 == 0 %} {% endif %}
{% endfor %}
{% endapply %}

Display the Gift Card Creation Date

{{ giftcard.entity.createdAt|date('d/m/Y') }}