# Advanced

This section covers customization beyond the theme editor.

## Editing theme code

To edit DRIFT's underlying code:

1. Shopify admin → **Online Store → Themes**
2. Click **...** on the DRIFT theme → **Edit code**
3. The code editor opens with the file tree on the left

The theme is organized into:

* `assets/` — CSS, JavaScript, fonts, and images
* `config/` — theme settings schema
* `layout/` — top-level page wrappers (`theme.liquid`)
* `locales/` — translation files
* `sections/` — modular page sections
* `snippets/` — reusable code components
* `templates/` — page templates (product, collection, blog, etc.)

## Custom CSS

DRIFT does **not** include a "Custom CSS" theme setting. To add custom CSS, edit the `assets/drift-core.css` file directly via **Edit Code**.

Common edits:

```css
/* Hide the announcement bar on the cart page */
.template-cart .drift-announcement {
  display: none !important;
}

/* Make all product images grayscale on hover */
.drift-feed__image:hover {
  filter: grayscale(100%);
}
```

After editing, save and the storefront updates immediately.

## Custom JavaScript

The cleanest way to add custom JS:

1. **Edit code → snippets → Add a new snippet**, name it `custom.liquid`
2. Add your JS:

   ```html
   <script>
     // Your custom code here
   </script>
   ```
3. Reference it in `layout/theme.liquid` near the closing `</body>`:

   ```liquid
   {% render 'custom' %}
   ```

## Third-party integrations

Most Shopify apps integrate automatically with DRIFT. Common categories:

* **Reviews** — Judge.me, Loox, Stamped, Yotpo
* **Email marketing** — Klaviyo, Mailchimp, Omnisend
* **Live chat** — Tidio, Gorgias, Re:amaze
* **Subscriptions** — Recharge, Skio, Bold
* **Wishlists** — Smart Wishlist, Wishlist Plus
* **Loyalty / Referrals** — Smile.io, ReferralCandy

Install via the Shopify App Store. Most modern apps add their UI through Theme App Extensions, which means they appear as installable blocks in the customizer without code edits.

## Performance tips

DRIFT is optimized out of the box. Performance best practices:

* **Compress images** — keep product images under 500KB. Hero / lookbook images under 1MB.
* **Audit installed apps** — every app adds JS. Remove apps you don't actively use.
* **Use video sparingly** — autoplaying multiple videos on a single page hurts mobile performance.

## Theme version updates

When DRIFT releases a new version, you'll get a download link in your purchase email. To update:

1. Download the new theme zip
2. Upload as a new theme (**Online Store → Themes → Add theme → Upload zip**)
3. **Don't publish yet** — review the new version on the unpublished theme
4. Migrate any custom code edits manually
5. Test thoroughly, then publish

## Need help?

* Email: <contact@webexp.dev>
* Hire WEBEXP for custom work: [webexp.dev/pages/hire-us](https://webexp.dev/pages/hire-us)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webexp.dev/drift/drift-studio/advanced.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.