> 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

Learn how to customize the look and feel of your customer account pages using Shopify's customer accounts and checkout styling settings.

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="https://252181162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgNjbkcqEVwk7mzEfZieR%2Fuploads%2FsfmB13gC21agaNES5YP4%2Fimage.png?alt=media&amp;token=eb6f0443-2e23-4027-bcf6-b192e324c679" 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="https://252181162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgNjbkcqEVwk7mzEfZieR%2Fuploads%2F56QupZMAodvomnJtQpVw%2Fimage.png?alt=media&amp;token=989888df-7499-4b2d-9fdd-f1b74644b8c8" 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 %}