Editing Customer Account Page

[hollypie002]

Hi! Is it possible to make changes to the new Shopify format for customer accounts? For example I would like to make the logo in the left hand corner larger and stop the product images from being cut off in the order history section. Thank you!

[mt686]

Hey there! The new Shopify customer accounts template is mostly standardized, but it’s possible to customize it using custom code or Shopify Apps. Let’s break it down:

---

1. Make the Logo Larger

You can target the logo’s size using CSS. Here’s how:

Steps:1. Log in to Shopify Admin:

• Navigate to Online Store > Themes > Edit Code.

1. Find the CSS File:

   • Open theme.css or style.css under the Assets folder.

2. Add Custom CSS: Add the following code at the bottom of the file:

   css

   Copy code

   .customer-account__logo { max-width: 200px; /* Adjust as needed / height: auto; / Maintain aspect ratio */ }

3. Test Your Changes:

   • Save the file and refresh the customer account page to check if the logo size has updated.

---

2. Fix Cut-off Product Images in Order History

The product images might be cut off due to fixed dimensions or overflow settings. You can tweak this by modifying the CSS for the images in the order history section.

Steps:1. Locate the Order History Styles:

• Use your browser’s Inspect Tool to find the class used for product images in the order history section (e.g., .order-history__product-image).

1. Add Custom CSS: Add this code:

.order-history__product-image {
    width: 100px; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Prevent cropping */
}

• Test Your Changes: Save and refresh to ensure the images display correctly.

---

Advanced Customizations

If you need to make structural changes to the customer account pages (e.g., layout adjustments), you’ll need to use Shopify’s Custom Liquid for customer accounts. This requires a Shopify Plus plan or enabling custom account templates:

1. Enable Custom Templates:

   • Navigate to Settings > Customer accounts in Shopify Admin.
   • Enable custom templates if available.

2. Edit the Template:

   • Open customers/account.liquid (or similar) in the Templates folder.
   • Modify the Liquid code to adjust layouts or add custom elements.

---

Easier Option with EasyEdits

If coding feels tricky, EasyEdits can help you visually tweak layouts, including logo sizes and image display. Plus, you can use the free trial to make these changes and keep them forever.

---

Let me know if you need help finding the classes or adjusting your CSS! (P.S. I’m the developer of EasyEdits and happy to help).

[hollypie002]

Hey! Thank you so much for your response. I’m struggling to work out where the code you have written is supposed to go as I can’t find.order-history__product-image or theme.css or style.css. Not sure if I’m doing something wrong.

I tried downloading you app but the customer account page keeps coming up as undefined. I tried removing the website password too but it didn’t make a difference. Your app looks super helpful though!

Thanks again for your help!

[DaisyVo]

Hi @hollypie002

Please share the store URL

Best,

Daisy