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.

Brooklyn banner

Brooklyn is ideal if you have the following:

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

If you have a larger product offering, or you want a theme that displays larger product images, then try Venture, Boundless, or Supply.

If you have fewer than 5 products, then try Jumpstart.

Get Brooklyn from the Shopify Theme Store ›

To learn about the unique sections available to Brooklyn, click the Sections button. To learn more about the unique theme settings available for Brooklyn, including color, font, and favicon settings, click the Theme settings button. To access tips and tricks for making your store look amazing, click the Tips button.

You can use the theme editor to create content and organize the layout of your online store.

Common sections

Brooklyn includes three sections that appear on every page in your store:

  • the Sidebar menu section, which slides out from the left and typically includes "Search", "About Us", and "Log In" links.
  • the Header section, which is displayed at the top of the page, and typically includes your logo and navigation menus
  • the Footer section, which is displayed at the bottom of the page, and typically includes links to search the site, and About Us link, and copyright information.

You can edit the header and sidebar menu sections from any page in the theme editor. Unlike other section types, the theme editor displays the header and sidebar menu sections regardless of which store page you are viewing in the theme preview.

Brooklyn includes several unique settings for header and sidebar menu content.

Brooklyn features a sidebar menu that slides out 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:

Brooklyn logo not readable

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:

Brooklyn use inverted logo

Your store's footer is the content that always appears at the bottom of every page in your store:

Brooklyn footer section

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".


    You can create a menu to add to your store's footer by clicking the Add menu link. This opens the Add menu page in your admin in a new tab. When you save your new menu, it becomes available to display in your footer.

  4. Click Save.


Brooklyn uses a full-screen or "hero" slideshow, so the best size for your slideshow image is 1200px wide. 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.


If you are linking to a URL within your online store, then you do not need to paste the URL root For example, you could paste /collections/all to link to your store's collections page.

  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.

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.

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.


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.

Collection page

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:

Collage grid

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:

    Collection tag

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

    Vendor name

  7. Click Save.

Product pages

With Brooklyn, you can enable zooming over product images to allow your customers to get a closer, more detailed look at your products. To enable zooming, you must open a product page in the theme editor preview.

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

  2. Click the Sections tab.

  3. Click Product pages.

  4. If you want to let customers zoom in on product images, then check Enable image zoom.

  5. If you want to let customers share the product on social media such as Facebook, then check Enable product sharing.

  6. If you want to show the vendor or brand name, then check Show product vendor.

  7. Click Save.


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

  1. Click Theme settings.

  2. Click Colors.

  3. 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.

  4. Click Save.


With Brooklyn, you can change the font and font size of the text in your store.

To set typography options:

  1. Click Customize .

  2. Click Theme settings.

  3. Click Typography.

  4. In the Headings section, select the font, size, and underline thickness for heading text from the drop-down menus.

  5. In the Accent text section, select the font for menus, buttons, and subheading text in your store. If you want to capitalize text, then check Capitalize text. If you want to increase the space between letters, then check Space letters.

  6. In the Body text section, select the font and font size for body text in your store. If you want to format body text, check Italicize titles, blockquotes, comment author name, and dates.

  7. 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.
Cart page
  • 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.


The Drawer cart is an AJAX cart type, which means that it might prevent the functionality of scripts such as a date picker that allows your customer to select a delivery date. Click here to read up on the Shopify Ajax API.

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

Brooklyn includes several options for integrating your online store with social media, including Facebook, Twitter, and Pinterest.

To enable social media settings for Brooklyn:

  1. In the Brooklyn section, click Customize .

  2. Click Theme settings.

  3. Click Social media.


You can display links to your social media accounts in the footer of your site.

Social media icons

Enter the URLs of your social media sites in the fields provided.


You need to enter https:// at the beginning of the social media URL for the social media icons to display in your site's footer. For example,

Sharing options

You can also allow your customers to share content from your online store to their social media accounts. In the Sharing options section, select the check box for each type of social media sharing you want to allow:

  • Check Share on Facebook to enable the Facebook sharing button for products or blog posts.

  • Check Tweet on Twitter to enable the Twitter sharing button for products or blog posts.

  • Check Pin on Pinterest to enable the Pinterest sharing button for products or blog posts.


Pin it buttons for Pinterest will not display on blog or article pages.


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.


Theme styles were previously called presets.

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 to your Main Menu, you will need to create menus on your Navigation page. This article will walk you through that process.

Brooklyn drop down menu

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 '&'.


Too many items in your navigation might be a bad idea from a usability point of view. With fewer menu items, your visitors' eyes are less likely to scan past important items. Challenge yourself to limit your navigation to four or five items. Use drop-down menus if you want to give access to more than five pages. A typical error for a shop with a lot of collections is linking to all of them in the Main Menu. A better approach is listing the collections in a drop-down menu under a 'Shop' or 'Catalog' link, or breaking down the collections into groups, giving each group a drop-down menu. You can also use product tags to create subcategories of products.

If you must use a lot of links in your Main Menu and you want to disable the slide-out menu behavior, then check out this customization guide. Disabling that feature is not supported by Shopify.

Brooklyn navigation

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:

Brooklyn navigation color

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


If you aren't using a logo, then the color of the navigation links and shop name on all pages is the color of the text controlled by the theme setting Colors > Text.

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

Brooklyn sub navigation links on collection pages

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:

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

Brooklyn collage with colored background

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.

Brooklyn hero desktop versus mobile

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.


Use the collection.image template only if you have a wide Featured image because your image will otherwise be scaled up to stretch across the width of the screen. By using the collection.image template, you can also expect your Featured image to be clipped at the top and bottom. That is normal, because your image will be applied as "background image" to a section of the page with a fixed height.

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.

Brooklyn collection image demo
Brooklyn collection image demo mobile

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:

Brooklyn remove backdrop

If your product images are too small, read the advanced customization guide. Applying this customization to your Brooklyn theme is not supported by Shopify. If you need help with customizing your Brooklyn theme, then try the Design community forum.

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.

Minimal sale

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.

Brooklyn manual order for collage

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.

Brooklyn collage grid

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.

Brooklyn turn off collage 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:

Brooklyn hide tags

Cross out product options when they are sold out

Brooklyn crossed out options

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:

Brooklyn 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.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free