Mixins
Standard Links
Configure the anchor link colors [GLOBAL]
$color : hex | Set anchor color [Advanced configuration only]
@include standard-links($color: #{map-deep-get($colors, 'primary')});
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')});
Site Hero
Configure the main site hero
$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: '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 [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')}
);
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 [Advanced configuration only]
@include spinner($logopath: $SPINNER_LOGO_IMAGE);
Image Slider
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’]
@include image-slider($display: 'false');
Buttons Configuration
Configures the Primary and Secondary buttons
$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')}
);
Card Design
Configures the card design on the product pages
$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][Advanced configuration only]
$buttontext : string | Sets the button or action text [case sensitive][Advanced configuration only]
$headercolor : hex | Sets the color of the card header [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]
@include cards-design(
$style: 'option-c',
$buttontextcolor: #{map-deep-get($theme-colors, 'buttons', 'text-color')},
$buttontext: 'Shop Now',
$headercolor: #{map-deep-get($theme-colors, 'text')},
$buttoncolor: #{map-deep-get($theme-colors, 'secondary')},
$buttoncolorhover: #{map-deep-get($theme-colors, 'secondary-hover')}
);
Body Style
Configures the body style for all pages.
$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 );
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][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][Advanced configuration only]
$logoheight : px | Sets the height for the logo [Advanced configuration only]
$logowidth : px | Sets the width for the logo [Advanced configuration only]
$logowidthmobile : px | Sets the width of the logo on mobile [Advanced configuration only]
$logoheightmobile : px | Sets the height of the logo on mobile [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][Advanced configuration only]
$logowidth: pixels | Sets the width for the footer logo. Height is hard coded as auto. [default: 200px][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
);
Checkout Mixin
Configures the checkout screen.
$headertext : hex | Sets the header text color in checkout [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 [Advanced configuration only]
$footertext : hex | Sets the background color for checkout footer [Advanced configuration only]
$footercolor : hex | Sets the background color for checkout footer [Advanced configuration only]
$logowidth : px | Sets the width of the logo in checkout. The height will auto scale. [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
);
Tabs Design
Configures the style of the tabs.
$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 [Advanced configuration only]
$textcolor : hex | Sets the text color 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-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.