# Typography

**Typography** allows setting the font elements such as font, font size, and alignment of texts for the site.

1. From your Shopify admin, go to **Online Store ->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme settings ->** **Typography.**

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F7bsDrl9CJKjUHxJ4fuJ7%2Fimage.png?alt=media&#x26;token=f4fe79c7-d888-4129-ba6c-6d37b6655f0e" alt="" width="266"><figcaption></figcaption></figure>

{% hint style="info" %}
Optimize your website's performance by utilizing shopify fonts! Selecting a different font can affect the speed of your store. [Learn more about system fonts.](https://help.shopify.com/en/manual/online-store/os/store-speed/improving-speed#fonts)
{% endhint %}

## How to setup Google Font?

You can use hundreds of free, open-source fonts available through [Google Fonts](http://fonts.google.com/).

1. Search font.
2. Copy name of font which you choose.
3. At **Font source** setting -> select **Google fonts** option.
4. Paste text which you have copied to **"Google font name"** setting.

<div><figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FRRhVae2B0l1g0ExagrlJ%2Fimage.png?alt=media&#x26;token=88a66c6d-606d-4f57-ad6c-98fc37db2657" alt="" width="267"><figcaption></figcaption></figure> <figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FwxJc2AhvOoApb4iBS9yv%2Ffont-family-2-2.jpg?alt=media&#x26;token=fd74a1ba-97e9-404b-b644-ecc91a5f4afc" alt="" width="267"><figcaption></figcaption></figure></div>

## How to setup Shopify Font?

Shopify's font library is a [collection of fonts](https://shopify.dev/themes/architecture/settings/fonts#available-fonts) that includes system fonts, a selection of Google fonts, and licensed fonts from [Monotype](https://www.monotype.com/). These fonts are free to use on all Shopify online stores, and are provided in both [WOFF](https://caniuse.com/#feat=woff) and [WOFF2](https://caniuse.com/#feat=woff2) formats.

1. At **Font source** setting -> select **Shopify fonts** option.
2. Click the **Change** button in the **Shopify font** setting to choose the font you want.

<div><figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FnxG6LAD4JXRnTPCwHudU%2Fimage.png?alt=media&#x26;token=16c67e48-ea71-4805-a863-ce39e8702d7e" alt="" width="267"><figcaption></figcaption></figure> <figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FSrhhPXwnubu9heGWAgla%2Ffont-family-2-1.jpg?alt=media&#x26;token=08b7db0a-4a29-4bb0-b6e7-44c8482b8665" alt="" width="263"><figcaption></figcaption></figure></div>

## <mark style="color:blue;">**Body font**</mark>

<table><thead><tr><th width="237">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the body text:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the body text ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the body text:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the body text.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the body text.</td></tr></tbody></table>

## <mark style="color:blue;">**Heading font**</mark>

<table><thead><tr><th width="239">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to headings and titles:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to headings and titles ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to headings and titles:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Font style</td><td><p>Set the font style for headings and titles:</p><ul><li><strong>Normal</strong></li><li><strong>Italic</strong></li><li><strong>Oblique</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the text of headings and titles:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to headings and titles.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to headings and titles.</td></tr><tr><td>Border height</td><td>Set the height of the border (underline) for headings and titles.</td></tr></tbody></table>

## <mark style="color:blue;">**Navigation font**</mark>

**Menu level 1**

<table><thead><tr><th width="244">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the text of <strong>Menu level 1</strong>:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the text of <strong>Menu level 1</strong> ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the text of <strong>Menu level 1</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the text of <strong>Menu level 1</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the text of <strong>Menu level 1</strong>.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the text of <strong>Menu level 1</strong>.</td></tr></tbody></table>

**Menu level 2**

<table><thead><tr><th width="245">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the text of <strong>Menu level 2</strong>:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the text of <strong>Menu level 2</strong> ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the text of <strong>Menu level 2</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the text of <strong>Menu level 2</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the text of <strong>Menu level 2</strong>.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the text of <strong>Menu level 2.</strong></td></tr></tbody></table>

**Menu level 3**

<table><thead><tr><th width="247">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the text of <strong>Menu level 3</strong>:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the text of <strong>Menu level 3</strong> ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the text of <strong>Menu level 3</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the text of <strong>Menu level 3</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the text of <strong>Menu level 3</strong>.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the text of <strong>Menu level 3</strong>.</td></tr></tbody></table>

**Mega menu level 2**

<table><thead><tr><th width="249">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the text of <strong>Mega menu level 2</strong>:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the text of <strong>Mega menu level 2</strong> ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the text of <strong>Mega menu level 2</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Font style</td><td><p>Set the font style for the text of <strong>Mega menu level 2</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Italic</strong></li><li><strong>Oblique</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the text of <strong>Mega menu level 2</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the text of <strong>Mega menu level 2</strong>.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the text of <strong>Mega menu level 2</strong>.</td></tr></tbody></table>

**Mega menu level 3**

<table><thead><tr><th width="253">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the text of <strong>Mega menu level 3</strong>:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the text of <strong>Mega menu level 3</strong> ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the text of <strong>Mega menu level 3</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the text of <strong>Mega menu level 3</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the text of <strong>Mega menu level 3</strong>.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the text of <strong>Mega menu level 3</strong>.</td></tr></tbody></table>

## <mark style="color:blue;">**Product item font**</mark>

**Product title**

<table><thead><tr><th width="256">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the product title:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the product title ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the product title:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the product title:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the product title.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the product title.</td></tr><tr><td>Text line</td><td><p>Allows selection of the number of lines displayed for the product title.</p><ul><li><strong>1</strong></li><li><strong>2</strong></li><li><strong>3</strong></li><li><strong>Full</strong></li></ul></td></tr><tr><td>Bottom margin</td><td>Adjust the space between the bottom edge of the product title and the elements or content below it. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

**Product vendor**

<table><thead><tr><th width="257">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the product vendor:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the product vendor ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the product vendor:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul><p></p></td></tr><tr><td>Font style</td><td><p>Set the font style for the product vendor:</p><ul><li><strong>Normal</strong></li><li><strong>Italic</strong></li><li><strong>Oblique</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the product vendor:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the product vendor.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the product vendor.</td></tr><tr><td>Top margin</td><td>Adjust the space between the top edge of the product vendor and the elements or content above it. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom margin</td><td>just the space between the bottom edge of the product vendor and the elements or content below it. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

**Product price**

<table><thead><tr><th width="258">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the product price:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the product price ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the product price:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul><p></p></td></tr><tr><td>Line height</td><td>Set the line height to apply to the product price.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the product price.</td></tr><tr><td>Top margin</td><td>Adjust the space between the top edge of the product price and the elements or content above it. Can be from 0px to 100px, increasing arithmetically of 1px (pixel)</td></tr><tr><td>Bottom margin</td><td>Adjust the space between the bottom edge of the product price and the elements or content below it. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

**Product badges**

<table><thead><tr><th width="259">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the product badges:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the product badges ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the product badges:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the product badges:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the product badges.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the product badges.</td></tr><tr><td>Corner radius</td><td>Set the radius of the product badge's corners. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Top padding</td><td>Determines the height of the top inner space of the product badges. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the bottom inner space of the product badges. Can be from 0px to 50px, increasing arithmetically of 2px (pixel).</td></tr><tr><td>Left/Right padding</td><td>Determines the width of the left and  right inner space of the product badges. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

**Product quick view**

These settings are only applied when the **Quick View style** setting in **Product card** section is set to **Default**.

<table><thead><tr><th width="263">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font size</td><td>Set the font size to apply to the product quick view ranging from 10px to 100px.</td></tr><tr><td>Line height</td><td>Set the line height to apply to the product quick view.</td></tr><tr><td>Corner radius</td><td>Set the radius of the quick view button's corners. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Top padding</td><td>Determines the height of the top inner space of the quick view button. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the bottom inner space of the quick view button. Can be from 0px to 50px, increasing arithmetically of 2px (pixel).</td></tr><tr><td>Left/Right padding</td><td>Determines the width of the left and  right inner space of the quick view button. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Show box shadow</td><td>Adds a shadow effect around the quick view button.</td></tr></tbody></table>

**Blog title font**

<table><thead><tr><th width="264">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the blog title:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the blog title ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the blog title:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the blog title:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the blog title.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the blog title.</td></tr></tbody></table>

**Blog info font**

<table><thead><tr><th width="267">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the blog info:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the blog info ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the blog info:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the blog info:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the blog info.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the blog info.</td></tr></tbody></table>

## <mark style="color:blue;">**Primary button**</mark>

Apply to all buttons except the 'Add to Cart' and 'Buy It Now' buttons.

<table><thead><tr><th width="271">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the primary button:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the primary button ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the primary button:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the primary button:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the primary button.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the primary button.</td></tr><tr><td>Corner radius</td><td>Set the radius of the primary button's corners. Can be from 0px to 30px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Border width</td><td>Determines the thickness of the primary button borders. The range is from 0 to 30px.</td></tr><tr><td>Border style</td><td><p>Select the style for the primary button borders:</p><ul><li><strong>Solid</strong></li><li><strong>Dotted</strong></li><li><strong>Dashed</strong></li></ul></td></tr><tr><td>Show outline</td><td>Display an outline on the right and bottom of the primary button.</td></tr><tr><td>Text alignment</td><td><p>The alignment of the text within the primary button:</p><ul><li><strong>Left</strong> - Aligns the text to the left.</li><li><strong>Center</strong> - Aligns the text in the center.</li><li><strong>Right</strong> - Aligns the text to the right.</li></ul></td></tr><tr><td>Top padding</td><td>Determines the spacing between the primary button text and its top border.</td></tr><tr><td>Bottom padding</td><td>Determines the spacing between the primary button text and its bottom border.</td></tr></tbody></table>

**Box shadow**

<table><thead><tr><th width="272">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Horizontal length</td><td>Determines how many pixels the box shadow falls horizontally.</td></tr><tr><td>Vertical length</td><td>Determines how many pixels the box shadow falls vertically.</td></tr><tr><td>Blur radius</td><td>Determines how blur the shadow is. </td></tr><tr><td>Spread</td><td>Determines how far the shadow keeps its original thickness from its origin.</td></tr><tr><td>Box shadow color</td><td>Set the color of the shadow.</td></tr><tr><td>Box shadow hover color</td><td>Set the color of the shadow when button is hovered.</td></tr><tr><td>Opacity</td><td>Fill in the desired transparency of the box shadow. </td></tr><tr><td>Inset shadow</td><td>Select whether the shadow will fall inside of button if YES or outside of button if NO.</td></tr></tbody></table>

## <mark style="color:blue;">**Secondary button**</mark>

Apply to 'add to cart' and 'buy it now' buttons on product detail page.

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the secondary button:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the secondary button ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the secondary button:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the secondary button:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the secondary button.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the secondary button.</td></tr><tr><td>Corner radius</td><td>Set the radius of the secondary button's corners. Can be from 0px to 30px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Border width</td><td>Determines the thickness of the secondary button borders. The range is from 0 to 30px.</td></tr><tr><td>Border style</td><td><p>Select the style for the secondary button borders:</p><ul><li><strong>Solid</strong></li><li><strong>Dotted</strong></li><li><strong>Dashed</strong></li></ul></td></tr><tr><td>Show outline</td><td>Display an outline on the right and bottom of the secondary button.</td></tr><tr><td>Text alignment</td><td><p>The alignment of the text within the secondary button:</p><ul><li><strong>Left</strong> - Aligns the text to the left.</li><li><strong>Center</strong> - Aligns the text in the center.</li><li><strong>Right</strong> - Aligns the text to the right.</li></ul></td></tr><tr><td>Top padding</td><td>Determines the spacing between the secondary button text and its top border.</td></tr><tr><td>Bottom padding</td><td>Determines the spacing between the secondary button text and its bottom border.</td></tr></tbody></table>

**Box shadow**

<table><thead><tr><th width="279">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Horizontal length</td><td>Determines how many pixels the box shadow falls horizontally.</td></tr><tr><td>Vertical length</td><td>Determines how many pixels the box shadow falls vertically.</td></tr><tr><td>Blur radius</td><td>Determines how blur the shadow is. </td></tr><tr><td>Spread</td><td>Determines how far the shadow keeps its original thickness from its origin.</td></tr><tr><td>Box shadow color</td><td>Set the color of the shadow.</td></tr><tr><td>Box shadow hover color</td><td>Set the color of the shadow when button is hovered.</td></tr><tr><td>Opacity</td><td>Fill in the desired transparency of the box shadow. </td></tr><tr><td>Inset shadow</td><td>Select whether the shadow will fall inside of button if YES or outside of button if NO.</td></tr></tbody></table>

## <mark style="color:blue;">Tertiary</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**button**</mark>

Apply to 'add to cart' buttons.

<table><thead><tr><th width="281">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the tertiary button:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the tertiary button ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the tertiary button:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the tertiary button:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the tertiary button.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the tertiary button.</td></tr><tr><td>Corner radius</td><td>Set the radius of the tertiary button's corners. Can be from 0px to 30px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Border width</td><td>Determines the thickness of the tertiary button borders. The range is from 0 to 30px.</td></tr><tr><td>Border style</td><td><p>Select the style for the tertiary button borders:</p><ul><li><strong>Solid</strong></li><li><strong>Dotted</strong></li><li><strong>Dashed</strong></li></ul></td></tr><tr><td>Show outline</td><td>Display an outline on the right and bottom of the tertiary button.</td></tr><tr><td>Text alignment</td><td><p>The alignment of the text within the tertiary button:</p><ul><li><strong>Left</strong> - Aligns the text to the left.</li><li><strong>Center</strong> - Aligns the text in the center.</li><li><strong>Right</strong> - Aligns the text to the right.</li></ul></td></tr><tr><td>Top padding</td><td>Determines the spacing between the tertiary button text and its top border.</td></tr><tr><td>Bottom padding</td><td>Determines the spacing between the tertiary button text and its bottom border.</td></tr></tbody></table>

**Box shadow**

<table><thead><tr><th width="284">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Horizontal length</td><td>Determines how many pixels the box shadow falls horizontally.</td></tr><tr><td>Vertical length</td><td>Determines how many pixels the box shadow falls vertically.</td></tr><tr><td>Blur radius</td><td>Determines how blur the shadow is. </td></tr><tr><td>Spread</td><td>Determines how far the shadow keeps its original thickness from its origin.</td></tr><tr><td>Box shadow color</td><td>Set the color of the shadow.</td></tr><tr><td>Box shadow hover color</td><td>Set the color of the shadow when button is hovered.</td></tr><tr><td>Opacity</td><td>Fill in the desired transparency of the box shadow. </td></tr><tr><td>Inset shadow</td><td>Select whether the shadow will fall inside of button if YES or outside of button if NO.</td></tr></tbody></table>

## <mark style="color:blue;">Page title font</mark>

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the page title:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the blog title ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the page title:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Font style</td><td><p>Set the font style for the text of the page title:</p><ul><li><strong>Normal</strong></li><li><strong>Italic</strong></li><li><strong>Oblique</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the page title:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the page title.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the page title.</td></tr></tbody></table>