Template examples

Starter templates taken from Oxify's own seed code, ready to paste into the Custom template editor.

Each example is the starter code Oxify puts in the editor for that tab. Paste it into the code box, change it, click Compile, then turn on the switch. The seed for a tab is what you get from the reset icon.

Announcements, Skeleton tab

Source: Announcements seed for the Skeleton tab. A grey loading bar while the cart loads.

<div
  className="ia-announcement-bar-parent"
  style={{
    height: props.skeletonHeight || "44px",
    width: "100%",
    background: "linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%)",
    backgroundSize: "200% 100%",
    borderRadius: "6px",
    boxSizing: "border-box",
  }}
/>

Announcements, Main tab

Source: Announcements seed for the Main tab. It hides the bar when an expired timer is set to hide, and uses the built-in content for carousel and moving line.

<>
  {props.shouldUseTimer && props.isTimerExpiredAndShouldHide ? null : (
    <div
      className={"ia-announcement-bar-parent " + (props.hideClassName || "")}
      style={props.containerStyleVars}
    >
      {props.type === "CAROUSEL" || props.type === "MOVING_LINE"
        ? props.builtInAnnouncement
        : props.defaultContent}
    </div>
  )}
</>

Trust Badges

Source: Trust Badges seed.

<div className="trust-badge-parent-container">
  {props.mode === "list" ? (
    <div className="ia-trust-badge-list-container" style={props.listStyleVars}>
      {props.badges.map(function (b, i) {
        return (
          <img
            key={i}
            alt="Incredible Trust Badge"
            src={b.imageUrl}
            width={props.iconWidth + "px"}
            style={{ width: props.iconWidth + "px" }}
          />
        );
      })}
    </div>
  ) : (
    <img
      alt="Incredible Trust Badge"
      width="100%"
      height="100%"
      src={props.badgeUrl}
      style={{ objectFit: "contain" }}
    />
  )}
</div>

Additional Notes

Source: Additional Notes seed.

<div id="additional-notes">
  <div
    className="ia-additional-expander-container"
    style={props.expanderStyleVars}
    onClick={props.toggleCollapsible}
  >
    <div className="ia-additional-notes-title" style={props.titleStyleVars}>
      {props.notesTitle}
    </div>
    {props.chevronIcon}
  </div>
  {props.isExpanded ? (
    <div style={{ overflow: "hidden" }}>
      <textarea
        className="ia-additional-notes-textarea"
        value={props.cartNote}
        rows={3}
        placeholder={props.notesPlaceholder}
        onChange={(e) => props.handleCartNoteChange(e.target.value)}
      />
    </div>
  ) : null}
</div>

Split Payments

Source: Split Payments seed.

<div style={props.containerStyleVars}>
  {props.options.map(function (o, i) {
    return (
      <div key={i} className="ia-split-payment-parent" style={o.rowStyleVars}>
        <span className="ia-split-payment-text" style={o.titleStyleVars}>
          {o.title}
        </span>
        <div className="ia-split-payment-logo-container">
          <img
            className="ia-split-payment-logo"
            src={o.imageUrl}
            alt="Split payment provider logo"
          />
        </div>
      </div>
    );
  })}
</div>

Source: Design seed for the Footer tab. Reorder or remove lines to rearrange the checkout area.

<div
  className="ia-checkout-layout-parent-container"
  style={{ "--background-color": "#" + props.footerBackgroundColor }}
>
  {props.builtInHtmlAboveAddOns}
  {props.builtInAddOns}
  {props.builtInAdditionalNotes}
  {props.builtInDiscountDisplay}
  {props.builtInDiscountInput}
  {props.builtInSplitPayments}
  {props.builtInTerms}
  {props.builtInSubtotal}
  <div className="ia-margin-top-10">
    {props.builtInHtmlAboveCheckout}
    {props.builtInCheckoutButton}
  </div>
  {props.builtInAcceleratedCheckout}
  {props.builtInHtmlBelowCheckout}
  {props.builtInGoodApi}
  {props.builtInContinueShopping}
  {props.builtInTrustBadges}
</div>

For longer seeds (cart item tile, rewards bar, upsell sections), click the reset icon, or Generate from current settings on tabs that have it.