Global Styling the Product Page

The Product Page is generated and styled automatically according to the theme of your website, however it is possible to manually modify some settings on Global Styling, giving you full creative control on how the Product Page will look like. Find the Global Styling for the Product Page on the Global Styling editor, under the Shop Settings on the left side menu.

 

1. General

In this section, it is possible to change the general design of the product page. This includes spacing and the background, in which you can set a solid color and a percentage of transparency, or you can choose an existing image from your library or your own computer. 

 

2. Main Image

The Main Image refers to the large image on the product page, identified in the image below by the blue square. In case you wish to do so, in this section you'll be able to define and customize a border to this image: choose a color and set its transparency, style and width. 

 

3. Image Thumbs

The Image Thumbs are the secondary pictures associated with the product that are shown on the bottom of the main image. They are identified in the image below with the blue squares.


3.1. Styling

Much like the main image, it is also possible to define and customize a border to the image thumbs: choose a color and set its transparency, style and width.

 

4. Text Area

In this section, it is possible to change the design of the product page text. The elements that can be changed are represented in the image below. The fonts can be customized in terms of color, size, family, weight, decoration, line height, if it should be uppercase, alignment and spacing in terms of margin and padding. 

 

5. Add to Cart Button

It is also possible to style the Add to Cart Button.


5.1. Content

This section allows the choice of the button placement - to the right, centered or to the left. 

 

5.2. Styling

This section allows the actual styling of the button. This includes the text, where the font can be fully customized, the background color and transparency, the border color, width, style and radius, and the spacing, in terms of margin and padding. 

 

6. Divider

The dividers are small lines that allow the separation of content on the product page. In the image below, the red arrows point to both dividers on the page. The design of the dividers include their placement, thickness, color, style, width and spacing. 

 


7. Text on Product Image

The Text on Product Image refers to the text that can be added when modifying a basic product and it can be used, for example, to add Sale information. In the image below, this area is identified by the red rectangle. It is identified in the image below with the blue rectangle.

 

7.1. Text

In terms of text, changes can be done in terms of font color, size, family, weight, line height, if the text should be all uppercase, and alignment.

 

7.2. Background, Border and Spacing

With these options you can set the background's color and transparency, the border's color, width and style, and spacing options like padding and margin.


8. Product quantity

On the product page, visitors can easily add any quantity of the item to the cart, either by typing in the desired number in the field or by clicking the + and - symbols. If you wish to style the product quantity area, use the following settings in Global Styling:

  1. The + and - symbols inherit the styling settings from Global Styling -> Module design -> Text -> Dark Small Text.
  2. The quantity input field and the border around it inherit the styling from Global Styling -> Module design -> Form -> Inputs.
  3. The text "Quantity" inherits from the styling from Global Styling -> Shop settings -> Product page -> Text area -> Product description.

 

Anything we’ve not covered?

Contact Us