The Shop Customizer is a new feature in Jupiter which lets you customize your websites shop.
In this article, we’ll explain how to use shop customizer to style your Checkout & Cart page.
Checkout & Cart Styles
The Shop Customizer provides an option to style the Checkout & Cart pages. These are the shop pages to display the cart and checkout the products.
To access the Shop Customizer once it is activated:
To customize the Checkout & Cart page:
Style options are explained below:
Steps
Lets you style the display of the steps from Cart to Checkout the product :
There are 2 styles with different options:
Style Number
There are Active style and Passive style:
Active Style
Number
Available options to customize | Description |
---|---|
Background Color | Select the color of the number background |
Font Family | Sets a font family style for the number |
Font Size | Sets a font size for the number |
Font Weight | Sets a font weight for the number |
Normal or Italic | Sets a font style for the number |
Number Color | Select the color of the number |
Title
Available options to customize | Description |
---|---|
Font Family | Sets a font family style for the text |
Font Size | Sets a font size for the text |
Font Weight | Sets a font weight for the text |
Normal or Italic | Sets a font style for the text |
Text Color | Select the color of the text |
Margin | Lets you customize the margin |
Passive Style
Available options to customize | Description |
---|---|
Background Color | Select the color of the number background |
Number Color | Select the color of the number |
Text Color | Select the color of the text |
Style Icon
There are Active style and Passive style :
Active Style
Icon
Available options to customize | Description |
---|---|
Icon Size | Sets a font size for the icon |
Icon Color | Select the color of the number |
Margin | Lets you customize the margin |
Font Weight | Sets a font weight for the number |
Normal or Italic | Sets a font style for the number |
Title
Available options to customize | Description |
---|---|
Font Family | Sets a font family style for the text |
Font Size | Sets a font size for the text |
Font Weight | Sets a font weight for the text |
Normal or Italic | Sets a font style for the text |
Text Color | Select the color of the text |
Passive Style
Available options to customize | Description |
---|---|
Icon Color | Select the color of the number |
Text Color | Select the color of the text |
Big Heading
Lets you style the Heading of the page :
Available options to customize | Description |
---|---|
Font Family | Sets a font family style for the text |
Font Size | Sets a font size for the text |
Font Weight | Sets a font weight for the text |
Normal or Italic | Sets a font style for the text |
Text Color | Select the color of the text |
Padding | Lets you customize the padding |
Boxes
Lets you style the boxes of the Checkout page :
Available options to customize | Description |
---|---|
Color | Select the color of the box |
Border Radius | Sets border radius of the box |
Border Width | Sets border width of the box |
Border Color | Select the color of the box border |
Padding | Lets you customize the padding |
Field Label
[image]
Lets you style the Checkout page Field label :
[image]
Available options to customize | Description |
---|---|
Font Family | Sets a font family style for the label |
Font Size | Sets a font size for the label |
Font Weight | Sets a font weight for the label |
Normal or Italic | Sets a font style for the label |
Text Color | Select the color of the label |
Padding | Lets you customize the padding |
Field
Lets you style the Checkout page Field :
Available options to customize | Description |
---|---|
Font Family | Sets a font family style for the field |
Font Size | Sets a font size for the field |
Font Weight | Sets a font weight for the field |
Normal or Italic | Sets a font style for the field |
Text Color | Select the color of the field |
Color | Select the color of the field |
Border Radius | Sets border radius of the field |
Border Width | Sets border width of the field |
Border Color | Select the color of the box field |
Margin | Lets you customize the margin |
Focus Style
Style of the field on focus
Available options to customize | Description |
---|---|
Text Color | Select the color of the field |
Color | Select the color of the field |
Border Color | Select the color of the box field |
Button
Lets you style the Checkout & Cart pages button :
Available options to customize | Description |
---|---|
Font Family | Sets a font family style for the button |
Font Size | Sets a font size for the button |
Font Weight | Sets a font weight for the button |
Normal or Italic | Sets a font style for the button |
Color | Select the color of the button |
Background Color | Select the background color of the button |
Border Radius | Sets border radius of the button |
Border Width | Sets border width of the button |
Border Color | Select the color of the box button |
Margin | Lets you customize the margin |
Padding | Lets you customize the padding |
Hover Style
Style of the button on hover
Available options to customize | Description |
---|---|
Color | Select the color of the button |
Background Color | Select the background color of the button |
Border Color | Select the color of the box button |
Back Button
Lets you style the Checkout & Cart page’s back button :
Available options to customize | Description |
---|---|
Font Family | Sets a font family style for the button |
Font Size | Sets a font size for the button |
Font Weight | Sets a font weight for the button |
Normal or Italic | Sets a font style for the button |
Color | Select the color of the button |
Background Color | Select the background color of the button |
Border Radius | Sets border radius of the button |
Border Width | Sets border width of the button |
Border Color | Select the color of the box button |
Margin | Lets you customize the margin |
Padding | Lets you customize the padding |
Hover Style
Style of the button on hover
Available options to customize | Description |
---|---|
Color | Select the color of the button |
Background Color | Select the background color of the button |
Border Color | Select the color of the box button |