Streamlining Site Performance – Optimizing Code and Cleanup for Imprint Plus

To address challenges faced by Imprint Plus regarding their ability to update content and maintain their website
Perform website code cleanup to resolve conflicts and remove outdated code
Identify custom CSS styles overriding pagebuilder defaults

Improved frontend responsive layouts including tablet and mobile devices
Enhanced capability for managing and updating content on website
Optimized CSS for efficient application of future code updates

“Increasing our website speed and compatibility were at the top of the list for our Adobe Commerce site. We had a complicated version upgrade ahead of us with many customizations to consider. Brain & Code’s team got to work assessing the functionality and each extension on our site. Their expertise runs deep and it shines through when speaking to them about each decision that needs to get made. They genuinely cared about the site and us as a customer. Brain & Code managed to pull off the project on time and on budget. Thank you yet again Brain & Code team!"

imprint-plus-2022-b2b-adobe-commerce-development

ANDREW ROZDALE - ECOMMERCE MANAGER

Project Highlights

While addressing CSS and Pagebuilder conflicts, Brain & Code successfully cleaned up the CSS code, eliminating conflicts and outdated elements resulting in improved site maintenance and functionality for the Imprint Plus ecommerce website.

Imprint Plus encountered technical challenges when the custom code on their website conflicted with configurations made with the backend Page Builder tool of the Adobe Commerce system. As a result, they were unable to take advantage of the user-friendly editor to keep their website content current. Seeking a solution, they sought assistance from Brain & Code’s expert team to address and resolve these conflicts.

To resolve the issues, Brain & Code undertook an extensive code cleanup project which included the following:

Code Audit: Conducted a comprehensive examination of the code to identify underlying problems
Code Refactoring: Restructured the code and enhanced the CSS to improve functionality and visual aesthetics
Launch & Maintenance: Successfully implemented the updates and provided ongoing support for maintenance.

Through code optimization and the removal of content editor overrides, Imprint Plus regained full utilization of their Adobe Commerce website editor, enabling them to keep their content up-to-date.

Continue reading to learn more about the technical audit findings and solutions implemented by our team. The updated website can be accessed at www.imprintplus.com.

Key Results & Highlights

Brain & Code resolved custom CSS styles overriding Pagebuilder default styles by identifying, updating code, and archiving all affected custom styles.

Code Audit: Identifying Issues and Enhancing Code Quality

A comprehensive review of the CSS styles was conducted to identify areas requiring updates and new templates. This helped to gain a clear understanding of the website’s current state and determine the necessary steps for improvement. The audit revealed the following areas that needed attention:

Identify and remove overriding code: Identify any custom style files that are affecting the Pagebuilder and remove any code that overrides the default styles
Recreate templates: Update page layouts and make necessary modifications to the templates, incorporating Pagebuilder styles and apply them to the pages using updated templates
Organize reusable blocks: Create a dedicated style file to organize classes for reusable blocks
Utilize Pagebuilder configuration: Utilize the Pagebuilder configuration for elements that are not frequently used

Address unused style parts: Separate unused style parts into specific files for individual pages
Refactor for reuse and consistency: Refactor and optimize the theme’s style to ensure it can be reused consistently throughout the website
Remove overrides from the Blank parent theme: Remove any overrides made to the Blank parent theme and optimize them to align with the structure of the Adobe Commerce Blank theme

Code Refactoring: Streamlining and Optimizing Code

Brain & Code performed a throrough CSS code cleanup to enhance performance and maintainability, with the following outcomes:

Revamped Pagebuilder templates: Recreated the templates based on the original designs while incorporating necessary adjustments for future maintenance
Eliminated Pagebuilder conflicts: Resolved any code conflicting with Pagebuilder’s default style
Developed new templates: Set up 8 new page templates to replace problematic templates, including homepage, product listing page, product detail page, industry page, and more
Implemented styles: Applied styles to pages based on the new Pagebuilder templates or attributes that do not impact default element styles
Theme optimization: Refactored and optimized the theme’s CSS writing style to enhance style reusability across different areas, such as CMS blocks

Removed unused styles: Eliminated previously written styles that were specific to certain pages like products, categories, and content pages in the blank theme.
Improved style structure: Rewrote and optimized styles in alignment with the structure of the parent theme, Adobe Commerce blank theme
Enhanced frontend layouts: Improved the responsiveness of the frontend layouts, ensuring they work well on various devices, including tablets and mobile devices

Post-Cleanup and Maintenance: Ensuring Code Integrity and Performance

As Imprint Plus applies site updates and adopts the new style set ups, Brain & Code continues to provide maintenance support to resolve issues that may arise from the removal of outdated styles and implementation of new templates.

A user guide was also provided with comprehensive information including:

Step-by-step instructions on how to apply classes to CMS pages
A list of the newly created classes for easy reference
Guidance and tips for creating pages using templates

This guidance and support enable the Imprint Plus team to independently manage and create pages to ensure full project ownership.

Conclusion

Imprint Plus faced challenges with their website due to CSS conflicts and backend overrides, making content updates difficult. Brain & Code successfully resolved these conflicts, tidied up the CSS code, and enhanced the website’s performance.

By successfully completing the code clean up, a strong CSS foundation was established for the website resulting in improved function and easier maintenance.

Additionally, continuous support and user guide was provided, empowering Imprint Plus to manage their content pages independently.

Ready to take your ecommerce business to the next level?

Contact Brain & Code today  to discuss how our expert Adobe Commerce website maintenance services can help you achieve your goals.

Established in 2021, Brain & Code is an eCommerce agency focused on creating digital experiences for brands to sell direct effectively and efficiently to consumers and businesses. We use best-of-breed scalable eCommerce platforms such as Adobe Commerce to bring businesses online to find customers, drive sales and manage day-to-day eCommerce operations. Brain & Code is an Adobe Solution Bronze Partner with a team that holds ten Adobe/Magento certifications and in-depth knowledge of the Canadian and U.S. commerce markets and their specific needs for eCommerce solutions and development processes.

Get a Free Consultation

Moneca Looui

With over 15 years of project management experience, Moneca Looui specializes in web and ecommerce development. With a keen eye for detail, she thrives on the challenges that arise in managing complex projects. Her expertise lies in overseeing the entire development lifecycle, ensuring that every aspect is executed flawlessly to deliver outstanding results for our clients. Moneca has worked with clients of all sizes and platforms, including Adobe Commerce, Magento Open Source, Shopify, WordPress, and Sitefinity.