All Collections
The Buyer Portal Experience - New!
Using Class and Location Selectors With Buyer Portal Buttons
Using Class and Location Selectors With Buyer Portal Buttons

Use the Buyer Portal Settings to refine button placement and styles on your storefront.

Kenzie avatar
Written by Kenzie
Updated over a week ago

The Buyer Portal is theme agnostic, meaning you can use any theme with B2B Edition.

We now inject the quote and shopping list buttons into the storefront via script. If you are using Cornerstone, these buttons will inject automatically into the proper location and class on your storefront. If you are using another/custom theme, you may need to input the location, class, or custom CSS to the button to ensure proper placement and styling.

You can access the selector inputs in settings > quotes and settings > shopping lists, respectively.

Using one of our 6 original B2B Themes?

Cornerstone, Camden, Vault, Supermarket, Seville 22, or Roots?

Skip ahead to see our recommended button settings.

Want full control of buttons used on the storefront? Working on a custom workflow?

You can hardcode these buttons anywhere on your site! All you need to do is call our new button functions! Read more about hard coding buttons here.

Location Selector

The Location selector dictates where the button appears on your storefront.

Let's start with an example. This is where the add to quote button is populating on Camden Theme. This placement is not ideal, so we will need to tell the Buyer Portal where to put it.

How to find the selector:

  1. Open up a PDP page on your BigCommerce storefront.

  2. Right-click and inspect the "Add to Cart Button"

  3. Find the proper location. You would typically use either the first div structure or its parent. You may need to try both to see which one is best suited for your theme:

4. Right-click the one you want to use, and select Copy > Copy Selector.

How to add the Selector to the Buyer Portal:

  1. Copy the selector into the desired Button Location selector. In this case, we will add it to the add to quote button inside settings > quotes.

  2. Save the changes.

  3. View changes on the storefront. Be sure to clear your cache to see the changes. You can do this by selecting shift + browser refresh.

New Button Placement with #add-to-cart-wrapper Location Selector:

We will further refine the button placement with CSS in the custom CSS box.

Class Selector (optional)

The class selector allows the new button to inherit the style of the Add to Cart Button.

Mileage may vary depending on the theme and how it is structured. On some themes, you will be able to inherit all styles, on other themes, it will be minimal. Not to worry, though, you can add whatever styles you like in the Custom CSS box. See below for more details.

You can also target or set this class in your CSS style sheet for improved results and further flexibility.

Styling of the add to quote button without a class selector:

How to Find the Add To Cart Class Selector:

  1. Open up a PDP page on your BigCommerce storefront.

  2. Right-click and inspect the "Add to Cart Button"

  3. Locate the class of the button.

  4. In this case, the class of the add to cart button is "button button--primary"

How to add the selector to the Buyer Portal:

  1. Copy the selector into the desired Button Location selector. In this case, we will add this to the add to quote button inside settings > quotes.

  2. Save the changes.

  3. View changes on the storefront. Be sure to clear your cache to see the changes. You can do this by selecting Shift + browser refresh.

Styling of the add to quote button with the new class selector:

In this case we will need to add custom CSS to get this button styled just right!

Custom CSS

To further refine, we can add custom CSS onto the button using the Custom CSS Box.

Pro Tip: The Custom CSS box will override the button class styling.

How to locate the CSS needed to match the Add to Cart Button:

  1. Open up a PDP page on your BigCommerce storefront.

  2. Right-click and inspect the "Add to Cart Button"

  3. Locate the Add to Cart Button Styles in the inspector.

  4. Pro Tip: You can use the checkbox next to each style to help determine its effects. If a style is crossed out, then that style is not currently applied to the button.

How to add Custom CSS to the Buyer Portal:

  1. Copy or write each CSS style you want to apply to the button.

  2. Save the changes.

  3. View changes on the storefront. Be sure to clear your cache to see the changes. You can do this by selecting Shift + browser refresh.

Pro Tip: If a style not overriding or populating, try adding "!important"

Example: width: 100% !important;

Button with Custom CSS Styling Added:

CSS Added:

width: 100%;

font-weight: 600;

border-style: solid;

border-width: 1px;

cursor: pointer;

font-family: "system-ui",Arial,Helvetica,sans-serif;

margin: 0 0 1rem;

position: relative;

text-align: center;

display: inline-block;

font-size: 1rem;

padding: 0.85714rem 2.28571rem;

border-radius: 4px;

outline: 0;

vertical-align: middle;

font-weight: 600;

margin-top: 10px;

If your theme is using media queries, then button sizing will vary as the screen size is reduced and expanded. Adding media queries to the custom css box will be supported in the next 2-4 weeks for optimal placement.

Pro Tip: Copy the add-to-quote css styles into the shopping list custom css box.

Recommended B2B Themes Button Settings

Coming Soon!

Did this answer your question?