Customising · Theme settings

Theme settings

Open the theme editor and choose Theme settings at the bottom of the sidebar. These apply everywhere; individual sections can override some of them.

Logo

Your logo, an optional different one for phones, a width for each, and the favicon. Upload at least twice the width you set: a logo shown at 130px wants a 260px file, or it goes soft on a high-resolution screen.

Colors

Craftly uses color schemes rather than one global palette. A scheme is a complete set of colors that belong together: background, text, headings, links, buttons, borders, shadow, and the sale price. Every section picks a scheme, so you can alternate light and dark down a page without setting colors section by section.

Craftly ships five schemes — three papers from light to dark, one saturated, one near-black. You can edit any of them, and every section's Color scheme setting lists them all.

Two colors sit outside the schemes, under Accents, because they have to look the same over every background they land on:

Highlight is used for badges and pills, which draw their own background.
Sale tag is the hanging tag's color. The number on it switches between black and white on its own, so any tag color stays readable.

Typography

Three fonts, each with a job:

Heading font — headings and prices
Body font — everything you read in a paragraph
Accent font — small uppercase labels, eyebrows, bands and numbers. A monospace font suits this role, and the theme ships with one, because a band is a data strip and data wants figures that line up.

Under Scale:

Body size sets the base, and everything else is derived from it.
Heading scale multiplies every heading size at once, so you can make the whole page louder or quieter without editing each section.
Body line height and Heading line height control how tightly lines stack. Headings ship tight, at 92%, which is what makes a large heading read as a block of type rather than as a paragraph.
Heading letter spacing ships slightly negative for the same reason. Positive values suit a wide font; a condensed one usually wants the default or tighter.
Heading capitalization can force every heading to uppercase.

All fonts come from Shopify's font library and are served from Shopify's own servers. Craftly loads no fonts from anywhere else.

Layout

Page width — how wide content gets on a large screen
Page margin — the gap between content and the edge on small screens
Section spacing — the vertical rhythm of the whole shop: compact, regular or spacious
Grid column spacing and Grid row spacing — the gaps inside product and collection grids

Appearance

Corners are set separately for buttons, inputs, cards, media and badges, so you can have soft cards with square buttons if that is the look you want. Craftly ships with all five at zero: a band is a strip of paper with a ruled edge, and a rounded band is a sticker. Round them if you want a softer shop — nothing breaks — but round them together.

Borders and shadows set the hairline every ruled edge in the theme is drawn with. Border thickness and Border opacity apply to bands, spec rows, cards and inputs at once. Shadow opacity ships at zero; raise it, with Shadow blur and Shadow vertical offset, for a shop that wants cards to lift off the page.

Texture holds two effects, both drawn in CSS, so neither costs any loading time:

Paper grain puts a very faint texture over the page background, with its own opacity. It ships off; turn it on for a printed, papery feel.
Grid texture on dark sections draws a faint chart-paper grid behind any color scheme with a dark background. It is keyed to the scheme's measured brightness rather than to a particular scheme, so if you darken a light scheme it picks up the grid, and if you lighten a dark one it loses it. A scheme with a gradient keeps the gradient — setting one is an explicit choice.

Animations

Animations are off for any shopper whose device asks for reduced motion, regardless of these settings. That is deliberate and not configurable: it is an accessibility setting, not a style choice.

Enable animations is the master switch. Reveal sections on scroll fades sections in as they come into view, Animation speed sets how fast, and Image hover effect — zoom, fade or nothing — applies to product and collection cards.

Buttons

Button style is solid or outline, with its own border thickness. Use uppercase button labels and Button letter spacing set how the label is typeset; uppercase with a little tracking is the theme's default and matches the accent font used on bands.

Hover effect has a Switch to accent color option, which is the default. The primary button is dark, and darkening something dark does nothing a shopper can see; switching to the scheme's link color is both visible and already contrast-checked against that background.

Product cards

These apply to every product grid in the shop, so you set them once.

Card style is the important one. Band is the default: a ruled strip under the photograph carrying the name and the price in fixed slots, so a grid of cards lines up across every row and reads as one table. Plain, Bordered and Raised are the conventional alternatives.

The rest:

Image ratio — Adapt to image keeps each product's own proportions, which suits a catalog of mixed shapes. A fixed ratio looks tidier when your photography is consistent. Image fill decides whether a photograph is cropped to the box or fitted inside it.
Show second image on hover swaps to the second photograph. Arrows through product photos adds arrows over the image instead, for products with several. The extra photographs are only fetched once a shopper points at a card, so a collection page does not pay for them up front.
Alignment sets where the text sits. On a band card the slots are fixed, so this applies to the other three styles.
Line above the title puts one line of small caps over the product name. Product type reads as a category on a shop that makes what it sells; Vendor suits a shop that stocks other makers.
Show rating reads Shopify's standard rating metafield, so any review app that writes to it appears here. Show unit price prints the per-unit price where you have set one.
Swatch display shows color and image swatches from your product options — always, on hover, or never — in circles or squares. Set the swatches up in your Shopify admin under the product's options.
Quick add puts single-variant products straight into the cart. Products with options link to the product page instead, because a shopper cannot choose a size from a grid. Quick view opens the product in a panel.
Quick view and quick add sit over the image and appear on hover. On a touch screen they do not appear at all — there the whole card is one tap to the product page, where everything they do lives anyway.

Badges

Badge position puts the badge in a corner of the image, and Sale badge format prints it as the word Sale, a percentage or an amount.

Sale badge shape is either a hanging tag or a pill. The tag is the default and hangs off the top right corner of the image whatever Badge position says — a tag pinned to the bottom left is not a tag.

Show sold out badge marks what is gone. New badge window marks what has just arrived: set the number of days a product counts as new, or leave it at zero to turn the badge off.

Cart

Cart type decides whether adding to cart opens a drawer or goes to the cart page. The drawer keeps shoppers where they were.

Enable order note gives shoppers a field for delivery instructions or a gift message. Show vendor prints the vendor under each line.

Show free shipping progress shows how much more a shopper needs to spend. Enter the threshold as a plain number in your store's currency, without a symbol.

Require terms agreement blocks checkout until a box is ticked, with a link to your terms page. Only turn this on if your market requires it: every extra step costs you orders.

Search

Show suggestions as you type turns on predictive search. Suggestions come from Shopify's own search, so what appears follows your store's search settings. With it off, the search field still works — it submits to the search page.

Whether the magnifier appears at all, and the Browse menu of links shown inside the search sheet, are set on the header rather than here.

Your profile links. Anything you leave blank is left out, and the Social media block stops rendering entirely when all of them are.

Brand information

A brand image, a headline and a description, used by the Brand information block — most usefully in the footer masthead. Like the social links, the block disappears when these are empty rather than leaving a heading over an empty column.

Currency format

Show currency codes prints £10.00 GBP instead of £10.00. Worth turning on if you sell in more than one currency that uses the same symbol.

Text and layout blocks

Two blocks you will meet everywhere, and what their settings mean:

Text has four styles — normal, eyebrow, subtitle and title — and each is tied to the type scale rather than to a fixed pixel size, so scaling your type scales them with it.

Group lays its blocks out in a row or a column, and the alignment applies to both. Spread apart pushes them to the two edges, which is what a header bar wants; left, center and right are what a row of small blocks usually wants instead.