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 product page.
Product Page Styles
The Shop Customizer provides an option to style the product page. The product page is a single product page that displays your products.
To access the Shop Customizer once it is activated:
To customize the product page:
Style options are explained below:
Image
Let you style the image of your product.
| Available options to customize | Description |
|---|---|
| Image Ratio | Sets an image ratio. Available options are 3:2, 1:1, 2:3, 9:16. The box with pixels value sets the border around the image, just enter the pixels number for the border width and set border color in the color picker. |
| Gallery Thumbnail Orientation | Sets images gallery either under the image or on the left side of the image. |
| Margin | Let you customize the margin around the image |
Name
Let you style the name of the product:
Regular Price
Let you style the regular price listed on the product:
Sale Price
Let you style the sale price listed on the product if the item is set to sale:
Category
Let you style a category name of the product:
Tags
Let you style a tag name of the product:
Add to Cart Button
Let you style the “Add to Cart” button.
| Available options to customize | Description |
|---|---|
| Show Icon | Let you display or hide “Add to cart” icon. |
| Font Family | Let you change the font family for the text. |
| Text Size | Let you change the font size of the text. |
| Text Weight | Let you change the font weight of the text. |
| Text Color | Sets the color of the text. |
| Button Background Color | Sets the background color of the button. |
| Border Radius | Sets the border radius for the button. |
| Border Width | Sets border width in pixels for the button. |
| Border Color | Sets border color for the button. |
| Icon Color | Sets icon color. |
| Hover Style | Let you change border color, background color, text color of the button when hovering it. |
| Margin/Padding | Let you change margin and padding values for the button. |
SKU
Let you style the sku id of the product:
Description
Let you style the description text of the product:
Quantity
Let you style the quantity box of the product:
Social Share
Let you style the social share icons:
| Available options to customize | Description |
|---|---|
| Social Networks to Display | Let you choose what social networks to show on a product page. |
| Icons Color | Set the icons color. |
| Background Color | Sets the background color for the icons. |
| Border Radius | Sets the border radius for the icons. |
| Border Width | Sets the border width in pixels for the icons. |
| Border Color | Sets the border color for the icons. |
| Hover Style | Let you change background color, icons color and border color when hovering the icons. |
| Margin | Let you set margins around the social networks section. |
Sale Badge
Let you style the sale badge on the product page:
Out of Stock Badge
Let you style the Out of Stock badge on the product page.
Rating
Let you style the rating star icons and text on the product page:
| Available options to customize | Description |
|---|---|
| Social Networks to Display | Let you choose what social networks to show on a product page. |
| Size | Sets the size for star icons. |
| Star Color | Sets the color of the star icons. |
| Active Star Color | Sets the color for active star icon. |
| Text Font | Sets the font family for the text. |
| Text Size | Sets the font size for the text. |
| Text Weight | Sets the font weight for the text. |
| Text Style | Sets the font style for the text. Available options are cursive and normal. |
| Text Color | Sets the color for the text. |
| Margin | Sets the margins around the rating section. |
