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

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 - Here you can set an attribute that will be used as a brand. You can use different attributes as a brand for different store views. It is also possible to setup nice short URLs for pages of a brand attribute (or any other one you prefer), e.g.:

• example.com/canon.html
• example.com/nike.html

URL Key - Specify 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. Please make sure the CMS page is enabled (Content → Elements → Pages).

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

Exclude Brands without Products from Sitemap - set to ‘Yes’ to exclude brand pages without products from the sitemap.

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

Add Brands Link to Top Menu- choose whether to display a Brands link leading to the All Brand Page on the top menu bar. To configure the link position, select one of three modes:

• No
• Display First
• Display Last

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

Show Brand Logo - Enable to display brand logos in the Brands List Popup.

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

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 possibility to click them.

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. Please note that this setting may affect the performance.

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

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

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.

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

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.

To add new brands and to manage brand attribute settings please go to Stores → Products → Attributes → Product → Brand.

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.

In the Design section, you can adjust сustom Brand Pages layout, by specifying the page display type:

• Default Category Layout
• Empty
• 1 Column
• 2 Columns with Left Bar
• 2 Columns with Right Bar
• 3 Columns

Add a brand image and specify a small image Alt.

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

To add an All Brands page Content → Elements → Pages. 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.

When creating an All Brands page, you can add various text elements and images to the page and also you can:

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

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.

Hide Brands - Here are all the existing brands displayed for which the “Brand Slider Widget” option is set to Yes (in the brand attribute settings). If you select any brands here, they will not be displayed in the brand slider widget on the frontend. The functionality is available as a part of an active product subscription or support subscription.

Brands Display - Adjust brands display in the Brand Slider Widget (Note: this functionality is available as part of an active product subscription or support subscription):

• Show Brands without Products - Disable to display only the brands that have products assigned to them.
• Show Brands Related to Category - This option regulates display only on category pages, showing only the brands that have products in this category.

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

To manage brands, please navigate to Content → Amasty Layered Navigation → Brand 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.

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

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

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.

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:

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.

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:

To make additional functionality available, please install the suggested packages you may need.

Available with no additional fees:

• amasty/module-shop-by-brand-graphql - Install this module to activate GraphQl and Shop By Brand integration.

• amasty/module-shop-by-brand-cloud and amasty/module-shopby-livesearch-root-category - Install these modules to activate LiveSearch and Shop By Brand integration.

Available as a part of an active product subscription or support subscription:

• amasty/module-shop-by-brand-hyva-compatibility - Install this package to ensure the Shop by Brand extension works with the Hyvä Theme.

• amasty/shop-by-brand-widget - Install this package in order to manage Slider Widget Brands.

• amasty/module-shop-by-brand-subscription-functionality - Install this package in order to use custom Brand Pages Layout functionality.

Rate the user guide

from 3 votes (Details)       1 visitor votes 0 visitor votes 0 visitor votes 0 visitor votes 2 visitor votes