# Add custom code to your page

Add custom CSS and JavaScript directly to your Foxify pages — for advanced styling and effects beyond what the editor provides.

<Hint type="info">

**For developers only:** Custom code requires working knowledge of CSS and JavaScript. If you're not familiar with these, avoid using this feature — incorrect code can break your page layout or functionality. Custom code is outside the scope of Foxify support.

</Hint>

## What you can do

<Cards columns="2">
<Card title="Custom CSS">

<strong>Style overrides</strong>

</Card>
<Card title="Custom JS">

<strong>Behavior &#x26; integrations</strong>

</Card>
</Cards>

<Hint type="info">

**Scope:** Custom code applies to all pages using the same template — not just the current page. If you only want to affect one page, make sure it uses a unique template.

</Hint>

## How to add Custom codes

![image](https://docs-assets.foxecom.app/foxify-app/image_pfNLDWtI.png)

<Stepper>

<Step>

#### Open Custom code

In the left sidebar, click **\</> Custom code** — or press <kbd>C</kbd> on your keyboard.

</Step>

<Step>

#### Add your code

Paste your CSS into the **Custom CSS** box and/or your JavaScript into the **Custom JS** box.

</Step>

<Step>

#### Save and publish

Click **Save** to store your code without pushing changes to the live page yet.&#x20;

Once you're happy, click **Publish** to apply the custom code to your live Shopify page.

</Step>

</Stepper>

## Related resources

<PageLink href="https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/inspector-panel">Inspector panel</PageLink>

<PageLink href="https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements">Add and edit elements</PageLink>

***