> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/drift-shopify-theme/drift-studio/advanced.md).

# Advanced

Custom code edits, integrations, and performance tips for DRIFT Studio.

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)