Page Comparison

...

• $color : hex | Set anchor color [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][Advanced configuration only*]

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

...

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

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

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

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

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

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

• $h2color : font-family | Set the font 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][Advanced configuration only*]

• $h4color : font-family | Set the font color to use for h4's on the site [default: primary-color][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, 'primary')},
    $h4color: #{map-deep-get($theme-colors, 'primary')}
);

...

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

@include spinner($logopath: $SPINNER_LOGO_IMAGE);

...

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

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

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

• $secondarybtn : hex | Secondary button text color and outline as seen in checkout (SHOW GROUP) [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'| 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.

...

• $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][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.

...

@include tabs-design(
    $activebackground: #ffffff,
    $style: 'tabs-option-1',
    $barbackground: #f6f6f6,
    $textcoloractive: #141e55,
    $textcolor: #{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.