Start from the dashboard
Open Apps → ShopBy Brands. The dashboard shows your total brands, assigned and unassigned products and your current plan. The Storefront brand list card lets you switch your public brand page on or off with one click, and the App features and FAQ sections explain everything the app can do.
Shop by Brand, beautifully organised
Create brands, assign products and give shoppers a professional brand directory.
Add brandView all brandsSettingsStorefront brand list
Turn this on to make your brands available at https://your-store.myshopify.com/apps/brands
Disable brand listCreate your first brand
Go to Brands and click Add brand (top right). Your brands appear in a table where you can search, choose how many to show per page, switch several brands on or off at once, and set the display order by dragging the ⋮⋮ handle or using the ▲ ▼ arrows — the same order shoppers see on your store.
Drag the ⋮⋮ handle (or use ▲ ▼) to set the order of your brands — it is also the order shoppers see.
| BRAND | STATUS | PRODUCTS | |||
|---|---|---|---|---|---|
| ⋮⋮ | NNorthwindnorthwind | Active | 12 | Assign products ▲▼ | |
| ⋮⋮ | AAcme Co.acme-co | Active | 8 | Assign products ▲▼ | |
| ⋮⋮ | BBrightlinebrightline | Active | 5 | Assign products ▲▼ | |
| ⋮⋮ | OOakwoodoakwood | Active | 3 | Assign products ▲▼ | |
| ⋮⋮ | SSample Brandsample-brand | Active | 0 | Assign products ▲▼ |
Fill in the brand details
Give the brand a name (the URL handle fills in automatically), toggle Active to control whether it is visible on your storefront, write a description with the built-in editor, and upload a logo and a banner (recommended banner size 1600 × 533 px). Add an SEO title and description so the brand page ranks well in search, then click Save.
Details
Description
Images
Recommended banner size: 1600 × 533px (3:1 ratio).
Search engine listing
Assign products to the brand
On a brand page, or straight from the Brands list, click Assign products. Search your catalog, tick products one by one, use Select all for everything shown, or Select all products in store to take the whole catalog. Click Save selection — the list updates instantly. Unticking a product removes it from the brand.
Order and manage assigned products
Under Products on the brand page, drag the ⋮⋮ handle (or use ▲ ▼) to set the order shoppers see. Use the search box to find an assigned product, tick several rows to remove them together, and press Resync if you changed products directly in Shopify and want the brand refreshed right away.
Drag the ⋮⋮ handle (or use ▲ ▼) to set the order shoppers see on the brand page.
| PRODUCT | STATUS | |||
|---|---|---|---|---|
| ⋮⋮ | Classic Tee | Active | ▲▼ Remove | |
| ⋮⋮ | Canvas Sneaker | Active | ▲▼ Remove | |
| ⋮⋮ | Denim Jacket | Active | ▲▼ Remove | |
| ⋮⋮ | Leather Wallet | Active | ▲▼ Remove | |
| ⋮⋮ | Wool Cap | Active | ▲▼ Remove |
Turn on the storefront brand list
On the Dashboard or in Settings, click Enable brand list. This publishes a ready-made "Shop by Brand" page at https://your-store.myshopify.com/apps/brands. Every active brand also gets its own page at /apps/brands/your-brand showing its banner, description and products.
Storefront brand list
Turn this on to make your brands available at https://your-store.myshopify.com/apps/brands
Enable brand listPage text
Brand list page SEO
Customize the page text, SEO and paging
In Settings edit the Heading, Subheading, Product count label and Card call-to-action text. Add a custom page title and meta description for search engines, and choose how many brands per page to show. Each section has its own Save button.
Storefront brand list
Turn this on to make your brands available at https://your-store.myshopify.com/apps/brands
Enable brand listPage text
Brand list page SEO
Design the brand list
Pick one of 30 layouts (grids, photo-led cards, logos, lists and more), the columns per row, a font, and align the brands left, center or right. Set the page, card, heading, brand-name, count-badge and button colours — including the button hover colours. Shoppers also get a Sort by menu (A–Z, Z–A, date) on the page. Growth and Pro plans.
Storefront brand list design
Design the brand page and product layout
Under Brand detail page choose whether to show the banner, the products heading, the product list layout (30 styles — standard cards, price tags, hover cart, magazine, slider, table and more), products per page, the description length with Read more / Read less text, and whether the description sits before or after the product list. Shoppers can add products to the cart right from this page.
Brand detail page
Add the Brand List block anywhere
In Online Store → Themes → Customize open any page, click Add section → Apps and choose Brand List. You can also use Add block → Apps → Brand List inside an existing section to slot it in next to other content.
Shop by Brand
Style the Brand List block
With the block selected, edit the heading, the number of columns, the spacing, card alignment, whether to show the logo, name and product count, plus the logo background and name colours. Everything updates live in the preview.
Shop by Brand
Turn on the floating "Shop by Brand" button
In the theme editor open the App embeds tab (the grid icon, top left) and switch on ShopBy Brands, then press Save. You can change the button label, position, colours and size, so shoppers can jump to your brand list from any page.
Talk about your brand
Shop allShow a brand badge on product pages
Open a product template in the theme editor, click Add block → Apps → Product Brand Badge and place it near the title or price. It shows the product's brand logo and name and links to the brand page. You can change the logo size, roundness and background, and the name colour and size.
Classic Tee
$24.00
Fine-tune the look with Custom CSS
On the Pro plan, open Custom CSS and write raw CSS for the brand list and brand pages. Target classes such as .bm-brand-card, .bm-brand-name or .bm-product-card. This CSS loads last, so it overrides anything set in Settings.
Brand storefront pages
Write raw CSS to customize any part of your brand storefront pages. This CSS loads after everything else.
.bm-brand-list-page__heading— list page heading.bm-brand-card— each brand card.bm-product-card— product cards
.bm-brand-list-page__heading {
font-size: 40px;
}
.bm-brand-card {
border-radius: 12px;
}SavePlans
Start free and upgrade when you need more brands or design control. Paid plans include a 7-day free trial and can be billed monthly or yearly (save 17%).
Frequently asked questions
Products aren't showing up under a brand on the storefront.
Make sure the brand is Active, the brand list is enabled, and the product itself is Active and published to the Online Store sales channel. Pages refresh within a few minutes; saving a change in the app updates them straight away.
I changed a product in Shopify but the brand page still shows the old data.
Open the brand in the app and click "Resync". Product edits and deletions also sync automatically in the background.
Can I reorder brands and products?
Yes. Drag the ⋮⋮ handle (or use the ▲ ▼ arrows) in the Brands list to order brands, and in a brand's product table to order its products. The storefront follows that order.
Why can't I see the brand badge or floating button?
The badge needs the "Product Brand Badge" block added to your product template and saved. The floating button needs the "ShopBy Brands" app embed switched on and saved in the theme editor.
Can a product belong to more than one brand?
A product belongs to one brand at a time. Assigning it to another brand moves it.
Which design options are in each plan?
Free covers up to 4 brands with the default design. Growth unlocks all layouts and colours for up to 25 brands. Pro adds unlimited brands and Custom CSS.
Do I need a developer to add the brand list to my theme?
No — it's a native theme app block. Add it from the theme editor like any other section, no code required.