Custom CSS (Advanced)

This guide explains how to safely extend the Customer Accounts Hub with your own CSS, when to use the built-in Custom CSS vs External CSS, and practical tips (inspect elements, test mobile/desktop, avoid overusing !important). It warns that this is an advanced feature meant for developers, that support can’t maintain your changes, and shows how the Smart Select tool helps capture element selectors and auto-insert starter CSS for faster editing.

Ezra Miller
6 steps
2 minutes

Run

Shopify

Please be aware. The Custom CSS section is an advanced section for developers and users familiar with code. Our support team may be able to help with minor CSS tweaks, but this would be rare and any CSS changes must be maintained by the store.

Custom CSS Overview

On top of all of the build in features that the C:Hub Customer Accounts Hub app offers, we know that some users will want to go further and add they're own styling to the customer account. This is why we've built in the 'Custom CSS' section for advanced users. To use this, simply click on the 'Custom CSS' tab on the left side of the editor.

• Use browser developer tools to inspect elements and find class names. • Custom CSS applies to the Account Page and Account Panel elements themselves, so use it for styling the actual account experience. • Use !important sparingly - it can make future changes difficult. • Test your CSS on both desktop and mobile views.

Once open, you'll see blank, dark area that you can add your custom CSS.

Below this, you'll also see the 'External CSS' section, which allows you to add custom CSS that is used only for elements outside the customer account page and Panel. It will not style the page or Panerl itself. Instead, use it for surrounding wrappers, theme sections, spacing, or other outer layout elements that affect how the account area is displayed.\ \ External CSS Tips: Use this when the element you want to style sits outside the customer account page and widget itself. This will not change buttons, cards, or blocks inside the account page/widget. Good examples are page wrappers, theme sections, spacing around the account area, or other surrounding layout elements.

Smart Select

Built into the custom CSS tab, is a 'Smart Select' button that once clicked, allows you to select blocks (or elements if you toggle off the 'Select Blocks Only' toggle) to gather their elements to made CSS changes to.

For example, if you click on the 'Smart Select' button, and select the 'My Account' heading, inside of the preview. you'll be shown the element selected in a pop-up window, and be given the option to either 'hide element' or 'add custom styling'.

Once selected, you'll then see the CSS added to the custom CSS, code block for you to work with.