# Theme settings Source: Theme settings apply to the whole store, not to a single section. Open them in the theme editor from the gear icon (**Theme settings**). Dossier keeps the logo, the main menu and the colors here, so every section that shows them stays consistent. ## Add your logo and favicon Under **Logo and favicon**, upload the **Logo** shown in the header and the **Favicon** shown in the browser tab. Both are optional: without a logo, Dossier uses the logo from **Settings > Brand** in your Shopify admin, and without either, the header shows the store name as text. The size of the logo in the header is a setting of the [Header](https://docs.ictsviluppo.example/dossier/sections/h-header) section. ## Set up the color schemes Every section has a **Color scheme** setting that picks one of the schemes defined under **Colors**. Dossier comes with five: white, light gray, black, dark green and sand. Change a scheme and every section that uses it changes too; add a scheme to get a new combination. Each scheme has thirteen colors in five groups: - **Background**: the main background, an **Alternative background** behind product images and cards, and an **Inverse background**. - **Text**: the main text, **Secondary text** for less important details, and **Inverse text** for solid buttons and inverse backgrounds. - **Buttons**: the solid **Button** color, its hover color, and a **Subtle accent** for selected options and highlighted areas. - **Borders**: **Divider** for decorative lines and **Input border** for fields and outline buttons. - **Status**: colors for success and error messages. Keep enough contrast between text and background in every scheme: at least 4.5:1 for text and 3:1 for **Input border**. The theme editor preview shows each scheme’s text and buttons on its background, so you can check them at a glance. ## Choose the fonts Under **Typography**, pick three fonts from the Shopify font library: **Body** for running text, **Headings**, and **Labels** for menus, buttons, badges and product codes. Bold and italic styles load automatically when the font has them. ## Choose the main menu and the breadcrumbs Under **Navigation**, **Main menu** is the menu of the header and of the mobile menu. Edit its items in **Content > Menus** in your Shopify admin; nested items become drop-down and mega menus. **Breadcrumb menu** decides the path shown above collections, pages, blogs and products: Dossier looks for the page in the menu, up to three levels deep, and shows the items that contain it, for example Home / Women / Outerwear / Coats. Pages that aren’t in the menu show Home and the page title. Use a dedicated menu if the main menu doesn’t follow your catalog. ## Link your social media accounts Under **Social media**, paste the full address of each account, starting with `https://`. The [Footer](https://docs.ictsviluppo.example/dossier/sections/f-footer) shows an icon link for each one you fill in. ## Change the page width and margins Under **Layout**, **Page width** sets how wide the content can grow on large screens, and **Page margin** sets the space at the sides of the content on phones; from tablet size up the margin doubles. **Input corner radius** rounds the corners of fields and buttons. ## Customize product cards **Product cards** apply to every product grid in the store: collections, search results, featured collections and recommendations. - **Show second image on hover** shows the product’s second image when a pointer rests on the card. - **Color display** shows color swatches, the number of colors, or nothing. Swatches come from the first product option whose values have a swatch, set on the option values of each product in your Shopify admin. - **Enable quick add** adds a button to choose options and add to cart without leaving the page. - **Sale badge** shows “Sale” or the percentage off on discounted products. - **Show a New badge on products tagged** marks products that have the tag you write, for example `new`. - **Show product rating** needs a product reviews app that fills in Shopify’s standard rating fields. ## Show a delivery estimate Turn on **Show delivery estimate** under **Delivery estimate** to show an estimated delivery date range on product pages. Set the **Order cutoff time**, the **Processing time** and the minimum and maximum shipping time in business days. The dates are calculated in the customer’s browser, so they follow the customer’s time zone, and they are an estimate: they don’t come from your shipping rates.