Theme settings

Theme settings

Theme settings apply to your whole store. To open them, go to Online Store > Themes, select Customize, and then select the gear icon in the theme editor sidebar.

#Logo and favicon

• Logo: your logo image. A transparent .png or .svg works best. Any aspect ratio works. Without a logo, the header shows your store name as text.
• Desktop logo width: the logo width on larger screens, from 60 to 300px.
• Mobile logo width: the logo width on phones, from 50 to 200px.
• Favicon: the small icon in browser tabs and bookmarks. Use a 48 x 48px .png.

The password page also shows your logo, at the desktop width.

#Colors

Colors are organized into color schemes. A color scheme is a set of colors for backgrounds, text, buttons and borders. Most sections have a Color scheme setting where you pick a scheme. When you change a scheme here, every section that uses it updates.

Unoque comes with five schemes:

Scheme 1 is also the page's base color, so areas outside sections use it.

Each scheme has these settings:

• Background: the section background color.
• Background gradient: a gradient that replaces the background color when set.
• Text: the main text and icon color.
• Subdued text: a softer color for secondary text, such as descriptions and vendor names.
• Accent: used for sale badges, highlights, and star ratings. Benefit chips, the low stock dot and the cart count bubble also use it.
• Solid button background: the fill color of solid buttons, such as Add to cart.
• Solid button text: the text color on solid buttons.
• Outline button and links: the border and text color of outline buttons, and the color of links.
• Borders and lines: dividers, card outlines and input borders.
• Shadow: the color of shadows on cards, buttons, drawers and the sticky header.

To add a scheme, select Add scheme below the list. Your new scheme then appears in every Color scheme setting.

Tips:

• Keep enough contrast between text and background. See Performance and accessibility.
• Sale badges and the cart count bubble show text on the accent color. Unoque picks a readable text color for them in each scheme: white when it's readable, otherwise a darker or matching color.

#Typography

#Headings

• Font: the font for headings. Select Change to browse the Shopify font library.
• Size scale: makes all headings smaller or larger, from 80 to 150%.
• Letter case: Default keeps your text as you typed it. Uppercase shows headings in capital letters.
• Letter spacing: the space between letters, from -5 to 10% of the font size. Negative values bring letters closer together.

#Body text

• Font: the font for paragraphs, menus, buttons and forms.
• Size scale: makes body text smaller or larger, from 90 to 120%.

Tip: fonts marked as system fonts in the font picker don't need to download, so pages load a little faster.

#Layout

• Page width: the maximum width of page content on large screens, from 1200 to 1800px.
• Desktop side margin: the space between your content and the edge of the screen on desktop, from 16 to 80px. On phones, the margin is 16px.
• Space between sections: default spacing used by a few page elements, such as an image banner that isn't full width. Most sections have their own Top padding and Bottom padding settings, which take priority.
• Grid spacing: the gap between cards and tiles in grids and carousels, from 8 to 40px.

#Buttons and inputs

• Button corner radius: 0 gives square corners. Higher values make buttons rounder, up to 40px.
• Button letter case: Default or Uppercase button text.
• Show button shadow: adds a soft shadow under buttons.
• Input corner radius: the corner roundness of text fields and selectors, from 0 to 24px.
• Card and image corner radius: the corner roundness of product cards, images, tiles and boxed sections, from 0 to 32px.

#Product cards

Product cards show products in grids and carousels, such as collection pages, search results, Featured collection, Collection tabs, Product recommendations and Recently viewed.

• Image ratio: Adapt to image keeps each image's own shape. Square and Portrait crop images to the same shape, so rows line up.
• Card style: Minimal has no border or background. Outlined adds a thin border. Filled adds a soft background.
• Text alignment: Left or Center.
• Show second image on hover: shows the product's second image when a customer points at the card. It needs at least two product images, and Enable hover effects must be on in Animations.
• Show vendor: shows the product vendor above the title.
• Show product rating: shows star ratings from the product reviews metafields that review apps write to. See Product tags and metafields.
• Show color swatches: shows up to five swatches for one option of each product. Cards use the first option whose values have swatch colors or images in Shopify. If no option has them, cards use an option named Color, Colour or Shade.
• Show benefit chips: shows up to three product tags that start with "benefit:", for example benefit:Fragrance free, under the product title.
• Quick add: Hide removes the button. Add to cart button adds the product in one click, or opens a quick view to choose options when the product has variants or subscription options. Add to cart button with quantity also shows a quantity selector for products without options.

Cards also show one badge from a product tag that starts with "badge:". See Product tags and metafields.

#Badges

• Sale badge: what the sale badge says when a product has a compare-at price. Sale shows the word "Sale". Percentage saved shows, for example, "Save 20%". Amount saved shows, for example, "Save $5.00".
• Show sold out badge: shows a "Sold out" badge on cards when no variant is available.
• Badge position: Top left or Top right of the card image.

The sale badge style also applies to the price on the product page.

#Cart

• Cart type: Drawer opens a panel from the side when customers add a product. Page takes customers to the cart page.
• Show vendor: shows the product vendor for each item in the cart.
• Show order note field: lets customers add a note, such as gift instructions, in the cart.

#Free shipping bar

The bar shows how much more a customer needs to spend to reach the threshold. Set the same threshold in your shipping settings, so the bar matches what checkout charges.

• Show free shipping bar: turns the bar on in the cart drawer and on the cart page. The cart page also has its own Show free shipping bar setting in the Cart section.
• Free shipping threshold: the amount in your store currency, without decimals or symbols. Example: 75.

The bar shows only to customers who shop in your store currency. Customers who shop in another currency don't see it, because the theme can't convert the threshold.

#Cart recommendations

• Collection: products from this collection are suggested in the cart drawer. Products already in the cart and sold out products are skipped. Up to four products show.
• Heading: the heading above the suggestions.

Read more in Cart.

#Search

• Enable predictive search: shows suggested products, collections, pages, articles and search terms as customers type.
• Show vendor: shows the vendor next to products in predictive search.
• Show price: shows the price next to products in predictive search.

#Social media

Under Social media accounts, enter the full link to each of your accounts: Instagram, Facebook, YouTube, TikTok, X, Pinterest, LinkedIn and WhatsApp. For example, https://instagram.com/yourbrand (opens in a new tab). For WhatsApp, use a wa.me link followed by your full phone number in international format, without spaces or a plus sign.

Icons appear only for accounts you add. They always show in the mobile menu and on the password page. In the Announcement bar, the Footer and its blocks, turn on Show social media icons to show them.

#Currency format

• Show currency codes: adds the currency code to prices, for example $1.00 USD. This helps when you sell in several currencies that use the same symbol.

#Animations

• Reveal sections on scroll: content fades in as customers scroll down the page. Customers who turned on reduced motion on their device don't see this effect.
• Enable hover effects: cards and images react when customers point at them, for example by zooming slightly or showing a second image.

Updated 2026-10-24