> For the complete documentation index, see [llms.txt](https://docs.overse.app/hubble/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.overse.app/hubble/advanced/edit-styles-in-customer-accounts.md).

# Edit styles in Customer Accounts

Customer account pages automatically inherit your [checkout branding](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations/checkout-style), allowing you to keep a consistent experience across sign in, profile, orders, and checkout.

In this guide, you'll learn which settings apply to customer accounts and which only affect checkout.

### Access the styling settings

{% stepper %}
{% step %}

#### Open Hubble

Navigate to your Shopify Admin, click on **Apps** and select **Hubble.**
{% endstep %}

{% step %}

#### Click on Open Accounts Editor

Click on the button "**Open Accounts Editor**" located in the top right corner of the screen.

<figure><img src="/files/EHLStTHIhnsElIPLAV4t" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You can also access the Accounts Editor by navigating your Admin:

<mark style="color:$info;">**Settings**</mark> <mark style="color:$info;">></mark> <mark style="color:$info;">**Customer accounts**</mark> <mark style="color:$info;">></mark> <mark style="color:$info;">**Configurations**</mark> <mark style="color:$info;">></mark> <mark style="color:$info;">**Customize**</mark>
{% endhint %}
{% endstep %}

{% step %}

#### Go to Settings

In Shopify's Accounts editor, click on the **Settings** cog icon <i class="fa-gear-complex">:gear-complex:</i> in the sidebar to open up the styling settings panel.

<figure><img src="/files/KTxmgZr5sYfh53Ky78Ao" alt=""><figcaption></figcaption></figure>

Refer to the tables below for more details on each setting.
{% endstep %}
{% endstepper %}

### Available style options

These tables summarize what each styling option does and which pages they apply to.

#### Logo

<table><thead><tr><th width="210.20001220703125">Setting</th><th width="100" data-type="checkbox">Profile</th><th width="99.800048828125" data-type="checkbox">Orders</th><th width="129.99993896484375" data-type="checkbox">Order Status</th><th width="99.80010986328125" data-type="checkbox">Sign in</th><th width="110" data-type="checkbox">Checkout</th><th>Notes</th></tr></thead><tbody><tr><td>Image</td><td>true</td><td>true</td><td>true</td><td>true</td><td>true</td><td>The logo that appears in account and checkout.</td></tr><tr><td>Width</td><td>false</td><td>false</td><td>false</td><td>false</td><td>true</td><td>Adjust the displayed width of your logo.</td></tr><tr><td>Alignment</td><td>false</td><td>false</td><td>false</td><td>false</td><td>true</td><td>Control how the logo is aligned.</td></tr></tbody></table>

#### **Color palette**

A color palette is a saved set of brand colors.

You can reuse it across other settings to keep headers, buttons, fields, and other elements consistent.

#### **Main**

<table><thead><tr><th width="210.199951171875">Setting</th><th width="99.800048828125" data-type="checkbox">Profile</th><th width="99.99993896484375" data-type="checkbox">Orders</th><th width="130.4000244140625" data-type="checkbox">Order Status</th><th width="100" data-type="checkbox">Sign in</th><th width="111.39990234375" data-type="checkbox">Checkout</th><th>Notes</th></tr></thead><tbody><tr><td>Background</td><td>false</td><td>false</td><td>false</td><td>false</td><td>true</td><td>The background for the checkout form.</td></tr></tbody></table>

#### **Header**

Applies to full width headers in checkout and customer accounts.

<table><thead><tr><th width="210.20001220703125">Setting</th><th width="100" data-type="checkbox">Profile</th><th width="99.800048828125" data-type="checkbox">Orders</th><th width="129.99993896484375" data-type="checkbox">Order Status</th><th width="99.80010986328125" data-type="checkbox">Sign in</th><th width="110" data-type="checkbox">Checkout</th><th>Notes</th></tr></thead><tbody><tr><td>Background</td><td>false</td><td>false</td><td>false</td><td>false</td><td>true</td><td>The background of the full-width header.</td></tr><tr><td>Accent</td><td>false</td><td>false</td><td>false</td><td>false</td><td>true</td><td>The accent text color of the full-width header.</td></tr></tbody></table>

#### **Order Summary**

Edit order summary on the checkout page.

<table><thead><tr><th width="210.199951171875">Setting</th><th width="100.20001220703125" data-type="checkbox">Profile</th><th width="100.20001220703125" data-type="checkbox">Orders</th><th width="130.4000244140625" data-type="checkbox">Order Status</th><th width="99.99993896484375" data-type="checkbox">Sign in</th><th width="111" data-type="checkbox">Checkout</th><th>Notes</th></tr></thead><tbody><tr><td>Background</td><td>false</td><td>false</td><td>false</td><td>false</td><td>true</td><td>The background color of the summary.</td></tr><tr><td>Accent</td><td>false</td><td>false</td><td>false</td><td>false</td><td>true</td><td>The accent text color of the summary.</td></tr><tr><td>Image</td><td>false</td><td>false</td><td>false</td><td>false</td><td>true</td><td>The background image of the summary.</td></tr></tbody></table>

#### **Accent and buttons**

Colors for links, selections, and buttons

<table><thead><tr><th width="210.20001220703125">Setting</th><th width="99.79998779296875" data-type="checkbox">Profile</th><th width="100.00006103515625" data-type="checkbox">Orders</th><th width="130.4000244140625" data-type="checkbox">Order Status</th><th width="100" data-type="checkbox">Sign in</th><th width="112.199951171875" data-type="checkbox">Checkout</th><th>Notes</th></tr></thead><tbody><tr><td>Accent</td><td>true</td><td>true</td><td>true</td><td>true</td><td>true</td><td>Controls color of links, icons, and accent text.</td></tr><tr><td>Buttons</td><td>true</td><td>true</td><td>true</td><td>true</td><td>true</td><td>Sets the base color for all button styles.</td></tr></tbody></table>

#### **Input fields**

<table><thead><tr><th width="210.20001220703125">Setting</th><th width="99.79998779296875" data-type="checkbox">Profile</th><th width="100.00006103515625" data-type="checkbox">Orders</th><th width="130.4000244140625" data-type="checkbox">Order Status</th><th width="100" data-type="checkbox">Sign in</th><th width="112.199951171875" data-type="checkbox">Checkout</th><th>Notes</th></tr></thead><tbody><tr><td>Error</td><td>true</td><td>true</td><td>true</td><td>true</td><td>true</td><td>Controls appearance of error text and banners.</td></tr><tr><td>Transparent</td><td>true</td><td>true</td><td>true</td><td>true</td><td>true</td><td>Controls transparency of form fields.</td></tr></tbody></table>

#### **Typography**

<table><thead><tr><th width="210.20001220703125">Setting</th><th width="99.99993896484375" data-type="checkbox">Orders</th><th width="99.79998779296875" data-type="checkbox">Profile</th><th width="130.4000244140625" data-type="checkbox">Order Status</th><th width="100" data-type="checkbox">Sign in</th><th width="110.60009765625" data-type="checkbox">Checkout</th><th>Notes</th></tr></thead><tbody><tr><td>Headings</td><td>true</td><td>true</td><td>true</td><td>true</td><td>true</td><td>Controls the font family used for headings.</td></tr><tr><td>Body</td><td>true</td><td>true</td><td>true</td><td>true</td><td>true</td><td>Controls the font family used for body text.</td></tr></tbody></table>

#### **Other Settings**

<table><thead><tr><th width="210.20001220703125">Setting</th><th width="99.79998779296875" data-type="checkbox">Profile</th><th width="130.4000244140625" data-type="checkbox">Order Status</th><th width="100" data-type="checkbox">Orders</th><th width="100" data-type="checkbox">Sign in</th><th width="110.5999755859375" data-type="checkbox">Checkout</th><th>Notes</th></tr></thead><tbody><tr><td>Checkout layout</td><td>false</td><td>false</td><td>false</td><td>false</td><td>true</td><td>Controls the overall layout of checkout.</td></tr><tr><td>Address autocompletion</td><td>true</td><td>false</td><td>false</td><td>false</td><td>false</td><td>Applies when customers edit addresses on the Profile page.</td></tr><tr><td>Buy again button</td><td>false</td><td>true</td><td>true</td><td>false</td><td>false</td><td>Displays a Buy again button on the Orders and Order Status pages.</td></tr></tbody></table>

{% hint style="success" icon="trophy" %}
Looking for more advanced customization? [Custom blocks](/hubble/block-types/custom.md) give you greater control over layout, styling, and content across your customer account pages.
{% endhint %}