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

This is a list of all Site Styles tweaks for the Farro template family (Farro, Haute).

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 Farro template guide.

Before you begin

(Overlay) tweaks affect elements that display over images, like when the header displays as a transparent overlay on Blog Pages.

Site

Site

  • Site Background - Change the site background color
  • Site Padding - Change 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

Ajax loading makes content-heavy pages like Blog Pages much faster and more nimble.

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

Header

Header elements have separate mobile styles.

Header: Layout

Change 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

Style the site title or logo.

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

Header: Tag Line

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

  • Font
  • Color
  • Color (Overlay)

Header: Primary Navigation

Style the Main Navigation links.

  • 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 Secondary Navigation links.

  • 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)

Style your header’s search bar.

  • 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

Style your built-in social icons.

  • 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 add 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.

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

Style your site-wide footer.

  • Background Color
  • Top Margin
  • Intro-Content Margin - Change the space between the Footer Navigation and blocks area.
  • Bottom Margin
  • Nav Font
  • Nav Color
  • 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 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  - Change the color of the top mobile bar.

Mobile: Bottom 

To add a bottom mobile bar, add any mobile header element to one of the Bottom positions in the sections below. This option won't appear if all elements are in the top bar.

  • Bottom Background - Change 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 - Change the logo size.
  • Font - Set the site title 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 color.

Mobile: Menu Icon 

Style the ☰ 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 

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

Mobile: Cart 

Style the shopping cart that appears when you add a Products Page. 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 

Style the overlay that appears when you tap the ☰ 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 Farro's 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
  • 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 - Fade creates an ombre effect.
  • Overlay Direction: Top, Bottom
  • Overlay Color
  • Post Background Color

Quote Block

  • Alignment: Left, Center, Right
  • Quote Font
  • Source Font

Icons

  • Icons: Hairline, Light, Medium, Heavy

Gallery Styles

These tweaks appear on standard Gallery Pages.

  • Gallery Design - Set the layout.
  • Aspect Ratio
  • Grid Spacing
  • Min Column Width
  • Lightbox Style: Dark, Light
  • 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

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 [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: Related Products

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

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 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
  • Show Icons

Album Options

These tweaks appear on Album Pages.

  • Album Text Color
  • Hide Album Share Link 

Share Buttons

These tweaks appear on blog posts or product details 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.

Certain blocks feature a content inset.

Was this article helpful?
0 out of 5 found this helpful
Farro Site Styles tweaks