Brooklyn

Brooklyn is a tailor-made theme for the modern apparel store. Features include a mobile-first responsive design, unique typography, an edge-to-edge home page slideshow, a dynamic product grid, and product pages with at-a-glance availability for each size.

Example online store using Broolyn

Brooklyn is ideal if you have the following:

  • Full-screen slideshows
  • Small menus
  • More than 5 products

Theme editor

Use the theme editor to customize your theme. The theme editor toolbar is divided into Sections and Theme settings.

The theme editor toolbar showing Sections and Theme settings

You can use sections to modify the content and layout of the different pages on your store. You can use theme settings to customize your store's fonts and colors, and make changes to your social media links and checkout settings.

Sections

Sections are customizable blocks of content that determine the layout of your online store. Each theme includes static sections and dynamic sections.

Static sections

Static sections are always in specific locations on your online store. You can edit static sections, but you can't rearrange or remove them. Each type of page on your online store includes different static sections.

Brooklyn includes the following static sections:

Dynamic sections

You can add, rearrange, and remove dynamic sections to customize the layout of your home page. Each theme has a unique set of dynamic sections to choose from.

Brooklyn includes the following dynamic sections:

Brooklyn features a sidebar menu that slides out from the left when you click the menu icon.

  1. Click the Sections tab.

  2. Click Sidebar menu.

  3. From the Top menu drop-down menu, select a top menu for the the sidebar menu.

  4. From the Bottom menu drop-down menu, select a bottom for the sidebar menu.

  5. Click Save.

You can add your company's logo to your store's heading. You can use a custom logo image with Brooklyn. The best format is a .png file with a transparent background. Logo images should be 450 x 200px. You can resize the logo image by adjusting the width.

You can also add a menu and a search icon to your store's header.

To upload a custom logo:

  1. Click the Sections tab.

  2. Click Header.

  3. From the Menu drop-down, select the menu you want to display in the header.

  4. In the Logo area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select an image from your local computer, click the Library tab, and then click the plus button.

If you are using a slideshow image on your home page, then it is possible that your image logo will not be readable if it's displayed over a dark slide:

If this happens, then you can upload another version of your logo when a dark slideshow image is displayed on your home page. In the Home page logo area, upload a lighter-colored version of your logo. Ideally, this logo should be white:

Slideshow

Brooklyn uses a full-screen or "hero" slideshow, so it's best to use mages that are very large. For example, use images that are 3840 x 2160 px or larger, as long as you don't exceed Shopify's upload limits. Brooklyn is a responsive theme, which means that it automatically adjusts the image size to fit computer and mobile screens. When using a responsive theme like Brooklyn, it is recommended that you do the following:

  • Avoid having text in the slideshow image, because text can get cropped when the image is resized. Instead, use a heading and subheading text in each slide. When you add text to a slideshow, you can choose light or dark text, to make sure that the text is readable over the slideshow image. You can also add a button to link the slide to a URL.
  • Some large images can become cropped in responsive themes. If your image slideshow contains large images, then some parts of the image might not be visible on smaller screens. You can learn more about the best practices for slideshow images in Uploading images.

You can choose to have the slideshow images automatically rotate by selecting Auto rotate between slides, and then selecting the interval at which the images change.

To change the slideshow settings for your home page:

  1. Click the Sections tab.

  2. Click Slideshow.

  3. In the Content area, click Slide.

  4. In the Image area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
  5. In the Overlay area, select the color for the overlay in the Overlay field, and the set the opacity for the overlay in the Opacity field.

  6. In the Heading text and Subheading text fields, enter the text that will appear on the slideshow.

  7. If you want to display a button that links to a URL, then enter the text that will appear on the button in the Button text field, and then paste the URL in the Slide link field.

  1. If you want the slides to automatically rotate, then check Auto rotate between slides, and select the frequency you want them to rotate from the Slides change every drop-down menu.

The footer is the content that always appears at the bottom of every page in your online store:

With Brooklyn, you can change the menu displayed.

To customize the footer section:

  1. Click the Sections tab.

  2. Click the Footer section.

  3. From the Footer menu drop-down, select the menu you want to display. By default, the Footer menu is selected, which includes "Search", "About Us", and "Log in".

  4. Click Save.

Product pages

In the Product pages section, you can add or remove the following elements:

  • Image zoom
  • Social sharing icons
  • The product brand or vendor
  • A quantity picker
  • A dynamic checkout button

You can also set the way that images are displayed and change the size of the Add to cart and dynamic checkout buttons.

To edit the settings for product pages:

  1. From the top-bar drop-down menu, select Product pages.

  2. Click Sections.

  3. Click Product pages.

  4. To let customers zoom in by clicking on a product image, check Enable image zoom.

  5. To show social sharing icons, check Enable product sharing.

  6. To show the product brand or vendor, check Show product vendor. For a brand or vendor to show, you need to add a vendor to the product.

  7. To set the way that images are displayed, from the Image display drop-down menu, select Stacked to show a column of full-size images or select Thumbnails to show one full-size image followed by thumbnails for additional images.

  8. To show a quantity picker, do the following tasks:

    1. Check Show quantity picker.
    2. From the Picker type drop-down menu, select Button or Dropdown.
  9. To show a dynamic checkout button, check Show dynamic checkout button.

  10. To set the size of the Add to cart button and the dynamic checkout button, from the Button size drop-down menu, select Small or Large.

  11. Click Save.

Collection pages

With Brooklyn, you can display the products in your collection page in either a collage or a grid.

The collage style is unique to Brooklyn. It displays a mix of larger and smaller product images, with the effect of highlighting random products:

The grid style displays product images in a table format. All product images are the same size:

  1. In the theme editor preview of your store, open a collection page.

  2. Click the Sections tab.

  3. Click Collection page.

  4. From the Grid style list, select either Collage or Grid.

  5. Check Show collection tags to include a link at the top of the page that filters the product results by collection tag:

  6. Check Show product vendor to add the vendor name below the product image:

  7. Click Save.

Collection list

With Brooklyn, you can display up to 9 collections on your home page.

  1. Click the Sections tab.

  2. Click Collection.

  3. Select a collection to display from the drop-down menu.

  4. In the Settings area, enter the text you want to appear above the collections in the Heading field.

  5. Click Save.

With Brooklyn, you can feature products from one of your collections on your home page. You can choose a grid or a collage display for the featured collection on your home page.

  1. Click the Sections tab.

  2. Click Featured collection.

  3. In the Heading field, enter the text you want to appear above the collection.

  4. Select a collection from the Collection drop-down-menu. Up to 50 products will be displayed from the collection that you select.

  5. From the Grid style list, select whether you want to display the product images in a grid or a collage.

Newsletter signup

With Brooklyn, you can display a newsletter sign up form on your home page. This section type does not include any options - if you want to display a newsletter form, leave the section as is. If you do not want to display a newsletter form, you can delete the section from your home page.

When someone signs up for a newsletter, they are added as a customer to your store. The Newsletter section includes a link to your Customers page in your admin. You can click this link to see an up-to-date list of your customers.

Rich text

Use the Rich text section to provide any written content you want to display on your home page, or to embed any page created in your Shopify admin. For example, you can feature upcoming events by embedding your blog page, or display a page with any of the following:

  1. Click the Sections tab.

  2. Click Rich text.

  3. If you want to add text, then click Rich text enter your text in the Text field. Click the bold or italic icons to format the selected text.

  4. If you want to feature a page from your store, then click Add content and then click Page. Select a page to feature as your home page from the drop-down menu.

Custom HTML

In the Custom HTML section, you can use HTML code to create custom content for your home page. For example, you can use HTML to format text blocks, create tables, or embed content from a third-party website.

To add custom HTML to your home page:

  1. Find Brooklyn and click Customize.

  2. Click Sections.

  3. Click Add section.

  4. In the Advanced layout area, click Custom HTML > Add.

  5. Click Custom HTML, and enter the HTML code that you want to add to your home page.

  6. Click Save.

Theme settings

You can use theme settings to customize the colors and typography on your online store. You can also set up links to your social media accounts, edit your cart settings, and add a favicon.

Brooklyn includes the following theme settings:

Colors

You can choose the colors for the different parts of your online store.

To customize the colors:

  1. Find Brooklyn and click Customize.

  2. Click Theme settings.

  3. Click Colors.

  4. For each type of content, click the color swatch to use the color picker:

    The color picker in the theme editor

    • The Recently selected area shows colors that you have recently selected for your theme.
    • The Currently used area shows colors that you are currently using in other parts of your theme.

    To set the color to transparent, click None.

  5. Click Save.

Typography

You can choose the typography for the text on your online store.

To customize the typography:

  1. Find Brooklyn and click Customize.

  2. Click Theme settings.

  3. Click Typography.

  4. For each type of text, click Change to use the font picker:

    The 'Change' button on the font picker

  5. Explore fonts by using the search field, or by clicking Load more.

    To see all of the available fonts, check out Shopify's font library.

  6. Click the name of the font that you want to use.

  7. To change the font to a different style, such as bold or italic, click Regular. Next, click the style that you want to use, and then click Select:

    A selection of font weights available on the font picker

  8. Click Save.

Cart page

Brooklyn lets you customize your cart page by selecting the cart type and enabling order notes from the customer.

The Brooklyn theme supports 2 cart types:

  • Page redirects customers to your cart page when an item is added to the cart.
  • Drawer opens a drawer on the side of the page when items are added to a cart and prompts the user to proceed to the checkout page.

Brooklyn also includes an option to let your customers send you special instructions with their order.

To set cart options in Brooklyn:

  1. In the Brooklyn section, click Customize .

  2. Click Theme settings.

  3. Click Cart page.

  4. Select a cart type from the Cart type drop-down menu.

  5. If you want to allow customers to provide order notes at checkout, then check Enable order notes.

Social media

You can add social sharing buttons for your products and blog posts, and links to your social media accounts.

To customize the social media settings:

  1. Find Brooklyn and click Customize.

  2. Click Theme settings.

  3. Click Social media.

  4. To upload a social sharing image, in the Social sharing image area, click Select image or Explore free images.

  5. To add links to your social media accounts, in the Accounts area, enter the links to your accounts in the fields provided. Enter full links, such as https://instagram.com/shopify, or https://twitter.com/shopify.

    Links to your social media accounts show in the footer of your online store.

  6. To add social sharing buttons to your products and blog posts, in the Sharing options area, check any or all of the checkboxes.

    You can add the following sharing buttons:

    • Share on Facebook
    • Tweet on Twitter
    • Pin on Pinterest (not available for blog post sharing)
  7. Click Save.

Favicon

You can upload a favorites icon, or a "favicon", which can help brand your online store by displaying your logo in the following locations:

  • your web browser tab
  • your web browser's history
  • icons on your desktop
  • next to your online store name when it is bookmarked.

You can also add alt text to your favicon. Alt text is displayed if an image can't load, and is used by screen-reading software to describe the image to users who are visually impaired. Including alt text also improves your website's SEO.

To upload a favicon:

  1. In the Brooklyn section, click Customize .

  2. Click Theme settings.

  3. Click Favicon.

  4. In the Favicon image area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
  5. If you want to add alt text to your favicon image, then click Update. In the Edit image window, enter the alt text in the Image alt text field.

  6. Click Save.

Change theme style

Brooklyn comes with two theme styles:

  • Classic — A modern, grey and white theme style.
  • Playful — A cheerful, pastel-hued theme style.

To select a theme style:

  1. Click the Theme settings tab.

  2. Click the Change theme style button.

  3. Click the theme style you want to use.

  4. Click Change style.

Add a drop-down menu

To add drop-down menus from your main menu, you need to create menus on your Navigation page. This article will walk you through that process.

A limited part of your header is set aside for your navigation. If your links exceed the allotted width, then your navigation will automatically be converted to a button that opens a slide-out menu.

The behavior isn't controlled strictly by the number of links in your Main Menu, although keeping that number down to four or five will help. To include more links, you can:

  • Use a narrower font. To do this using the theme editor, click Theme settings, and then click Typography. Change the font for the Accent text.
  • Make each link use fewer characters. For example change 'Frequently Asked Questions' to 'FAQ', 'Contact Us' to 'Contact', 'Catalog' to 'Shop', and all occurrences of 'and' to '&'.

The color of the navigation links at the top of your page is linked to the Colors setting on the Theme settings tab in the theme editor:

You can pick any color you want - it does not need to be white or black.

If you are using the full-screen slideshow, then your navigation links and slideshow heading text will either be white or black, depending on whether the currently shown slide has its Text color set to Light or Dark. Using black and white increases the contrast between the slide photo and the text, to make sure the text is easy to read. Click here for more information on selecting Text color.

Add a sub navigation to a collection page

To list subcategories under the heading of your collection page, as seen on the Womens page of the Brooklyn demo store, your collection needs to contain products with tags. Product tags are used to create subcategories of products in your store.

Make sure the feature isn't turned off in the theme editor. Navigate to a collection page in the theme editor preview, and then click Sections. Click Collection pages, and then check Show collection tags:

Image tips

Best types of product images for Brooklyn

Higher resolution photos look more polished and professional in the Brooklyn theme, so images should be at least 1024 x 1024px. Your images can be as large as 2048 x 2048px. Images are automatically scaled down when necessary, so the higher quality the better.

The optimal width to height ratio for your product photos is a square.

Ideally, your photos should have a flat color background along the edges. Flat is a solid color with no shading or highlight. All photos should share the same flat color along their edges.

To match the color of the product frame around your photos with the background color in your photos, go to the theme editor and click the Theme settings tab. Click Colors and edit the Product background color. Set the Product background color to transparent so that the background color inside your product photos blends in the frame around them.

Optimal size for slideshow images

Both slides used in the Brooklyn demo store are exactly 1200px wide by 800px high. It's a good idea to keep all of your slides the same size.

Some clipping on the sides of your slides is to be expected on mobile phones, while clipping at the bottom is to be expected on laptop screens. You'll find more information on why that is happening here.

Why slideshow images are cropped on mobile

On mobile phones, slides are rendered so that they completely fill the device screen from their top edge to their bottom edge. The slides are resized so that their height is the same as the height of your mobile device. Your slides then become a background image that covers the mobile screen, and for that to happen, the slides will be clipped on the left and right.

On large displays, the behavior is somewhat reversed due to a different width to height ratio. The slides are resized so that their width, not their height, fits the width of the browser, and the slides are then clipped at the bottom.

Both behaviors are clear in the screenshot below, which shows the desktop and mobile views side by side.

Show an edge-to-edge image for a collection

To show an edge-to-edge image, your collection needs to have a Featured image.

After you have added a Featured image, on your collection page in your Admin, scroll down to the Template section and select collection.image as your template for your collection.

You can see a demonstration of how this works on the Mens page of the Brooklyn demo store. The collection image shown at the top is the same image you see here. It is 1405px by 800px.

Set an image for blog posts

The first image from your blog article will be chosen as the featured image for the blog landing page. Click here to learn how you can add an image to a blog article.

Change the credit card icons at the bottom of pages

This article will show you how to add credit cards, and remove some or all of them.

Show thumbnails for videos in blog posts

If you have a video in your blog article, then add a thumbnail of that video to your article's excerpt and it will be shown on the blog landing page.

Product tips

Remove the gray border around product images

Go to the theme editor, and under Colors, set your Product background color to transparent:

If your product images are too small, read the advanced customization guide. Applying this customization to your Brooklyn theme is not supported by Shopify.

Add a Save badge to products

Set a Compare at Price that is greater than the price on your product variants. If a product is set on sale correctly in that matter, then the badge will show up automatically over that product image on collection pages.

Set which products appear larger on collection pages

The size of products in the collage grid is based on the order they appear in the collection. You can manually rearrange your products in the admin to adjust the sizing.

For every six products, the first and sixth product will receive the larger treatment. For example, the 1st, 6th, 7th, 12th, 13th, and 18th images in your collection will be larger.

To display a grid of product images that are all the same size, go to the theme editor. In the Collection page tab, change the Grid style from Collage to Grid.

Hide product tags on collection pages

Go to the theme editor, click the Collection page section, and then clear the Show collection tags check box:

Cross out product options when they are sold out

Sold-out options are crossed out automatically for products that have only one option.

If a product has multiple options, for example color and size, then the product is available for purchase only if both the size and the color are available. Selecting a color and size combination that results in an unavailable or sold-out variant will result in the Add to Cart button being disabled and relabelled 'Unavailable' or 'Sold Out'.

For the product below, the Brown - Medium combination is sold out:

Scrolling animation when selecting a variant

On the product page, if the product description is short enough to fit entirely in the viewing area, then selecting a variant with an image will produce a scrolling animation to reveal the image. If the description is too long to fit on the screen, then the top image will be replaced by the variant image, and there will be no scrolling animation.

The product description is fixed on the screen only when it is short enough to fit inside the viewing area. A scrolling animation that reveals the image of a selected variant will display only if the description is fixed. When the description is not fixed because it's too long, then the theme can't scroll and will instead reveal the new variant image with a swap of the top image.

If you prefer the scrolling animation, then keep your product descriptions short. If you'd rather have an image swap, then use longer product descriptions.

Regardless of the length of your product descriptions, selecting a variant with a variant image will always show the product options buttons. Customers will be able to view all colors of a product without scrolling up and down.

Ready to start selling with Shopify?

Try it free