Page Comparison

...

• $color : hex | Set anchor color [Dev Advanced configuration only]

• $underline: ‘true’ or ‘false’ | Set anchors to be underlined or not [default: ‘false’][Advanced configuration only*]

@include standard-links($color: #{map-deep-get($colors, 'primary'), $underline: 'false'});

...

Cart Basket

Configure the text color for the basket icon

• $textcolor : hex | Set the color for the basket count [default: primary-color][Dev Advanced configuration only*]

@include cart-basket($textcolor: #{map-deep-get($theme-colors, 'primary')});

...

• $style : 'tall', 'medium' 'short' | Set the height for the hero [default: 'short']

• $static : 'true', 'false' | Enable or disable the static hero on product category page. Dynamic hero will be displayed instead when set to false [default: 'false'true']

• $staticpdp: ‘true’, ‘false’ | Enable or disable the static hero on the product pages. Dynamic hero will be displayed instead when set to false [default: ‘true’]

@include site-hero($style: 'medium', $static: 'true', $staticpdp: 'true');

...

Font Settings

Configure various font settings

• $inputfont : font-family | Set the font family for the input fields [Dev Advanced configuration only*]

• $datepickerfont : font-family | Set the the font family for the datepicker [Dev Advanced configuration only*]

• $pdpheaderfont : font-family | Set the font family to use for PDP headers [Dev Advanced configuration only*]

• $labelfont : font-family | Set the font family to use for animated.label elements [Dev Advanced configuration only*]

• $minicartfont: font-family | Set the font family to use for in the minicart [Dev Advanced configuration only*]

• $optiontitlecolor : font-family | Set the font family to use for option titles on the PDP [default: primary-font][Dev Advanced configuration only*]

• $h2color : font-family | Set the font family color to use for h2's on the site [default: primary-color][Advanced configuration only*]

• $h3color : font-family | Set the font color to use for h3's on the PDP Option headers ONLY [default: primary-color][Dev Advanced configuration only*]

• $h4color : font-family | Set the font family color to use for h4's on the site [default: primary-fontcolor][Dev Advanced configuration only*]

@include font-settings(
    $inputfont: #{map-deep-get($fonts, 'primary')},
    $datepickerfont: #{map-deep-get($fonts, 'primary')},
    $pdpheaderfont: #{map-deep-get($fonts, 'primary')},
    $labelfont: #{map-deep-get($fonts, 'secondary')},
    $minicartfont: #{map-deep-get($fonts, 'secondary')},
    $optiontitlecolor: #{map-deep-get($theme-colors, 'secondary')},
    $h2color: #{map-deep-get($theme-colors, 'primary')},
    $h3color: #{map-deep-get($theme-colors, 'secondaryprimary')},
    $h4color: #{map-deep-get($theme-colors, 'secondaryprimary')}
);

...

Spinner

Configure the loading spinner for the site [GLOBAL]

• $logopath : path to image | Set the path to the logo image that is used inside the loader [Dev Advanced configuration only*]

@include spinner($logopath: $SPINNER_LOGO_IMAGE);

...

Hide/show the image slider on the Non Retail PDP pages. Slider on Retail Pages is always visible.

• $display : ‘true', 'false' | Hide or show the slider on the PDP pages [default: 'false’]

...

• $primary-btn-bg : hex | Primary button background color [default: primary-color]

• $primary-btn-border : hex | Primary button border color [default: primary-color][Dev Advanced configuration only*]

• $primary-btn-text : hex | Primary button text color [default: #ffffff][Dev Advanced configuration only*]

• $secondarybtn : hex | Secondary button text color and outline as seen in checkout (SHOW GROUP) [Dev Advanced configuration only*]

@include buttons-config(
    $primary-btn-bg: #{map-deep-get($theme-colors, 'primary')},
    $primary-btn-border: #{map-deep-get($theme-colors, 'primary')},
    $primary-btn-text: #ffffff,
    $secondarybtn: #{map-deep-get($theme-colors, 'secondary')}
);

...

• $style : 'option-a', 'option-b', 'option-c', 'option-d'| Sets the card option [default: 'option-a']

• $buttontextcolor : hex | Sets the card button text or action text color [default: secondary-color][Dev Advanced configuration only]

• $buttontext : string | Sets the button or action text [case sensitive][Dev Advanced configuration only]

• $headercolor : hex | Sets the color of the card header [Dev Advanced configuration only]

• $buttoncolor : hex | Sets the color of the card button background [default: secondary-color]

• $buttoncolorhover : hex | Sets the color of the card button background on hover [default: secondary-color-hover]

...

• $style : 'option-a', 'option-b'| Swaps between a dropshadow or flat design for the page body [default: 'option-a']

• $cardcontainerbg: hex | Sets the background color of the card container [default: #fff]

• $pagebackground: hex | Sets the background color of the page [default: #f7f3f0]

• $reversetoolbarcolors: ‘true’, ‘false’ | Inverts the toolbar colors, making the background white, and the text and icons the primary color defined in the _colors.scss for the theme. [default: ‘false’]

@include body-style(
  $style: 'option-b', 
  $cardcontainerbg: #42c2de,
  $pagebackground: #4083ce,
  $reversetoolbarcolors: 'false'
);

...

Simple Header

Configures the simple header for the site if enabled and configures the logo sizing for the checkout pages.

• $floating : 'true', 'false'| Enables or disables the floating header [default: 'false']

• $headerheight : px | Sets the height of the header [default: 90px][Dev Advanced configuration only]

• $headerbackground : hex | Sets the header background color

• $bodyoffset : px | Adds margin to the body when using the floating header to prevent obscuring the hero [default: 0][Dev Advanced configuration only]

• $logoheight : px | Sets the height for the logo [Dev Advanced configuration only]

• $logowidth : px | Sets the width for the logo [Dev Advanced configuration only]

• $logowidthmobile : px | Sets the width of the logo on mobile [Dev Advanced configuration only]

• $logoheightmobile : px | Sets the height of the logo on mobile [Dev Advanced configuration only]

• $centerlogo: ‘true’. ‘false’ | Sets logo to center and hides the back link when set to true

@include simple-header(
    $floating: 'true',
    $headerheight: 90px,
    $headerbackground: #{map-deep-get($theme-colors, 'header', 'background')},
    $bodyoffset: 0,
    $logoheight: 57px,
    $logowidth: 200px,
    $logowidthmobile: 180px,
    $logoheightmobile: 50px
    $centerlogo:'false'
);

...

Simple Footer

Configures the simple footer for the site if enabled.

• $backgroundcolor : hex | Sets the background color for the simple footer [default: 'footer-background']

• $textcolor : hex | Sets the text color for the simple footer [default: #ffffff][Dev configuration only]Advanced configuration only]

• $logowidth: pixels | Sets the width for the footer logo. Height is hard coded as auto. [default: 200px][Advanced configuration only]

• $linkcolor: hex | Sets the color for any links defined in the footer. Underlining is controlled globally in the Standard Links mixin. [default: #ffffff][Advanced configuration only}

@include simple-footer(
    $backgroundcolor: #{map-deep-get($theme-colors, 'footer', 'background')},
    $textcolor: #{map-deep-get($theme-colors, 'footer', 'text-color')},
    $logowidth: 200px,
    $linkcolor: #ffffff
);

...

Checkout Mixin

Configures the checkout screen.

• $headertext : hex | Sets the header text color in checkout [Dev Advanced configuration only]

• $headertextactive : hex | Sets the header active text color in checkout [Advanced configuration only]

• $headercolor : hex | Sets the background color for checkout header [Dev Advanced configuration only]

• $footertext : hex | Sets the background color for checkout footer [Dev Advanced configuration only]

• $footercolor : hex | Sets the background color for checkout footer [Dev Advanced configuration only]

• $logowidth : px | Sets the width of the logo in checkout. The height will auto scale. [Dev Advanced configuration only]

@include checkout-mixin(
    $headertext: #{map-deep-get($theme-colors, 'checkout', 'header-text')},
    $headertextactive: #{map-deep-get($theme-colors, 'checkout', 'header-text-active')},
    $headercolor: #{map-deep-get($theme-colors, 'checkout', 'header-background')},
    $footertext: #{map-deep-get($theme-colors, 'checkout', 'footer-text')},
    $footercolor: #{map-deep-get($theme-colors, 'checkout', 'footer-background')},
    $logowidth: 230px
);

...

• $style : 'tabs-option-1', 'tabs-option-2', 'tabs-option-3', 'tabs-option-4' | Sets the tab style option

• $barbackground : hex | Sets the background color for the tabs bar [Dev Advanced configuration only]

• $textcolor : hex | Sets the text color for the tabs [Dev configuration only]inactive tab text [Advanced configuration only]

• $textcoloractive : hex | Sets the text color for active tab text [Advanced configuration only]

• $activebackground: hex | Sets the color for the active tab background. Only applies to ‘tabs-option-3’ and ‘tabs-option-4’

@include tabs-design(
    $activebackground: #ffffff,
    $style: 'tabs-option-31',
    $barbackground: #f6f6f6,
    $textcoloractive: #ebebeb#141e55,
    $textcolor: #4a4a4a
);#{map-deep-get($theme-colors, 'text')}
);

Notes:

* “Advanced configuration only” means that this configuration is not available to be edited inside of the theme designer application and can only be changed manually in the mixin arguments. These advanced options are for the benefit of the developer setting up the theme.