Design And Styles Reference

This document is a reference for the Design & Styles screen of the ADP Car Market Hub plugin (Car Market Hub → Design & Styles). It explains every card, the meaning of each color and typography token, and how the plugin interacts with your active theme.

When to use this document

Use this reference when you want to align the look and feel of vehicle pages with your brand, change typography for specific frontend contexts, configure social sharing or the PDF datasheet button, control image lazy loading, or add custom CSS.

Overview

The screen is organized into the following cards:

1. Color scheme & branding — primary palette and button colors.
2. Other design settings — additional color tokens, border radius and button size preset.
3. Typography System — typography per page context (Vehicle Detail, Archive & Grid, Favorites, Compare).
4. Social sharing buttons — networks shown on single vehicle pages and their placement.
5. PDF Datasheet — toggle to expose a print-optimized vehicle summary.
6. Performance — native lazy loading for images.
7. Layout Manager — pointer to the dedicated Layout Manager tab and a global toggle to use the custom block order.
8. Custom CSS — raw CSS appended after all plugin styles.

The screen follows a "Theme First" principle: any field that supports it can be left empty to inherit from the active theme.

Requirements or prerequisites

• Permission to manage the plugin.
• For the Layout Manager toggle to take effect, you must have configured the Layout Manager screen.
• For the PDF datasheet, the visual button is shown on single vehicle pages; the PDF layout itself is configured in the PDF Manager.

Step by step instructions

1. Open Car Market Hub → Design & Styles.
2. In Color scheme & branding, set your brand colors. Use the color picker or paste hex values.
3. Open Other design settings to fine-tune optional tokens such as price/link colors, border radius and button size.
4. Open Typography System and configure each tab (Vehicle Detail, Archive & Grid, Favorites, Compare). Leave fields empty to inherit from the theme.
5. In Social sharing buttons, enable sharing, choose the visible networks, and pick the placement.
6. Toggle Enable PDF datasheet if you want a print/save-as-PDF button on single vehicle pages.
7. In Performance, enable Lazy loading to use the browser's native loading="lazy" for vehicle images.
8. In Layout Manager, decide whether to apply the custom block order saved in the Layout Manager tab.
9. Add any final overrides in Custom CSS if needed.
10. Save. Each card has its own Save Design & Styles settings button; saving any of them persists the entire form.

Configuration reference

Color scheme & branding

Other design settings

Typography System

The typography card has four tabs corresponding to frontend contexts:

Within each tab, the matrix sets typography per text role. The rows are the text roles and the columns are the typography tokens you can set for each role:

Any field left empty inherits from the active theme. The full matrix (including the Labels row) appears on the Vehicle Detail, Archive & Grid and Compare tabs. The Favorites tab uses the same columns but does not include the Labels row.

Social sharing buttons

What each placement looks like, and how it behaves on mobile:

• Below gallery — a horizontal row of share buttons directly under the photo gallery. Visible on all screen sizes.
• Sticky right sidebar — a compact bar fixed to the right edge of the screen that stays in place as the visitor scrolls. In this placement the bar also carries the Favorites, Compare and PDF datasheet quick buttons (each shown only when that feature is enabled). To avoid covering content on small screens, this bar is hidden on phones (viewport ≤ 600 px). On phone-sized screens, therefore, choose Below gallery or End of page if you want sharing to remain visible.
• End of page — a horizontal row at the very bottom of the vehicle page, below the contact section. Visible on all screen sizes (so on a phone it appears under the contact area).

If you see the share bar at the bottom of the page on a phone "under the contact button", the placement is set to End of page (or the visitor is on a tablet between 601 px and 960 px, where the Sticky right sidebar is still shown). This is expected behavior, controlled by the Placement option above.

PDF Datasheet

Performance

Layout Manager card

Custom CSS

Operational notes

• The "Theme First" principle means leaving a field empty hands control back to the active theme. This is the safest default when integrating with a new theme.
• The hover background color falls back to a derived shade if left empty, so primary buttons always have a visible hover state.
• Some areas previously available on this screen have moved: badges and labels are now in the Layout Manager under Car Archive Cards, the financing calculator is now in Settings → Frontend Features.
• The PDF Datasheet toggle here only controls whether the button is visible. If the button is shown but the PDF looks wrong, configure the layout in the PDF Manager.
• Saving any card submits the full form. To revert a section, restore the empty default and save again.

Troubleshooting

• Color changes do not appear. Clear any frontend or CDN caches. Confirm the color picker actually committed a value (the field should show a hex code).
• Typography fields seem to have no effect. Empty fields intentionally inherit from the theme. Set an explicit value if you need to override theme styles.
• Lazy loading does not work. Some themes or third-party plugins replace image markup. Confirm the rendered <img> tag includes loading="lazy". Verify in the current plugin version before publishing.
• PDF datasheet button is missing. Confirm the toggle is enabled and that the single vehicle template still includes the plugin's button area. The button is rendered only on single vehicle pages.
• The "use custom block order" toggle is on but the layout looks unchanged. Open the Layout Manager tab and confirm a custom layout is saved for the affected zone.
• Custom CSS broke a page. Remove or shorten the snippet and save again. Custom CSS overrides everything else.

Related documents

• Layout Manager Reference
• Settings Reference
• Pdf Manager Reference
• Shortcodes And Widgets Reference