# 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="https://252181162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgNjbkcqEVwk7mzEfZieR%2Fuploads%2FsfmB13gC21agaNES5YP4%2Fimage.png?alt=media&#x26;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;">></mark> <mark style="color:$info;"></mark><mark style="color:$info;">**Customer accounts**</mark> <mark style="color:$info;"></mark><mark style="color:$info;">></mark> <mark style="color:$info;"></mark><mark style="color:$info;">**Configurations**</mark> <mark style="color:$info;"></mark><mark style="color:$info;">></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%2FsT6alo2AkXhfnokRtejR%2Fimage.png?alt=media&#x26;token=ec20e24b-8cb2-4414-b9f7-c690e8d009d1" 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.

#### **Header**

<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>Logo</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>Logo 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>Logo 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><tr><td>Logo position</td><td>false</td><td>false</td><td>false</td><td>false</td><td>true</td><td>Change the position of the logo within checkout.</td></tr></tbody></table>

**Checkout Footer**

<table><thead><tr><th width="210.2000732421875">Setting</th><th width="100.20001220703125" data-type="checkbox">Profile</th><th width="99.79998779296875" data-type="checkbox">Orders</th><th width="130" 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>Footer alignment</td><td>false</td><td>false</td><td>false</td><td>false</td><td>true</td><td>Control how footer content is aligned.</td></tr><tr><td>Footer position</td><td>false</td><td>false</td><td>false</td><td>false</td><td>true</td><td>Change where the footer appears within checkout.</td></tr></tbody></table>

**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>Color</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>

**Order Summary**

<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 image</td><td>true</td><td>true</td><td>true</td><td>true</td><td>true</td><td>Used on Sign in, Profile, Orders, Order Status, and the checkout Order Summary section.</td></tr><tr><td>Background color</td><td>true</td><td>true</td><td>true</td><td>true</td><td>true</td><td>Applies a background color to the same areas as the background image setting.</td></tr></tbody></table>

**Colors**

<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 the 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><tr><td>Error</td><td>true</td><td>true</td><td>true</td><td>true</td><td>true</td><td>Controls the appearance of error text and banners.</td></tr><tr><td>Fields and cards</td><td>true</td><td>true</td><td>true</td><td>true</td><td>true</td><td>Changes the background color of form fields and product cards.</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](https://docs.overse.app/hubble/block-types/custom) give you greater control over layout, styling, and content across your customer account pages.
{% endhint %}