Goal bar styling

This page is for theme developers. It lists the classes, states and CSS custom properties of the goal bar, <andor-goal class="andor-goal">.

The widget comes from the AndOr Order goal block, the pasted <andor-goal> tag and the cart drawer copy. It uses AndOr’s widget styles. Liquid prints a skeleton at the finished size, and a script prints the words, fill and markers into it.

What each token changes

The numbers on the diagram match the table. The diagram is a simplified drawing. The full list of tokens is below. For every layout the block offers, see Layouts.

How precedence works

Put your CSS in your theme’s stylesheet or in the app embed’s Custom CSS box. To see which value wins, read Which value wins.

What this means for the goal bar:

• Bar color is written inline on the host as --andor-goal-accent, but only when the merchant changed it from #c0392b. See Change an inline color.
• Show reward icons and Icon position are inline too, and only when changed from the default.

Tip Change --andor-goal-step-font-size to scale the whole bar. The markers are drawn in the bar’s own em, so they scale with it.

Parts

Products suggested under the bar have their own parts. See Goal suggestions styling.

States and data attributes

data-andor-progress values:

The next step, the one the sentence names, has no attribute of its own. It is the first step without data-andor-goal-reached:

.andor-goal__step:first-child:not([data-andor-goal-reached]),
[data-andor-goal-reached] + .andor-goal__step:not([data-andor-goal-reached]) {
  font-weight: 600;
}

Layout

• The steps are equal columns. Each circle sits at the center of its column, whatever the amounts. With 3 steps, the circles sit at 1/6, 3/6 and 5/6 of the track.
• The reward and the amount are centered under their circle.
• The fill meets each circle exactly at its amount, and moves in a straight line between two circles. Example: steps at $50 and $100 sit at 25% and 75%, so a $70 cart fills 45%.
• One step has no circle. Its fill is the cart total over the amount.
• Only Stacked list (or data-orientation="vertical") stacks the steps. On a narrow bar (below a 24rem track), a horizontal bar keeps its row and the labels shrink and may wrap.

The bar is a size container named andor-goal, so your CSS can use it:

@container andor-goal (max-width: 24rem) {
  .andor-goal__step-at { display: none; }
}

Custom properties

“Ink” means black at that opacity.

Change an inline color

The block writes Bar color inline on the host (style="--andor-goal-accent: ...") when you changed it from the default. An inline custom property beats a stylesheet rule on the same element. To recolor from CSS, set the part’s own property (--andor-goal-fill-color), or set the accent on a child:

andor-goal .andor-goal__bar {
  --andor-goal-accent: #0b6b4f;
}

Left at the default color, the inline value is var(--andor-color-accent), so a :root rule reaches it:

:root {
  --andor-color-accent: #0b6b4f;
}

Reward icons

Each icon is a CSS mask painted in its line’s color. With Inside circle, the step’s ::after paints the icon at 60% of the circle (--andor-goal-dot-icon-size). Size it like any part:

andor-goal {
  --andor-goal-dot-icon-size: 0.8em;
}

--andor-goal-icons: none hides every icon, like the block checkbox.

Examples

Dawn:

andor-goal {
  --andor-goal-border-color: rgba(var(--color-foreground), 0.12);
  --andor-goal-radius: var(--inputs-radius, 0);
  --andor-goal-step-color: rgba(var(--color-foreground), 0.65);
  --andor-goal-track-background: rgba(var(--color-foreground), 0.08);
  --andor-goal-marker-background: rgb(var(--color-background));
  --andor-goal-fill-color: rgb(var(--color-button));
}

Horizon:

andor-goal {
  --andor-goal-border-color: var(--color-border);
  --andor-goal-radius: var(--style-border-radius-inputs, 8px);
  --andor-goal-step-color: color-mix(in srgb,
    var(--color-foreground) 65%, #0000);
  --andor-goal-marker-background: var(--color-background);
  --andor-goal-fill-color: var(--color-primary-button-background);
}

Caution Never force a hidden part back on. A hidden bar or part carries hidden and an inline display: none. A rule like andor-goal { display: block } can show a goal that no longer applies.