Modify Appearance of Product Page Shipping Calculator (BigCommerce)

Overview:

The ShipperHQ Product Page Calculator appears on your product pages as a shipping estimator form. All styling is done through **custom CSS** added to your BigCommerce theme. No source code access is required.

Table of Contents

Prerequisites
How to Add Custom CSS
CSS Selectors for Styling
Common Styling Examples
Example: Full Theme Integration
Advanced Customization Examples
Testing Your Changes
Troubleshooting

Prerequisites

You must be using BigCommerce.
The ShipperHQ Product Page Shipping Calculator Advanced Feature must already be enabled for your product pages.

How to Add Custom CSS

Option 1: Use the BigCommerce Theme Editor (Recommended)

Go to Storefront > My Themes in your BigCommerce admin.
Click Customize on your active theme.
Navigate to Theme Styles or Custom CSS.
Paste your custom CSS.
Click Save and then Publish your changes.

Option 2: Edit Theme Files Directly

Go to Storefront > My Themes > Advanced > Edit Theme Files.
Open your main stylesheet (e.g., theme.scss or theme.css).
Add your CSS code at the bottom of the file.
Save your changes.

CSS Selectors for Styling

The calculator uses a root container `#shq-ppsc-root` and specific data attributes for each element:

Container

### Container
```css
#shq-ppsc-root {
/* Overall calculator container */
}

Form Elements

### Form Elements
```css
[data-shq-pp="form"] {
  /* Main form wrapper */
}

#shq-ppsc-root .form-field {
  /* All form field containers */
}

### Input Fields

### Input Fields
```css
[data-shq-pp="field-country"] {
  /* Country dropdown */
}

[data-shq-pp="field-state"] {
  /* State/Province field */
}

[data-shq-pp="field-zipcode"] {
  /* Zip/Postal code input */
}

[data-shq-pp="field-qty"] {
  /* Quantity selector */
}

Buttons

### Buttons
```css
[data-shq-pp="btn-get-rates"] {
  /* "Get Rates" / "Calculate Shipping" button */
}

[data-shq-pp="btn-reset"] {
  /* Reset button */
}

Shipping Rates Display

### Shipping Rates Display
```css
[data-shq-pp="shipping-rates-list"] {
  /* Container for all shipping options */
}

[data-shq-pp="shipping-rate-item"] {
  /* Individual shipping method row */
}

[data-shq-pp="shipping-rate-title"] {
  /* Shipping method name (e.g., "Ground Shipping") */
}

[data-shq-pp="price-wrap"] {
  /* Price display */
}

Headings

### Headings
```css
[data-shq-pp="shipping-methods-h"] {
  /* "Available Shipping Methods" heading */
}

[data-shq="collapsible-h"] {
  /* Collapsible section headers */
}

Error Messages

### Error Messages
```css
[data-shq-pp="server-error"] {
  /* Error message text */
}

Common Styling Examples

Match Your Brand Colors

### Match Your Brand Colors
```css
/* Change button color to match your brand */
[data-shq-pp="btn-get-rates"] {
  background-color: #your-brand-color !important;
  border-color: #your-brand-color !important;
  color: #ffffff!important;
}

[data-shq-pp="btn-get-rates"]:hover {
  background-color: #darker-shade !important;
}

/* Style shipping rates container */
[data-shq-pp="shipping-rates-list"] {
  border: 2pxsolid #your-brand-color !important;
  border-radius: 8px!important;
  background-color: #f9f9f9!important;
}

/* Highlight shipping prices */
[data-shq-pp="price-wrap"] {
  color: #your-brand-color !important;
  font-size: 18px!important;
  font-weight: bold!important;
}

Adjust Spacing and Layout

### Adjust Spacing and Layout
```css
/* Add spacing around calculator */
#shq-ppsc-root {
  margin: 20px0;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

/* Adjust form field spacing */
#shq-ppsc-root .form-field {
  margin-bottom: 15px!important;
  padding: 10px0!important;
}

/* Add spacing between shipping rate items */
[data-shq-pp="shipping-rate-item"] {
  padding: 15px10px!important;
  margin-bottom: 5px;
}

Customize Input Fields

### Customize Input Fields
```css
/* Style all input fields and dropdowns */
#shq-ppsc-root input[type="text"],
#shq-ppsc-root select {
  border: 1pxsolid#cccccc;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
  width: 100%;
}

/* Add focus state for better UX */
#shq-ppsc-root input[type="text"]:focus,
#shq-ppsc-root select:focus {
  border-color: #your-brand-color;
  outline: none;
  box-shadow: 005pxrgba(0, 0, 0, 0.1);
}

Style Shipping Options Display

### Style Shipping Options Display
```css
/* Individual shipping rate items */
[data-shq-pp="shipping-rate-item"] {
  padding: 15px10px!important;
  border-bottom: 1pxsolid#e0e0e0;
  transition: background-color 0.2s;
}

/* Add hover effect */
[data-shq-pp="shipping-rate-item"]:hover {
  background-color: #f0f0f0;
}

/* Remove border from last item */
[data-shq-pp="shipping-rate-item"]:last-child {
  border-bottom: none;
}

/* Shipping method name */
[data-shq-pp="shipping-rate-title"] {
  font-weight: bold;
  color: #333333;
  font-size: 16px;
}

/* Price display */
[data-shq-pp="price-wrap"] {
  color: #28a745;
  font-size: 18px;
  font-weight: bold;
}

Customize Headings

### Customize Headings
```css
/* Main headings */
[data-shq-pp="shipping-methods-h"],
[data-shq="collapsible-h"] {
  color: #333333;
  font-size: 18px;
  font-weight: 600;
  margin: 15px010px0!important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

Style Error Messages

### Style Error Messages
```css
/* Error message styling */
[data-shq-pp="server-error"] {
  background-color: #ffe6e6;
  border-left: 4pxsolid#ff0000;
  padding: 10px15px;
  margin: 10px0;
  color: #cc0000;
  font-weight: bold;
  border-radius: 4px;
}

Hide Specific Elements

### Hide Specific Elements
```css
/* Hide quantity field if not needed */
[data-shq-pp="field-qty"] {
  display: none!important;
}

/* Hide reset button */
[data-shq-pp="btn-reset"] {
  display: none!important;
}

/* Hide country field (if shipping to single country only) */
[data-shq-pp="field-country"] {
  display: none!important;
}

Responsive Design

### Responsive Design
```css
/* Mobile adjustments */
@media screen and (max-width: 768px) {
  #shq-ppsc-root {
    padding: 15px10px;
    margin: 15px0;
  }

  [data-shq-pp="shipping-rate-item"] {
    font-size: 14px;
    padding: 12px8px!important;
  }

  [data-shq-pp="btn-get-rates"] {
    width: 100%;
    padding: 12px!important;
  }

  [data-shq-pp="shipping-rate-title"] {
    font-size: 14px;
  }

  [data-shq-pp="price-wrap"] {
    font-size: 16px!important;
}
}

/* Tablet adjustments */
@media screen and (min-width: 769px) and (max-width: 1024px) {
#shq-ppsc-root {
padding: 18px;
}
}

Example: Full Theme Integration

### Complete Example: Full Theme Integration
```css
/* ============================================= */
/* SHIPPERHQ PRODUCT PAGE CALCULATOR STYLES */
/* ============================================= */

/* Container */
#shq-ppsc-root {
  margin: 30px0;
  padding: 25px;
  background-color: #ffffff;
  border: 1pxsolid#e0e0e0;
  border-radius: 8px;
  box-shadow: 02px4pxrgba(0, 0, 0, 0.05);
}

/* Form fields */
#shq-ppsc-root .form-field {
  margin-bottom: 15px!important;
  padding: 10px0!important;
}

/* Input fields and dropdowns */
#shq-ppsc-root input,
#shq-ppsc-root select {
  width: 100%;
  padding: 12px;
  border: 1pxsolid#d5d5d5;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3sease;
  background-color: #ffffff;
}

#shq-ppsc-root input:focus,
#shq-ppsc-root select:focus {
  border-color: #1498DF;
  outline: none;
  box-shadow: 0003pxrgba(20, 152, 223, 0.1);
}

/* Labels */
#shq-ppsc-root label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333333;
  font-size: 14px;
}

/* Primary "Get Rates" button */
[data-shq-pp="btn-get-rates"] {
  background-color: #1498DF!important;
  border-color: #1498DF!important;
  color: #ffffff!important;
  padding: 12px24px!important;
  font-size: 16px!important;
  font-weight: 600!important;
  border-radius: 4px!important;
  cursor: pointer!important;
  transition: background-color 0.3sease!important;
  border: none!important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

[data-shq-pp="btn-get-rates"]:hover {
  background-color: #0D69C5!important;
  transform: translateY(-1px);
  box-shadow: 04px8pxrgba(0, 0, 0, 0.15) !important;
}

[data-shq-pp="btn-get-rates"]:active {
  transform: translateY(0);
}

/* Reset button */
[data-shq-pp="btn-reset"] {
  background-color: transparent!important;
  border: 1pxsolid#d5d5d5!important;
  color: #666666!important;
  padding: 10px20px!important;
  font-size: 14px!important;
  border-radius: 4px!important;
  cursor: pointer!important;
  margin-left: 10px!important;
}

[data-shq-pp="btn-reset"]:hover {
  background-color: #f5f5f5!important;
  border-color: #999999!important;
}

/* Shipping rates container */
[data-shq-pp="shipping-rates-list"] {
  background-color: #f9f9f9!important;
  border: 1pxsolid#e0e0e0!important;
  border-radius: 5px!important;
  padding: 15px!important;
  margin-top: 20px!important;
}

/* Individual rate items */
[data-shq-pp="shipping-rate-item"] {
  padding: 12px0!important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1pxsolid#e0e0e0;
  transition: background-color 0.2sease;
}

[data-shq-pp="shipping-rate-item"]:hover {
  background-color: rgba(20, 152, 223, 0.05);
  padding-left: 5px;
  padding-right: 5px;
}

[data-shq-pp="shipping-rate-item"]:last-child {
  border-bottom: none;
}

/* Shipping method title */
[data-shq-pp="shipping-rate-title"] {
  font-weight: 600;
  color: #333333;
  font-size: 15px;
}

/* Price wrapper */
[data-shq-pp="price-wrap"] {
  color: #1498DF!important;
  font-size: 18px!important;
  font-weight: bold!important;
}

/* Section headings */
[data-shq-pp="shipping-methods-h"] {
  color: #333333;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px!important;
  margin-top: 0!important;
}

/* Collapsible headings */
[data-shq="collapsible-h"] {
  color: #333333;
  font-size: 16px;
  font-weight: 600;
  margin: 15px010px0!important;
}

/* Error messages */
[data-shq-pp="server-error"] {
  background-color: #fff5f5;
  border-left: 4pxsolid#E23B3E;
  padding: 12px15px;
  margin: 15px0;
  color: #E23B3E;
  border-radius: 4px;
  font-weight: 600;
}

/* Loading state (if visible) */
#shq-ppsc-root .loading {
  text-align: center;
  padding: 20px;
  color: #666666;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
  #shq-ppsc-root {
    padding: 20px15px;
    margin: 20px0;
  }

  [data-shq-pp="btn-get-rates"] {
    width: 100%;
    margin-bottom: 10px;
  }

  [data-shq-pp="btn-reset"] {
    width: 100%;
    margin-left: 0!important;
  }

  [data-shq-pp="shipping-rate-item"] {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px10px!important;
  }

  [data-shq-pp="price-wrap"] {
    margin-top: 8px;
    font-size: 16px!important;
  }

  [data-shq-pp="shipping-methods-h"] {
    font-size: 16px;
  }
}

/* Tablet adjustments */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  #shq-ppsc-root {
    padding: 22px;
  }
}

/* ============================================= */

/* END SHIPPERHQ CALCULATOR STYLES */

/* ============================================= */

Advanced Customization Examples

Add a Border and Shadow

### Add a Border and Shadow
```css
#shq-ppsc-root {
  border: 2pxsolid#e0e0e0;
  box-shadow: 04px12pxrgba(0, 0, 0, 0.08);
}

Make Buttons Full Width

### Make Buttons Full Width
```css
[data-shq-pp="btn-get-rates"],
[data-shq-pp="btn-reset"] {
  width: 100%!important;
  display: block!important;
}

Change Font Family

### Change Font Family
```css
#shq-ppsc-root {
  font-family: 'Your Font', Arial, sans-serif;
}

Add Icons to Buttons (Using Font Awesome)

### Add Icons to Buttons
```css
[data-shq-pp="btn-get-rates"]::before {
  content: "\f0d1"; /* Font Awesome truck icon */
  font-family: "Font Awesome 5 Free";
  margin-right: 8px;
}

Alternate Shipping Rate Item Styling

### Alternate Shipping Rate Item Styling
```css
[data-shq-pp="shipping-rate-item"]:nth-child(odd) {
  background-color: #f9f9f9;
}

[data-shq-pp="shipping-rate-item"]:nth-child(even) {
  background-color: #ffffff;
}

Add Loading Animation

### Add Loading Animation 
```css
[data-shq-pp="btn-get-rates"]:disabled {
  opacity: 0.6;
  cursor: not-allowed!important;
}

[data-shq-pp="btn-get-rates"]:disabled::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2pxsolid#ffffff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.8slinearinfinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

Testing Your Changes

Add your CSS using one of the methods above.
Save and publish your changes.
Clear your store cache or use a private browser.
View a product page and inspect the calculator.
Use browser DevTools (F12) to test and tweak styles.
Test responsiveness on mobile and tablet.