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

Farro and Haute share the same underlying structure and functionality. This guide applies to both templates. 

 

This guide is a reference for all Style Editor tweaks in the Farro and Haute 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

(Overlay) tweaks affect elements that display over thumbnails; for example, when the header displays as a transparent overlay over the Blog Page grid.

Site

Site 

  • Site Background - Adjust the site background color
  • Site Padding - Adjust the padding on the right and left side of your site

Site: Border

Add a border around your site. 

  • Show Border
  • Width
  • Color 

Site: Loading

When Ajax loading is enabled, you may see the Ajax loading bar while content-heavy pages, such as a Blog Page, are loading.

  • Enable Ajax Loading
  • Show Loading Bar
  • Width - Set the loading bar’s width
  • Color - Set the loading bar’s color 

Header

Header: Layout

Adjust your header elements and layout

  • Branding Position: Hide, Left, Center, Right
  • Tagline Position: Hide, Left, Center, Right
  • Primary Nav Position: Hide, Left, Center, Right
  • Secondary nav Position: Hide, Left, Center, Right
  • Search Position: Hide, Left, Center, Right
  • Social Position: Hide, Left, Center, Right
  • Cart Position: Hide, Left, Center, Right
  • Left Layout: Horizontal, Stacked
  • Center Layout: Horizontal, Stacked
  • Right Layout: Horizontal, Stacked 

Header: Design

  • Padding (Top)
  • Padding (Bottom)
  • Element Spacing (Horizontal)
  • Element Spacing (Vertical)
  • Background - Set the header background color 

Header: Branding

Adjust the site title or logo. You can set separate mobile styles.

  • Logo Width
  • Font
  • Color
  • Color (Overlay) 

Header: Tag Line

Adjust the tag line. Tag lines don’t display on mobile. 

  • Font
  • Color
  • Color (Overlay) 

Header: Primary Navigation

Style the links in your Main Navigation.  You can set separate mobile styles.

  • Style: Plain, Fade, Spotlight, Active
  • Font
  • Color
  • Active Color
  • Folder Color
  • Folder Text Color
  • Color (Overlay)
  • Active Color (Overlay)
  • Folder Color (Overlay)
  • Folder Text Color (Overlay) 

Header: Secondary Navigation

Style the links in your Secondary Navigation.  You can set separate mobile styles.

  • Inherit Primary Navigation Styles
  • Style: Plain, Fade, Spotlight, Active
  • Font
  • Color
  • Active Color
  • Folder Color
  • Folder Text Color
  • Color (Overlay)
  • Active Color (Overlay)
  • Folder Color (Overlay)
  • Folder Text Color (Overlay) 

Header: Search

Style your header’s search bar. You can set separate mobile styles.

  • Style: Rectangle, Underlined
  • Font
  • Icon Color
  • Background Color
  • Border Color
  • Text Color
  • Icon Color (Overlay)
  • Background Color (Overlay)
  • Border Color (Overlay)
  • Text Color (Overlay) 

Header: Social

Social icons link to your connected accounts. You can set separate mobile styles.

  • Size
  • Style: Regular, Circle (Border, Knockout, Solid), Square (Border, Knockout, Solid), Rounded (Border, Knockout, Solid)
  • Standard Color - Use the icon’s default brand colors
  • Custom Color
  • Custom Color (Overlay) 

Header: Cart

The shopping cart appears when you’ve added a Products Page

  • Style: Text, Cart, Bag
  • Font
  • Color
  • Quantity Color
  • Quantity Text Color
  • Color (Overlay)
  • Quantity Color (Overlay)
  • Quantity Text Color (Overlay) 

Main

Main

  • Top Margin
  • Intro-Content Margin
  • Bottom Margin
  • Content Width
  • Content Inset - Add side margins to certain blocks. Learn more.

Main: Content Fonts

  • Body Text
  • Heading 1
  • Heading 2
  • Heading 3 

Main: Content Colors

  • Body Text
  • Heading 1
  • Heading 2
  • Heading 3
  • Links
  • Lines - Set the Line Block color.

Footer

Adjust your site-wide footer.

Footer 

  • Background Color
  • Top Margin
  • Intro-Content Margin - Adjust the space between the Footer Navigation and blocks area.
  • Bottom Margin
  • Nav Font
  • Nav Color

Footer: Content Colors

  • Body Text
  • Heading 1
  • Heading 2
  • Heading 3
  • Links
  • Lines - Set the Line Block color

Mobile

Style how your site’s branding, navigation menu, shopping cart, and search icon display when viewed on a mobile device.

Mobile: Top 

To add a top mobile bar, add any mobile header element (branding, menu icon, search icon, cart) to one of the Top positions in the sections below.

  • Fixed Mobile Top - Choose whether the top bar is fixed at the top or scrolls up with the page. The bottom bar is always fixed.
  • Top Background  - Adjust the color of the top mobile bar. 

Mobile: Bottom 

To add a bottom mobile bar, add any mobile header element (branding, menu icon, search icon, cart) to one of the Bottom positions in the sections below. This section won't appear if all elements are in the top bar.

  • Bottom Background - Adjust the color of the bottom mobile bar.

Mobile: Branding 

Style how your title or logo displays on mobile. 

  • PositionHide, Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right
  • Logo Width - Adjust the logo's size.
  • Font - Set the site title's font. You may want to keep your branding consistent across devices by using the same font as the Header: Branding section.
  • Color - Set the site title's color.

Mobile: Menu Icon 

Adjust the menu ("hamburger") icon.

  • Menu Icon PositionHide, Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right - Choose whether it displays in the top or bottom mobile bar.
  • Menu Icon Color - Change the color.

Mobile: Search Icon 

Adjust the search bar icon.

  • PositionHide, Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right
  • Color 

Mobile: Cart 

Adjust the shopping cart that appears when you add a Products Page to your site. You may want to keep your branding consistent across devices by using the same style as the Header: Cart section.

  • PositionHide, Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right  
  • Style: Text, Cart, Bag - Choose the shopping cart's mobile style. 
  • Font - Adjust the font for a Text shopping cart.
  • Color - Set the icon or text color.
  • Quantity Color - For the Cart style, adjust the quantity circle.
  • Quantity Text Color  

Mobile: Menu 

Adjust the overlay that appears when you tap the menu icon on mobile.

  • Side: Left, Right
  • Backdrop Color  
  • Show Close Button  
  • Close Background Color  
  • Close Icon Color  
  • Menu Color  
  • Indicator Color  
  • Primary Font  
  • Primary Color  
  • Secondary Font  
  • Secondary Color

Blog

Style your blog landing page and individual blog posts.

Blog: List

  • Style: Normal, Full Width, Full Bleed
  • Layout: Stacked, Grid, Split Packed, Feature
  • Aspect Ratio
  • Spacing 

Blog List: Load 

  • Method: Button, Infinite Scroll
  • Font
  • Background
  • Color

Blog List: Filter Tile

  • Font
  • Background Color 

Blog: Item

  • Header: Text, Banner, Full Width Banner, Full Bleed
  • Use Unique Lede Font
  • Lede Font
  • Lede Color
  • Show Author Profile
  • Name Font
  • Name Color
  • Bio Font
  • Bio Color
  • Show Share Buttons 

Blog Item: Related Posts

  • Related Posts: Normal, Full Width
  • Show Label
  • Label Font
  • Label Color 

Blog Item: Pagination

  • Pagination: Hide, Normal, Floating
  • Icon Color
  • Icon Color (Overlay)
  • Title Font
  • Title Color
  • Meta: None, Category, Author, Date, Location, Tags
  • Meta Font
  • Meta Color

Blog: Typography

  • Title
  • Featured Title Size
  • Item Title Size
  • Excerpt
  • Meta Top
  • Meta Bottom

Blog: Colors 

  • Title
  • Title (Overlay)
  • Excerpt (Overlay
  • Meta Top
  • Meta Top (Overlay)
  • Meta Bottom
  • Meta Bottom (Overlay) 

Blog: Meta

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

Blog: Design

  • Alignment: Top (Left, Center, Right), Bottom (Left, Center, Right)
  • Overlay: None, Solid, Fade
  • Overlay Direction: Top, Bottom
  • Overlay Color
  • Post Background Color 

Icons

  • Icons: Hairline, Light, Medium, Heavy 

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.

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, Center, Right
  • Design: Slideshow, Stacked
  • Width
  • Aspect Ratio
  • Thumbnail Alignment: Left, Center, Right
  • Thumbnail Width
  • Thumbnail Spacing
  • Spacing

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
  • Options: 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 

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.

Album Options

These tweaks appear when you’re on an Album Page.

  • Album Text Color
  • Hide Album Share Link 

Share Buttons

Special Share button tweaks appear when you’re on a blog post or product item page. Which tweaks appear 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 3 found this helpful
Farro Style Editor tweaks