> For the complete documentation index, see [llms.txt](https://help.smartrr.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.smartrr.com/docs/support/admin-portal/customer-account-portal-theming.md).

# Customer account portal theming

Learn all about Smartrr's theming customizations. Here you can style the account portal, hide and display cards, and subscription/order actions for customers.

Navigate to **Theming** in the left-hand menu. The page is divided into 3 columns:

* Portal Settings/Advanced tab in the 1st/left column.
* Preview of the account portal in the 2nd/middle column. At the top is a toggle to change the orientation of the preview. The default selected toggle is the mobile view. Toggling to the desktop view will expand the window and make the preview a full screen.
* The 3rd/right column includes "Override Tips" (shows the general selectors that allows overrides, and a link to a list of all CSS selectors/variables that are available in the Smartrr account portal. Also included in this column is the "CSS Overrides" which is an editor and is the only space to set overrides for them to take effect.

<figure><img src="https://3658670565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FndNAuxS4koYyI8AQTpS9%2Fuploads%2F1FfRDTvfXrQmvp6KPfei%2FScreenshot%202024-04-10%20at%2012.07.08%E2%80%AFPM.png?alt=media&amp;token=11028819-db9e-4104-b4db-1c59d90eab1a" alt="Display of the Theming page in the Smartrr admin portal, and the configurable &#x22;Portal Settings&#x22;."><figcaption></figcaption></figure>

Use **Portal Settings** to customize account portal settings for colors, borders, buttons, and images. Here you can also control the display of blocks/cards such as:

* A banner
* [Loyalty](/docs/support/admin-portal/loyalty.md) and [Trending](/docs/support/admin-portal/creator-upsells.md) (if available on your plan)
* Order History
* Settings (displays the customer's details and payment method.
* Instagram (connect your Instagram account to the account portal to showcase your posts).

Use **Advanced Settings** to edit your portal's header as well as [<mark style="color:blue;">custom functionality</mark>](https://help.smartrr.com/docs/support/admin-portal/how-can-i-set-which-actions-my-customers-can-take-on-their-subscriptions-in-their-account-portal).&#x20;

<figure><img src="https://3658670565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FndNAuxS4koYyI8AQTpS9%2Fuploads%2Fy86abovuVnFcL4Fuof3z%2FScreenshot%202024-04-10%20at%2012.07.18%E2%80%AFPM.png?alt=media&amp;token=bffa712c-7deb-48bf-ba66-3ab30d8a64f2" alt="Image of the &#x22;Advanced&#x22; settings."><figcaption></figcaption></figure>

Use the CSS overrides box to directly manipulate how your account portal looks with CSS. [<mark style="color:blue;">Read more about the available CSS variables</mark>](/docs/support/admin-portal/css-overrides.md) to reference.&#x20;

{% hint style="success" %}
**Note:** CSS overrides will not update in the in-app preview, but will update in your store's live account portal after you publish changes to your shop's theme.&#x20;

When saving, carefully select the theme that you're saving the changes to.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.smartrr.com/docs/support/admin-portal/customer-account-portal-theming.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.