Scroll

Cart Header

Click HERE for an interactive tutorial. Scroll to the bottom for animated steps.


Detailed Step-by-Step Tutorial

Add Cart Header

  • Go to ECOMMERCE at the top of the screen.
  • Drag Cart Header widget to the top of your website's page.

  • Double-click on the cart header or highlight it and go to Settings pane > APP.

Cart Header Settings

  • Layout: Choose between textual and iconic.
  • Shopping Cart: Toggle ON to include shopping cart in the ecommerce top band.
  • Login: Toggle ON to include account login in the ecommerce top band.
  • Text Color: Set the color for the text.
  • Icon Color: Set the color for the icons.
  • Search: Toggle ON to include product search in the ecommerce top band.
  • Background Color: Set the color for the product search box.
  • Text Color: Set the color for the text in the product search box.
  • Border Color: Set the color for the border of the product search box.


General Settings

  • Title: Enter the title for the ecommerce top band.
  • Show as Tooltip: Show the title as tooltip (text that appears when your mouse hovers over the blog).
  • Top: Set top margin of the ecommerce top band.
  • Left: Set left margin of the ecommerce top band.
  • Width: Set the width of the ecommerce top band.
  • Height: Set the height of the ecommerce top band.
  • Fixed Width: Toggle ON to make the width of the ecommerce top band fixed.

Background

  • Color: Choose background color.
  • Opacity: Set opacity for the background.
  • Image: Enable to use an image as a background.
  • Size: Choose background size (i.e. auto, 100%, etc.).
  • Position: Set position of the background.
  • Repeat: Choose repeat type for the background.

 

Border

  • Color: Choose border color.
  • Style: Chose border style.
  • Width: Choose the width of the border.
  • Radius: Choose border corner radius.

 

Box Shadow

  • Shadow: Toggle ON to create a shadow for the ecommerce top band.
  • H-Shadow: Set horizontal position of the shadow.
  • V-Shadow: Set vertical position of the shadow.
  • Blur: Set blur value for the shadow.
  • Spread: Define how far the shadow spreads.
  • Color: Set the color for the shadow.
  • Style: Select between inset and outset.


Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments