Craftly Docs
⌘K
Theme Store

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.

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. You can edit any of them, and every section's Color scheme setting lists them all.

The highlight color is separate, under Colors. It is used for badges and pills, which draw their own background, so it does not have to contrast with the page.

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 and numbers. A monospace font suits this role.

Heading scale multiplies every heading size at once, so you can make the whole page louder or quieter without editing each section.

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 spacing — the gaps inside product and collection grids

Appearance

Corner radius is 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.

Paper grain puts a very faint texture over the page background. It is drawn in CSS, so it costs no loading time. Turn it off for a cleaner, flatter look.

Animations

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

Reveal sections on scroll fades sections in as they come into view. Image hover effect applies to product and collection cards.

Product cards

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

Worth knowing:

  • Image ratio — Adapt to image keeps each product's own proportions, which suits a catalogue of mixed shapes. A fixed ratio looks tidier when your photography is consistent.
  • Quick add adds a button that 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.
  • Swatch display shows color and image swatches from your product options. Set those up in your Shopify admin under the product's options.

Cart

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

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. Only turn this on if your market requires it: every extra step costs you orders.

Show suggestions as you type turns on predictive search in the header. Suggestions come from Shopify's own search, so what appears follows your store's search settings.