User Tools

Site Tools



For more details see how Shop by Brand extension works.

Guide for Shop by brand for Magento 2

Let your customers easily reach their favorite brands. Use featured brand slider and all-brands listing to provide better shopping-by-brand experience.

This extension is available as a part of the Elastic Search Premium module. Check the configuration options here →

General Settings

The extension creates SEO-friendly pages. Every page contains all your products sorted by particular brand attribute. Pages also contain unique content that you can assign for each option of brand attribute.

To configure the extension, go to Admin Panel→Stores→Configuration→Amasty Extensions→Improved Layered Navigation: Brands

Brand Attribute - You can specify any available attribute, in this case, the extension will apply all its functionality to the attribute.

To create a new attribute, go to Admin Panel → Stores → Product → Add New Attribute

URL Key - Input the key that will be added to the URL before the brand name. E.g. your-site/brand/brand-name.html

Choose CMS page - select a CMS page where the All Brands List will be shown.

To make All Brands available in the dropdown, go to Admin Panel → Content → Elements → Pages → Enable All Brands Page

Add Brands link to Top Menu - Enable Brands link to the All Brands Page on the top menu bar. Available link positions:

  • Display First
  • Display Last

Show Brands List - display brands list and filter them by a character right in the tip menu Brands dropdown.

Add Brands to Account Top Links - Show Brands link in a customer account.

Brands Item Label - Specify a name, which will be displayed in a menu bar and account top links.

Brand Label specified as Teams

Display Tooltip - Multi-select the directories, where you would like to display a tooltip with a brand info. Possible variants to display:

  • all-brands page
  • product pages
  • catalog pages (listing)
A tooltip

Tooltip Content - automate the tooltip creation and update. Enter the variables that should be used for a tooltip. Possible variables: {title}, {small_image}, {image}, {description}, {short_description}.

All Brands CMS Page Settings

To add an All Brands page ContentElementsPages. Here you can Add a page with a list of all brands in alphabetical order.

Please click on the Add New Page button to create a page with all brands.

Create All Brands Page - To create a page you need to:

  • Create a CMS block with all brands;
  • Insert a widget to the page in CMS mode.

All Brands Listing Page settings

To configure All Brands Page settings go to Stores ConfigurationImproved Layered Navigation: Brands.

Show Brand Logo - Enable to display brand logos in the all-brands listing.

An example of all-brands listing without logos

Image Max Width (Height) - Specify the size of logos in the listing.

An example of 100 px logo in the listing.

Enable Search - Enable a searchbox on the all-brands listing page.

An example of a searchbox.

Enable Filter by Character - Enable to display all the alphabet characters and possibility to click them.

An example of a filter by character.

Show Characters without Brands - Enable to display only characters.

Show Products Quantity - Enable to display a marker with a number of items assigned to a particular brand.

An example of a marker

Show Brands Without Products - Enable to display only the brands that have products assigned to them.

This is a frontend example of a page with an alphabetical list of all brands. Each name leads to the appropriate brand page.

Brand slider

To manage Brand Slider settings please go to StoresConfiguration → Improved Layered Navigation: Brands.
{{widget type="Amasty\ShopbyBrand\Block\Widget\BrandSlider" template="widget/brand_list/slider.phtml"}} 

to add brand slider to a CMS page or static block. Or create Brand Slider widget.

Widget Code - Use this code to add a brands slider to any CMS page or block. It’s also possible to place the slider to the All brands page.

Visible Items Quantity - Specify how many brands will be displayed in a slider at a time.

Sort By - Select a sorting type for slider items – either by name or by position.

Slider display settings - Configure slider display parameters: maximal slider width, image width/height.

Show Brand Label - Choose whether to display text labels together with brand logos.

Show Buttons - Enable previous/next buttons display.

Infinity Loop - Enable continuous loop mode for slider images.

Simulate Touch - Let customers click and drag slider images.

Show Pagination - Enable pagination display below the slider.

Autoplay - Switch on/off the autoplay option.

All created brand values (see how to add values in the Brand Settings Section) can be added to a brand slider. To configure slider options for each particular brand please go to ContentAmasty Layered NavigationBrand Slider.

Specify slider options for each particular brand. It's also possible to manage slider options when creating slider values (see the Brand Settings section).

To embed a brand slider to a CMS page or a block please go to ContentElementsPages or Blocks and open the necessary element and insert a ready-to-use code to the page/block content.

Brand Attribute Settings

To manage brand attribute settings please go to StoresProductsAttributesProductBrand.

Catalog Input type for store owner - select an input type for the catalog. Choose on of 3 available variants:

  • Dropdown;
  • Visual Swatch;
  • Text Swatch.
Add brand names, upload brand logos and specify a brand that will be preselected by default.

Click on the Settings icon beside a brand name to detailed brand information, add image and metadata.

Slider Options - Enable the display in a brand slider (if necessary), specify the brand position in a slider and upload a slider image. See the details on how to configure a brand slider here.

You can specify meta title, description and keywords for each particular brand.

Specify content for the brand page. Add title, description, image and a CMS block.

Below you'll see a brand page with a short SEO-friendly URL and custom content.

More from this brand

Enable - Display a block of products of a current product's brand. A block will be displayed at the bottom of a current product page.

Title - Specify a title of a block, using a Brand variable.

Max Product Count - Specify a number of random products to display in a block.

3 more products from Nike brand, sample

Product Page Brand Settings

Display Brand Logo on Product Page - Enable a brand logo display on the products pages.

Display Short Description on Product Page - Enable a label short description on the products pages.

Brand Logo Width & Height, px - Specify size of a brand in pixels.

A brand logo and short description on a sample product page.

Product Listing Brand Settings

Display Brand Logo on Product Listing - set to Yes to show brand logos on category pages.

Please enable “Used in Product Listing” setting for brand attribute.

Brand Logo Width and Height - adjust logo resolutions. Specify the value in pixels (e.g. 10) or percent (e.g. 10%). Leave empty to use default image size.

A customized brand logo sample:

Custom Product Sorting (Add-On)

The additional functionality allows admins to customize product sorting on brand pages.

The feature can be enabled only after purchasing a Custom Product Sorting for Shop by Brand Add-On.

To manage products order on a brand page, go to Content → Layered Navigation → Brand Management.

Open the necessary brand page and scroll to the Products tab.

Here you can:

  • Reorder items using drag-and-drop
  • Place particular products at the top of the listing
  • Adjust sorting options
  • Move products through the pages
  • Pin particular ones
With the add-on, you can manage product sorting for particular store views separately.

First, set the necessary sort order, according to which all products will be displayed.

Sort Order - select from the dropdown the preferable way of the automatic ordering of the product listing.

Available options:

  • Move out of stock to the bottom
  • Newest products first
  • Name: Ascending
  • Name: Descending
  • Price: Ascending
  • Price: Descending

Search Products - find products within one current brand product listing by SKU or name.

In the Visible Items field the number of all the products that fall under the specified conditions is displayed.

Keep in mind that only Enabled products with the Visible Individually option can be displayed.

Drag-and-drop brand products according to your current marketing needs.

Move to Top - hit this button to send a particular item to the first position in the list.

Once you drag a particular product, the Manual mode is set automatically and it is “pinned” to a particular location. The feature helps to fixate a product in the same position even after the automatic sorting is activated too.

Moreover, the number of products per page in the admin panel equals the number of products customers see on the frontend. Thus, you will see how the products will be displayed to customers on each page.

With the move products through the pages feature it is possible to adjust the of products per each page by moving particular products to another page. As the page number is changed, the product becomes last on this page.

As the result, we set the follwing products order:

And on the frontend it will be displayed in the following way:

PWA for Shop by Brand (Add-On)

With a ready-made PWA solution, you can provide shoppers with an outstanding mobile experience. Customers can smoothly search for their favorite brand products from any device.

The feature can be enabled only after purchasing the PWA for Shop by Brand Add-On. Also, you need to install PWA Studio first.

If the add-on is installed, Venia theme will display all-brands page in the following way:

Unique brand pages will be displayed like this:

You can still add brand slider to category and CMS pages. The sample of a category slider on a tablet:

PWA-ready solution does not support the following extension features:
  • brand logos on product and category pages;
  • customizable position of the All-Brands page tab (it is always displayed at the bottom of the menu);
  • links in the accounts.
Find out more about Magento PWA integration here.

Find out how to install the Shop By Brand extension for Magento 2 via Composer.
Rate the user guide
 stars  from 2 votes (Details)
magento_2/shop-by-brand.txt · Last modified: 2021/05/27 07:48 by hshevtsova