Overview

This guide provides general steps for customizing the location and styling of Bread Placements on your product and cart pages throughout your BigCommerce site.

🚧

These instructions are specific to the default theme files and elements that are available when creating a BigCommerce store. If you have made customizations to your theme files or code you may need to reference different files or elements.

Customizing Button Location

1. You can add the Bread Placement to the bottom of an element by using the Element Selector field in the Bread App settings, see the screenshot below for details.
   1. The default class names for product and cart pages are as follows:
      1. Product page: .productView-product
      2. Cart page: .page-content
         
2. Use the following format if referencing a descendent element: .productView-product .descendentElementID.
   1. Element ID to nest Bread button under product price on PDP: .productView-product .productView-price

Customizing Button Styling

1. Navigate to the corresponding Theme Files.
   1. From your BigCommerce Admin home page select Storefront > Themes
   2. Within the Current Theme, select Advanced > Edit Theme Files

2. Open scss file.

   1. Product page CSS file location:

      1. Navigate to _productView.scss through the following file path assets > scss > layouts > products > _productView.scss

   2. Cart page CSS file location:

      1. Navigate to _cart.scss through the following file path assets > scss > components > stencils > _component.scss

3. 🚧

   Update div class names

   The div class names for the Bread placements are different between the product and cart pages. The instructions below outline the required updates to the CSS class names.

   If updating the product page button styling, replace "page" shown in the code with "product" to create the class names bread-product-btn and bread-product-btn:hover.

   If updating the cart page button styling, replace "page" shown in the code with "cart" to create the class names bread-cart-btn and bread-cart-btn:hover.

4. Paste the CSS into the bottom of the file found in step 2 and save the theme file.

 a {
    color: white;
    line-height: inherit;
    text-decoration: underline;
}
  #bread-page-btn {
    background: #1c8195;
    font-family: var(--brand-font-family);
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #ffffff;
    width: 100%;
    height: 50px;
    max-width: 280px;
    justify-content: center;
    border: 1px solid var(--brand-color-medium);
    text-transform: uppercase;
    border-radius: 25px;
    box-shadow: 0px 5px 0px 3px rgba(78, 92, 111, 0.25);
    transition: all 0.4s ease;
  }

  #bread-page-btn:hover {
    background-color: #1d8195;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
  }