Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
York Site Styles tweaks

This is a list of all Site Styles tweaks for the York family (Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, and York).

We constantly evolve the Squarespace platform to give you the best possible tools for building your website. If the platform recently changed, you may see different options than the ones listed below. The best way to learn how any tweak works is to experiment with it and see what changes on your site.

Tip: For general help, see the York template guide.

Before you begin

Many fonts on York have the option to scale, so you can set the maximum and minimum font size. This helps you control how your site looks in different browsers.

To learn more, visit Scaling fonts.

Site

Site

  • Site Background - Change the color behind the main content area and header.
  • Site Max Width - Set the width of the main content area. This doesn't affect Project, Gallery, or Index Pages. 
  • Site Spacing: Extra Small, Small, Medium, Large, Extra Large, Custom - Set the space between the site content and the top of the browser.
  • Site Custom Spacing - Appears when Site Spacing: Custom is selected.
  • Site Outer Padding: Extra Small, Small, Medium, Large, Extra Large, Custom - Set the space between the site content and the sides of the browser.
  • Site Custom Padding - Appears when Site Outer Padding: Custom is selected.
  • Site Alignment: Left, Center, Right
  • Enable Ajax Loading - Enable for optimal loading speeds.

Site: Header

Style the header elements. These have separate mobile styles.

  • Site Title Font
  • Site Title Color
  • Site Tagline Font
  • Site Tagline Color
  • Logo Height (Max)
  • Header Horizontal Spacing
  • Header Vertical Spacing
  • Full Width Header - When checked, the header ignores alignment and site width. The header will still follow Site Outer Padding.
  • Cart Style: Text, Cart, Bag
  • Cart Font
  • Cart Color
  • Cart Quantity Color
  • Cart Quantity Text Color

Site: Footer

  • Show Global Site Footer

Site: Header Layout

For any of these header elements, choose Hide, Left, Center, or Right.

  • Branding Position
  • Tagline Position
  • Primary Nav Position
  • Secondary Nav Position
  • Cart Position

These tweaks appear when two or more elements are added to each area of the header:

  • Left Layout: Horizontal, Stacked
  • Center Layout: Horizontal, Stacked
  • Right Layout: Horizontal, Stacked

Site: Navigation

Style the Main Navigation and Secondary Navigation. These have separate mobile styles.

  • Primary Font
  • Primary Link Color
  • Primary Active Link
  • Secondary Font
  • Secondary Link Color
  • Secondary Active Link
  • Link Spacing
  • Show Folder Indicator - Hide or display the caret beside folder drop-down menus.

Site: Typography

Change the fonts for your main content area. Headings and Quote Blocks support scaling fonts. Project Page titles and captions have separate styles

  • Heading 1 Font
  • Scale Heading 1
  • Heading 1 Min
  • Heading 1 Color
  • Heading 2 Font
  • Scale Heading 2
  • Heading 2 Min
  • Heading 2 Color
  • Heading 3 Font
  • Scale Heading 3
  • Heading 3 Min
  • Heading 3 Color
  • Body Font
  • Body Text Color
  • Body Link Color
  • Quote Font
  • Scale Quote
  • Quote Min
  • Quote Text Color
  • Quote Alignment: Left, Center, Right
  • Show Quotation Marks
  • Quote Source Font
  • Quote Source Color

Page

The banner tweaks in these sections apply to banners at the top of supported pages. They don’t apply to Index Page section banners.

These tweaks affect all pages of the same type across your site. For example, if you have two Album Pages, checking Show Album Title will display the page title at the top of both Album Pages.

Page

The Banner, Title, and Description tweak names change based on the page type. For example, on an Album Page you'll see Show Album Banner.

  • Show Banner - Hide or display the page thumbnail banner.
  • Show Homepage Banner - Add a banner image/color to the homepage while hiding it for all other pages of that type. This tweak appears when you're on the homepage and Show Banner is unchecked.
  • Show Title - Hide or display the page title.
  • Show Description - Hide or display the page description.
  • Show Categories - Hide or display categories on Gallery and Project Pages.
  • Show Page Header - Hide or display the page header.
  • Show Page Footer - Hide or display the page footer.

Banner

Style page banners

  • Height: Small, Medium, Large, Extra Large 
  • Image Alignment: Top, Right, Bottom, Left, Center
  • Crop Image - Available with the right, left, and center alignments. Crops to fill the right half, left half, or entire banner. 
  • Auto Color Background - Automatically pulls a background color from the thumbnail image.
  • Background Color - If Auto Color Background is unchecked, manually select the banner background color.
  • Full Bleed Banner - Display the banner at the width of the browser.

Banner Text

Change the text that displays over banners

  • Alignment: Top Left, Left, Bottom Left, Top, Center, Bottom, Top Right, Right, Bottom Right
  • Width: Small, Medium, Large, Extra Large
  • Title Font
  • Scale Title Size
  • Title Min
  • Title Color
  • Title Spacing
  • Category Font - Categories can display on Gallery and Project Pages.
  • Category Color
  • Category Spacing
  • Description Font
  • Scale Description Size
  • Description Min
  • Description Color
  • Highlight Text - Add a background color behind the page title and description text. Use the Highlight tweaks to style the highlight color.
  • Text Highlight Color
  • Text Highlight Indent: Small, Medium, Large, Custom - Choose how far the background color extends beyond the text.
  • Custom Highlight Indent - Appears when Text Highlight Indent: Custom is selected.

Page: Intro Text

Change the page title and description on collection pages without banner thumbnail images or videos. Indexes without banner images have their own font style.

  • Title Font
  • Scale Title Size
  • Title Min
  • Title Color
  • Title Spacing
  • Category Font
  • Category Color
  • Category Spacing
  • Description Font
  • Scale Description Size
  • Description Min
  • Description Color
  • Text Width: Small, Medium, Large, Extra Large 
  • Text Height: Small, Medium, Large, Extra Large - Set the spacing above and below the text.

Index

Style the header banner and section banners that appear on Index Pages

Index: Intro Text

This appears when Show Index Banner is unchecked. Use this to set a different style for the page title and description on Index Pages. This doesn't affect the section banners that display below the header banner. 

  • Title Font
  • Scale Title Size
  • Title Min
  • Title Color
  • Title Spacing
  • Description Font
  • Scale Description Size
  • Description Min Size
  • Description Color
  • Text Width: Small, Medium, Large, Extra Large
  • Text Height: Small, Medium, Large, Extra Large - Set the spacing above and below the text.

Index: Layout

Style the layout of Index Pages.

  • Item Width: Full, Half, Grid - Display one or two banners per row, or create a thumbnail grid.
  • Columns - For grid layouts, choose the number of thumbnails that display per row.
  • Tablet: Columns - For grid layouts, choose the number of thumbnails that display per row on tablet devices.
  • Mobile: Columns - For grid layouts, choose the number of thumbnails that display per row on smartphones.
  • Thumbnail Ratio - For grid layouts, set the height-to-width ratio of the thumbnails.
  • Item Height: Small, Medium, Large, Extra Large - For banner layouts, set the height of the banners.
  • Item Spacing: Small, Medium, Large, Custom - For banner layouts, set the space between banners.
  • Item Custom Spacing - Set the spacing when Item Spacing: Custom is selected.
  • Alternate Widths - Alternate between rows that display one banner and two banners. Appears when Image Alignment: Center and Item Width: Full or Half are selected.
  • Alternate Sides - Alternates the side that banner images display on. Appears when Item Width: Full and Image Alignment: Right or Left are selected.
  • Full Bleed Index - When checked, banners or thumbnails extend to the browser’s edge. When unchecked, banners and thumbnails follow the site width and padding. This also affects the page header banner.

Index: Item Image

Style Index banner images.

  • Image Alignment: Top, Right, Bottom, Left, Center
  • Crop Image - Available with the right, left, and center alignment. Crops the image to fill the right half, left half, or entire banner.
  • Image Opacity - Set how much of the banner background color shows through the image.
  • Image Hover Opacity - Choose how much the image fades when visitors hover over it.
  • Auto Color Background - When checked, each banner with a thumbnail image automatically pulls a background color from the thumbnail image itself.
  • Item Background Color - If Auto Color Background is unchecked, manually select the banner background color.

Index: Item Text

Change the display settings for the page title and categories that can display over Index Page banners.

  • Title Display: Always On, Hidden, On Hover, On Scroll
  • Text Alignment: Top Left, Left, Bottom Left, Top, Center, Bottom, Top Right, Right, Bottom Right
  • Title Font
  • Scale Title Size
  • Title Min Size - Learn more about scaling fonts.
  • Title Color
  • Use Title Background
  • Title Background Color
  • Title Spacing
  • Show Categories
  • Category Font
  • Category Color
  • Use Category Background
  • Category Background Color

Index: Navigation

Navigation displays at the bottom of all pages within an Index. To hide it, uncheck the Show Index Navigation tweak.

Use Link Style to set the type of navigation:

  • Link Style: List (inline) - Displays all the pages within the Index as horizontal navigation links.
  • Link Style: List (stacked) - Displays all the pages within the Index as vertical navigation links.
  • Link Style: Next (inline) - Displays a Next label. If Show Label Only is unchecked, the next page displays beside the Next label.
  • Link Style: Next (stacked) - Displays a Next label. If Show Label Only is unchecked, the next page displays below the Next label.
  • Show Label Only - Add a link for the next page below or beside the Next label.

Use the other tweaks to set the link style:

  • Spacing: Small, Medium, Large, Custom
  • Custom Spacing
  • Link Font
  • Scale Link Size
  • Index Link Min - Learn more about scaling fonts.
  • Link Color
  • Active Link Color
  • Link Delimiter: None, Slash, Bullet  - Appears with the Link Style: List tweaks.
  • Link Spacing: Small, Medium, Large, Custom
  • Page Transition Animation - Choose whether content on pages within an Index slides up on initial load.

Project

Style Project Pages.

Project: Layout

  • Image Alignment: Left, Center, Right - Align all captions and images to the right, left, or center.
  • Image Spacing: Small, Medium, Large, Custom - Set the space between each image in the Project.
  • Image Custom Spacing - Appears when Image Spacing: Custom is selected.
  • Banner Spacing: Small, Medium, Large, Custom - Set the space between the page header and the first image. (Text Height in the Page: Intro Text section may also affect this).
  • Project Banner Spacing - Appears when Banner Spacing: Custom is selected.
  • Show Project Captions - Hide or display all image titles and descriptions.
  • Portrait and Square Caption Style: Standard, Offset, Alternate
  • Align Alternate Captions to Image - Aligns the captions left or right. Available when Portrait and Square Caption Style is set to Alternate.
  • Landscape Caption Style: Standard, Offset, Inset
  • Allow Full Width Portrait and Square - Display portrait and square images at the width of the main content area. If Full Bleed Project is selected, they display at the width of the browser (full-bleed). Available when Portrait and Square Caption Style is set to Standard or Offset
  • Collapse Landscape Spacing - Removes the space below landscape images without captions.
  • Full Bleed Project - All landscape images on the page extend to the browser’s edge, depending on their size. This includes the header banner.
  • Cascade Images and Captions - Choose whether images and captions slide up from the bottom as you scroll down the page.

Project: Fonts

Style the text of your image title and descriptions.

  • Caption Title Font
  • Caption Title Align: Left, Center, Right
  • Scale Caption Title
  • Caption Title Min - Learn more about scaling fonts.
  • Caption Title Color
  • Caption Title Spacing
  • Caption Body Font
  • Caption Body Align: Left, Center, Right
  • Scale Caption Body
  • Caption Body Min - Learn more about scaling fonts.
  • Caption Body Color

Mobile

Use these tweaks to set separate style options for your mobile site, or ensure they match the desktop styles for consistency.

Mobile: Bar

The mobile bar contains your title, logo, menu icon, and tagline.

  • Mobile Bar Position: Standard, Top Fixed, Bottom Fixed - Choose whether the mobile bar scrolls up with the page, or stays fixed at the top or bottom of the screen.
  • Transparent Mobile Bar
  • Branding Position: Left, Center, Right
  • Menu Icon Position: Left, Right
  • Logo Width
  • Site Title Font
  • Site Title Color
  • Menu Icon Color
  • Tagline Position: Hide, Below Branding, Beside Branding
  • Tagline Font
  • Tagline Color
  • Tagline Spacing

Mobile: Menu

Set the colors and fonts for your mobile elements. 

  • Background Color
  • Site Title Color
  • Menu Icon Color
  • Tagline Color
  • Primary Link Font
  • Primary Link Color
  • Secondary Link Font
  • Secondary Link Color
  • Vertical Spacing

Mobile: Cart

The shopping cart can display in the navigation overlay.

  • Hide
  • Style: Text, Cart, Bag
  • Font
  • Color
  • Quantity Color
  • Quantity Text Color
  • Cart Spacing

Icons

  • Icon Weight: Hairline, Light, Medium, Heavy - Set the line weight of the search and shopping cart icons.

Events

These tweaks appear on Events Pages.

  • Disable Item Pages
  • Show Past Events
  • Show Thumbnails 
  • Thumbnail Size 
  • Show Date Tag
  • Show Date Tag w/ Time
  • Show Categories
  • Show Date 
  • Show Time
  • Show Location
  • Show Export Links
  • Show Social Buttons
  • Show Excerpt 
  • Show Button
  • Show Back Link 
  • 24-Hour Time
  • Stacked View

Products

These tweaks appear on Advanced Products Pages.

Products: Layout

  • Items Per Row
  • Item Spacing
  • Image Aspect Ratio
  • Item Hover Behavior: Show Alternate Image, Fade, None
  • Spacing
  • Top Padding
  • Nav Display: Breadcrumb Only, Pagination Only, Breadcrumb and Pagination, None
  • Pagination Style: Previous/Next, Titles
  • Nav Alignment: Left, Center, Right, Split
  • Nav Font
  • Nav Color
  • Nav Separator Color

Products: Details

  • Position: Under, Overlay
  • Position (Mobile): Under, Overlay
  • Alignment: Center, Left 
  • Alignment: Top-Left, Top-Center, Top-Right, Center-Left, Center-Center, Center-Right, Bottom-Left, Bottom-Center, Bottom-Right 
  • Overlay Color
  • Overlay Padding
  • Spacing
  • Show Title
  • Title Font
  • Title Color
  • Title Color (Mobile)
  • Title Spacing
  • Show Price
  • Price Font
  • Price Color
  • Price Color (Mobile)
  • Sale Price Color
  • Sale Price Color (Mobile)
  • Price Spacing
  • Alignment: Left, Center, Right
  • Spacing
  • Show Title
  • Title Font
  • Title Color
  • Show Price
  • Price Font
  • Price Color
  • Sale Price Color
  • Show Excerpt
  • Excerpt Position: Above Price, Below Price, Below Add to Cart Button
  • Excerpt Font
  • Excerpt Color
  • Excerpt Link Color
  • Show Share Buttons

Products: Sort + Filter

  • Display: Hide, Top, Left Side, Right Side
  • Width
  • Margin
  • Item Spacing
  • Alignment: Left, Center, Right
  • Font
  • Color
  • Active Color

Products: Gallery

  • Position: Left, Right
  • Design: Slideshow, Stacked
  • Width
  • Aspect Ratio
  • Thumbnail Alignment: Left, Center, Right
  • Thumbnail Width
  • Thumbnail Spacing
  • Spacing

Products: Options

  • Show Variants
  • Show Quantity
  • Style: Text-Only, Square, Rounded, Pill
  • Border Color
  • Background Color
  • Label Font
  • Label Color
  • Font
  • Text Color

Products: Add To Cart Button

  • Show Button
  • Style: Solid, Outline, Raised
  • Shape: Square, Rounded, Pill
  • Padding: Small, Medium, Large
  • Color
  • Text Color
  • Font

Products: Image Zoom

  • Enable Image Zoom
  • Zoom Factor
  • Zoom Activates On: Hover, Click
  • Enable Lightbox

Products: Related Products

  • Items Per Row
  • Item Spacing
  • Image Aspect Ratio
  • Details Alignment
  • Item Title Spacing

Products: Status Badges

  • Style: Rectangle, Square, Circle, None
  • Sale Color
  • Sold-Out Color
  • Font
  • Padding
  • Position: Top-Left, Top-Center, Top-Right, Center-Left, Center-Center, Center-Right, Bottom-Left, Bottom-Center, Bottom-Right
  • Inset: Floating, Flush, Dock Vertically, Dock Horizontally
  • Inset Size

Products: Quick View Button

  • Style: Bar, Floating, Docked
  • Color
  • Font
  • Padding
  • Position: Top, Center, Bottom
  • Inset Size

Products: Quick View Lightbox

  • Padding
  • Overlay Color
  • Background Color
  • Excerpt Display: Truncate, Hide
  • Controls: Show Arrows
  • Controls: Show Close Button
  • Controls Color
  • Controls Weight: Hairline, Light, Medium, Heavy
  • Controls Size

Album Options

These tweaks appear on Album Pages.

  • Album Text Color
  • Hide Album Share Link

Gallery Styles

These tweaks appear on standard Gallery Pages.

  • Use the Gallery Design tweak to set the layout.

Gallery Design: Grid

  • Aspect Ratio
  • Grid Spacing
  • Min Column Width
  • Lightbox Style: Dark, Light

Gallery Design: Slideshow

  • Gallery Navigation: Thumbnails, Bullets, Numbers, Circles, Simple, None
  • Gallery Info Overlay: Always Show, Show on Hover, Hide
  • Gallery Aspect Ratio 
  • Gallery Arrow Style: Round Corners, Rectangular, Circular, No Background 
  • Gallery Transitions: Fade, Scroll
  • Gallery Show Arrows
  • Gallery Auto Crop 
  • Gallery Autoplay 
  • Gallery Loop 
  • Gallery Autoplay Speed (sec)
  • Gallery Thumbnail Size 
  • Gallery Arrow Background
  • Gallery Arrow Color
  • Gallery Circle Color
  • Gallery Info Background.

Blog

These tweaks appear on grid/stacked Blog Pages.

Blog: Metadata

You can display up to two metadata elements on Blog Pages and blog posts.

  • Primary: None, Category, Author, Date, Location, Tags, Comments
  • Secondary: None, Category, Author, Date, Location, Tags, Comments

Blog: List

  • Style: Grid, Stacked
  • Posts Per Row (Max) 
  • Spacing 
  • Show Separator 
  • Separator Width
  • Separator Color
  • Alignment: Left, Center, Right 
  • Item Spacing 
  • Show Image 
  • Image Aspect Ratio 
  • Max Image Width 
  • Show Title
  • Show Excerpt
  • Read More Link: Hide, Inline, Below Text
  • Metadata: Above Title, Below Title, Below Content
  • Show Pagination Label
  • Show Pagination Arrows
  • Pagination Arrow Weight: Hairline, Light, Medium, Heavy

Blog: Item

  • Alignment: Left, Center, Right
  • Item Spacing
  • Metadata: Above Title, Below Title
  • Share Icons: Above Content, Below Content
  • Show Pagination Arrows
  • Show Pagination Label
  • Show Pagination Title
  • Pagination Meta: Hide, Category, Author, Date, Location, Tags, Comments
  • Pagination Arrow Weight: Hairline, Light, Medium, Heavy

Blog: Typography & Colors

  • List Title Font
  • Item Title Font
  • Title Color
  • Meta Font
  • Meta Color
  • Excerpt Font
  • Excerpt Color
  • Read More Link Font
  • Read More Link Color
  • Pagination Label Font
  • Pagination Label Color
  • Pagination Arrow Color

Share Buttons

These tweaks appear on blog posts or product item pages. Which tweaks appear depends on what you’ve chosen for the Style tweak.

  • Style: Icon Only, Solid, Outline, Raised
  • Show Icons
  • Show Labels
  • Show Counts
  • Rounding
  • Size
  • Spacing
  • Border: Width
  • Border: Color
  • Icons: Standard Color
  • Icons: Custom Color
  • Background: Standard Color
  • Background: Custom Color
  • Label: Font
  • Label: Color

Cover Pages

Cover Pages are styled independently of a site’s template. Visit Styling a Cover Page to learn more.

Block tweaks

Tweaks for certain blocks also display in Site Styles. To learn about the style options, visit About blocks and click the name of the block you want to learn more about.

Was this article helpful?
2 out of 13 found this helpful
York Site Styles tweaks