Home Page — Auto Parts Variant¶
Live demo: https://eshopping-autoparts-demo.mybigcommerce.com
Before you start
Theme installed, AutoParts variation picked, AutoParts product + widget data imported.
The AutoParts variation already populates many settings when you pick it (colors, fonts, trust strip, newsletter, promo text, cart goals, and PDP shipping/warranty text). Other features below — popups, Frequently Bought Together, cross-sell, urgency signals, and recent-sales notifications — are theme defaults that are the same in every variation and active out of the box. The recipe below shows what's set automatically, and how to change each part yourself.
Every section ends with a Customize: line giving the exact place to change it — a Theme Editor field (with its label, id, value format, and default), a Page Builder widget, or a BigCommerce admin location.
The home page renders these sections in this order on the live demo:
- Hero (Home Page Carousel)
- Trust strip
- Featured Products slider
- New Arrivals slider
- Products by Category
- Why Choose Us value-prop callout — "Auto Parts That Fit. Pricing That Drives." (AI HTML Generator | PapaThemes)
- Customer Reviews social-proof block (AI HTML Generator | PapaThemes)
- Resources guide cards — "Auto Parts Resources & Guides" (AI HTML Generator | PapaThemes)
- Brands carousel
- Blog posts
- Newsletter
- About SEO intro — "Your Complete Auto Parts Source" (AI HTML Generator | PapaThemes)
- Talk to an Expert contact CTA — "Talk to an Auto Parts Specialist" (AI HTML Generator | PapaThemes)
The footer also carries a Footer tagline widget (shown on every page, not just the home page).
Bestselling slider is enabled but hidden
Show Best Sellers is on, but the demo store has no bestseller sales data yet, so this slider does not appear on the live home page. It starts showing once orders generate bestseller data.
Section-by-section recipe¶
1. Variation¶
Theme Editor → AutoParts.
Styles✕
Theme variation
Industrial
AutoParts✓
Electronics
Packaging
2. Colors — set automatically by the variation¶
These values are applied for you when you pick the variation:
eShopping Theme✕
Primary accent (Terra)#D97706
Primary accent (light)#F59E0B
Primary accent (dark)#B45309
Primary accent (pale)#FFFBEB
Darkest neutral (Bark 950)#020617
Dark neutral (Bark 900)#0F172A
Lightest neutral (Bark 50)#F8FAFC
Cream / background#F8FAFC
White#FFFFFF
Sale badge background#DC2626
Staff-pick badge background#B45309
Active rating star#F59E0B
Sale price#DC2626
Original (struck-through) price#94A3B8
3. Fonts — set automatically¶
| Font | Value | Field id |
|---|---|---|
| Body font | Inter (weights 400, 500, 600) | body-font |
| Headings font | Inter (weights 600, 700) | headings-font |
| Monospace font | IBM Plex Mono (weight 400) | eshopping-mono-font |
Root font size is 14px.
Global✕
Body text font family▾
Heading font family▾
Body text font size14▾
Monospace FontIBM Plex Mono (weight 400)▾
4. Top banner¶
Banner colors are set automatically by the variation:
The banner content (the message) comes from your BigCommerce control panel, not the theme.
eShopping Theme✕
Banner
Banner Background#334155
Banner Text Color#CBD5E1
Banner Link Color#F59E0B
BigCommerce admin
Home
Orders
Products⌄
Customers⌄
Storefront⌄
Marketing⌃
Banners
Coupon codes
Gift certificates
Abandoned cart saver
Analytics
Settings⌄
5. Header & search — set automatically by the variation¶
| Setting | Value | Field id |
|---|---|---|
| Top bar background | #020617 |
eshopping-topbar-bg |
| Top bar text | #94a3b8 |
eshopping-topbar-color |
| Nav background | #ffffff |
eshopping-nav-bg |
| Nav text | #475569 |
eshopping-nav-color |
| Nav search button | #d97706 |
eshopping-nav-search-btn |
| Search box typing phrases | Search for brake pads… · Find oil filters & fluids… · Browse suspension parts… · Discover lighting & accessories… | eshopping-search-typing-phrases |
| Enable voice search | ✅ On | eshopping-search-voice |
| Welcome text | (empty) | eshopping-welcome-text |
Welcome text
The welcome text field ships empty. Add your own short line (for example, Find parts for your vehicle in seconds) if you want one in the top bar.
eShopping Theme✕
Header
Topbar Background#020617
Topbar Text#94A3B8
Navigation Background#FFFFFF
Navigation Text#475569
Search Button#D97706
Welcome Text(empty)Enter text…
Search
Enable voice search✅ On
Typing phrases (pipe | separated)Search for brake pads
6. Hero (Home Page Carousel)¶
The built-in Home Page Carousel is enabled. The slides themselves come from the store's Home Page Carousel — the theme does not require a fixed slide size; use a wide landscape image (JPG or WebP, e.g. ~1920 × 700) and keep all slides the same dimensions.
BigCommerce admin
Home
Orders
Products⌄
Customers⌄
Storefront⌃
Themes
Logo
Home page carousel
Social media links
Script manager
Web pages
Blog
Image manager
Marketing⌄
Analytics
Settings⌄
Homepage✕
Show carousel
Show Carousel Arrows
Show Carousel Play/Pause Button
There is no separate \"Show hero\" toggle
The hero is the BigCommerce Home Page Carousel, gated entirely by Show carousel (homepage_show_carousel) in the standard Home Page panel — there is no eshopping-show-hero setting.
Slide ideas (suggestions only)
The demo's actual slides come from the Home Page Carousel. If you're building your own, these work well for an auto-parts catalog:
| Slide | Heading | CTA |
|---|---|---|
| 1 | Performance parts. Built for the long haul. | Shop the catalog |
| 2 | Find parts for your ride | Fitment lookup |
| 3 | Same-day shipping on orders before 2pm | Shop now |
7. Trust strip — variation default¶
| Title | Description |
|---|---|
| OEM Quality Parts | Genuine & aftermarket parts you can trust |
| Fast Shipping | Same-day dispatch on in-stock items |
| Free Returns | Easy 30-day return policy |
| Expert Support | ASE-certified advisors available |
eShopping Theme✕
Homepage Sections
Show Trust Strip
Trust Strip
Trust Strip ItemsEnter text…
4 fixed iconsEnter text…
4 title/description pairsEnter text…
8. Featured Products¶
eShopping Theme → Homepage Sections → Show Featured Products is on. The slider shows products you flag as Featured in BigCommerce.
eShopping Theme✕
Homepage Sections
Show Featured Products
Homepage✕
Number of Featured Products▾
BigCommerce admin
Home
Orders
Products⌃
All products
Add
Categories
Options
Filtering
Reviews
Brands
Import
Export
Products
Customers⌄
Storefront⌄
Marketing⌄
Analytics
Settings⌄
9. New Arrivals¶
eShopping Theme → Homepage Sections → Show New Arrivals is on. Recently added products render here automatically.
eShopping Theme✕
Homepage Sections
Show New Arrivals
Homepage✕
Number of New Products▾
10. Bestselling Products¶
eShopping Theme✕
Homepage Sections
Show Best Sellers
Won't appear until you have sales data
The toggle is enabled, but the demo store has no bestseller / sales data yet, so the Bestselling slider does not appear on the live home page. It will show once the store accumulates sales and bestseller data.
11. Products by Category¶
Category IDs left empty on purpose
With no IDs entered, the section automatically pulls top-level categories — no need to look up or type any IDs.
eShopping Theme✕
Homepage Sections
Show Categories
Products by Category
Category IDs (comma separated, leave empty for auto-detect)(empty — auto-detects top-level categories, showing the first 3 per the grid)Enter text…
categories (tabs)▾
products per category▾
subcategories▾
Default active tabfeatured▾
Show Featured tab✅ On
Show New tab✅ On
Show Reviews tab❌ Off
12. Why Choose Us — marketing block (Page Builder)¶
Below the Products-by-Category section, the value-prop callout — heading "Auto Parts That Fit. Pricing That Drives." with an eyebrow "Why Choose Us" and feature cards (Verified Fitment, Fast Bulk Fulfillment, OEM & Performance). This is an AI HTML Generator | PapaThemes widget, not a theme setting.
‹ AI HTML Generator | PapaThemes⋯
▾ Content
<style>
.papathemes-ai-widget-… { … }
…your HTML…
</style>
.papathemes-ai-widget-… { … }
…your HTML…
</style>
Expand HTML EditorSave HTML
Show in container div
Exact demo HTML (AutoParts) — Why Choose Us, paste into the widget's HTML Content field
<style>
.papathemes-ai-widget-z5x8wwcc {
--papathemes-ai-widget-z5x8wwcc-white: #ffffff;
--papathemes-ai-widget-z5x8wwcc-cream: #f8fafc;
--papathemes-ai-widget-z5x8wwcc-bark-100: #f1f5f9;
--papathemes-ai-widget-z5x8wwcc-bark-200: #e2e8f0;
--papathemes-ai-widget-z5x8wwcc-bark-400: #94a3b8;
--papathemes-ai-widget-z5x8wwcc-bark-500: #64748b;
--papathemes-ai-widget-z5x8wwcc-bark-700: #334155;
--papathemes-ai-widget-z5x8wwcc-bark-800: #1e293b;
--papathemes-ai-widget-z5x8wwcc-bark-900: #0f172a;
--papathemes-ai-widget-z5x8wwcc-terra: #d97706;
--papathemes-ai-widget-z5x8wwcc-terra-light: #f59e0b;
--papathemes-ai-widget-z5x8wwcc-terra-dark: #b45309;
--papathemes-ai-widget-z5x8wwcc-terra-pale: #fffbeb;
--papathemes-ai-widget-z5x8wwcc-accent: #f59e0b;
--papathemes-ai-widget-z5x8wwcc-accent-soft: #fef3c7;
--papathemes-ai-widget-z5x8wwcc-font-heading: 'Inter', sans-serif;
--papathemes-ai-widget-z5x8wwcc-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100%;
}
.papathemes-ai-widget-z5x8wwcc *,
.papathemes-ai-widget-z5x8wwcc *::before,
.papathemes-ai-widget-z5x8wwcc *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.papathemes-ai-widget-z5x8wwcc-section {
padding: 32px 20px 0;
}
.papathemes-ai-widget-z5x8wwcc-card {
background: var(--papathemes-ai-widget-z5x8wwcc-white);
border: 1px solid var(--papathemes-ai-widget-z5x8wwcc-bark-100);
border-radius: 8px;
overflow: hidden;
}
.papathemes-ai-widget-z5x8wwcc-inner {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 360px;
}
.papathemes-ai-widget-z5x8wwcc-visual {
position: relative;
background:
linear-gradient(135deg, var(--papathemes-ai-widget-z5x8wwcc-bark-900) 0%, var(--papathemes-ai-widget-z5x8wwcc-bark-800) 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
min-height: 260px;
}
.papathemes-ai-widget-z5x8wwcc-visual::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 100% at 90% 50%, rgba(245, 158, 11, 0.14), transparent 70%),
radial-gradient(ellipse 40% 60% at 0% 0%, rgba(255, 255, 255, 0.04), transparent 60%);
pointer-events: none;
}
.papathemes-ai-widget-z5x8wwcc-visual::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.5;
pointer-events: none;
}
.papathemes-ai-widget-z5x8wwcc-stats {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 36px;
}
.papathemes-ai-widget-z5x8wwcc-stat {
text-align: center;
padding: 18px;
background: rgba(255, 255, 255, .06);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, .08);
}
.papathemes-ai-widget-z5x8wwcc-stat-num {
font-family: var(--papathemes-ai-widget-z5x8wwcc-font-heading);
font-size: 28px;
font-weight: 600;
color: var(--papathemes-ai-widget-z5x8wwcc-cream);
line-height: 1;
margin-bottom: 3px;
}
.papathemes-ai-widget-z5x8wwcc-stat-num span {
color: var(--papathemes-ai-widget-z5x8wwcc-accent);
}
.papathemes-ai-widget-z5x8wwcc-stat-label {
font-family: var(--papathemes-ai-widget-z5x8wwcc-font-body);
font-size: 10px;
color: var(--papathemes-ai-widget-z5x8wwcc-bark-400);
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 600;
}
.papathemes-ai-widget-z5x8wwcc-content {
padding: 36px;
display: flex;
flex-direction: column;
justify-content: center;
}
.papathemes-ai-widget-z5x8wwcc-eyebrow {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--papathemes-ai-widget-z5x8wwcc-font-body);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .14em;
font-weight: 700;
color: var(--papathemes-ai-widget-z5x8wwcc-bark-700);
margin-bottom: 10px;
}
.papathemes-ai-widget-z5x8wwcc-eyebrow::before {
content: "";
width: 24px;
height: 2px;
background: var(--papathemes-ai-widget-z5x8wwcc-accent);
}
.papathemes-ai-widget-z5x8wwcc-heading {
font-family: var(--papathemes-ai-widget-z5x8wwcc-font-heading);
font-size: 20px;
font-weight: 600;
color: var(--papathemes-ai-widget-z5x8wwcc-bark-900);
margin-bottom: 14px;
line-height: 1.25;
}
.papathemes-ai-widget-z5x8wwcc-heading em {
font-style: italic;
font-weight: 400;
color: var(--papathemes-ai-widget-z5x8wwcc-bark-500);
}
.papathemes-ai-widget-z5x8wwcc-desc {
font-family: var(--papathemes-ai-widget-z5x8wwcc-font-body);
font-size: 12px;
color: var(--papathemes-ai-widget-z5x8wwcc-bark-500);
line-height: 1.7;
margin-bottom: 24px;
}
.papathemes-ai-widget-z5x8wwcc-features {
display: flex;
flex-direction: column;
gap: 16px;
}
.papathemes-ai-widget-z5x8wwcc-feat {
display: flex;
gap: 12px;
align-items: flex-start;
}
.papathemes-ai-widget-z5x8wwcc-feat-icon {
width: 38px;
height: 38px;
border-radius: 6px;
background: var(--papathemes-ai-widget-z5x8wwcc-accent-soft);
border: 1px solid var(--papathemes-ai-widget-z5x8wwcc-bark-200);
display: flex;
align-items: center;
justify-content: center;
color: var(--papathemes-ai-widget-z5x8wwcc-accent);
flex-shrink: 0;
}
.papathemes-ai-widget-z5x8wwcc-feat-icon svg {
width: 17px;
height: 17px;
}
.papathemes-ai-widget-z5x8wwcc-feat-title {
font-family: var(--papathemes-ai-widget-z5x8wwcc-font-body);
font-size: 12px;
font-weight: 600;
color: var(--papathemes-ai-widget-z5x8wwcc-bark-800);
margin-bottom: 1px;
}
.papathemes-ai-widget-z5x8wwcc-feat-desc {
font-family: var(--papathemes-ai-widget-z5x8wwcc-font-body);
font-size: 11px;
color: var(--papathemes-ai-widget-z5x8wwcc-bark-500);
line-height: 1.45;
}
@media (max-width: 1023px) {
.papathemes-ai-widget-z5x8wwcc-inner {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.papathemes-ai-widget-z5x8wwcc-section {
padding: 24px 10px 0;
}
.papathemes-ai-widget-z5x8wwcc-stats {
padding: 24px;
gap: 12px;
}
.papathemes-ai-widget-z5x8wwcc-content {
padding: 24px;
}
}
</style>
<div class="papathemes-ai-widget-z5x8wwcc">
<div class="papathemes-ai-widget-z5x8wwcc-section">
<div class="papathemes-ai-widget-z5x8wwcc-card">
<div class="papathemes-ai-widget-z5x8wwcc-inner">
<div class="papathemes-ai-widget-z5x8wwcc-visual">
<div class="papathemes-ai-widget-z5x8wwcc-stats">
<div class="papathemes-ai-widget-z5x8wwcc-stat">
<div class="papathemes-ai-widget-z5x8wwcc-stat-num">15<span>+</span></div>
<div class="papathemes-ai-widget-z5x8wwcc-stat-label">YEARS IN AUTO PARTS</div>
</div>
<div class="papathemes-ai-widget-z5x8wwcc-stat">
<div class="papathemes-ai-widget-z5x8wwcc-stat-num">3,500<span>+</span></div>
<div class="papathemes-ai-widget-z5x8wwcc-stat-label">AUTO SKUS</div>
</div>
<div class="papathemes-ai-widget-z5x8wwcc-stat">
<div class="papathemes-ai-widget-z5x8wwcc-stat-num">8M<span>+</span></div>
<div class="papathemes-ai-widget-z5x8wwcc-stat-label">Orders Shipped</div>
</div>
<div class="papathemes-ai-widget-z5x8wwcc-stat">
<div class="papathemes-ai-widget-z5x8wwcc-stat-num">99<span>%</span></div>
<div class="papathemes-ai-widget-z5x8wwcc-stat-label">Customer Satisfaction</div>
</div>
</div>
</div>
<div class="papathemes-ai-widget-z5x8wwcc-content">
<div class="papathemes-ai-widget-z5x8wwcc-eyebrow">Why Choose Us</div>
<h2 data-localized="1" data-localized="1" class="papathemes-ai-widget-z5x8wwcc-heading">Auto Parts That Fit. <em>Pricing That Drives.</em></h2>
<p class="papathemes-ai-widget-z5x8wwcc-desc">From OEM replacements to performance upgrades — every part is verified for fitment and stocked for fast dispatch to keep vehicles on the road.</p>
<div class="papathemes-ai-widget-z5x8wwcc-features">
<div class="papathemes-ai-widget-z5x8wwcc-feat">
<div class="papathemes-ai-widget-z5x8wwcc-feat-icon">
<svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16zM12 4.15 18.4 7.8 12 11.45 5.6 7.8 12 4.15zM5 9.5l6 3.43v6.94l-6-3.43V9.5zm8 10.37v-6.94l6-3.43v6.94l-6 3.43z"/></svg>
</div>
<div>
<div class="papathemes-ai-widget-z5x8wwcc-feat-title">Verified Fitment</div>
<div class="papathemes-ai-widget-z5x8wwcc-feat-desc">Every part cross-checked against year/make/model so you order right the first time.</div>
</div>
</div>
<div class="papathemes-ai-widget-z5x8wwcc-feat">
<div class="papathemes-ai-widget-z5x8wwcc-feat-icon">
<svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2a3 3 0 0 0 6 0h6a3 3 0 0 0 6 0h2v-5l-3-4zM6 18.5A1.5 1.5 0 1 1 7.5 17 1.5 1.5 0 0 1 6 18.5zm13.5-9 1.96 2.5H17V9.5h2.5zM18 18.5A1.5 1.5 0 1 1 19.5 17 1.5 1.5 0 0 1 18 18.5z"/></svg>
</div>
<div>
<div class="papathemes-ai-widget-z5x8wwcc-feat-title">Fast Bulk Fulfillment</div>
<div class="papathemes-ai-widget-z5x8wwcc-feat-desc">Same-day dispatch on stock items and shop pricing trusted by 9,000+ repair shops and enthusiasts.</div>
</div>
</div>
<div class="papathemes-ai-widget-z5x8wwcc-feat">
<div class="papathemes-ai-widget-z5x8wwcc-feat-icon">
<svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z"/></svg>
</div>
<div>
<div class="papathemes-ai-widget-z5x8wwcc-feat-title">OEM & Performance</div>
<div class="papathemes-ai-widget-z5x8wwcc-feat-desc">Genuine OEM replacements alongside trusted aftermarket performance brands.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
13. Customer Reviews — marketing block (Page Builder)¶
The social-proof block (heading "Customer Reviews") sits directly below Why Choose Us. Also an AI HTML Generator | PapaThemes widget.
‹ AI HTML Generator | PapaThemes⋯
▾ Content
<style>
.papathemes-ai-widget-… { … }
…your HTML…
</style>
.papathemes-ai-widget-… { … }
…your HTML…
</style>
Expand HTML EditorSave HTML
Show in container div
Exact demo HTML (AutoParts) — Customer Reviews, paste into the widget's HTML Content field
<style>
.papathemes-ai-widget-pkg1 {
--papathemes-ai-widget-pkg1-white: #ffffff;
--papathemes-ai-widget-pkg1-bark-50: #f8fafc;
--papathemes-ai-widget-pkg1-bark-100: #eef1f5;
--papathemes-ai-widget-pkg1-bark-200: #e2e8f0;
--papathemes-ai-widget-pkg1-bark-300: #cbd5e1;
--papathemes-ai-widget-pkg1-bark-400: #94a3b8;
--papathemes-ai-widget-pkg1-bark-500: #64748b;
--papathemes-ai-widget-pkg1-bark-600: #475569;
--papathemes-ai-widget-pkg1-bark-700: #334155;
--papathemes-ai-widget-pkg1-bark-800: #1e293b;
--papathemes-ai-widget-pkg1-bark-900: #0f172a;
--papathemes-ai-widget-pkg1-terra: #3b82f6;
--papathemes-ai-widget-pkg1-gold: #f59e0b;
--papathemes-ai-widget-pkg1-gold-soft: #fef3c7;
--papathemes-ai-widget-pkg1-success: #16a34a;
--papathemes-ai-widget-pkg1-success-soft: #ecfdf5;
--papathemes-ai-widget-pkg1-font-heading: 'Inter', sans-serif;
--papathemes-ai-widget-pkg1-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100%;
}
.papathemes-ai-widget-pkg1 *,
.papathemes-ai-widget-pkg1 *::before,
.papathemes-ai-widget-pkg1 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.papathemes-ai-widget-pkg1-section {
padding: 32px 20px 0;
}
/* ── Section header: eyebrow + title + 'view all' link ─────────────────── */
.papathemes-ai-widget-pkg1-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
padding-bottom: 16px;
border-bottom: 1px solid var(--papathemes-ai-widget-pkg1-bark-200);
}
.papathemes-ai-widget-pkg1-header-left {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.papathemes-ai-widget-pkg1-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--papathemes-ai-widget-pkg1-font-body);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--papathemes-ai-widget-pkg1-bark-500);
}
.papathemes-ai-widget-pkg1-eyebrow::before {
content: "";
display: inline-block;
width: 18px;
height: 1px;
background: var(--papathemes-ai-widget-pkg1-bark-400);
}
.papathemes-ai-widget-pkg1-title {
font-family: var(--papathemes-ai-widget-pkg1-font-heading);
font-size: 22px;
font-weight: 700;
color: var(--papathemes-ai-widget-pkg1-bark-900);
letter-spacing: -0.02em;
line-height: 1.2;
}
.papathemes-ai-widget-pkg1-viewall {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--papathemes-ai-widget-pkg1-font-body);
font-size: 11px;
font-weight: 600;
color: var(--papathemes-ai-widget-pkg1-bark-600);
text-decoration: none;
padding: 8px 14px;
border: 1px solid var(--papathemes-ai-widget-pkg1-bark-200);
border-radius: 999px;
transition: all .2s ease;
flex-shrink: 0;
}
.papathemes-ai-widget-pkg1-viewall:hover {
color: var(--papathemes-ai-widget-pkg1-bark-900);
border-color: var(--papathemes-ai-widget-pkg1-bark-400);
background: var(--papathemes-ai-widget-pkg1-bark-50);
}
.papathemes-ai-widget-pkg1-viewall svg {
width: 12px;
height: 12px;
}
/* ── Hero summary strip — restrained ecommerce palette ─────────────────── */
.papathemes-ai-widget-pkg1-hero {
display: grid;
grid-template-columns: 280px 1fr 220px;
gap: 28px;
align-items: stretch;
padding: 22px 26px;
background: var(--papathemes-ai-widget-pkg1-white);
border: 1px solid var(--papathemes-ai-widget-pkg1-bark-200);
border-radius: 8px;
margin-bottom: 16px;
}
@media (max-width: 1100px) {
.papathemes-ai-widget-pkg1-hero {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* Cell 1 — rating hero */
.papathemes-ai-widget-pkg1-rating-hero {
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
padding-right: 28px;
border-right: 1px solid var(--papathemes-ai-widget-pkg1-bark-100);
}
@media (max-width: 1100px) {
.papathemes-ai-widget-pkg1-rating-hero {
padding-right: 0;
padding-bottom: 16px;
border-right: none;
border-bottom: 1px solid var(--papathemes-ai-widget-pkg1-bark-100);
}
}
.papathemes-ai-widget-pkg1-rating-row {
display: flex;
align-items: baseline;
gap: 12px;
}
.papathemes-ai-widget-pkg1-rating-big {
font-family: var(--papathemes-ai-widget-pkg1-font-heading);
font-size: 52px;
font-weight: 700;
color: var(--papathemes-ai-widget-pkg1-bark-900);
letter-spacing: -0.04em;
line-height: 1;
}
.papathemes-ai-widget-pkg1-rating-out {
font-family: var(--papathemes-ai-widget-pkg1-font-body);
font-size: 13px;
color: var(--papathemes-ai-widget-pkg1-bark-500);
font-weight: 500;
}
.papathemes-ai-widget-pkg1-stars {
display: inline-flex;
gap: 2px;
color: var(--papathemes-ai-widget-pkg1-gold);
}
.papathemes-ai-widget-pkg1-stars svg {
width: 16px;
height: 16px;
}
.papathemes-ai-widget-pkg1-rating-rank {
display: inline-block;
font-family: var(--papathemes-ai-widget-pkg1-font-heading);
font-size: 12px;
font-weight: 600;
color: var(--papathemes-ai-widget-pkg1-bark-700);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 2px;
}
.papathemes-ai-widget-pkg1-rating-count {
font-family: var(--papathemes-ai-widget-pkg1-font-body);
font-size: 12px;
color: var(--papathemes-ai-widget-pkg1-bark-500);
}
/* Cell 2 — distribution */
.papathemes-ai-widget-pkg1-dist {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.papathemes-ai-widget-pkg1-dist-row {
display: grid;
grid-template-columns: 38px 1fr 36px 50px;
align-items: center;
gap: 12px;
font-family: var(--papathemes-ai-widget-pkg1-font-body);
font-size: 12px;
color: var(--papathemes-ai-widget-pkg1-bark-600);
}
.papathemes-ai-widget-pkg1-dist-label {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 700;
color: var(--papathemes-ai-widget-pkg1-bark-700);
font-size: 12px;
}
.papathemes-ai-widget-pkg1-dist-label svg {
width: 11px;
height: 11px;
color: var(--papathemes-ai-widget-pkg1-gold);
}
.papathemes-ai-widget-pkg1-dist-bar {
position: relative;
height: 8px;
background: var(--papathemes-ai-widget-pkg1-bark-100);
border-radius: 2px;
overflow: hidden;
}
.papathemes-ai-widget-pkg1-dist-fill {
display: block;
height: 100%;
background: var(--papathemes-ai-widget-pkg1-gold);
border-radius: inherit;
}
.papathemes-ai-widget-pkg1-dist-pct {
text-align: right;
font-weight: 700;
color: var(--papathemes-ai-widget-pkg1-bark-700);
font-variant-numeric: tabular-nums;
font-size: 12px;
}
.papathemes-ai-widget-pkg1-dist-count {
text-align: right;
color: var(--papathemes-ai-widget-pkg1-bark-400);
font-variant-numeric: tabular-nums;
font-size: 11px;
}
/* Cell 3 — trust badges */
.papathemes-ai-widget-pkg1-badges {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
padding-left: 28px;
border-left: 1px solid var(--papathemes-ai-widget-pkg1-bark-100);
}
@media (max-width: 1100px) {
.papathemes-ai-widget-pkg1-badges {
padding-left: 0;
padding-top: 16px;
border-left: none;
border-top: 1px solid var(--papathemes-ai-widget-pkg1-bark-100);
flex-direction: row;
flex-wrap: wrap;
}
}
.papathemes-ai-widget-pkg1-badge {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--papathemes-ai-widget-pkg1-font-body);
font-size: 12px;
color: var(--papathemes-ai-widget-pkg1-bark-600);
font-weight: 500;
}
.papathemes-ai-widget-pkg1-badge strong {
font-weight: 700;
color: var(--papathemes-ai-widget-pkg1-bark-900);
}
.papathemes-ai-widget-pkg1-badge-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 4px;
flex-shrink: 0;
background: var(--papathemes-ai-widget-pkg1-bark-50);
color: var(--papathemes-ai-widget-pkg1-bark-700);
border: 1px solid var(--papathemes-ai-widget-pkg1-bark-200);
}
.papathemes-ai-widget-pkg1-badge-icon svg {
width: 12px;
height: 12px;
}
/* ── Carousel ─────────────────────────────────────────────────────────── */
.papathemes-ai-widget-pkg1-carousel-wrap {
position: relative;
min-width: 0;
}
.papathemes-ai-widget-pkg1-scroll {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: 4px 0;
}
.papathemes-ai-widget-pkg1-scroll::-webkit-scrollbar {
display: none;
}
.papathemes-ai-widget-pkg1-arrow {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--papathemes-ai-widget-pkg1-white);
border: 1px solid var(--papathemes-ai-widget-pkg1-bark-200);
cursor: pointer;
z-index: 3;
align-items: center;
justify-content: center;
padding: 0;
transition: all .2s ease;
color: var(--papathemes-ai-widget-pkg1-bark-700);
}
.papathemes-ai-widget-pkg1-arrow svg {
width: 18px;
height: 18px;
}
.papathemes-ai-widget-pkg1-arrow:hover {
border-color: var(--papathemes-ai-widget-pkg1-bark-400);
color: var(--papathemes-ai-widget-pkg1-bark-900);
box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}
.papathemes-ai-widget-pkg1-arrow--prev {
left: -16px;
}
.papathemes-ai-widget-pkg1-arrow--next {
right: -16px;
}
@media (min-width: 768px) {
.papathemes-ai-widget-pkg1-arrow {
display: flex;
}
}
/* ── Review card — restrained ecommerce ───────────────────────────────── */
.papathemes-ai-widget-pkg1-review {
min-width: 240px;
max-width: 260px;
flex-shrink: 0;
scroll-snap-align: start;
background: var(--papathemes-ai-widget-pkg1-white);
border: 1px solid var(--papathemes-ai-widget-pkg1-bark-200);
border-radius: 8px;
padding: 18px 16px 14px;
transition: border-color .2s ease, box-shadow .2s ease;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.papathemes-ai-widget-pkg1-review:hover {
border-color: var(--papathemes-ai-widget-pkg1-bark-400);
box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
}
/* Subtle faded quote mark — top-left, neutral */
.papathemes-ai-widget-pkg1-quote-bg {
position: absolute;
top: 4px;
left: 10px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 60px;
line-height: 1;
color: var(--papathemes-ai-widget-pkg1-bark-100);
pointer-events: none;
user-select: none;
font-weight: 700;
z-index: 0;
}
.papathemes-ai-widget-pkg1-r-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.papathemes-ai-widget-pkg1-r-stars {
display: flex;
gap: 2px;
color: var(--papathemes-ai-widget-pkg1-gold);
}
.papathemes-ai-widget-pkg1-r-stars svg {
width: 13px;
height: 13px;
}
.papathemes-ai-widget-pkg1-r-ago {
font-family: var(--papathemes-ai-widget-pkg1-font-body);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--papathemes-ai-widget-pkg1-bark-400);
}
.papathemes-ai-widget-pkg1-r-text {
font-family: var(--papathemes-ai-widget-pkg1-font-body);
font-size: 13px;
color: var(--papathemes-ai-widget-pkg1-bark-800);
line-height: 1.55;
margin-bottom: 14px;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
position: relative;
z-index: 1;
flex: 1;
font-weight: 500;
}
.papathemes-ai-widget-pkg1-r-author {
display: flex;
align-items: center;
gap: 10px;
padding-top: 12px;
border-top: 1px solid var(--papathemes-ai-widget-pkg1-bark-100);
position: relative;
z-index: 1;
}
.papathemes-ai-widget-pkg1-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--papathemes-ai-widget-pkg1-font-heading);
font-weight: 700;
font-size: 12px;
color: #ffffff;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.papathemes-ai-widget-pkg1-r-id {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.papathemes-ai-widget-pkg1-r-name {
font-family: var(--papathemes-ai-widget-pkg1-font-body);
font-size: 13px;
font-weight: 700;
color: var(--papathemes-ai-widget-pkg1-bark-900);
display: inline-flex;
align-items: center;
gap: 5px;
line-height: 1.3;
}
.papathemes-ai-widget-pkg1-r-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--papathemes-ai-widget-pkg1-success);
color: #ffffff;
flex-shrink: 0;
}
.papathemes-ai-widget-pkg1-r-check svg {
width: 9px;
height: 9px;
}
.papathemes-ai-widget-pkg1-r-role {
font-family: var(--papathemes-ai-widget-pkg1-font-body);
font-size: 11px;
color: var(--papathemes-ai-widget-pkg1-bark-500);
margin-top: 2px;
}
@media (max-width: 900px) {
.papathemes-ai-widget-pkg1-hero {
padding: 18px;
}
.papathemes-ai-widget-pkg1-rating-big {
font-size: 48px;
}
}
@media (max-width: 767px) {
.papathemes-ai-widget-pkg1-section {
padding: 24px 10px 0;
}
.papathemes-ai-widget-pkg1-review {
min-width: 240px;
}
.papathemes-ai-widget-pkg1-quote-bg {
font-size: 64px;
}
.papathemes-ai-widget-pkg1-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
</style>
<div class="papathemes-ai-widget-pkg1">
<div class="papathemes-ai-widget-pkg1-section">
<header class="papathemes-ai-widget-pkg1-header">
<div class="papathemes-ai-widget-pkg1-header-left">
<span class="papathemes-ai-widget-pkg1-eyebrow">Reviews</span>
<h2 class="papathemes-ai-widget-pkg1-title">Customer Reviews</h2>
</div>
<a href="#reviews" class="papathemes-ai-widget-pkg1-viewall" aria-label="View all reviews">
View all 2,400
<svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
</header>
<section class="papathemes-ai-widget-pkg1-hero" aria-label="Rating summary">
<div class="papathemes-ai-widget-pkg1-rating-hero">
<div class="papathemes-ai-widget-pkg1-rating-row">
<span class="papathemes-ai-widget-pkg1-rating-big">4.8</span>
<span class="papathemes-ai-widget-pkg1-rating-out">out of 5</span>
</div>
<div class="papathemes-ai-widget-pkg1-stars"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>
<span class="papathemes-ai-widget-pkg1-rating-count">Based on 2,400+ verified reviews</span>
</div>
<ul class="papathemes-ai-widget-pkg1-dist">
<li class="papathemes-ai-widget-pkg1-dist-row">
<span class="papathemes-ai-widget-pkg1-dist-label">5 <svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
<span class="papathemes-ai-widget-pkg1-dist-bar"><span class="papathemes-ai-widget-pkg1-dist-fill" style="width:78%"></span></span>
<span class="papathemes-ai-widget-pkg1-dist-pct">78%</span>
<span class="papathemes-ai-widget-pkg1-dist-count">1,872</span>
</li>
<li class="papathemes-ai-widget-pkg1-dist-row">
<span class="papathemes-ai-widget-pkg1-dist-label">4 <svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
<span class="papathemes-ai-widget-pkg1-dist-bar"><span class="papathemes-ai-widget-pkg1-dist-fill" style="width:18%"></span></span>
<span class="papathemes-ai-widget-pkg1-dist-pct">18%</span>
<span class="papathemes-ai-widget-pkg1-dist-count">432</span>
</li>
<li class="papathemes-ai-widget-pkg1-dist-row">
<span class="papathemes-ai-widget-pkg1-dist-label">3 <svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
<span class="papathemes-ai-widget-pkg1-dist-bar"><span class="papathemes-ai-widget-pkg1-dist-fill" style="width:3%"></span></span>
<span class="papathemes-ai-widget-pkg1-dist-pct">3%</span>
<span class="papathemes-ai-widget-pkg1-dist-count">72</span>
</li>
<li class="papathemes-ai-widget-pkg1-dist-row">
<span class="papathemes-ai-widget-pkg1-dist-label">2 <svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
<span class="papathemes-ai-widget-pkg1-dist-bar"><span class="papathemes-ai-widget-pkg1-dist-fill" style="width:1%"></span></span>
<span class="papathemes-ai-widget-pkg1-dist-pct">1%</span>
<span class="papathemes-ai-widget-pkg1-dist-count">24</span>
</li>
<li class="papathemes-ai-widget-pkg1-dist-row">
<span class="papathemes-ai-widget-pkg1-dist-label">1 <svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
<span class="papathemes-ai-widget-pkg1-dist-bar"><span class="papathemes-ai-widget-pkg1-dist-fill" style="width:1%"></span></span>
<span class="papathemes-ai-widget-pkg1-dist-pct"><1%</span>
<span class="papathemes-ai-widget-pkg1-dist-count">0</span>
</li>
</ul>
<div class="papathemes-ai-widget-pkg1-badges">
<div class="papathemes-ai-widget-pkg1-badge">
<span class="papathemes-ai-widget-pkg1-badge-icon"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>
<span><strong>98%</strong> recommend</span>
</div>
<div class="papathemes-ai-widget-pkg1-badge">
<span class="papathemes-ai-widget-pkg1-badge-icon"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L4 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-8-3z"/></svg></span>
<span><strong>100%</strong> verified</span>
</div>
<div class="papathemes-ai-widget-pkg1-badge">
<span class="papathemes-ai-widget-pkg1-badge-icon"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M17.65 6.35A7.958 7.958 0 0012 4a8 8 0 108 8h-2a6 6 0 11-1.76-4.24L13 11h7V4l-2.35 2.35z"/></svg></span>
<span><strong>87%</strong> reorder</span>
</div>
</div>
</section>
<div class="papathemes-ai-widget-pkg1-carousel-wrap">
<button type="button" class="papathemes-ai-widget-pkg1-arrow papathemes-ai-widget-pkg1-arrow--prev" data-dir="prev" aria-label="Previous reviews">
<svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
</button>
<button type="button" class="papathemes-ai-widget-pkg1-arrow papathemes-ai-widget-pkg1-arrow--next" data-dir="next" aria-label="Next reviews">
<svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</button>
<div class="papathemes-ai-widget-pkg1-scroll">
<article class="papathemes-ai-widget-pkg1-review">
<span class="papathemes-ai-widget-pkg1-quote-bg" aria-hidden="true">“</span>
<div class="papathemes-ai-widget-pkg1-r-meta">
<div class="papathemes-ai-widget-pkg1-r-stars"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>
<span class="papathemes-ai-widget-pkg1-r-ago">2 days ago</span>
</div>
<p class="papathemes-ai-widget-pkg1-r-text">Switched our entire parts ordering here. Faster fitment lookups and far fewer wrong-part returns.</p>
<footer class="papathemes-ai-widget-pkg1-r-author">
<div class="papathemes-ai-widget-pkg1-avatar" style="background:linear-gradient(135deg, #334155, #1e293b)">DM</div>
<div class="papathemes-ai-widget-pkg1-r-id">
<strong class="papathemes-ai-widget-pkg1-r-name">Dana M.<span class="papathemes-ai-widget-pkg1-r-check" aria-label="Verified buyer" title="Verified buyer"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span></strong>
<span class="papathemes-ai-widget-pkg1-r-role">Shop Owner</span>
</div>
</footer>
</article>
<article class="papathemes-ai-widget-pkg1-review">
<span class="papathemes-ai-widget-pkg1-quote-bg" aria-hidden="true">“</span>
<div class="papathemes-ai-widget-pkg1-r-meta">
<div class="papathemes-ai-widget-pkg1-r-stars"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>
<span class="papathemes-ai-widget-pkg1-r-ago">1 week ago</span>
</div>
<p class="papathemes-ai-widget-pkg1-r-text">The performance suspension kit arrived complete with hardware. Install was clean and the ride is night-and-day.</p>
<footer class="papathemes-ai-widget-pkg1-r-author">
<div class="papathemes-ai-widget-pkg1-avatar" style="background:linear-gradient(135deg, #475569, #334155)">EK</div>
<div class="papathemes-ai-widget-pkg1-r-id">
<strong class="papathemes-ai-widget-pkg1-r-name">Erin K.<span class="papathemes-ai-widget-pkg1-r-check" aria-label="Verified buyer" title="Verified buyer"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span></strong>
<span class="papathemes-ai-widget-pkg1-r-role">DIY Builder</span>
</div>
</footer>
</article>
<article class="papathemes-ai-widget-pkg1-review">
<span class="papathemes-ai-widget-pkg1-quote-bg" aria-hidden="true">“</span>
<div class="papathemes-ai-widget-pkg1-r-meta">
<div class="papathemes-ai-widget-pkg1-r-stars"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>
<span class="papathemes-ai-widget-pkg1-r-ago">2 weeks ago</span>
</div>
<p class="papathemes-ai-widget-pkg1-r-text">OEM brake parts arrive on time, every time. Shop pricing keeps our margin healthy.</p>
<footer class="papathemes-ai-widget-pkg1-r-author">
<div class="papathemes-ai-widget-pkg1-avatar" style="background:linear-gradient(135deg, #475569, #334155)">RT</div>
<div class="papathemes-ai-widget-pkg1-r-id">
<strong class="papathemes-ai-widget-pkg1-r-name">Ray T.<span class="papathemes-ai-widget-pkg1-r-check" aria-label="Verified buyer" title="Verified buyer"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span></strong>
<span class="papathemes-ai-widget-pkg1-r-role">Service Manager</span>
</div>
</footer>
</article>
<article class="papathemes-ai-widget-pkg1-review">
<span class="papathemes-ai-widget-pkg1-quote-bg" aria-hidden="true">“</span>
<div class="papathemes-ai-widget-pkg1-r-meta">
<div class="papathemes-ai-widget-pkg1-r-stars"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>
<span class="papathemes-ai-widget-pkg1-r-ago">3 weeks ago</span>
</div>
<p class="papathemes-ai-widget-pkg1-r-text">Right-spec sensors and gaskets cut my diagnostic time noticeably. Reordering by VIN is effortless.</p>
<footer class="papathemes-ai-widget-pkg1-r-author">
<div class="papathemes-ai-widget-pkg1-avatar" style="background:linear-gradient(135deg, #334155, #1e293b)">SP</div>
<div class="papathemes-ai-widget-pkg1-r-id">
<strong class="papathemes-ai-widget-pkg1-r-name">Sofia P.<span class="papathemes-ai-widget-pkg1-r-check" aria-label="Verified buyer" title="Verified buyer"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span></strong>
<span class="papathemes-ai-widget-pkg1-r-role">Mechanic</span>
</div>
</footer>
</article>
<article class="papathemes-ai-widget-pkg1-review">
<span class="papathemes-ai-widget-pkg1-quote-bg" aria-hidden="true">“</span>
<div class="papathemes-ai-widget-pkg1-r-meta">
<div class="papathemes-ai-widget-pkg1-r-stars"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>
<span class="papathemes-ai-widget-pkg1-r-ago">1 month ago</span>
</div>
<p class="papathemes-ai-widget-pkg1-r-text">Performance intake shipped same day before a track event. Saved my weekend.</p>
<footer class="papathemes-ai-widget-pkg1-r-author">
<div class="papathemes-ai-widget-pkg1-avatar" style="background:linear-gradient(135deg, #475569, #334155)">JL</div>
<div class="papathemes-ai-widget-pkg1-r-id">
<strong class="papathemes-ai-widget-pkg1-r-name">Jordan L.<span class="papathemes-ai-widget-pkg1-r-check" aria-label="Verified buyer" title="Verified buyer"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span></strong>
<span class="papathemes-ai-widget-pkg1-r-role">Car Enthusiast</span>
</div>
</footer>
</article>
<article class="papathemes-ai-widget-pkg1-review">
<span class="papathemes-ai-widget-pkg1-quote-bg" aria-hidden="true">“</span>
<div class="papathemes-ai-widget-pkg1-r-meta">
<div class="papathemes-ai-widget-pkg1-r-stars"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>
<span class="papathemes-ai-widget-pkg1-r-ago">1 month ago</span>
</div>
<p class="papathemes-ai-widget-pkg1-r-text">Maintenance parts arrive ready to install. No more lost time chasing fitment.</p>
<footer class="papathemes-ai-widget-pkg1-r-author">
<div class="papathemes-ai-widget-pkg1-avatar" style="background:linear-gradient(135deg, #1e293b, #0f172a)">MA</div>
<div class="papathemes-ai-widget-pkg1-r-id">
<strong class="papathemes-ai-widget-pkg1-r-name">Marcus A.<span class="papathemes-ai-widget-pkg1-r-check" aria-label="Verified buyer" title="Verified buyer"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span></strong>
<span class="papathemes-ai-widget-pkg1-r-role">Fleet Manager</span>
</div>
</footer>
</article>
<article class="papathemes-ai-widget-pkg1-review">
<span class="papathemes-ai-widget-pkg1-quote-bg" aria-hidden="true">“</span>
<div class="papathemes-ai-widget-pkg1-r-meta">
<div class="papathemes-ai-widget-pkg1-r-stars"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>
<span class="papathemes-ai-widget-pkg1-r-ago">2 months ago</span>
</div>
<p class="papathemes-ai-widget-pkg1-r-text">The eco mailers and paper void fill let us drop plastic entirely. Our customers love the sustainable switch.</p>
<footer class="papathemes-ai-widget-pkg1-r-author">
<div class="papathemes-ai-widget-pkg1-avatar" style="background:linear-gradient(135deg, #1e293b, #0f172a)">NB</div>
<div class="papathemes-ai-widget-pkg1-r-id">
<strong class="papathemes-ai-widget-pkg1-r-name">Nina B.<span class="papathemes-ai-widget-pkg1-r-check" aria-label="Verified buyer" title="Verified buyer"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span></strong>
<span class="papathemes-ai-widget-pkg1-r-role">Subscription Box Founder</span>
</div>
</footer>
</article>
<article class="papathemes-ai-widget-pkg1-review">
<span class="papathemes-ai-widget-pkg1-quote-bg" aria-hidden="true">“</span>
<div class="papathemes-ai-widget-pkg1-r-meta">
<div class="papathemes-ai-widget-pkg1-r-stars"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>
<span class="papathemes-ai-widget-pkg1-r-ago">2 months ago</span>
</div>
<p class="papathemes-ai-widget-pkg1-r-text">Double-wall cartons hold up across multiple carrier hand-offs. Breakage on heavy SKUs is basically gone.</p>
<footer class="papathemes-ai-widget-pkg1-r-author">
<div class="papathemes-ai-widget-pkg1-avatar" style="background:linear-gradient(135deg, #334155, #1e293b)">CT</div>
<div class="papathemes-ai-widget-pkg1-r-id">
<strong class="papathemes-ai-widget-pkg1-r-name">Carlos T.<span class="papathemes-ai-widget-pkg1-r-check" aria-label="Verified buyer" title="Verified buyer"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span></strong>
<span class="papathemes-ai-widget-pkg1-r-role">3PL Operations</span>
</div>
</footer>
</article>
<article class="papathemes-ai-widget-pkg1-review">
<span class="papathemes-ai-widget-pkg1-quote-bg" aria-hidden="true">“</span>
<div class="papathemes-ai-widget-pkg1-r-meta">
<div class="papathemes-ai-widget-pkg1-r-stars"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>
<span class="papathemes-ai-widget-pkg1-r-ago">3 months ago</span>
</div>
<p class="papathemes-ai-widget-pkg1-r-text">Consistent board strength and accurate dimensions. We can plan pallet loads without surprises.</p>
<footer class="papathemes-ai-widget-pkg1-r-author">
<div class="papathemes-ai-widget-pkg1-avatar" style="background:linear-gradient(135deg, #64748b, #475569)">HW</div>
<div class="papathemes-ai-widget-pkg1-r-id">
<strong class="papathemes-ai-widget-pkg1-r-name">Hannah W.<span class="papathemes-ai-widget-pkg1-r-check" aria-label="Verified buyer" title="Verified buyer"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span></strong>
<span class="papathemes-ai-widget-pkg1-r-role">Retail Buyer</span>
</div>
</footer>
</article>
<article class="papathemes-ai-widget-pkg1-review">
<span class="papathemes-ai-widget-pkg1-quote-bg" aria-hidden="true">“</span>
<div class="papathemes-ai-widget-pkg1-r-meta">
<div class="papathemes-ai-widget-pkg1-r-stars"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>
<span class="papathemes-ai-widget-pkg1-r-ago">3 months ago</span>
</div>
<p class="papathemes-ai-widget-pkg1-r-text">Poly mailers are light, tough, and cheap to ship. Exactly what I needed to scale my store.</p>
<footer class="papathemes-ai-widget-pkg1-r-author">
<div class="papathemes-ai-widget-pkg1-avatar" style="background:linear-gradient(135deg, #475569, #334155)">TV</div>
<div class="papathemes-ai-widget-pkg1-r-id">
<strong class="papathemes-ai-widget-pkg1-r-name">Tom V.<span class="papathemes-ai-widget-pkg1-r-check" aria-label="Verified buyer" title="Verified buyer"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span></strong>
<span class="papathemes-ai-widget-pkg1-r-role">Dropship Seller</span>
</div>
</footer>
</article>
<article class="papathemes-ai-widget-pkg1-review">
<span class="papathemes-ai-widget-pkg1-quote-bg" aria-hidden="true">“</span>
<div class="papathemes-ai-widget-pkg1-r-meta">
<div class="papathemes-ai-widget-pkg1-r-stars"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>
<span class="papathemes-ai-widget-pkg1-r-ago">4 months ago</span>
</div>
<p class="papathemes-ai-widget-pkg1-r-text">Their team helped me spec the right cushioning for fragile glassware. Damage claims dropped to near zero.</p>
<footer class="papathemes-ai-widget-pkg1-r-author">
<div class="papathemes-ai-widget-pkg1-avatar" style="background:linear-gradient(135deg, #64748b, #475569)">GR</div>
<div class="papathemes-ai-widget-pkg1-r-id">
<strong class="papathemes-ai-widget-pkg1-r-name">Grace R.<span class="papathemes-ai-widget-pkg1-r-check" aria-label="Verified buyer" title="Verified buyer"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span></strong>
<span class="papathemes-ai-widget-pkg1-r-role">Logistics Coordinator</span>
</div>
</footer>
</article>
<article class="papathemes-ai-widget-pkg1-review">
<span class="papathemes-ai-widget-pkg1-quote-bg" aria-hidden="true">“</span>
<div class="papathemes-ai-widget-pkg1-r-meta">
<div class="papathemes-ai-widget-pkg1-r-stars"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>
<span class="papathemes-ai-widget-pkg1-r-ago">5 months ago</span>
</div>
<p class="papathemes-ai-widget-pkg1-r-text">Bulk tape and box bundles ship fast and the quality is consistent. Our go-to supplier now.</p>
<footer class="papathemes-ai-widget-pkg1-r-author">
<div class="papathemes-ai-widget-pkg1-avatar" style="background:linear-gradient(135deg, #1e293b, #0f172a)">PD</div>
<div class="papathemes-ai-widget-pkg1-r-id">
<strong class="papathemes-ai-widget-pkg1-r-name">Priya D.<span class="papathemes-ai-widget-pkg1-r-check" aria-label="Verified buyer" title="Verified buyer"><svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span></strong>
<span class="papathemes-ai-widget-pkg1-r-role">Shop Owner</span>
</div>
</footer>
</article>
</div>
</div>
</div>
</div>
<script>
(function(){
var id = 'pkg1';
var gap = 16;
var root = document.querySelector('.papathemes-ai-widget-' + id);
if (!root) return;
var track = root.querySelector('.papathemes-ai-widget-' + id + '-scroll');
if (!track) return;
var prev = root.querySelector('[data-dir="prev"]');
var next = root.querySelector('[data-dir="next"]');
var cardW = function(){ var c = track.querySelector('.papathemes-ai-widget-' + id + '-review'); return c ? c.offsetWidth + gap : 260; };
if (prev) prev.onclick = function(){ track.scrollBy({ left: -cardW(), behavior: 'smooth' }); };
if (next) next.onclick = function(){ track.scrollBy({ left: cardW(), behavior: 'smooth' }); };
})();
</script>
14. Resources — marketing block (Page Builder)¶
The guide-cards block (heading "Auto Parts Resources & Guides", with cards How to Find the Right Fitment, OEM vs Aftermarket: When to Choose, DIY Repair Safety & Tools) follows Customer Reviews. Also an AI HTML Generator | PapaThemes widget.
‹ AI HTML Generator | PapaThemes⋯
▾ Content
<style>
.papathemes-ai-widget-… { … }
…your HTML…
</style>
.papathemes-ai-widget-… { … }
…your HTML…
</style>
Expand HTML EditorSave HTML
Show in container div
Exact demo HTML (AutoParts) — Resources, paste into the widget's HTML Content field
<style>
.papathemes-ai-widget-sg5va1rw {
--papathemes-ai-widget-sg5va1rw-white: #ffffff;
--papathemes-ai-widget-sg5va1rw-bark-100: #f1f5f9;
--papathemes-ai-widget-sg5va1rw-bark-500: #64748b;
--papathemes-ai-widget-sg5va1rw-bark-800: #1e293b;
--papathemes-ai-widget-sg5va1rw-bark-900: #0f172a;
--papathemes-ai-widget-sg5va1rw-terra: #d97706;
--papathemes-ai-widget-sg5va1rw-terra-dark: #b45309;
--papathemes-ai-widget-sg5va1rw-terra-pale: #fffbeb;
--papathemes-ai-widget-sg5va1rw-forest-700: #15803d;
--papathemes-ai-widget-sg5va1rw-font-heading: 'Inter', sans-serif;
--papathemes-ai-widget-sg5va1rw-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100%;
}
.papathemes-ai-widget-sg5va1rw *,
.papathemes-ai-widget-sg5va1rw *::before,
.papathemes-ai-widget-sg5va1rw *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.papathemes-ai-widget-sg5va1rw-section {
padding: 32px 20px 0;
}
.papathemes-ai-widget-sg5va1rw-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.papathemes-ai-widget-sg5va1rw-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.papathemes-ai-widget-sg5va1rw-sec-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--papathemes-ai-widget-sg5va1rw-terra-pale);
color: var(--papathemes-ai-widget-sg5va1rw-terra);
}
.papathemes-ai-widget-sg5va1rw-sec-icon svg {
width: 18px;
height: 18px;
}
.papathemes-ai-widget-sg5va1rw-title {
font-family: var(--papathemes-ai-widget-sg5va1rw-font-heading);
font-size: 18px;
font-weight: 600;
color: var(--papathemes-ai-widget-sg5va1rw-bark-900);
}
.papathemes-ai-widget-sg5va1rw-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 20px;
}
.papathemes-ai-widget-sg5va1rw-card-link {
text-decoration: none;
color: inherit;
display: block;
}
.papathemes-ai-widget-sg5va1rw-card {
background: var(--papathemes-ai-widget-sg5va1rw-white);
border: 1px solid var(--papathemes-ai-widget-sg5va1rw-bark-100);
border-radius: 8px;
overflow: hidden;
transition: all .35s;
}
a.papathemes-ai-widget-sg5va1rw-card-link .papathemes-ai-widget-sg5va1rw-card {
cursor: pointer;
}
a.papathemes-ai-widget-sg5va1rw-card-link .papathemes-ai-widget-sg5va1rw-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 20px rgba(15, 13, 10, .08);
border-color: transparent;
}
.papathemes-ai-widget-sg5va1rw-thumb {
aspect-ratio: 16/9;
position: relative;
display: block;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #f8fafc;
}
.papathemes-ai-widget-sg5va1rw-thumb img {
width: 100%;
height: 100%;
/* cover + 4:3 ratio = uniform card visuals across stores:
- packaging square product photos crop minimally (~12% top/bottom)
- electronics 16:9 hero images crop slightly on sides (~12%)
- subject usually centered → safe crop for both
Eliminates the "different image sizes inside same-size frames" bug
caused by object-fit: contain + variable source ratios. */
object-fit: cover;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.papathemes-ai-widget-sg5va1rw-thumb img.papathemes-ai-widget-sg5va1rw-loaded {
opacity: 1;
}
.papathemes-ai-widget-sg5va1rw-type {
position: absolute;
top: 10px;
left: 10px;
padding: 3px 9px;
background: rgba(0, 0, 0, .45);
backdrop-filter: blur(6px);
border-radius: 4px;
font-family: var(--papathemes-ai-widget-sg5va1rw-font-body);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #fff;
display: flex;
align-items: center;
gap: 4px;
z-index: 2;
}
.papathemes-ai-widget-sg5va1rw-type svg {
width: 10px;
height: 10px;
}
.papathemes-ai-widget-sg5va1rw-body {
padding: 18px;
}
.papathemes-ai-widget-sg5va1rw-body h3 {
font-family: var(--papathemes-ai-widget-sg5va1rw-font-body);
font-size: 13px;
font-weight: 600;
color: var(--papathemes-ai-widget-sg5va1rw-bark-800);
margin-bottom: 4px;
line-height: 1.3;
transition: color .2s;
}
a.papathemes-ai-widget-sg5va1rw-card-link .papathemes-ai-widget-sg5va1rw-card:hover .papathemes-ai-widget-sg5va1rw-body h3 {
color: var(--papathemes-ai-widget-sg5va1rw-terra-dark);
}
.papathemes-ai-widget-sg5va1rw-body p {
font-family: var(--papathemes-ai-widget-sg5va1rw-font-body);
font-size: 11px;
color: var(--papathemes-ai-widget-sg5va1rw-bark-500);
line-height: 1.5;
}
@media (max-width: 1023px) {
.papathemes-ai-widget-sg5va1rw-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.papathemes-ai-widget-sg5va1rw-section {
padding: 24px 10px 0;
}
}
</style>
<div class="papathemes-ai-widget-sg5va1rw">
<div class="papathemes-ai-widget-sg5va1rw-section">
<div class="papathemes-ai-widget-sg5va1rw-header">
<div class="papathemes-ai-widget-sg5va1rw-header-left">
<div class="papathemes-ai-widget-sg5va1rw-sec-icon">
<svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-5 2v6l-2.5-1.5L8 10V4h5zM6 20V4h.01L6 20h12V4l.01 16H6z"/></svg>
</div>
<h2 class="papathemes-ai-widget-sg5va1rw-title">Auto Parts Resources & Guides</h2>
</div>
</div>
<div class="papathemes-ai-widget-sg5va1rw-grid">
<a href="https://eshopping-autoparts-demo.mybigcommerce.com/blog/" class="papathemes-ai-widget-sg5va1rw-card-link">
<div class="papathemes-ai-widget-sg5va1rw-card">
<div class="papathemes-ai-widget-sg5va1rw-thumb">
<img
class="papathemes-ai-widget-sg5va1rw-thumb-img"
data-src="https://cdn11.bigcommerce.com/s-u0mz3ww2uj/product_images/uploaded_images/autoparts-fitment-guide.jpg?v=1779872254"
width="640"
height="360"
alt="Auto parts catalog"
loading="lazy"
/>
<span class="papathemes-ai-widget-sg5va1rw-type">
<svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
Guide
</span>
</div>
<div class="papathemes-ai-widget-sg5va1rw-body">
<h3>How to Find the Right Fitment</h3>
<p>Year/make/model and VIN verification to order the right part the first time.</p>
</div>
</div>
</a>
<a href="https://eshopping-autoparts-demo.mybigcommerce.com/blog/" class="papathemes-ai-widget-sg5va1rw-card-link">
<div class="papathemes-ai-widget-sg5va1rw-card">
<div class="papathemes-ai-widget-sg5va1rw-thumb">
<img
class="papathemes-ai-widget-sg5va1rw-thumb-img"
data-src="https://cdn11.bigcommerce.com/s-u0mz3ww2uj/product_images/uploaded_images/autoparts-oem-vs-aftermarket.jpg?v=1779872265"
width="640"
height="360"
alt="OEM and aftermarket parts"
loading="lazy"
/>
<span class="papathemes-ai-widget-sg5va1rw-type">
<svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
Guide
</span>
</div>
<div class="papathemes-ai-widget-sg5va1rw-body">
<h3>OEM vs Aftermarket: When to Choose</h3>
<p>Trade-offs between genuine OEM and trusted aftermarket performance brands.</p>
</div>
</div>
</a>
<a href="https://eshopping-autoparts-demo.mybigcommerce.com/blog/" class="papathemes-ai-widget-sg5va1rw-card-link">
<div class="papathemes-ai-widget-sg5va1rw-card">
<div class="papathemes-ai-widget-sg5va1rw-thumb">
<img
class="papathemes-ai-widget-sg5va1rw-thumb-img"
data-src="https://cdn11.bigcommerce.com/s-u0mz3ww2uj/product_images/uploaded_images/autoparts-diy-repair-safety.jpg?v=1779872276"
width="640"
height="360"
alt="DIY auto repair tools"
loading="lazy"
/>
<span class="papathemes-ai-widget-sg5va1rw-type">
<svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
Guide
</span>
</div>
<div class="papathemes-ai-widget-sg5va1rw-body">
<h3>DIY Repair Safety & Tools</h3>
<p>Essential tools and safety gear for confident at-home auto repair work.</p>
</div>
</div>
</a>
</div>
</div>
</div>
<script>
(function(){
var id = 'sg5va1rw';
var root = document.querySelector('.papathemes-ai-widget-' + id);
if (!root) return;
var images = root.querySelectorAll('img[data-src]');
var imageObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var img = entry.target;
var src = img.getAttribute('data-src');
if (src) {
img.src = src;
img.removeAttribute('data-src');
img.addEventListener('load', function() {
img.classList.add('papathemes-ai-widget-' + id + '-loaded');
});
imageObserver.unobserve(img);
}
}
});
}, { rootMargin: '50px' });
images.forEach(function(img) {
imageObserver.observe(img);
});
})();
</script>
15. Brands carousel¶
eShopping Theme → Homepage Sections → Homepage Brands Limit: 12. Square / transparent-PNG logos at a consistent size sit evenly in the carousel.
eShopping Theme✕
Homepage Sections
Homepage Brands Limit12▾
BigCommerce admin
Home
Orders
Products⌃
All products
Add
Categories
Options
Filtering
Reviews
Brands
Import
Export
Customers⌄
Storefront⌄
Marketing⌄
Analytics
Settings⌄
16. Blog posts¶
Blog posts count: 3. Posts come from Storefront → Blog.
BigCommerce admin
Home
Orders
Products⌄
Customers⌄
Storefront⌃
Themes
Logo
Home page carousel
Social media links
Script manager
Web pages
Blog
Image manager
Marketing⌄
Analytics
Settings⌄
17. Newsletter — variation default¶
- Heading: Get Parts Updates & Deals
- Description: New arrivals, fitment guides, and exclusive discounts delivered weekly.
The signup writes to Customers → Subscribers.
eShopping Theme✕
Homepage Sections
Show Newsletter
heading supports inline HTMLGet <em>Parts Updates</em> & Deals|N…
18. About — marketing block (Page Builder)¶
Below the Newsletter, the SEO intro block (heading "Your Complete Auto Parts Source"). An AI HTML Generator | PapaThemes widget.
‹ AI HTML Generator | PapaThemes⋯
▾ Content
<style>
.papathemes-ai-widget-… { … }
…your HTML…
</style>
.papathemes-ai-widget-… { … }
…your HTML…
</style>
Expand HTML EditorSave HTML
Show in container div
Exact demo HTML (AutoParts) — About, paste into the widget's HTML Content field
<style>
.papathemes-ai-widget-k83ixx3j {
--papathemes-ai-widget-k83ixx3j-white: #ffffff;
--papathemes-ai-widget-k83ixx3j-bark-100: #f1f5f9;
--papathemes-ai-widget-k83ixx3j-bark-600: #475569;
--papathemes-ai-widget-k83ixx3j-bark-900: #0f172a;
--papathemes-ai-widget-k83ixx3j-font-heading: 'Inter', sans-serif;
--papathemes-ai-widget-k83ixx3j-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
box-sizing: border-box;
margin: 32px 20px 0;
padding: 0;
}
.papathemes-ai-widget-k83ixx3j *,
.papathemes-ai-widget-k83ixx3j *::before,
.papathemes-ai-widget-k83ixx3j *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.papathemes-ai-widget-k83ixx3j-section {
background: var(--papathemes-ai-widget-k83ixx3j-white);
border: 1px solid var(--papathemes-ai-widget-k83ixx3j-bark-100);
border-radius: 8px;
padding: 32px;
}
.papathemes-ai-widget-k83ixx3j-container {
max-width: 1200px;
margin: 0 auto;
}
.papathemes-ai-widget-k83ixx3j-title {
font-family: var(--papathemes-ai-widget-k83ixx3j-font-heading);
font-size: 1.25rem;
font-weight: 600;
color: var(--papathemes-ai-widget-k83ixx3j-bark-900);
text-align: center;
margin-bottom: 16px;
line-height: 1.3;
}
.papathemes-ai-widget-k83ixx3j-text {
font-family: var(--papathemes-ai-widget-k83ixx3j-font-body);
font-size: 0.86rem;
color: var(--papathemes-ai-widget-k83ixx3j-bark-600);
line-height: 1.8;
max-width: 860px;
margin-left: auto;
margin-right: auto;
margin-bottom: 12px;
}
@media (max-width: 767px) {
.papathemes-ai-widget-k83ixx3j {
margin: 24px 10px 0;
}
.papathemes-ai-widget-k83ixx3j-section {
padding: 24px 18px;
}
.papathemes-ai-widget-k83ixx3j-title {
font-size: 1.15rem;
}
}
</style>
<div class="papathemes-ai-widget-k83ixx3j">
<div class="papathemes-ai-widget-k83ixx3j-section">
<div class="papathemes-ai-widget-k83ixx3j-container">
<h2 class="papathemes-ai-widget-k83ixx3j-title">Your Complete Auto Parts Source</h2>
<p class="papathemes-ai-widget-k83ixx3j-text">We supply the OEM and performance parts that keep mechanics, fleets, and enthusiasts moving. Our catalog spans engine, brake, suspension, electrical, body, and accessory parts — verified for fitment and stocked for fast, predictable reordering.</p>
<p class="papathemes-ai-widget-k83ixx3j-text">From routine maintenance to performance upgrades, every part is chosen for fitment accuracy and quality. Browse trusted OEM and aftermarket brands used by thousands of shops and DIY builders every day.</p>
</div>
</div>
</div>
19. Talk to an Expert — marketing block (Page Builder)¶
Directly below About, the contact CTA (heading "Need help finding the right part? Talk to an Auto Parts Specialist"). An AI HTML Generator | PapaThemes widget.
‹ AI HTML Generator | PapaThemes⋯
▾ Content
<style>
.papathemes-ai-widget-… { … }
…your HTML…
</style>
.papathemes-ai-widget-… { … }
…your HTML…
</style>
Expand HTML EditorSave HTML
Show in container div
Exact demo HTML (AutoParts) — Talk to an Expert, paste into the widget's HTML Content field
<style>
.papathemes-ai-widget-lkaloss0 {
--papathemes-ai-widget-lkaloss0-white: #ffffff;
--papathemes-ai-widget-lkaloss0-cream: #f8fafc;
--papathemes-ai-widget-lkaloss0-bark-200: #cbd5e1;
--papathemes-ai-widget-lkaloss0-bark-300: #cbd5e1;
--papathemes-ai-widget-lkaloss0-bark-400: #94a3b8;
--papathemes-ai-widget-lkaloss0-bark-700: #334155;
--papathemes-ai-widget-lkaloss0-bark-800: #1e293b;
--papathemes-ai-widget-lkaloss0-bark-900: #0f172a;
--papathemes-ai-widget-lkaloss0-bark-950: #060912;
--papathemes-ai-widget-lkaloss0-terra: #d97706;
--papathemes-ai-widget-lkaloss0-terra-dark: #b45309;
--papathemes-ai-widget-lkaloss0-terra-light: #f59e0b;
--papathemes-ai-widget-lkaloss0-font-heading: 'Inter', sans-serif;
--papathemes-ai-widget-lkaloss0-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100%;
}
.papathemes-ai-widget-lkaloss0 *,
.papathemes-ai-widget-lkaloss0 *::before,
.papathemes-ai-widget-lkaloss0 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.papathemes-ai-widget-lkaloss0-bar {
margin: 32px 20px 0;
background:
linear-gradient(135deg, var(--papathemes-ai-widget-lkaloss0-bark-900) 0%, var(--papathemes-ai-widget-lkaloss0-bark-800) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 36px rgba(2, 6, 18, 0.35);
border-radius: 14px;
padding: 30px 36px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
position: relative;
overflow: hidden;
}
.papathemes-ai-widget-lkaloss0-bar::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 90% at 92% 50%, rgba(217, 119, 6, 0.18), transparent 70%),
radial-gradient(ellipse 40% 60% at 0% 0%, rgba(255, 255, 255, 0.04), transparent 60%);
pointer-events: none;
}
.papathemes-ai-widget-lkaloss0-bar::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.5;
pointer-events: none;
}
.papathemes-ai-widget-lkaloss0-left {
position: relative;
z-index: 1;
}
.papathemes-ai-widget-lkaloss0-heading {
font-family: var(--papathemes-ai-widget-lkaloss0-font-heading);
font-size: 17px;
font-weight: 600;
color: var(--papathemes-ai-widget-lkaloss0-white);
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.papathemes-ai-widget-lkaloss0-heading em {
font-style: italic;
font-weight: 400;
// Hardcoded warm gold accent — universal premium signal, decoupled from
// per-store terra-light (renders blue on Electronics #60a5fa).
color: #fbbf24;
}
.papathemes-ai-widget-lkaloss0-desc {
font-family: var(--papathemes-ai-widget-lkaloss0-font-body);
font-size: 13px;
line-height: 1.55;
color: var(--papathemes-ai-widget-lkaloss0-bark-300);
max-width: 60ch;
}
.papathemes-ai-widget-lkaloss0-btns {
display: flex;
gap: 10px;
position: relative;
z-index: 1;
}
.papathemes-ai-widget-lkaloss0-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 8px;
font-family: var(--papathemes-ai-widget-lkaloss0-font-heading);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all .25s cubic-bezier(.16, 1, .3, 1);
letter-spacing: 0.01em;
border: none;
cursor: pointer;
}
.papathemes-ai-widget-lkaloss0-btn svg {
width: 15px;
height: 15px;
transition: transform .3s;
}
.papathemes-ai-widget-lkaloss0-btn--terra {
background: var(--papathemes-ai-widget-lkaloss0-terra);
color: var(--papathemes-ai-widget-lkaloss0-white);
}
.papathemes-ai-widget-lkaloss0-btn--terra:hover {
background: var(--papathemes-ai-widget-lkaloss0-terra-dark);
color: var(--papathemes-ai-widget-lkaloss0-white);
box-shadow: 0 6px 24px rgba(217, 119, 6, .35);
transform: translateY(-1px);
text-decoration: none;
}
.papathemes-ai-widget-lkaloss0-btn--terra:hover svg {
transform: translateX(3px);
}
.papathemes-ai-widget-lkaloss0-btn--ghost {
border: 1px solid rgba(255, 255, 255, 0.22);
color: var(--papathemes-ai-widget-lkaloss0-white);
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(8px);
}
.papathemes-ai-widget-lkaloss0-btn--ghost:hover {
border-color: rgba(255, 255, 255, 0.45);
color: var(--papathemes-ai-widget-lkaloss0-white);
background: rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
text-decoration: none;
}
@media (max-width: 767px) {
.papathemes-ai-widget-lkaloss0-bar {
margin-left: 10px;
margin-right: 10px;
flex-direction: column;
text-align: center;
padding: 28px 24px;
}
.papathemes-ai-widget-lkaloss0-btns {
flex-direction: column;
width: 100%;
}
.papathemes-ai-widget-lkaloss0-btn {
justify-content: center;
}
}
</style>
<div class="papathemes-ai-widget-lkaloss0">
<div class="papathemes-ai-widget-lkaloss0-bar">
<div class="papathemes-ai-widget-lkaloss0-left">
<h3 class="papathemes-ai-widget-lkaloss0-heading">Need help finding the right part? <em>Talk to an Auto Parts Specialist</em></h3>
<p class="papathemes-ai-widget-lkaloss0-desc">Our specialists verify fitment by year, make, model, and VIN so you order right the first time. Call or chat anytime.</p>
</div>
<div class="papathemes-ai-widget-lkaloss0-btns">
<a href="/contact-us/" class="papathemes-ai-widget-lkaloss0-btn papathemes-ai-widget-lkaloss0-btn--terra">
Request a Quote
<svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
</a>
<a href="tel:18005550123" class="papathemes-ai-widget-lkaloss0-btn papathemes-ai-widget-lkaloss0-btn--ghost">
<svg aria-hidden="true" focusable="false" fill="currentColor" viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
(800) 555-0123
</a>
</div>
</div>
</div>
20. Footer tagline — marketing block (Page Builder)¶
The footer carries a small tagline widget (this demo: "eShopping Autoparts Demo — OEM & aftermarket auto parts for every make and model."). It lives in a global region, so it shows on every page. Also an AI HTML Generator | PapaThemes widget.
‹ AI HTML Generator | PapaThemes⋯
▾ Content
<style>
.papathemes-ai-widget-… { … }
…your HTML…
</style>
.papathemes-ai-widget-… { … }
…your HTML…
</style>
Expand HTML EditorSave HTML
Show in container div
Exact demo HTML (AutoParts) — Footer tagline, paste into the widget's HTML Content field
Five home widgets + footer tagline
The AutoParts demo home page has five content blocks built with the AI HTML Generator | PapaThemes widget (Why Choose Us, Customer Reviews, Resources, About, Talk to an Expert), plus a sixth widget for the footer tagline. They require the PapaThemes app and arrive with the demo widget import, not the theme settings. See the PapaThemes marketing blocks reference for the full set.
Beyond the home page¶
These AutoParts settings drive other pages and on-site widgets. The promo card, cart goals, and PDP text below are set by the variation; Frequently Bought Together, cross-sell, urgency signals, and pop-ups are theme defaults (the same in every variation) and active out of the box.
Sidebar promo card¶
- Text: Free Shipping $250+ — Free ground shipping on qualifying parts orders.
- Button: Shop Parts →
/shipping/
This is the sidebar promo card (shown on category, brand, and search pages), not the top banner.
eShopping Theme✕
Sidebar Promo Card
Sidebar Promo TextFree Shipping $250+|Free ground ship…
Cart free-shipping / reward goals¶
Progress goals shown in the cart drawer:
| Threshold | Reward |
|---|---|
| $50 | Free Shipping |
| $100 | 10% Off |
| $200 | Free Gift |
eShopping Theme✕
Cart Goal Bar
Goal items (amount|icon|label, comma-separated)Enter text…
comma-separatedEnter text…
Cart cross-sell ("You May Also Like")¶
A "You May Also Like" cross-sell block appears in the cart: up to 6 items on the full cart page and up to 4 items in the slide-out cart drawer.
eShopping Theme✕
Cart Cross-sell
Cross-sell products (page,drawer — 0 = off)6,4
Product page (PDP)¶
Shipping / warranty strip:
| Title | Detail |
|---|---|
| Free Shipping | on parts orders over $250 |
| Fitment Guarantee | verified compatibility |
| 30-Day Returns | no-hassle policy |
eShopping Theme✕
Product Page (PDP)
PDP Shipping TextFree Shipping|on parts orders over $…
Warranty accordion (4-card grid):
| Section | Content |
|---|---|
| What's Covered | Manufacturing defects, material failures, and premature wear under normal vehicle use. |
| What's Not Covered | Damage from improper installation, racing, off-road abuse, or normal wear items. |
| How to Claim | Contact us with your order number and part details for quick resolution. |
| Extended Warranty | Upgrade to our extended coverage plan for added peace of mind. |
eShopping Theme✕
Product Page (PDP)
PDP Warranty TextEnter text…
Show FAQ Tab
Show Mobile Sticky Add to Cart
Frequently Bought Together: shows 2 products, discount 0%.
eShopping Theme✕
Frequently Bought Toget…
FBT Products Count2▾
Visual Bundle Discount %0▾
Urgency & social proof¶
- Live view count and last order time are both on.
- Recent sales pop-ups show on all pages, cycling through demo sales from California, Texas, Florida, New York, and Oregon.
Where these appear & how the numbers are generated
The "people viewing" and "last ordered" signals render on product pages, not the home page. The figures are simulated from configured ranges (viewer counts and last-order hours) — not real-time analytics.
eShopping Theme✕
Urgency Signals (Social…
Show live view count
Show last order time
Fake view count range: min,max
Last order time range: min,max hours ago
Recent Sales Popup
Show on pagesall
Popup timing: delay, show duration, pause between, max popups5,5,15,5
Products (ID or SKU|location|timeAgo, comma-separated)Enter text…
Pop-ups¶
Newsletter pop-up:
- Text: Get 10% Off Your First Order — Sign up for our newsletter and receive an exclusive discount code.
- Options: shows after 20 seconds; reappears after 14 days.
eShopping Theme✕
Newsletter Popup
Newsletter Content — Title|DescriptionEnter text…
Show after (seconds) | Repeat every (days)Enter text…
Promo pop-up:
- Heading: Spring Sale
- Body: Get 15% off your entire order with the code below.
- Code:
SPRING15 - Button: Shop Now →
/ - Options: shows after 5 seconds; reappears after 3 days.
eShopping Theme✕
Promotion Popup
Promo Content — Title|Description|Coupon Code|Button Text|Button URLEnter text…
Show after (seconds) | Repeat every (days) | Start date | End dateEnter text…
Exit-intent pop-up:
- Heading: Wait! Don't Go Empty-Handed
- Body: Here's a special 10% discount just for you.
- Code:
STAY10 - Button: Claim Discount →
/ - Options: discount type. On desktop it triggers when the cursor leaves the top of the window; on mobile after 45 seconds of inactivity. It reappears at most once per day.
eShopping Theme✕
Exit Intent Popup
Exit Content — Title|Description|Coupon Code|Button Text|Button URLEnter text…
Type (discount/newsletter/custom) | Mobile timeout (seconds) | Repeat every (days)Enter text…
Final check¶
Click Save → Publish. Open the storefront in a private browser window. Compare to https://eshopping-autoparts-demo.mybigcommerce.com.