Shop Customizer – Product Page Styles

Last Updated on

The Shop Customizer is a new feature in Jupiter which lets you customize your websites shop.

x
Note: The Shop Customizer is by default disabled. To learn how to activate it, check out this article.

In this article, we’ll explain how to use shop customizer to style your product page.

x
Beware! The Shop Customizer is in beta version. Please do not test it on a live website until the stable version is released. If you’ve found a bug related to the shop customizer, report it as shown in this article.

In this article


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.

x
Note: You can check out the demo of a product page here.

To access the Shop Customizer once it is activated:

1
From the WordPress left menu, go to Jupiter > Shop Customizer.

To customize the product page:

1
From the Shop Customizer, click on Product Page.

product page styles

2
A new window will open with all the available options to customize and style the product page. Click on the Styles tab.

product page styles

Style options are explained below:

Image

product page styles

Let you style the image of your product.

Available options to customizeDescription
Image RatioSets 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 OrientationSets images gallery either under the image or on the left side of the image.
MarginLet you customize the margin around the image

Name

product page styles

Let you style the name of the product:

Regular Price

product page styles

Let you style the regular price listed on the product:

Sale Price

product page styles

Let you style the sale price listed on the product if the item is set to sale:

Category

product page styles

Let you style a category name of the product:

Tags

product page styles

Let you style a tag name of the product:

Add to Cart Button

 

Let you style the “Add to Cart” button.

Available options to customizeDescription
Show IconLet you display or hide “Add to cart” icon.
Font FamilyLet you change the font family for the text.
Text SizeLet you change the font size of the text.
Text WeightLet you change the font weight of the text.
Text ColorSets the color of the text.
Button Background ColorSets the background color of the button.
Border RadiusSets the border radius for the button.
Border WidthSets border width in pixels for the button.
Border ColorSets border color for the button.
Icon ColorSets icon color.
Hover StyleLet you change border color, background color, text color of the button when hovering it.
Margin/PaddingLet you change margin and padding values for the button.

SKU

product page styles

Let you style the sku id of the product:

Description

product page styles

Let you style the description text of the product:

Quantity

product page styles

Let you style the quantity box of the product:

Social Share

product page styles

Let you style the social share icons:

Available options to customizeDescription
Social Networks to DisplayLet you choose what social networks to show on a product page.
Icons ColorSet the icons color.
Background ColorSets the background color for the icons.
Border RadiusSets the border radius for the icons.
Border WidthSets the border width in pixels for the icons.
Border ColorSets the border color for the icons.
Hover StyleLet you change background color, icons color and border color when hovering the icons.
MarginLet you set margins around the social networks section.

Sale Badge

product page styles

Let you style the sale badge on the product page:

Out of Stock Badge

product page styles

Let you style the Out of Stock badge on the product page.

Rating

product page styles

Let you style the rating star icons and text on the product page:

Available options to customizeDescription
Social Networks to DisplayLet you choose what social networks to show on a product page.
SizeSets the size for star icons.
Star ColorSets the color of the star icons.
Active Star ColorSets the color for active star icon.
Text FontSets the font family for the text.
Text SizeSets the font size for the text.
Text WeightSets the font weight for the text.
Text StyleSets the font style for the text. Available options are cursive and normal.
Text ColorSets the color for the text.
MarginSets the margins around the rating section.
x
Note: If there are any questions regarding product page style customization, feel free to contact our help desk.
Was this helpful?

Related Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket