Category Icons Widget¶
Display a row of category tabs, each with its own icon. When a shopper clicks a tab, the products from that category load right below. You control which product details appear, the icons, colors, typography, and spacing.
Page Builder name: Category Icons | PapaThemes — Version: 1.0.3
Add it to your page¶
- In your BigCommerce admin, open Storefront → My Themes and click Customize to open Page Builder.
- In the left panel, find the Category Icons | PapaThemes widget.
- Drag it onto your page (the home page works well).
- Open the widget settings to add your categories and choose what each product card shows.
Settings¶
Settings¶
General¶
These settings control what each product card shows and how the product grid is laid out across all tabs.
| Option | What it does | Default |
|---|---|---|
| Product image | Show or hide the product image. | Show |
| Brand | Show or hide the brand name. | Show |
| Product name | Show or hide the product name. | Show |
| Price | Show or hide the price. | Show |
| SKU | Show or hide the product SKU. | Hide |
| Product rating | Show or hide the star rating. | Hide |
| Add to Cart button | Show or hide the Add to Cart button, with its own style options (see below). | Hide |
| Quick View | Show or hide the Quick View button, with its own style options (see below). | Hide |
| Product columns | How many products sit side by side on desktop. | 5 |
| Product count | How many products to load per category. | 10 |
| Use common CSS classes | Keep on so products match your theme's standard product styling. | On |
Add to Cart button options (shown when this button is enabled):
| Option | What it does | Default |
|---|---|---|
| Position | Where the button sits. Choices: Below image, Below product card. | Below product card |
| Add to Cart label | Wording for the Add to Cart button. | Add to Cart |
| Choose Options label | Wording shown when a product has options to pick. | Choose Options |
| Pre-Order label | Wording shown for pre-order products. | Pre-Order |
| Always visible | Keep the button visible instead of only on hover. | On |
| Quantity label | Wording for the quantity field (shown when a quantity selector is enabled). | Quantity |
| Increase label | Wording for the increase-quantity control. | Increase |
| Decrease label | Wording for the decrease-quantity control. | Decrease |
Quick View button options (shown when this button is enabled):
| Option | What it does | Default |
|---|---|---|
| Position | Where the button sits. Choices: Below image, Below product card. | Below product card |
| Quick View label | Wording for the Quick View button. | Quick View |
| Always visible | Keep the button visible instead of only on hover. | On |
Categories¶
This is the repeatable list of category tabs. Each entry is one tab with its own icon, link, and styling.
- Add a category: click Add at the bottom of the Categories list.
- Remove a category: open the entry and choose remove.
- Reorder categories: drag an entry to change the order the tabs appear in.
Each category entry has these options in its Content tab:
| Option | What it does | Default |
|---|---|---|
| Category Name | The label shown on the tab. | (empty) |
| Path | The store path of the category whose products this tab loads, for example /clothing/. | (empty) |
| Sort by | Order the products load in. Choices: Featured Items, Newest Items, Best Selling, A to Z, Z to A, By Review, Price: Ascending, Price: Descending. | Featured Items |
| Icon | Where the tab icon comes from. Choices: Custom HTML/SVG, Choose Image. | Custom HTML/SVG |
| Icon image | The image to use as the icon (shown when Icon is set to Choose Image). | A sample image |
| Icon SVG Code | Paste your own icon graphic (shown when Icon is set to Custom HTML/SVG). | A sample box icon |
| Icon size | Use the icon's original size or a custom size. Choices: Original, Custom dimension. | Original |
| Icon width | Custom icon width in pixels (shown when Icon size is Custom dimension). | 0 px |
| Icon height | Custom icon height in pixels (shown when Icon size is Custom dimension). | 0 px |
| Show text | Show or hide the category label under the icon. | Show |
| Hide on mobile | Hide the label on small screens (shown when Show text is on). | Off |
| Text style | Use the theme's default text style, or switch to Custom to set your own font family, weight, size, mobile size, text color, and hover color. | Custom |
| Border color | Color of the underline on the active tab. | #4d3880 |
| Border color hover | Underline color when hovering a tab. | #4d388066 |
| Padding | Inner spacing (padding) around the tab, set per device for Desktop, Tablet, and Mobile. | Top/Bottom 8px, sides 0 |
| Margin | Outer spacing around the tab, set per device for Desktop, Tablet, and Mobile. | Top/Bottom 10px, sides 20px |
| Display icons in container div | Keep on to align the tabs with your page's main content width. | On |
Tips¶
Tip
Use a consistent icon style across all tabs (same line weight and size) for a clean, professional row.
- Double-check each category Path points to a real category on your store, or that tab will load empty.
- Keep Product count under about 20 per category so the grid loads quickly.
- Turn on Add to Cart or Quick View only if your product cards have room — they look best with "Always visible" left on.
- Use the per-device Padding and Margin settings to keep tabs nicely spaced on phones as well as desktops.