Azzel Theme - Collections Config

Azzel Theme - Collections Config

I. Collections List Page


  • Collections list page: Display all collections in the store in a list

How to create a Collection list page:

  1. Access the Collections List section.

  2. Customize the title in Heading.

  3. Choose how to display collections in Sort collections by. They can be displayed alphabetically from A-Z, Z-A, day, month, etc..

  4. Select the image ratio in Image ratio and the number of columns displayed on desktop and mobile.

  5. Breadcrumb banner: upload a background image for the banner, enter the page title if any (if no title is entered, the default page title will be taken from the collection name) and customize the configuration according to the following section:
    1. Section layout
      1. Color schema: choose the background color if you do not choose the image to display, and the text color
      2. Click to select Section full width yes or no (if not select full width, you can customize the section size to Section max width)
      3. Click to select Content full width yes or no (if not select full width, you can customize the content size to Content max width)
      4. Customize the padding distance, margin on desktop, mobile and tablet.
    2. Section optimize

      1. Section lazyload - lazy loading speed (a section will only load on the page when you scroll down to that section).



II. Collections Page

To customize the Collection Page, you need to access Collections - Default Collection.


1.Breadcrumb banner

  2. Image Default: Select image (all collections will take the default image)
  3. Image Collection: This option will help you choose separate images for each collection. However, you need to create a Metafield for this case and the creation method is as follows:
    1. Setting - Custom data - Collection - Add definition 

    1. Enter the title for the name field, and description if any (Note that the namespace and key must be the same as the name field, by default when entering the title of the name field, the namespace and key will be taken accordingly)
    2. Next at Select type - select File - and Validations will be displayed, here select Image (can only select images with the created Metafield). The final step is save.


                   
  1. Go back to the collection, go to the collection where you want to display your own banner image. Scroll down, you will see the Metafield field with the name you just created, click and select the image. The image will be automatically updated to the banner image in the theme.



3. Product Grid 




  • The products in the collection will be displayed in product grid format.

  • You can customize the number of products and the number of columns displayed on the page.

  • Enable grid/list button: Check or not to display the grid icon and list button. When clicking on the grid icon, the product will be displayed in grid form, select the list button, the product will be displayed in list form, each product one by one.

  • You can customize the display of product search filters at Filtering and sorting:

    • Check Enable filtering to display the filter

    • Desktop filter layout: The filter position is displayed on the computer screen 

      • Horizontal, 

      • Vertical: on the left side of the screen, 

      • or Drawer: displayed as a slide bar

  • Tick the box to enable or disable the product search toolbar, alphabetically from A-Z, Z-A, or by date, product price, etc. in the Enable sorting section.

  • You can customize product information in the collection in the Product grid section.

Here, choose to display the ratio of product images, product information such as: product price, product reviews, quick display of add-to-cart button, etc.


Note: You can set the display of product details in Theme settings. After setting in Theme settings - all products in the store will be displayed in detail as set.

3. Collection description

When you select this section, all the description information you created in the collection will be displayed in this section. And you just need to configure the display on the screen at Aligment and adjust Max height.


    • Related Articles

    • Azzel Theme - Lookbook Config

      To create Lookbook Page, you need to do as follows: 1. Go to Online Store in Shopify 2. Access Pages 3. Click Add Page and enter a title 4. In Theme template, select Lookbook template To configure Lookbook Page: Access Themes → Customize → Page → ...

    • Azzel Theme - FAQ Page Config

      To create a FAQ Page, you need to do as follows: 1. Go to Online Store in Shopify 2. Access Pages 3. Click Add Page and enter a title 4. In Theme template, select FAQ template To configure FAQ Page: Access Themes → Customize → Page → FAQ Breadcrumb ...

    • Azzel Theme - Blog Page Config

      1. To create a Blog Page, you need to do as follows: 1. Go to Online Store in Shopify 2. Access Blog posts 3. Click Add blog post 2. After completing the content for Blog, in Organization, fill in the following information: Author: Name of the author ...

    • Azzel Theme - About Page Config

      1. To create an About Page, you need to do as follows: 1. Go to Online Store in Shopify 2. Access Pages 3. Click Add Page and enter a title 4. In Theme template, select about-us template 2. To configure About Page: Access Themes → Customize → Page → ...

    • Azzel Theme - Contact Page Config

      To create a Contact Page, you need to do as follows: 1. Go to Online Store in Shopify 2. Access Pages 3. Click Add Page and enter a title 4. In Theme template, select Contact template To configure Contact Page: Access Themes → Customize → Page → ...