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

York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, and Taylor share the same underlying structure and functionality. This guide applies to all these templates.

This guide is a reference for all Style Editor tweaks in the York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, and Taylor templates. To learn how to use the Style Editor, visit Making style changes. 

Note: The Squarespace platform is constantly evolving to give you the best possible tools for building your website. We update these guides frequently, but if the platform has recently changed you may see slightly different options than the ones listed below. The best way to learn the functionality of any tweak is to experiment with it and see what changes on your site.

Before you begin

Many fonts on these templates have the option to scale, which allows you to set the maximum and minimum font size. This helps you control how your site looks in different browsers.

With scaling, set the maximum font size with the main font tweak (such as Title Font), check to enable scaling (Scale Title Size), and then set the minimum size (Title Min).

To learn more, visit Scaling fonts.

Site

Site

  • Site Background - Adjust the color behind the main content area and header.
  • Site Max Width - Adjust the width of your main content area. This tweak doesn't affect Project, Gallery, or Index Pages. 
  • Site Spacing: Extra Small, Small, Medium, Large, Extra Large, Custom - Adjust 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 - Adjust 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 - Leave this enabled for optimal loading speeds.

Site: Header

These tweaks style the header elements. Note that these elements 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 the 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. Note that these elements 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

Adjust the fonts for your main content area. Headings and Quote Blocks support scaling fonts. Note that 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

Album, Blog, Events, Gallery, Index, Page, Project, and Products Pages support a page banner (thumbnail image or video, page title, and description) and per-page headers and footers

The banner tweaks in these sections apply to banners at the top of 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

These tweaks are specific to the page type that you’re viewing when you open the Style Editor. You must be on that page type to see its tweaks.

The Banner, Title, and Description tweak names adjust 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 - Allows you to 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 uncheck Show Banner.
  • Show Title - Hide or display the page title.
  • Show Description - Hide or display the page description.
  • Show Categories - Hide or display the categories on Gallery and Project Pages.
  • Show Page Header - Hide or display the customizable content area above the page content.
  • Show Page Footer - Hide or display the customizable content area below the page content.

Banner

Adjust page banners.

The banner’s background color displays behind thumbnail images that don’t fill the whole banner. It also displays before the banner image on initial load.

  • Height: Small, Medium, Large, Extra Large - Adjust the height of the banner image
  • 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 - Each banner with a thumbnail image automatically pulls a background color from the thumbnail image itself.
  • 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

Adjust 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 following three 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

Adjust 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 - Adjust the spacing above and below the text.

Index

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

Index: Intro Text

This section appears when Show Index Banner is unchecked. Use this to set a different style for the page title and description on Index Pages. (Note that this does not 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 - Adjust the spacing above and below the text.

Index: Layout

Adjust the layout of your Index Page.

  • Item Width: Full, Half, Grid - Display one or two banners per row, or create a thumbnail grid.
  • Columns - For the grid layout, choose the number of thumbnails that display per row.
  • Tablet: Columns - For the grid layout, choose the number of thumbnails that display per row on tablet devices.
  • Mobile: Columns - For the grid layout, choose the number of thumbnails that display per row on smartphones.
  • Thumbnail Ratio - For the grid layout, adjust the height-to-width ratio of the thumbnails.
  • Item Height: Small, Medium, Large, Extra Large - For the banner layouts, set the height of the banners.
  • Item Spacing: Small, Medium, Large, Custom - For the banner layouts, adjust the space between banners.
  • Item Custom Spacing - Adjust 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

Adjust Index banner images.

The banner background color displays behind thumbnail images that don’t fill the whole banner, and shows through thumbnail images when you've adjusted their opacity.

  • 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 - Adjust how much of the banner background color shows through the image.
  • Image Hover Opacity - Determines 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

Adjust 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 the Link Style tweak 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 the content on pages within an Index slides up on initial load.

Project

These tweaks affect the Project Page, which mixes text and images to create sophisticated portfolio layouts.

Project: Layout

  • Image Alignment: Left, Center, Right - Align all captions and images to the right, left, or center.
  • Image Spacing: Small, Medium, Large, Custom - Adjust the space between each image in the Project.
  • Image Custom Spacing - Appears when Image Spacing: Custom is selected.
  • Banner Spacing: Small, Medium, Large, Custom - Adjust 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 width of the main content area. If Full Bleed Project is selected, they display at the width of the browser. 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 when you’re on an Events Page. For general help, visit Styling the Events Page.

  • Disable Item Pages - Disable the title link for individual events. When unchecked, clicking an event's title opens the individual event page.
  • Show Past Events
  • Show Thumbnails - Show the thumbnail image for each event on the Event Page to the left of the event.
  • Thumbnail Size - Controls the aspect ratio (width:height) for event thumbnails.
  • Show Date Tag
  • Show Date Tag w/ Time
  • Show Categories
  • Show Date - The date tag highlights event dates. It displays to the left of each event in on the Event Page.
  • Show Time
  • Show Location
  • Show Export Links - Export links allow visitors to export event details to Google Calendar or iCal.
  • Show Social Buttons
  • Show Excerpt - Excerpts display a brief description of an event in the Events Page list view
  • Show Button
  • Show Back Link - Shows the 'Back To All Events’ link on individual event pages.
  • 24-Hour Time
  • Stacked View - Display your events as a stacked list with thumbnails appearing above the event at full-width.

Products

These tweaks appear when you’re on a Products Page. Learn more at Styling the Advanced Products Page.

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 [Overlay]: 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: 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 when you’re on an Album Page.

  • Album Text Color
  • Hide Album Share Link

Gallery Styles

These tweaks appear when you’re on a Gallery Page. For general help, visit Styling a Gallery Page.

  • Use the Gallery Design tweak to set the layout.

Gallery Design: Grid

  • Aspect Ratio - Controls the aspect ratio (width:height) for the gallery active slide.
  • Grid Spacing - Increase the padding between individual images in your grid.
  • Min Column Width - Set the width of columns in your grid.
  • Lightbox Style: Dark, Light

Gallery Design: Slideshow

  • Gallery Navigation: Thumbnails, Bullets, Numbers, Circles, Simple, None - The type of navigation provided on the page.
  • Gallery Info Overlay: Always Show, Show on Hover, Hide - For image titles and captions
  • Gallery Aspect Ratio - Controls the aspect ratio (width:height) for the gallery active slide. Use with the Gallery Auto Crop tweak.
  • Gallery Arrow Style: Round Corners, Rectangular, Circular, No Background - Style the arrows used to cycle through the slides.
  • Gallery Transitions: Fade, Scroll
  • Gallery Show Arrows  - Uncheck to hide arrows on your gallery display.
  • Gallery Auto Crop - Auto-crops images to the aspect ratio set with the Gallery Aspect Ratio tweak.
  • Gallery Autoplay - Cycle gallery images automatically without user interaction.
  • Gallery Loop - Enable a gallery to cycle through to the first slide after the last slide.
  • Gallery Autoplay Speed (sec)
  • Gallery Thumbnail Size - Set the height of gallery navigation thumbnail images.
  • Gallery Arrow Background
  • Gallery Arrow Color
  • Gallery Circle Color
  • Gallery Info Background - The color used as the background for the image titles and captions.

Blog

Style your grid or stacked Blog Page.

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) - Appears when Style: Grid is selected.
  • Spacing - Adjust space between grid thumbnail images. Set to 0px to have the thumbnail images touch horizontally.
  • Show Separator - Add or remove a line between stacked posts.
  • Separator Width
  • Separator Color
  • Alignment: Left, Center, Right - Adjusts text alignment.
  • Item Spacing - Adjust the space between the thumbnail image and post title.
  • Show Image - Display or hide the thumbnail images.
  • Image Aspect Ratio - Determine the shape of the thumbnail tiles. 
  • Max Image Width - Set the size of the thumbnail images in Stacked format.
  • Show Title
  • Show Excerpt
  • Show Post Body
  • 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

Special Share button tweaks appear when you’re on a blog post or product item page. Which tweaks appear in this section depends on which option 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 for more information.

Block tweaks

Tweaks for certain blocks also display in the Style Editor. For more information about available style changes, visit the What are blocks? guide to find help content for your specific block.

Was this article helpful?
0 out of 4 found this helpful
York Style Editor tweaks