# 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;">></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="/files/JKJtM6HOX3JezgLTNj6R" 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](/hubble/block-types/custom.md) give you greater control over layout, styling, and content across your customer account pages.
{% endhint %}


---

# Agent Instructions: 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:

```
GET https://docs.overse.app/hubble/advanced/edit-styles-in-customer-accounts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.