User Tools

Site Tools


Sidebar

magento_2:shop-by-brand

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.

  • Design catchy labels with ready-made shapes
  • Show various labels to different customer groups
  • Use flexible conditions for the labels display
  • Edit labels and сheck them with the preview option
  • Show several labels on one product
  • ADA & WCAG compliant
Magento 2 Shop By Brand extension is compatible with Hyvä themes. You can find the amasty/module-shop-by-brand-hyva-compatibility package for installing in composer suggest.

Please note, that for the correct work of Hyvä compatibility, the GraphQL module also should be installed. You can find it in composer suggest amasty/module-shop-by-brand-graphql.

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. You can use different attributes as a brand for different store views.

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:

  • No
  • Display First
  • Display Last
If the option 'No' is selected from the dropdown in the setting 'Add Brands Link to Top Menu', then you'll see several alternative options to configure:

Add Brands to Account Top Links - Set thi option to 'Yes' in order to display link to 'All Brands Page' in Account Top Links.

Brands Item Label - This label will be used in top menu and account links. Change it to any other custom title or leave the default value.

Display tooltip - Select on what page or pages you'd like to display brands tooltip.

Tooltip content - Use this setting to specify the tooltip content through the variables like {title}, {small_image}, {image}, {description}, {short_description}.

Tooltip example on Luma theme:

Another example on the Jet Theme by Amasty:

If you select the option 'Display First' or 'Display Last' from the dropdown in the setting 'Add Brands Link to Top Menu', then you'll see only one extra configuration setting: 'Show Brands List Popup'.

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

Show Brand Logo - set to yes to display brands logo in brands list popup in the top menu.

Adjust Image Max Width (recommended) and Image Max Height (optional) in pixels (px).

Enable Filter by Character - set to 'Yes' to enable filtering by the first character.

Show Characters without Brands - set to 'Yes' to allow displaying characters without brands.

Show Products Quantity - choose 'Yes' to show the number of products next to the brand name.

Please note that this setting ('Show Products Quantity') may affect performance.
An example of a marker

Show Brands without Products - set to 'Yes' to allow displaying brands without products.

Please note that this setting ('Show Brands without Products') may affect performance.

Add Brands to Account Top Links - Display a 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 brand info. Possible variants to display:

  • all brands page
  • product page
  • listing page
Tooltip example on Luma theme:

Another example on the Jet Theme by Amasty:

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

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

NOTE: Brands block on a category page is based on the current category. It means that the block contains only brands from the opened category.

Brand Attribute Settings

To add new brands and 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 and adjust settings for different store views, 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, and make all needed changes.

Brand Options - Here you can enable the display in a Brand List Widget, in Brand Slider Widget, and specify the brand Position in a slider. Also, you can make the option Featured if necessary.

URL alias - Specify a custom URL alias if necessary that will be used in the URL of the filter results page.

Meta Data - In this tab, you can specify meta title, description and keywords for each particular brand.

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

How to customize particular Brand Pages using Page Builder?

Go to Content → Elements → Blocks and create a new CMS Block. Scroll to content section and use Page Builder to add such elements as text, headings, images, videos, banners, etc. to your CMS block.

Then Enable it, fill in the Block Title, Identifier and specify the Store Views.

Save the block. Then open the settings of the particular brand page, scroll to the Page Content section and choose your new CMS block to be used as a Top CMS Block or a Bottom CMS Block.

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


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:

  • Insert Brand Slider widget;
  • Insert Brand List widget.

Adjust widgets settings according to your needs.

Brand List Widget Settings

Number of Columns - Set the number of columns for your brand list widget.

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

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 search box on the all-brands listing page.

An example of a searchbox.

Enable Filter by Character - Enable to display all the alphabet characters and the 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.

Show Brands Without Products - Set to 'No' 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 Widget Settings

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

Show Brands without Products - Disable to display only the brands that have products assigned to them.

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

Slider Max Width, px - Set the slider maximum with in px.

Header Title - Specify a header title for the slider.

Specify the Header Background Color and Header Text Color.

Adjust Image Max Width and Image Max 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.

Clickable Pagination - Set to 'Yes' to enable pagination per click.

Autoplay - Switch on/off the autoplay option.

Autoplay Delay - Specify the time interval (ms) for autoplay delay.

Brand Slider Example - See the example of a brand slider added to the All Brands page.

Brand Management

To manage brands, please navigate to ContentAmasty Layered NavigationBrand Management.

In this section, you can conveniently manage all the brands from the grid. For each brand, you can add custom descriptions and logos, adjust position in a slider, insert various CMS blocks and banners, add metadata, and etc. Also, here you can view what attribute is used for brand for a particular store view. You can set different attributes as a brand for different stores in the Brands General Settings Section (Stores → Configuration → Improved Layered Navigation: Brands → General).

Access any brand to make changes. The way of configuration for each brand is the same as it was described in the brand attribute settings section.

This extension is also available as a part of the Elastic Search Premium module. See on demo →

Custom Product Sorting on Brand Pages (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.
In order to correctly install a PWA add-on, please install the corresponding GraphQL system package first. For the correct name of it, please check the composer.json file of the main module. For example, the GraphQL system package name of the PWA add-on for the Blog Pro extension would be the following: amasty/blog-graphql

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 3 votes (Details)
magento_2/shop-by-brand.txt · Last modified: 2024/01/18 11:14 by asemenova