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.
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:
Open up a PDP page on your BigCommerce storefront.
Right-click and inspect the "Add to Cart Button"
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:
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.
Save the changes.
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:
Open up a PDP page on your BigCommerce storefront.
Right-click and inspect the "Add to Cart Button"
Locate the class of the button.
In this case, the class of the add to cart button is "button button--primary"
How to add the selector to the Buyer Portal:
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.
Save the changes.
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:
Open up a PDP page on your BigCommerce storefront.
Right-click and inspect the "Add to Cart Button"
Locate the Add to Cart Button Styles in the inspector.
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:
Copy or write each CSS style you want to apply to the button.
Save the changes.
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. Media queries can be used in these formats:
@media (max-width: 550px) {
width: 100%;
and
@media (min-width: 501px) and (max-width: 801px) {
width: 50%;
}
Pro Tip: Copy the add-to-quote css styles into the shopping list custom css box.
Suggested B2B Themes Button Settings
We do our best to keep these suggestions updated. You may need to make additional adjustments to these inputs due to theme modifications or updates.
Cornerstone
On the base version of Cornerstone, no changes are required! This theme works out of the box!
Vault
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
border-radius: 25px;
padding: 0.85714rem 2.28571rem;
font-size: 1rem;
font-family: Poppins,Arial,Helvetica,sans-serif;
font-weight: 600;
Add to Quote Button
Custom CSS
border-radius: 25px;
@media (max-width: 1261px) {
width: 100%
}
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Cart to Quote Button
Custom CSS
@media (max-width: 550px) {
width: 100%;
margin-right: 0px;
margin-top: 10px;
}
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
border-radius: 25px;
@media (max-width: 1261px) {
width: 100%
}
Class Name
NA - leave blank
Location Selector
NA - leave blank
Roots
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
font-family: "Roboto Condensed";
text-transform: uppercase;
font-weight: 700;
font-size: 15px;
border-radius: 2px;
border-radius: 0px;
Add to Quote Button
Custom CSS
margin-left: 0px;
margin-bottom: 12px;
@media (max-width: 800px) {
width: 100%
}
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Cart to Quote Button
Custom CSS
@media (max-width: 550px) {
width:100%;
margin-right: 0px;
margin-top: 10px;
}
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
@media (max-width: 800px) {
width: 100%
}
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Super Market
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
font-family: Roboto,Arial,Helvetica,sans-serif;
font-weight: 700;
font-size: 1rem;
border-radius: 4px;
padding: 1.5rem 3rem;
Add to Quote Button
Custom CSS
margin-left: 0px;
Class Name
NA - leave blank
Location Selector
NA - leave blank
Cart to Quote Button
Custom CSS
width: 100%;
margin-top: 10px;
margin-left: 0px;
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
margin-left: 0px;
Class Name
NA - leave blank
Location Selector
NA - leave blank
22 Saville
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
font-family: "Libre Baskerville",Arial,Helvetica,sans-serif;
font-weight: 400;
padding-left: 1.5rem;
text-transform: capitalize;
padding: 1.5rem 2rem;
Add to Quote Button
Custom CSS
font-family: "Libre Baskerville",Arial,Helvetica,sans-serif;
font-weight: 400;
margin-top: 0px;
@media (max-width: 800px) {
width: 100%
}
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Cart to Quote Button
Custom CSS
font-family: "Libre Baskerville",Arial,Helvetica,sans-serif;
font-weight: 400;
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
font-family: "Libre Baskerville",Arial,Helvetica,sans-serif;
font-weight: 400;
@media (max-width: 800px) {
width: 100%
}
Class Name
NA - leave blank
Location Selector
NA - leave blank
Camden
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
font-weight: 800;
font-family: "system-ui",Arial,Helvetica,sans-serif;
border-radius: 4px;
text-transform: capitalize;
padding: 1.5rem 2rem;
Add to Quote Button
Custom CSS
width: 100%;
margin-top: 5px;
@media (min-width: 501px) and (max-width: 801px) {
width: 49%;
}
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Cart to Quote Button
Custom CSS
NA - leave blank
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
width: 100%;
margin-top: 5px;
@media (min-width: 501px) and (max-width: 801px) {
width: 50%;
}
Class Name
NA - leave blank
Location Selector
NA - leave blank
Lifestyle
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
padding: 1.5rem 2rem;
border-radius: 0;
font-size: 16px;
letter-spacing: .1px;
font-family: Rubik,Arial,Helvetica,sans-serif;
Add to Quote Button
Custom CSS
margin-top: 15px;
border-radius: 0;
font-size: 16px;
letter-spacing: .1px;
font-family: Rubik,Arial,Helvetica,sans-serif;
Class Name
NA - leave blank
Location Selector
body > div.body > div.container > div > div.productView > section:nth-child(3) > div
Cart to Quote Button
Custom CSS
border-radius: 0;
padding-top: 14px;
padding-bottom: 14px;
padding-right: 11px;
padding-left: 11px;
@media (max-width: 550px) {
width: 100%;
margin-right: 0px;
margin-top: 5px;
font-size: 14px;
}
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
margin-top: 15px;
border-radius: 0;
font-size: 16px;
letter-spacing: .1px;
font-family: Rubik,Arial,Helvetica,sans-serif;
Class Name
NA - leave blank
Location Selector
body > div.body > div.container > div > div.productView > section:nth-child(3) > div
Fortune
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
font-family: Karla;
font-size: 14px;
font-weight: 400;
letter-spacing: .1em;
padding: 1rem 2rem;
text-transform: capitalize;
border-radius: 3px;
Add to Quote Button
Custom CSS
margin-left: 0px;
margin-top: 5px;
width: 240px;
font-family: Karla;
font-size: 14px;
font-weight: 400;
letter-spacing: .1em;
padding-top: .6rem;
padding-bottom: .6rem;
border-radius: 3px;
Class Name
NA - leave blank
Location Selector
body > main > div.container.product-container.product-area > div > div.single-product-left > form > div.product-add-to-cart
Cart to Quote Button
Custom CSS
font-family: Karla;
font-size: 14px;
font-weight: 400;
letter-spacing: .1em;
padding-top: .6rem;
padding-bottom: .7rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 3px;
float: left;
Class Name
NA - leave blank
Location Selector
body > main > div.cart-container.layout-module > div.cart-sidebar > div:nth-child(2)
Add to Shopping List Button
Custom CSS
margin-left: 0px;
margin-top: 5px;
width: 240px;
padding-top: .6rem;
padding-bottom: .6rem;
font-family: Karla;
font-size: 14px;
font-weight: 400;
letter-spacing: .1em;
Class Name
NA - leave blank
Location Selector
body > main > div.container.product-container.product-area > div > div.single-product-left > form > div.product-add-to-cart
Parts Warehouse
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
font-family: "Roboto Condensed",Arial,Helvetica,sans-serif;
font-weight: 700;
border-radius: 0px;
padding: 10px 25px;
Add to Quote Button
Custom CSS
width: 100%;
font-family: "Roboto Condensed",Arial,Helvetica,sans-serif;
font-weight: 700;
margin-left: 0px;
border-bottom: 3px solid;
border-color: #000000;
border-radius: 0px;
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Cart to Quote Button
Custom CSS
width: 160px;
font-family: "Roboto Condensed",Arial,Helvetica,sans-serif;
font-weight: 700;
margin-left: 0px;
border-bottom: 3px solid;
border-color: #000000;
border-radius: 0px;
padding: 12px 20px;
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
width: 100%;
font-family: "Roboto Condensed",Arial,Helvetica,sans-serif;
font-weight: 700;
border-bottom: 3px solid;
border-color: #000000;
border-radius: 0px;
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Elevate
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
font-size: 14px;
font-weight: 700;
font-family: Montserrat;
text-transform: uppercase;
border-radius: 50px;
padding: 14px 20px;
Add to Quote Button
Custom CSS
font-size: 14px;
font-weight: 700;
font-family: Montserrat;
text-transform: uppercase;
border-radius: 50px;
padding: 14px 20px;
@media (min-width: 1030px) and (max-width: 1230px) {
width: 100%;
margin-left: 0px;
}
Class Name
NA - leave blank
Location Selector
body > div.body > div.container > div > div.productView > section:nth-child(3) > div.productView-options > form > div.product-purchase-section
Cart to Quote Button
Custom CSS
font-size: 14px;
font-weight: 700;
font-family: Montserrat;
text-transform: uppercase;
border-radius: 50px;
margin-bottom: 0px;
padding: 10px 20px;
@media (min-width: 765px) {
margin-right: 5px !important;
}
@media (min-width: 551px) and (max-width: 764px) {
margin-top: 5px !important;
}
@media (max-width: 550px) {
margin-top: 5px;
width: 100%;
margin-right: 0px;
}
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
font-size: 14px;
font-weight: 700;
font-family: Montserrat;
text-transform: uppercase;
border-radius: 50px;
padding: 14px 20px;
@media (min-width: 1231px) {
margin-top: 10px;
margin-left: 5px;
}
@media (min-width: 1030px) and (max-width: 1230px) {
width: 100%;
margin-left: 0px;
margin-top: 10px;
}
@media (max-width: 1029px) {
margin-top: 10px;
margin-left: 5px;
}
Class Name
NA - leave blank
Location Selector
body > div.body > div.container > div > div.productView > section:nth-child(3) > div.productView-options > form > div.product-purchase-section
Chiara
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
font-family: "Open Sans",Arial,Helvetica,sans-serif;
font-weight: 500;
padding: 1.5rem 3rem;
Add to Quote Button
Custom CSS
NA - leave blank
Class Name
NA - leave blank
Location Selector
NA - leave blank
Cart to Quote Button
Custom CSS
width: 100%;
margin-left: 0px;
@media (max-width: 550px) {
margin-right: 0px;
margin-top: 5px;
}
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
NA - leave blank
Class Name
NA - leave blank
Location Selector
#productView-options-107 > form > div.form-action-group._addToCartVisibility > div:nth-child(1)
Pinnacle
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
width: 190px;
font-size: 16px;
border-radius: 4px!important;
font-weight: 400;
padding: 0.778rem 2rem;
font-family: "Racing Sans One",Arial,Helvetica,sans-serif;
Add to Quote Button
Custom CSS
width: 100%;
padding: 10px 15px !important;
border-radius: 4px !important;
font-family: "Racing Sans One",Arial,Helvetica,sans-serif;
font-size: 18px;
margin-left: 0px;
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Cart to Quote Button
Custom CSS
width: 190px;
font-size: 16px;
border-radius: 4px!important;
font-weight: 400;
padding: 0.778rem 2rem;
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
width: 100%;
padding: 10px 15px !important;
border-radius: 4px !important;
font-family: "Racing Sans One",Arial,Helvetica,sans-serif;
font-size: 18px;
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Covent Garden
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
border-radius: 0;
border-width: 2px;
font-family: Montserrat;
padding-left: 3rem;
padding-right: 3rem;
padding-top: 1.6rem;
padding-bottom: 1.6rem;
Add to Quote Button
Custom CSS
border-radius: 0;
border-width: 2px;
font-family: Montserrat;
height: auto;
padding: 1.5rem;
@media (min-width: 800px) and (max-width: 1261px) {
width: 100%;
}
@media (max-width: 640px) {
width: 100%;
}
margin-left: 0px;
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Cart to Quote Button
Custom CSS
border-radius: 0;
border-width: 2px;
font-family: Montserrat;
height: auto;
padding: 1.5rem;
margin-top: 5px;
@media (max-width: 640px) {
width: 100%;
}
margin-right: 0px;
Class Name
NA - leave blank
Location Selector
body > div.body > div.container > div > main > div.static-sidebar
Add to Shopping List Button
Custom CSS
border-radius: 0;
border-width: 2px;
font-family: Montserrat;
height: auto;
padding: 1.5rem;
@media (min-width: 800px) and (max-width: 1261px) {
width: 100%;
}
@media (max-width: 640px) {
width: 100%;
}
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Halo One
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
font-family: Audiowide,Arial,Helvetica,sans-serif;
font-weight: 400;
padding: 10px 6rem;
transform: skew(-30deg,0);
padding: 1rem 3rem;
Add to Quote Button
Custom CSS
font-family: Audiowide,Arial,Helvetica,sans-serif;
font-weight: 400;
padding: 10px 6rem;
margin-top: 5px;
transform: skew(-30deg,0);
Class Name
NA - leave blank
Location Selector
NA - leave blank
Cart to Quote Button
Custom CSS
font-family: Audiowide,Arial,Helvetica,sans-serif;
font-weight: 400;
margin-top: 5px;
transform: skew(-30deg,0);
margin-top: 0px;
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
font-family: Audiowide,Arial,Helvetica,sans-serif;
font-weight: 400;
padding: 10px 6rem;
transform: skew(-30deg,0);
margin-top: 5px;
Class Name
NA - leave blank
Location Selector
NA - leave blank
Next Gen
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
font-family: Exo;
font-weight: 700;
font-style: italic;
padding: 1.5rem 2rem;
Add to Quote Button
Custom CSS
font-family: Exo;
font-weight: 700;
font-style: italic;
margin-left: 0px;
width: 100%;
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Cart to Quote Button
Custom CSS
font-family: Exo;
font-weight: 700;
font-style: italic;
@media (max-width: 370px) {
margin-right: 0px;
}
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
font-family: Exo;
font-weight: 700;
font-style: italic;
width:100%;
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Artify
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
font-size: 13px;
line-height: 17px;
padding: 9px 15px 9px;
font-family: Roboto,Arial,Helvetica,sans-serif;
border-radius: 0px;
Add to Quote Button
Custom CSS
font-size: 13px;
line-height: 17px;
padding: 9px 15px 9px;
font-family: Roboto,Arial,Helvetica,sans-serif;
border-radius: 0px;
margin-bottom: 0px;
@media (max-width: 566px) {
margin-top:10px;
}
Class Name
NA - leave blank
Location Selector
body > div.body > div.container > div > div > div.page-content > div.productView > section:nth-child(4)
Cart to Quote Button
Custom CSS
font-size: 13px;
line-height: 17px;
padding: 9px 15px 9px;
font-family: Roboto,Arial,Helvetica,sans-serif;
border-radius: 0px;
@media (max-width: 306px) {
margin-top:5px;
margin-right: 0px;
}
Class Name
NA - leave blank
Location Selector
Add to Shopping List Button
Custom CSS
font-size: 13px;
line-height: 17px;
padding: 9px 15px 9px;
font-family: Roboto,Arial,Helvetica,sans-serif;
border-radius: 0px;
@media (max-width: 566px) {
margin-top:10px;
}
Class Name
NA - leave blank
Location Selector
body > div.body > div.container > div > div > div.page-content > div.productView > section:nth-child(4)
Artisan
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
font-family: "DM Sans",Arial,Helvetica,sans-serif;
font-weight: 500;
border-radius: 2px;
font-size: 1rem;
font-weight: 400;
padding: 1rem 3rem;
text-transform: capitalize;
Add to Quote Button
Custom CSS
font-family: "DM Sans",Arial,Helvetica,sans-serif;
font-weight: 500;
border-radius: 2px;
font-size: 1rem;
font-weight: 400;
padding: 1rem 3rem;
margin-left: 0px;
Class Name
NA - leave blank
Location Selector
#main-content > div:nth-child(2) > div:nth-child(1) > div.productView > section.productView-details > div.productView-details.productView-options > form > div.form-action
Cart to Quote Button
Custom CSS
font-family: "DM Sans",Arial,Helvetica,sans-serif;
font-weight: 500;
border-radius: 2px;
font-size: 1rem;
font-weight: 400;
padding: 1rem 3rem;
@media (max-width: 550px) {
width: 100%;
margin-right: 0px;
}
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
font-family: "DM Sans",Arial,Helvetica,sans-serif;
font-weight: 500;
border-radius: 2px;
font-size: 1rem;
font-weight: 400;
padding: 1rem 3rem;
margin-left: 0px;
Class Name
NA - leave blank
Location Selector
#main-content > div:nth-child(2) > div:nth-child(1) > div.productView > section.productView-details > div.productView-details.productView-options > form > div.form-action
Hera
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
font-family: Jost,Arial,Helvetica,sans-serif;
font-size: 16px;
font-weight: 600;
font-style: normal;
padding: 1.5rem 2rem;
border-radius: 0px;
Add to Quote Button
Custom CSS
margin-left: 0px;
margin-top: 5px;
border-radius: 0px;
Class Name
NA - leave blank
Location Selector
#main-content > div.halo-productView-top > div > div.productView.halo-productView > div.halo-productView-right > div.productView-wrapper-details > section.productView-details.product-options > div.productView-options.halo-productOptions.productView-options-2.has-productOptions > form > div.productView-actions.productView-actions--buyItNow > div
Cart to Quote Button
Custom CSS
margin-right: 0px;
margin-top: 5px;
border-radius: 0px;
text-align: center;
padding: 0rem .5rem;
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
margin-left: 0px;
margin-top: 5px;
border-radius: 0px;
Class Name
NA - leave blank
Location Selector
#main-content > div.halo-productView-top > div > div.productView.halo-productView > div.halo-productView-right > div.productView-wrapper-details > section.productView-details.product-options > div.productView-options.halo-productOptions.productView-options-2.has-productOptions > form > div.productView-actions.productView-actions--buyItNow > div
Beautify
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
font-family: Poppins,Arial,Helvetica,sans-serif;
font-size: 16px;
font-weight: 600;
padding: 1.5rem 2rem;
Add to Quote Button
Custom CSS
padding: 1.3rem .5rem;
margin-left: 0px;
Class Name
NA - leave blank
Location Selector
NA - leave blank
Cart to Quote Button
Custom CSS
margin-top: 5px;
width: 100%;
margin-left: 0px;
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
margin-top: 5px;
width: 100%;
margin-left: 0px;
Class Name
NA - leave blank
Location Selector
#topOfPage > div.body > div.container > div.productView-scope > div.productView > div.productView-detailsWrapper > div > section:nth-child(3) > div.productView-options > form > div.form-action.form-action--addToCart._addToCartVisibility
Noble
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
padding: 1.5rem 2rem;
font-size: 16px;
font-family: Montserrat,Arial,Helvetica,sans-serif;
border-radius: 0;
font-weight: 700;
Add to Quote Button
Custom CSS
width: 100%;
padding-top: 17.5px;
padding-bottom: 17.5px;
font-size: 16px;
font-family: Montserrat,Arial,Helvetica,sans-serif;
border-radius: 0;
font-weight: 700;
margin-left: 0px;
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Cart to Quote Button
Custom CSS
font-family: Montserrat,Arial,Helvetica,sans-serif;
border-radius: 0;
font-weight: 700;
padding: 15px 42px;
@media (max-width: 550px) {
width: 100%;
margin-right: 0px;
margin-top: 5px;
}
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
width: 100%;
padding-top: 17.5px;
padding-bottom: 17.5px;
font-size: 16px;
font-family: Montserrat,Arial,Helvetica,sans-serif;
border-radius: 0;
font-weight: 700;
margin-top: 15px;
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Surfs Up
Finish Quote Floating Action Button
Location
Adjust based on preference/ other floating action buttons or content on the store
Vertical Padding
Adjust based on preference/ other floating action buttons or content on the store
Custom CSS
font-size: 16px;
font-weight: 700;
font-family: Jost,Arial,Helvetica,sans-serif;
padding: 1.5rem 2rem;
Add to Quote Button
Custom CSS
font-size: 16px;
font-weight: 700;
padding: 17px 20px 16px;
font-family: Jost,Arial,Helvetica,sans-serif;
@media (max-width: 1200px) {
width: 93%;
}
@media (min-width: 1201px) {
width: 42%;
}
margin-left: 0px;
border-radius: 4px;
@media (max-width: 500px) {
width: 88%;
}
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper
Cart to Quote Button
Custom CSS
width: 100%;
font-size: 18px;
font-weight: 800;
font-style: italic;
padding: 21px 20px 22px;
margin-right: 0px;
margin-top: 5px;
Class Name
NA - leave blank
Location Selector
NA - leave blank
Add to Shopping List Button
Custom CSS
font-size: 16px;
font-weight: 700;
padding: 17px 20px 16px;
font-family: Jost,Arial,Helvetica,sans-serif;
@media (max-width: 1200px) {
width: 93%;
}
@media (min-width: 1201px) {
width: 42%;
}
margin-left: 0px;
border-radius: 4px;
@media (max-width: 500px) {
width: 88%;
}
Class Name
NA - leave blank
Location Selector
#add-to-cart-wrapper