Customize classic customer account

Store Design
, , , , , ,
1

Hey, I’d appreciate assistance on how to make the login pages accent color only white and black. And make all text capitalized and bold and my pages default font. the url is www.tra1t.com/account.

2

Hello @dvaughn

There are two methods for adding custom CSS to your Dawn theme (Default base theme):

Method 1: Using the Customize Option

This is a quick and easy way to add small CSS tweaks. Here’s how:

  1. Navigate to your Shopify admin panel.

  2. Go to “Online Store” > “Themes.”

  3. Find your Dawn theme and click “Customize.”

  4. You can add your custom CSS in the dedicated section provided by the theme (see screenshot: https://prnt.sc/UT2IlZUi2K6z).

Method 2: Using main-login.liquid and base.css

This method offers more control for complex customizations. Here’s what you’ll do:

  1. In your Shopify admin, navigate to “Online Store” > “Themes.”
  2. Find your Dawn theme and click “Actions” > “Edit Code.”
  3. Locate the sections/main-login.liquid file and add a custom class (e.g., “my-custom-login”).
  4. Go to the assets/base.css file and target your custom class with your desired CSS styles.

For reference:

Screenshot of the Customize option: (Screenshot https://prnt.sc/UT2IlZUi2K6z)
Screenshot of main-login.liquid file location: (Screenshot https://prnt.sc/XQE4FLIH95JC)
Screenshot of base.css file location: [Screenshot https://prnt.sc/AqC0NLuyvR7J)

Choosing the Right Method:

Use Method 1 for minor adjustments like color changes or font tweaks.
Use Method 2 for more extensive styling changes or targeting specific elements.

3

None of these worked, I’m not using dawn. Im using a theme pack. My site is ‘www.tra1t.com’ the accounts page is ‘www.tra1t.com/account’ I’d appreciate assistance on how to change the accounts page from what it currently is to

  • Black and white accent color only

  • Archivo narrow bold font

  • All capital letter

dvaughn_0-1724244707921.png
dvaughn_0-1724244707921.png1917×872 24.2 KB

4

As a beginner, I’d appreciate you to be a bit more specific. Where to I insert this code? I’ve tried this in ‘main.css’ didn’t work.

5

Hello @dvaughn

I recently tried to access your online store but encountered a password protection barrier.

While I wasn’t able to access the store at this time, I wanted to reach out with some information that might be helpful regarding CSS customization.

CSS Customization in Shopify Themes

If you’re experiencing issues with CSS styles not working as expected in your main.css file, there are a couple of ways to address them:

  1. Small Changes: If the fix is a minor adjustment, you can often include it directly within your theme.liquid file before the closing </head> tag, using a <style> tag.

  2. Separate CSS File: For more extensive changes, creating a dedicated CSS file is a better practice. Here’s how to do this:

  • Go to your Shopify admin panel > Online Store > Themes > Actions > Edit code.
  • Navigate to the Assets folder, click “Add a new asset,” and select “Create a blank file.” Name it something descriptive like “custom.css”.
  • Add your custom CSS to this new file.
  • To link this new CSS file to your theme, go to the Layout folder and open the theme.liquid file.
  • Within the <head> section, add the following Liquid code, replacing “custom.css” with your actual file name:
{{ 'custom.css' | asset_url | stylesheet_tag }}

Screenshot: https://prnt.sc/vINB5rnZeRxY

Shopify Theme Architecture Resources

If you’d like to learn more about Shopify theme architecture and CSS customization options, Shopify provides excellent documentation here:

https://shopify.dev/docs/storefronts/themes/architecture

I hope this information proves useful. Please let me know if you have any questions or if there’s anything else I can assist with. If helpful then please Like and Accept Solution.