Shop Customizer – Product Page Styles

Last Updated on

The shop customizer is a new feature in Jupiter which let 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 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

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

product page styles

Let you style the “Add to Cart” button.

Available options to customizeDescription
Text Let you change the text. By default it is set to “Add to Cart”.
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

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 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

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 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.
x
Note: If there are any questions regarding product page style customization, feel free to contact our help desk.
Was this helpful?

Related Topics

Related Forum Topics

There is no related forum topic

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket