One of the standout features of the Autoaddress plugin is its support for custom CSS styling. This means you can fully customize the appearance of the address capture fields and other UI components to align with your store's branding and design standards. Whether you want to match your color scheme, adjust fonts, or modify layout elements, the plugin gives you the freedom to make it your own.

This guide will walk you through leveraging custom CSS styling for a tailored and professional look. Let's get started!

To implement custom CSS styling changes to the Autoaddress plugin, you must have the appropriate access permissions to edit your BigCommerce theme files.

It is important to create a copy of your theme and install it on your store before making any updates. This ensures that the original theme remains intact and can serve as a backup if needed.

In order to edit the theme files of your BigCommerce store:

1. Navigate to the Theme Editor

   • Go to Storefront → Themes in your BigCommerce admin panel.

   • Click on Advanced and select Edit Theme File.

     

2. Access the CSS File

   • The theme files will open in a browser-based code editor.

   • Locate the optimised-checkout.scss file or its equivalent, depending on your theme.

3. Add Custom CSS

   • Add your custom CSS styling to the appropriate section of the file.

   • To ensure your styles override existing ones, include the !important tag where necessary.

   Example:

   #autoaddress-manual-enter {
       background-color: #a9b9c9 !important;
       border-radius: 0px !important;
   }
   
   #autoaddress-list-container {
      border-radius: 0px !important;
   }

   This style will update the appearance of the "Enter your address manually" button to have a blue background and sharp right-angle borders.

4. Save and Apply Changes

   • Save your changes in the theme editor.

   • Refresh your storefront to verify that the new styles have been applied correctly.
     

     

The Autoaddress extension elements can be customized with the following CSS selectors. Use these examples as a starting point to tailor the extension's elements to fit your store's design.

/** Autoaddress address suggestion list */
#autoaddress-list-container {
  box-shadow: none;
  border-radius: 0;
  border: 1px solid #cbd5e1;
}
 
#autoaddress-list {
  border-radius: 0;
}
 
/** Autoaddress individual address suggestion*/
#autoaddress-list li {
  padding: 8px 16px;
  border: none;
  border-bottom: 1px solid #cbd5e1;
}
#autoaddress-list li:hover {
  background-color: #DCA6EC;
}

/** Autoaddress address suggestion bolded main text */
.autoaddress-dropdown-item-text .bold-addressline { 
    font-family: inherit; 
    font-size: inherit; 
} 

/** Autoaddress address suggestion supplementary address text */
.autoaddress-dropdown-item-text .addressline { 
    font-size: inherit; 
}
 
/** Autoaddress enter address manually button */
#autoaddress-manual-enter {
  font-style: normal;
  font-weight: 600;
  background-color: #CE5EED;
  color: #334155;
  border-radius: 0;
}