Page Styling Setup

The Page Styler lets you make your diagram pages feel native to your store without writing any code. Every setting mirrors what’s already in your Shopify theme — the goal is to match them as closely as possible so customers never feel like they’ve left your store.

To open it: go to PartsDiagram Pro → Page Styling in your Shopify admin.

Header Styling

These settings control the top bar that appears on every diagram page.

Header background — Set this to the same background color as your store’s main header. If your header is black, use #000000; if it’s white, use #ffffff. Check your Shopify theme editor under Header to find the exact color.

Store name color — The color of your store name text in the header. Match this to the text color your theme uses in the navigation bar.

Store name size — Controls how large the store name text appears. Adjust until it looks proportional to your theme’s header height.

Logo

Logo — Upload the same logo image you use in your Shopify theme. PNG with a transparent background works best. If your theme shows a white logo on a dark header, upload the white version here.

Logo size — Drag the slider until the logo height matches what it looks like in your live store. Most stores land somewhere in the middle of the range.

Favicon Styling

Favicon — Upload your store’s favicon (the small icon that appears in browser tabs). This should be the same .ico, .png, or .svg file you use in your Shopify theme settings. 16×16 or 32×32 px works well.

Menubar Styling

The menubar is the navigation bar that sits below the header.

Background — The background color of the nav bar. Match this to your theme’s navigation background.

Link color — The default color of the navigation links (unvisited, not hovered). This is usually white on dark nav bars, or a dark color on light ones.

Link hover color — The color navigation links change to when a customer hovers over them. Check your live store by hovering a menu item to see what color your theme uses.

Menu link size — Font size of the navigation links. Match it visually to your theme’s menu text size.

Breadcrumbs show the path a customer took to reach the diagram (e.g. Home / Category / Product Name).

Breadcrumb size — Font size of the breadcrumb text. Most themes use a smaller size than body text — typically 12–14 px equivalent.

Inactive link color — Color of the links in the breadcrumb trail that are not the current page (e.g. “Home” and “Category”). Usually a muted or grey shade.

Inactive link hover — Color those same links turn when hovered. Typically matches your theme’s link hover color.

Active/current link color — The color of the last item in the breadcrumb (the current page). This is often bolder or uses your brand accent color.

Link separator — The character placed between breadcrumb items. Pick whichever matches your theme: /, >, -, or |.

Page Background

Page background color — The main background color of the content area below the header. This is almost always white (#ffffff) or a very light grey. Check your Shopify theme’s page background in the theme editor.

Content Link Styling

These control how text hyperlinks look inside any content blocks on the diagram page.

Link color — Default color of clickable text links. Most themes use their brand accent color here.

Link hover color — Color links change to when hovered. Often a slightly darker or lighter shade of the link color.

Heading Typography

These settings style the main <h1> title that appears at the top of each diagram page.

Font family — Type in the exact font name your theme uses for headings. You can find this in your Shopify theme editor under Typography. Common examples: Roboto, Inter, Playfair Display, Montserrat.

Text color — The color of heading text. Usually your theme’s primary foreground/text color — often near-black like #1a1a1a or #222222.

Size — Font size for the heading. Match it to how your theme renders <h1> tags by checking a product or collection page on your live store.

Paragraph Typography

These settings style the body text on the diagram page.

Font family — The font used for body/paragraph text. This may be the same as your heading font, or a different pairing. Check your theme’s typography settings.

Color — Body text color. Usually a slightly lighter shade than the heading color — something like #444444 or #555555.

Size — Body text size. Most themes use 14–16 px equivalent for paragraph text.

Button Styling

These settings control the Add to cart buttons in the parts table.

Background — The button’s default background color. Use your store’s primary button color (visible in your theme editor under Buttons).

Text color — The text color on the button. Usually white on a dark button, or dark on a light button.

Hover background — The background color when a customer hovers the button. Typically a slightly darker shade of the button color.

Hover text — Text color on hover. Usually stays the same as the default text color.

Shape — Choose the button corner style:

Rounded — slightly rounded corners (most common)
Pill — fully rounded, capsule shape
Small radius — very slight rounding
Rectangle — perfectly square corners

Match whichever your theme uses. You can tell by looking at your existing Add to Cart buttons on a product page.

Padding — Controls the internal spacing inside the button. Adjust until the button height and width feel consistent with your theme’s buttons.

Product Status Styling

These badges appear next to each part in the table to show inventory status. You can customize both the text label and the color for each state.

In stock text / color — The label and color shown when a part is available immediately. Default: In stock in green. You can change the label to match your store’s language (e.g. “Available”, “Ready to ship”).

Out of stock text / color — Shown when a part has zero inventory. Default: Out of stock in red.

Shipping text / color — Shown when a part has a lead time or ships from a supplier location. Default: Ships in 2–3 days in amber/yellow. Customize the text to match your actual lead time (e.g. “Ships in 5–7 days”).

Product Status Effects

Enable pulse effect — When enabled, the stock status badge pulses with a subtle animation to draw attention. Set to Disabled if your store has a minimal aesthetic or if customers find it distracting.

Pulse speed — Controls how fast the pulse animation cycles. A lower number means a faster pulse. Start in the middle and adjust to taste.

Pulse intensity — How strong the pulse effect appears. A lower value is subtle; a higher value is more eye-catching. We recommend keeping this moderate so it doesn’t distract from the diagram.

Select header menu — Choose which Shopify navigation menu appears in the diagram page header. Options are pulled directly from your store’s navigation settings (Online Store → Navigation).

Use whichever menu your store shows in the main nav — typically Main menu. If you’ve created a custom menu specifically for diagram pages (e.g. UncapParts Diagram Menu), you can select that instead to show a simplified set of links.

Saving your changes

Click Save at the bottom of the Page Styler after making changes. The live preview on the right side of the screen updates as you adjust settings so you can check your changes before saving.

If something looks off after saving, the most common cause is a color or font that doesn’t quite match — revisit your Shopify theme editor to grab the exact values.