Global Styling the Product Catalog

Instead of having to modify each catalog individually, Global Styling allows you to design them all simultaneously, offering you additional styling options. You have the full creative control to design your Catalog to your preferences. Find the Global Styling for the Product Catalog on the Global Styling editor, under the Shop Settings on the left side menu.

 

1. General

1.1. Background, Border & Spacing

In the general settings it is possible to define a background color for the product catalog; set the border color, width and style; as well as style the overall spacing in terms of margin and padding.


1.2. Arrows

In case you have arrow navigation enabled on your product catalog, in this section it is possible to define their width, height, color, background color, size and border radius.


1.3. Circle Pagina

In case you have circle pagina navigation enabled on your gallery, in this section it is possible to define their width, height, background color, border color, width and radius.

 

2. Text Area

2.1. Product Name, Price and Old Price

It is possible to customize the font for each of these options. It can be changed that font color, size, family, weight and decorations, as well as line height, if the text should be all uppercase, alignment and spacing. The Product name is represented in the image below with a 1., Price with 2. and Old Price with 3.

 

2.2. Background and Spacing

Other design options regarding the textarea in the catalog include the color of the background, and spacing, both in terms of padding and margin.

 

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

 

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

 

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


4. Images

In this section it is possible to change the overall design of the product images in the Catalog. It is possible to define the border radius, allowing to round the product images, and set the spacing in terms of padding.


5. Apply Global Styling

As soon as you save your Global Styling, all the Product Catalog Modules will inherit that styling. However, if later you choose to style a catalog locally, it will overwrite the global styling but only for that specific Product Catalog Module. Click here to read more about the Product Catalog Module local styling!

 

Anything we’ve not covered?

Contact Us