Theme settings

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