Page Title
Title styles are created in Journal > Styles > Title > [Active Style] .... You can edit the Active style (PAGE TITLE TOP in our case) by clicking on it (see red arrow labeled 1a) or you can create a new style from the blue plus button in the top right corner (see red arrow labeled 1b). Thus you can create multiple styles and apply them on different pages, as required by your design.
The Page Title style is added globally in Journal > Skins > Edit > Global > Global Styles > Titles > Page Title > Title Style > [Active Style] (PAGE TITLE TOP in our case)....
You can select a different style by clicking on the text from the Title Style field (see red arrow labeled 2a), you can edit the selected style by clicking on the small blue pencil (see red arrow labeled 2b) or you can even create a new style, by clicking on the white + sign near the Title Style field (see red arrow labeled 2c). You can decide also if you want the Page Title position to be above the Breadcrumbs or not (see red arrow labeled 2d).
Additional options for the Product Page Title are available in Journal > Styles > Product Page > [Active Style] > General > Page Title.
You can select a different style by clicking on the text from the Page Title Style field (see red arrow labeled 3a) or you can even create a new style, by clicking on the white + sign near the Page Title Style field (see red arrow labeled 3b). You can select the Font Family, Font Color and Font Size for the Page Title (see red arrow labeled 3c) or you can decide its position (see red arrow labeled 3d).
Besides the Product Page there is also another page related to products Quickview Page for which additional options for Title are available in Journal > Styles > Quickview > [Active Style] (QUICKVIEW in our case) > General > ...
You can select a different style by clicking on the text from the Page Title Style field (see red arrow labeled 4a) you can edit the selected style by clicking on the small blue pencil (see red arrow labeled 4b) or you can even create a new style, by clicking on the white + sign near the Page Title Style field (see red arrow labeled 4c). You can select the Title background (see red arrow labeled 4c) or you can decide its position (see red arrow labeled 4d).
Please notice that you can use various Page Title styles in various pages as you already seen above, as follows:
Product Page Title - Inherit style (meaning PAGE TITLE TOP style as this is the one declared as Global Style)
Quickview Page Title - DEFAULT style
Let's see below how a new created Page Title style called Quickview Page Title will be apply only to the Quickview Page (by overwriting the usage of the actual DEFAULT style) while the Product Page Title will not be affected by this particular change.
Example
Step 1 - The creation of Quickview Page Title: _Journal > Styles > Title > Click on blue + button > ... Select the label for the new style (red arrow labeled 1.1), for the Text Options select the Font Family (red arrow labeled 1.2) and the Font Color (red arrow labeled 1.3) and in addition select also the Color Background (red arrow labeled 1.4). In the end click on the green check button from the top left corner (red arrow labeled 1.5) to save the new style.
Step 2 - The globally adding of the new style Quickview Page Title in Skins: _Journal > Skins > Edit > Global > Global Styles > Titles > Page Title > Title Style > click on the text area from the Title Style field and select the new style from the list (red arrow labeled 2.1) then click on the on the green check button from the top left corner (red arrow labeled 2.2) to save the changes.
If you intend to apply a style only to a particular page or module, please avoid to declare it globally and skip this step. In our example we will however declare the style Quickview Page Title globally (as Global Style), only to be able to show you how you can react in cases like this. See details below on Step 4 and Step 5 of this example.
Step 3 - Applying of the new style Quickview Page Title to Quickview Page : Journal > Styles > Quickview > [Active Style] (QUICKVIEW in our case) > General > Page Title Style > click on the text area from the Page Title Style field and select the new style from the list (red arrow labeled 3.1) then click on the on the green check button from the top left corner (red arrow labeled 3.2) to save the changes.
Step 4 - Checking the modification in the Storefront (not before you click on the refresh button).
See below the new Quickview Page Title style applied successfully on the the Quickview Page.
Unfortunately we can see below that the Product Page Title was affected by this change due to the fact that the default Product Page Title style is Inherit style. So basically the Product Page Title inherited the Quickview Page Title style, added globally in Journal > Skins > ... which we obviously we don't want it.
Step 5 - In order to correct the unwanted behaviour of Product Page Title, we will need to overwrite the inherited style and for that we will go to Journal > Layouts > Product Page > and Click on the Styles Override icon from the right corner (red arrow labeled 5.1)
In the new open window, please locate the Page Title Style field (red arrow labeled 5.2), select the wanted style PAGE TITLE TOP from the list (red arrow labeled 5.3), close the Style Override window (red arrow labeled 5.4) and in the end click on the on the green check button from the top left corner (red arrow labeled 5.5) to save the changes.
Step 6 - Checking again the modification in the Storefront (not before you click on the refresh button).
See below the new Quickview Page Title style it still applied successfully on the the Quickview Page.
See below that the PAGE TITLE TOP style is applied now on the Product Page.
