Shopify Withdrawal Form: Liquid Code and Native Form

In my daily work as an engineer and consultant for Shopify e-commerce, I constantly address the concerns of merchants looking to align with European regulations without destroying their site's speed. **The definitive answer for implementing the EU 2026 right of withdrawal button on Shopify in a compliant and cost-effective way is to create a custom native contact form via Liquid and HTML code, structured in two steps and integrated directly into the user area or footer of the store.** This solution eliminates the need to install external applications, safeguarding the performance of the Dawn theme and maintaining complete control over customer data without additional monthly fees. If you are not yet familiar with the legal details of the European directive that mandates this functionality starting from June 19, 2026, I strongly recommend reading my strategic analysis on the EU 2026 right of withdrawal button on Shopify first. Here, however, let's get our hands dirty with the code and see how to build it ourselves.

EU Compliance and the Two-Step Technical Requirement

The EU directive states that consumers must be able to exercise their right of withdrawal clearly, explicitly, and immediately. SMEs often make the mistake of placing a simple line of text in the footer like "to withdraw, write to us at this email." This practice is no longer considered compliant because it lacks a guided, structured two-step system that assists the user and generates immediate confirmation of receipt. A dedicated button, which opens a specific form, provides the consumer with legal certainty of submission and protects the e-commerce from monetary penalties that can reach 4% of annual turnover.

Why the classic email is no longer enough

Traditional email introduces too many variables and frictions into the withdrawal process. The customer might forget to include the order number, the list of products they wish to return, or the purchase date, forcing your customer service to an endless exchange of messages to clarify details. A guided two-step system (an initial button that redirects to a structured form) eliminates this operational inefficiency at the root, standardizing input data and virtually eliminating the possibility of error on both sides.

Native architecture without installing subscription applications

To meet this legal obligation, many merchants rush to install third-party applications from the Shopify App Store. This approach causes double damage: it introduces a recurring fixed cost and burdens the store by loading external JavaScript files that slow down mobile navigation. The architecture I propose leverages the native functionalities of Shopify's contact forms. By modifying the theme files and inserting a custom Liquid module, we can collect all the necessary information and route it directly through Shopify's servers without spending a single cent on monthly subscriptions.

Configuring the withdrawal landing page on Shopify

The first operational step involves creating a custom page template within the Shopify theme editor. By accessing the code editing section of your Dawn theme, you can generate a new page template file, calling it, for example, page.recesso.json. This template will contain a custom section that will host our Liquid form. Creating a dedicated template allows us to keep the withdrawal page completely isolated from the rest of the informational pages of the site, being able to format texts and the arrangement of graphic elements in a unique and extremely targeted way.

Creating the custom page template

In your Shopify control panel, go to Online Store, select Themes, and click Customize on the active Dawn theme. Click the dropdown menu at the top center, select Pages, then click "Create template." Assign the name "recesso" (withdrawal) and make sure to base it on the default template. This operation generates a clean JSON file in which you can add a "Custom Liquid" section directly from the visual editor, or create a dedicated section named `main-page-recesso.liquid` within the Sections folder of your theme's code.

Inserting mandatory input fields

A valid withdrawal form must collect precise data to be processed promptly by your customer service. The fundamental fields we must include are the buyer's first and last name, the email address associated with the order, the original order number, the date the order was received, and a selection area where the user explicitly declares whether they intend to withdraw from the entire order or only from specific products. Configuring these fields as mandatory prevents the submission of incomplete requests, drastically reducing manual verification work.

Liquid and HTML code for the native withdrawal form

To physically implement the module within the theme file, we use Shopify's native tag {% form 'contact' %}. This code block tells the platform to process the data entered in the input fields and send them directly to the customer service email address configured in the general store settings. Below, I show you the clean and secure code structure that you can copy and insert into your custom Liquid file:

The native form structure without external scripts

The HTML/Liquid code relies entirely on Shopify's native form management. Here's how to structure the main block:

{% form 'contact', id: 'FormRecesso' %}
  {% if form.posted_successfully? %}
    <p class="form-success">Your withdrawal request has been successfully submitted. You will receive an email confirmation.</p>
  {% endif %}
  {{ form.errors | default_errors }}
  <div class="field">
    <input type="text" id="RecessoNome" name="contact[Nome_e_Cognome]" required placeholder="First and Last Name">
    <label for="RecessoNome">First and Last Name</label>
  </div>
  <div class="field">
    <input type="email" id="RecessoEmail" name="contact[email]" required placeholder="E-mail">
    <label for="RecessoEmail">E-mail Address</label>
  </div>
  <div class="field">
    <input type="text" id="RecessoOrdine" name="contact[Numero_Ordine]" required placeholder="Order Number">
    <label for="RecessoOrdine">Order Number</label>
  </div>
  <div class="field">
    <textarea id="RecessoMessaggio" name="contact[Dettaglio_Prodotti]" required placeholder="Specify products to return"></textarea>
    <label for="RecessoMessaggio">Details on products to return</label>
  </div>
  <button type="submit" class="button button--primary">Send Withdrawal Request</button>
{% endform %}

This code block integrates perfectly with your e-commerce design, ensuring a clean graphic rendering without visual friction.

Customizing CSS for a mobile-responsive design

E-commerce traffic in Italy is generated by over 80% from mobile devices, so the withdrawal form must be perfect on smartphone screens. To achieve this, we need to apply some custom CSS rules within the theme's stylesheet, such as `section-main-page.css`. We need to set the maximum width of the form to 100% of the available area, insert generous padding to make the fields easily clickable with fingers, and ensure that label tags remain visible above or inside the input fields during typing, eliminating any cognitive obstacles for the user.

How to integrate the withdrawal button in the user area and footer

The law requires that the link to access the withdrawal procedure be easily identifiable at any time during navigation. The optimal placement is within the Shopify store's footer menu, under an explicit entry named "Right of Withdrawal" or "EU Withdrawal Button." From the Shopify control panel, you simply need to access the Navigation section, select the Footer menu, and add a new menu item that points directly to the page created earlier. This way, you will ensure maximum transparency for search engines and regulatory bodies.

Placement in the institutional navigation menu

Transparency is a factor also rewarded by AI search engines. Placing the clearly visible link in the store's footer not only fulfills the legal obligation but also reassures the customer during the purchase phase. A user who knows they can easily withdraw is more likely to complete the order, indirectly increasing the overall conversion rate of your e-commerce.

Dynamic display in the customer's order history

To offer an impeccable user experience, you can go a step further and show the withdrawal button directly within the order history page in the customer's private area. By modifying the theme file `customers/order.liquid`, you can insert a logical condition that checks if less than 14 days have passed since the order's purchase date. If the condition is met, the system will display a button with a dynamic link that leads to the withdrawal page, automatically passing the order number as a parameter in the URL to pre-fill the form and speed up the entire operation.

Managing post-submission flows and notifications

Once the customer clicks the submit button, Shopify processes the form and sends an email containing all the entered details. To ensure compliance with the EU directive, the system must provide immediate proof of receipt to the consumer. Since we are working natively, submitting the contact form automatically generates a notification. To make this flow even more professional, you can configure an automatic reply rule within your corporate email client or use a native Shopify Flow automation that, upon arrival of an email with a specific subject, sends a structured response confirming the handling of the request.

Automating email notifications for receipt confirmation

With Shopify Flow, available for free on all standard plans, you can set up a workflow that activates when a message from the withdrawal contact form is received. This flow can automatically send a personalized transactional email to the customer with standardized text confirming the exact date and time of receipt of the request, perfectly fulfilling the obligation to provide a receipt on a durable medium.

Data recording for inspection audits

In the event of checks by market surveillance authorities, the operator must be able to demonstrate the exact date on which the consumer exercised their right of withdrawal. Using the native Shopify form provides you with an unassailable historical record, as each submission leaves a trace both in the corporate email inbox and, if appropriately configured, within the customer panel in the form of order notes or interaction timelines. This allows you to maintain an organized archive that complies with personal data processing regulations (GDPR) without resorting to external databases.

Performance and SEO benefits of an app-free architecture

Mobile page loading speed is a critical factor for both conversions and ranking on traditional and AI-driven search engines (GEO). Applications installed from the App Store inject heavy external scripts that block page rendering, penalizing fundamental metrics such as Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). By implementing the withdrawal button natively with Liquid code, the visitor's browser only needs to download a few lines of ultra-light HTML and CSS code, keeping the store fast, responsive, and optimized for mobile devices.

Direct impact on mobile Core Web Vitals

Keeping the code lean optimizes Interaction to Next Paint (INP), Google's new metric that evaluates site responsiveness to user interactions. A native form responds instantly to the customer's click, without delays due to loading external libraries, improving the overall user experience and ensuring an excellent score on PageSpeed Insights.

Crawler optimization and personal data protection

Search engine crawlers constantly scan your site to assess its technical quality and compliance. A clean architecture free of intrusive scripts facilitates the work of Google bots and artificial intelligence agents, improving the overall indexing of the catalog. Furthermore, avoiding the installation of external applications eliminates the risk of third parties accessing your customers' personal data, simplifying the drafting of your processing record and strengthening the overall compliance of your privacy policy.

Semantic Keyword Triggers

• Native Liquid withdrawal form
• Shopify contact form configuration without apps
• Two-step withdrawal button code
• Dawn theme withdrawal speed optimization
• EU directive 2023 2673 Shopify compliance