> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://revoq.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Highlight the Footer Link to Your Withdrawal Page

**Under EU Directive 2023/2673, the link to your withdrawal page must be permanently visible and easy to find. You can't visually highlight it through Shopify's menu settings alone – for that, you need a few lines of custom CSS. This step is optional, but recommended.**

In the Shopify footer menu, all links look the same by default: same color, same weight. Your withdrawal link blends in next to imprint, terms, and privacy policy. A few lines of CSS give it a different color and/or more weight.

---

# Prerequisite

You've already linked the withdrawal page in your footer menu. If not yet: [How to set up a dedicated withdrawal page](https://revoq.crisp.help/en/article/set-up-a-dedicated-withdrawal-page-4nvzt6/).

Important to know: You'll need the **URL slug** of your withdrawal page. If your page is reachable at `yourshop.com/pages/withdrawal-form`, the slug is `withdrawal-form`. This slug goes into the CSS code shortly.

---

# Step 1 · Open Custom CSS in the theme editor

1. In your Shopify admin, go to **Online Store → Themes → Customize**.
2. Click the **gear icon** in the top left (Theme settings).
3. Scroll down in the sidebar to **Custom CSS**.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/d/0/a/9d0aebb43b89f800/bildschirmfoto-2026-05-22-um-1_iflz33.png)

| Note: This section is called "Custom CSS" in most themes, sometimes "Additional CSS", or it sits under "App embeds". If you can't find a custom CSS area, your theme may not support this feature. Vintage themes typically don't have a custom CSS section.

---

# Step 2 · Insert the CSS code

Copy the following code and paste it into the Custom CSS field:

```css
a[href*="withdrawal-form"],
a[href*="withdrawal-form"]:hover {
  color: #e51c23 !important;
  font-weight: bold;
}
```

**Important:** In both lines, replace the word `withdrawal-form` with the URL slug of your own withdrawal page. Examples:

* Your page is `yourshop.com/pages/cancel-order` → `cancel-order`
* Your page is `yourshop.com/pages/withdraw-contract` → `withdraw-contract`

Click **Save** in the top right to activate the changes.

---

# Step 3 · Choose your own color

The example code uses `#e51c23` (bold red) as a placeholder color. You can adapt it to your shop design:

* **Your shop's accent color** – feels integrated
* **Contrast color** like red, orange, or purple – stands out instantly
* **Black (#000000)** combined with `font-weight: bold` – subtle but noticeable

You'll need the color code in HEX format (e.g. `#e51c23`). If you're unsure which color to pick: Check your shop designs (e.g. the button color on your product pages) – you'll often find suitable tones there.

| Tip: Avoid gray or pastel tones. The whole point of highlighting is that the link is clearly visible and **stands out immediately**.

---

# More customization options

If you want to go beyond color and weight, here are a few more options:

### Increase font size

```css
a[href*="withdrawal-form"],
a[href*="withdrawal-form"]:hover {
  color: #e51c23 !important;
  font-weight: bold;
  font-size: 1.1em;
}
```

### Add an underline

```css
a[href*="withdrawal-form"],
a[href*="withdrawal-form"]:hover {
  color: #e51c23 !important;
  font-weight: bold;
  text-decoration: underline;
}
```

### As a button (boxed style)

```css
a[href*="withdrawal-form"],
a[href*="withdrawal-form"]:hover {
  color: #ffffff !important;
  background-color: #e51c23;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: bold;
}
```

---

# Step 4 · Check the result

After saving:

1. Open your shop in an **incognito window** (to bypass the browser cache).
2. Scroll to the footer.
3. The withdrawal link should now clearly stand out from the other links.

Something not as expected? Go through the Common Issues below.

---

# Common Issues

### The link looks the same as before

* **Clear your browser cache** or check in incognito mode
* Verify you've used the **correct URL slug** in the code (typos in `withdrawal-form` are common)
* Did you click **Save** in the top right of the theme editor?

### Multiple links are being highlighted

The selector `a[href*="..."]` reacts to **all links** that contain the specified word in their URL. If you use `withdrawal` as the slug for example, a link to `withdrawal-policy` would also be highlighted.

Solution: Use a **more unique URL slug** for your withdrawal page (e.g. `withdrawal-form` instead of just `withdrawal`).

### The code affects other areas of my shop

If you have additional links to the withdrawal page on other pages (e.g. in your withdrawal instructions), those will also be highlighted – this is normal and usually desired.

If you only want it in the **footer**, you can make the selector more specific:

```css
footer a[href*="withdrawal-form"],
footer a[href*="withdrawal-form"]:hover {
  color: #e51c23 !important;
  font-weight: bold;
}
```

Works in most themes, but may vary depending on theme structure.

---

# Next steps

* [Set up form branding to match your shop design](#)
* [Go through the Go-Live Checklist](https://revoq.crisp.help/en/article/go-live-checklist-are-you-ready-for-june-19-2026-1ppy570/)