Rail theme settings
Theme settings apply to your whole store. Open the theme editor and select the paintbrush icon (Theme settings) in the left rail. Each heading on this page matches a group in that panel.
Logo and favicon
- Logo image
- Your store logo. Leave it empty to show the store name as a wordmark in the header, footer and password page. Upload a PNG or SVG with a transparent background for best results.
- Logo width 60 to 300 px, default 140
- How wide the logo is in the compact header bar and the dock.
- Favicon image
- The small icon shown in the browser tab. A 32 x 32 px .png is recommended.
The giant masthead on the home page always shows your store name as text. Its size and background are set on the header section (see Header).
Colors
Rail does not use one global palette. It uses color schemes: ready-made sets of eight colors. Every section picks a scheme with its own Color scheme setting, so you can alternate white, pink and black bands down a page.
The eight roles in a color scheme
| Role | What it colors |
|---|---|
| Background | The section background. |
| Text | Headings and body text, and the soft tints derived from it for panels and dividers. |
| Secondary text | Less important text such as captions, notes and small print. |
| Borders and lines | Outlines of buttons, fields, cards and other shapes. |
| Button | The background of solid buttons. |
| Button label | Text on solid buttons. Keep it readable against Button. |
| Accent | Highlights: the Accent button style, the New badge, counters and decorative shapes. |
| Accent label | Text on top of Accent. |
The six default schemes
In the editor they are named Scheme 1 to Scheme 6. Edit a scheme once and every section using it changes.
| Scheme | Look | Typical use |
|---|---|---|
| Scheme 1 | White background, near-black text, pink accent | Main content, product page, collection page, header |
| Scheme 2 | Blush pink background, dark text | Rail section, cart, 404, mirror wall |
| Scheme 3 | Hot pink background, dark text | Fitting room, password page |
| Scheme 4 | Butter yellow background, dark brown text | Announcement bar, Shelf, newsletter |
| Scheme 5 | Cherry red background, light text | Statement ticker, promo cards |
| Scheme 6 | Black background, white text | Footer, Wall, total bar |
To change them, open Theme settings > Colors, select a scheme and edit its colors. You can add more schemes with the Add button or duplicate a scheme to try a variation.
Check contrast
Make sure Text on Background, and Button label on Button, are easy to read. A contrast ratio of at least 4.5:1 is the accessibility standard for normal text.
Sale and stock colors
- Sale price and badge color, default #B8001F
- Color of the sale price, compare-at price accents and the sale badge.
- Sale badge label color, default #FFF4F6
- Text color on the sale badge. It sits on the Sale price and badge color.
- Success and in stock color, default #2E7D4F
- Used for positive messages, such as the stock note on the product page and success states.
- Errors color, default #B8001F
- Used for error messages in forms.
Typography
Rail uses three fonts from the Shopify font library. Fonts are loaded once and shared across the store.
- Headings font, default Funnel Display
- Large display headings, the giant wordmark, price tags and numbers.
- Heading size 80 to 130 %, default 100
- Scales all headings up or down together.
- Heading case As written, Lowercase, Uppercase
- Forces headings to a case. Leave it on As written to keep exactly what you typed.
- Body font, default Host Grotesk
- Paragraphs, menus, buttons and form fields.
- Body text size 90 to 120 %, default 100
- Scales body text. Increase it if your customers need larger text.
- Accent font, default Fraunces Italic
- Used for short italic captions inside headings and notes. In heading fields that accept rich text, wrap the accent word in italics to switch it to this font.
Layout
- Page width 1000 to 1800 px, default 1440
- Maximum width of page content on large screens.
- Page margin on large screens 12 to 80 px, default 64
- Space between the page edge and the content on large screens. Phones use a smaller built-in margin.
- Space between sections Compact, Regular, Airy
- Overall vertical spacing between sections. Per section, use Remove top spacing and Remove bottom spacing to join two sections.
Motion
- Enable motion default on
- Turns on the swinging hangers and price tags and scrolling text. Motion is always off for visitors who have asked their device to reduce motion, whatever this setting says.
- Lift cards on hover default on
- Product cards rise slightly when a pointer hovers over them.
Some sections have their own motion switches, for example Gentle swing on Rail and Scroll sideways on Statement.
Product cards
The hanger-style card is used by Rail, Shelf, Wall, collection grids, search and recommendations. These settings change every card in the store.
- Default media shape Arch, Pill, Plinth, Round on a hook, Rounded rectangle
- The shape of the product photo window. Many sections and the collection and search pages can override it with their own shape setting.
- Show hanger above arch and pill media default on
- Draws a hook and hanger above arch and pill shaped cards.
- Show price tag sticker default on
- Adds a small hanging price tag on the product photo. The price is always shown as text under the title as well, so turning the tag off only removes the decoration.
- Show second image on hover default on
- When a product has more than one image, the second one appears on hover.
- Enable quick add default on
- Lets shoppers add a product to the bag straight from the card. For products with sizes, they choose a size on the card; single-variant products add directly.
- Show color swatches default on
- Shows small color dots under the card for the product's color option (up to four, then a +number).
- Color option name text, default Color
- The name of the product option that holds colors. Separate alternatives with commas, for example
Color, Colour. The first matching option is used for swatches, and another option on the product is treated as the size option for quick add. - Card caption metafield text
- Namespace and key of a single-line text product metafield, for example
custom.card_caption. Its value appears in italics under the product title, and the price moves to the line below. See Card caption.
Badges
- Show sale badge default on
- Shows a badge on products whose compare-at price is higher than the price.
- Sale badge text Sale, Percentage off
- Show the word Sale, or the discount as a percentage.
- Show new badge for products tagged new default on
- Add the tag
newto a product in the Shopify admin to show a New badge. - Show low stock badge at or below 0 to 10, default 3
- Shows a low stock badge when the total stock across all variants is at or below this number. Set it to 0 to hide the badge. It needs inventory tracking turned on for the products.
A sold-out product shows a Sold out badge. A card shows at most two badges at a time.
Cart
- Cart type Drawer, Page
- Drawer slides the cart in from the side when a shopper adds a product. Page sends shoppers to the cart page.
- Free shipping threshold 0 to 500, default 150
- Amount, in your store currency, shown as a progress bar toward free shipping. Set it to 0 to hide the bar. It is display only. See Cart.
- Enable cart note default on
- Shows a note field in the cart for gift messages or delivery instructions.
- Upsell collection collection
- Products from this collection appear in the cart drawer under Pairs well with.
Search
- Enable search suggestions default on
- Turns on predictive search: results (products, collections, pages, articles and query suggestions) appear as the shopper types.
- Suggested searches text, default "red dress, mini bag, heels, linen, sale"
- Search terms offered as shortcuts in the header search and on the search page. Separate them with commas. Leave the field empty to hide them.
Social media
Paste the full link to each profile (for example https://www.instagram.com/yourbrand). Leave a field empty to hide that network. Icons appear in the footer's Social links block.
- Instagram, TikTok, Pinterest, Facebook, YouTube and X (Twitter).
Currency format
- Show currency codes default off
- Adds the currency code after prices in the cart and drawer totals and on price displays, for example $65.00 USD. Turn it on if you sell in several currencies that share a symbol.
How prices are formatted (decimals, symbol) comes from Shopify's store currency settings (Settings > General > Store currency).