What is the Brands page?
Beautify has a dedicated Brands page and Brands section which are searchable, organised alphabetically and designed to provide customers with an easy-to-use method for shopping by brand. The goal is to reduce the time required to find a desired product range and lead to greater customer satisfaction.
The theme offers two methods to manage the brands page; an automatic method which links to all the vendors in your store, or a Custom brands list where you can link to specific collections and display images or brand logos.
If shopping by brand is unsuitable for the store's market sector, the Brands page and Brands section layouts can also be used without the A-Z grouping. This provides an innovative and searchable way to display links to collections.
Video guide available
How to set up the Brands page banner
Beautify comes supplied with a Banner feature containing Heading and Text blocks, plus a variety of heading styles such as Scrolling Text or Text over image.
Steps
- Open the Theme editor and select Brands from the page template picker dropdown at the top of the Theme editor.
- Click on the Banner and choose the Style:
- Scrolling text - The collection name will scroll. The Scrolling speed can be selected.
- Text - The collection name is displayed as text.
- Text below image - The collection name will be displayed below an image.
- Text over image - The collection name and description will be shown over an image.
If using a banner Style with an image, set a Fixed height for desktop and mobile. The image will be cropped to fit and focal points will be used where these exist. Use a Tint color and Tint opacity to ensure that the text is legible if the Text over image style has been chosen. - Set the Heading size and Heading capitalization and choose whether the Heading should be the main page heading and use a h1 tag.
- Set the Text alignment and choose whether to add more text as a description.
- Select a Color scheme.
Tip
Consider the SEO. The setting Set as page heading (uses h1 tag) controls whether the heading is an h1. Deselect this if other sections on the page are being used to provide the h1 (this avoids using multiple h1s).
How to set up the Brands section with vendors
The automatic brands page in Beautify uses the Vendor which has been assigned to the product in the Shopify admin. Vendors are organized by initial letter. A search bar is provided to make it even easier to find brands quickly. Clicking on the vendor name takes you directly to a filtered collection results page showing only products by that vendor.
Tip
Steps
- Open the Theme editor.
- Select brands from the page template picker dropdown at the top of the Theme editor or click Add section to add a new Brands section.
- In the Brands settings, choose whether to Show search.
- In the Brands settings, decide whether to show an alphabetical index row by selecting Group by first letter. Letters where content exists will be highlighted and provide a clickable link to the brands starting with that letter. Brands starting with numerical digits will be displayed in a 0-9 group.
- Set the mobile layout using the Brands per row on mobile.
- In the Style settings, select a Color scheme and determine whether it should apply to the Content blocks holding the brand names or to the Section background.
- Set the Section background to use the Default page background, a Simple gradient or an Advanced gradient.
How to set up a custom brands list with images
The Custom brands list in Beautify uses a specific menu created in Admin > Content > Menus to determine the collections and links shown. This menu approach gives complete control and provides the option to display an image such as the brand logo.
The Custom brands list requires the creation of a collection for each brand and a menu to control what is shown. To use the Group by first letter feature with the custom brand lists then the top level links must be named either 0-9 or A, B, C, D and so on. The letters of the alphabet must be uppercase as it is case sensitive. The second level in the menu should link to collections based on brand.
Steps
- In the Shopify Admin go to Content > Menus.
- Click on Create menu and add a menu (you can call this whatever you like).
- Click on Add menu item and add top level, parent links. Use capital letters for the names of the links e.g. A, B, C... or use the parent link '0-9' for brands beginning with a number. Note, it is not necessary to add every letter, only those for which you have brand collections. The link address hash '#' can be used for this top level link, which will prevent the link from leading anywhere on the storefront if clicked.
- Click on Add menu item to add links to your brand collections. These collection links should be nested under the relevant top level link.
- Save the menu.
- Open the Theme editor.
- Select brands from the page template picker dropdown at the top of the Theme editor or go to the relevant Brands section.
- Under Custom brands list (optional) use the Custom brands menu picker to select the new brands menu that has been created.
- Choose whether to Show images. For a custom image, add a collection metafield of type 'File' with the namespace and key 'theme.brand_logo'. Alternatively, the featured image for the collection or first product image will be used.
How to set up the 'theme.brand_logo' metafield
Steps
- In the Shopify Admin, go to Settings > Metafields and metaobjects.
- Under Metafield definitions, select Collections.
- Select Add definition.
- In the Name field, add a name of your choice.
- In Namespace and key, add theme.brand_logo
- Add a Description (optional).
- Choose Select type.
- Select File.
- Navigate to Admin > Products > Collections and choose a Collection. You should now see the the newly created metafield appearing in the Metafields list where your preferred custom logo can be added.
How to show a Brands section heading
There is an additional optional section heading that can be used to add text above the main Brands section. This is useful if the Brands section is used independently without a Banner on another page.
Steps
- Open the Theme editor.
- Navigate to the Brands section and click on the main section settings.
- Under Section heading (optional) add a Heading, set the Size and choose whether it should be the main page heading (uses h1 tag)
How to video guide
FAQs
How can I assign a page to this template?
Only page templates that exist in your published theme will show in the Shopify admin area page template picker. Read Shopify's template guide for further assistance on this.
If creating a brands page, rather than just a section, then it is necessary to assign a page to use the brands page template in Admin > Online store > Pages. The page title and description are not displayed on the brands page, but they will appear in the open graph meta tags so may be shown if the page is shared, for example on social media.
Why isn't my page content shown?
Content added directly to the page in the Shopify admin area Online store > Pages will not be shown on pages using the brands page template. This information will appear in the open graph meta tags so may be shown if the page is shared, for example on social media.
Could the custom brands list menu contain any links or does it have to be links to collections?
While the custom brands list feature is designed for collections, and will only show images for collection links, one could link to other pages, blogs or products. The brands page template is suitable where it is useful to have a searchable list of links organized alphabetically.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us