Just getting started on Shopify? One of the most important decisions to make as a new store owner is deciding which Shopify theme to select. Themes are the framework for how your eCommerce store will appear.
They vary in terms of technical sophistication, so picking one that you feel comfortable with is very important.
If you're just getting started with Shopify, consider using the Brooklyn theme for your eCommerce store.
This contemporary apparel retailing platform offers a thematic design tailored to showcasing brand imagery while also providing user-friendly navigation that will have customers coming back again and recommending it!
One of the best features of the Brooklyn theme is its ability to make your images stand out.
Some of these features include a header to showcase multiple products or brand images at the top of your home page, dynamic product grids that automatically change based on how many are displayed, and a homepage video slot so you can speak directly to your audience and showcase your product through video.
Once you decide to go with the Shopify Brooklyn theme, your next step is enhancing customization, so it matches your company’s branding.
Here’s a step-by-step guide on how to customize some of the most important elements of the Brooklyn theme.
Building out your site navigation is a crucial first step in making it easier for customers to find what they're looking for.
A dropdown menu lets you group products, collections, or pages together and uses the main menu as an access point that organizes these groups with ease - whether this means creating categories like "Clothing" which has its own sub-menus from clothing items themselves (for example, ‘shirts’) or simply giving visitors more options by adding secondary levels beneath each heading such as ‘Home’ with ‘Accessories’ nested as a subsection.
Nesting menu items to build drop-down menus is the best way we know how to organize your online store's navigation. You can do this by creating or moving top-level entries so they're "nested" below an item in its own right, which will then appear at the main entrance with all other submenus rotating outwards from it like some kind of crazy nested dollhouse - only instead making our lives easier because we don't need drawers for things anymore!
Here’s an in-depth guide from Shopify on how to set this up.
When you have a lot of space reserved for your header menu, the Brooklyn theme takes up only as much room as needed.
In other words - if you add more than four or five links on the main page, your header navigation will convert into easy-to-use sidebar navigation!
You can also prevent this from happening with some simple editing optimization tips, like creating menu items with limited characters, experimenting with font sizes to provide clean, readable text, and changing the Accent text in your typography settings.
When it comes to the header navigation, it will disappear as a customer scrolls down on the page by default.
However, you can customize this by creating a ‘sticky header’, which means that the header stays at the top of the page as a customer scrolls down.
This ensures that the content of the header, such as the search, cart, and main menu, is always accessible no matter where the customer is on the page.
This header customization is great for stores that want to have their header content visible at all times, or when certain pages require the user to do a lot of scrolling.
Keeping a consistent image size for all your product slides is extremely important. This will help make sure that they have a native feel and fit into the space you have, rather than being too big or small.
The Brooklyn theme uses 1200 x 800 px images - we highly recommend stores keep these dimensions in mind as they’re taking their product photos! The banner within this theme also uses the same dimensions. You can see them in action on the Brooklyn demo store.
When it comes to individual product shots, you should always aim for 2048 x 2048 pixels for the Brooklyn theme.
When a user’s browser screen is small (like on mobile devices), image slides will fill up the screen from top to bottom.
These are resized and their height equals that which you see on a flat surface - so there isn't too much distortion when viewing them at an angle or off-center fixture like in this example where we saw how it can fit all directions equally well.
For larger screens (like on desktops or larger laptops), the image slides are also resized to make their width equal to the width of the browser window. The slides are also cropped at the bottom to fill the window without distorting the images.
The Brooklyn theme also gives you the ability to set up a blog post. Using blog content is another great way to share your story and drive users through ‘organic’ channels (things like Google Search).
When adding a blog photo, the first image in a blog article is used as the featured image for the blog page.
When using the Brooklyn theme, the default homepage contains the following sections - Slideshow, Rich Text, Collection List, Featured Collection, Featured Product, and Newsletter.
Of course, this can be customized and any sections can be added or deleted. But this is a great format to start you off.
If you have enough product SKUs, adding more products to the Slideshow will help create a more visually appealing, image-rich site experience for users. You can also put the slideshow on auto-rotate with a customizable rotation time.
Navigating downward through the homepage sections, the Rich Text section provides an opportunity to highlight key points about your business and inform users about who you are. Fonts and text size can be edited within this section to create a native brand experience.
And finally, we have product Collections. Collections are a fantastic, reusable section throughout Shopify themes and lets you showcase your entire portfolio. This is such a great feature within Shopify, it deserves its own paragraph within this blog.
When using Shopify’s collection pages to show products in a collage style, your products will rotate between larger-sized images and smaller-sized images.
Whether a product is rendered as a large image or a small image is based on how you’ve ordered the products within the collage. If you want to edit the collage order, you can do so within the ‘Collections’ page, which can be found in your Admin section.
Once you’re in the Collections section, find the product collection that you want to edit, and then find the ‘Products’ area. Select ‘Manually’ from the ‘Sort’ menu and then rearrange the products based on how you’d like them to appear on your live website.
As we’ve discussed throughout this blog, the Brooklyn theme is one of the best Shopify themes to create an image-rich site experience.
It has excellent product photography that displays perfectly on all devices - desktops, mobile phones, and tablets. And this theme also has an easy design with a drag-and-drop system to help create it without technical knowledge needed at all.
Since this is such a popular theme, there’s a lot of tutorial content to help give you a video walk-through on getting started. Here’s a video that we like, which gives a very in-depth, step-by-step walkthrough on how to get started.
Need some inspiration on how you can build a beautifully designed Shopify store? Here are a few examples -
.png)
.png)
.png)