Collections

Author: Sarah Pham 185 views

Shopify collections are groupings of products you can set up, to make it easier for your customers to browse all products within a certain category. The Collections element allows you to save, organize your favorite items and show them on the page.

1. Add Collections

From Shopify > drag and drop the Collections above the section then it will appear an Edit box.

Collections

2. Configure Collections

2.1. Content

  • Collection Source: Allows you to select:
    + Specific collections: You can select specific collections to show
    + From metafield of current collection: You can add the metafield to the collection in Shopify to show here. Learn more about How to set the metafield for the collection below.
  • Select the collection to show: Select collections that you want to show in the element.
  • How many items to show:  Enter the number of collections that you want to display on the element.
  • Image ratio: This allows you to choose a size for the collection image. You can use Default size, Custom width & height size or Adapt to image, Portrait, Square,
  • Show image: Turn on this option to show the collection image.
  • Show title: Turn on this option to show the collection title.
  • Show description: Turn on this option to show the collection description.
  • Show counter: Turn on this option to show the collection counter.
  • Counter: Enter the content the same syntax:

({{products_count}} {{ products_count | pluralize: ‘item’, ‘items’ }} )

  • Counter many items: Enter the content in the same syntax:

({{products_count}} items)

  • Items per row: Allows you to select the quantity of collections shown in a row.
  • Column gap: Allows you to set the size of the gap between an element’s columns.
  • Row gap: Allows you to set the size of the gap between an element’s rows.

How to configure the metafield of the current collection?

Note: The metafield only works in the collection template. It only shows on the live page and only shows when assigning that template to the collection.

You can follow these steps below for details:

Step 1: From your Shopify admin, you can go to Settings > Metafields > Collections > Click the Add definition button to start configuring Metafield. You need to configure some options below:

  • Name: You can add the name that you wanna show for the Metafield here. Example: I added the field Name is Metafiled collection.
  • Namespace and key: You can add the namespace and key that you wanna show for the Metafield here. Example: I added the field Namespace and the key is my_fields.metafield_collection.
  • Description: You can add the Description for the Metafield here. In addition, this is not a required option, so you can choose to add a Description or not.
  • Select Content Type: You can select the content type that you want for the Metafield. Example: I select the Text type.

Actually, you guys can configure following my image below:

Click the Save button and then you will get the option below:

Step 2: From the Shopify admin, you need to go to Products > Collections > Open the Collection that you want to add the Metafields to. You have to copy the URL handle collection and paste it to the Define sub-collections for the current collection field. (This is a required field). Please follow this video below for details:

Step 3: From the Collection element, you have to select the “From metafield of current collection” option in Collection Source. Then you can assign the collection template to the collection that you want and check it in the preview. You can follow this video below for details.

2.2. Design

Items

Helps you configure the style of the items with options for Background, Box Shadow, Border, Border Radius, Padding and Layout Flow.

Image

  • Width: Set the width of the image. It allows to set different widths for each device.
  • Max Width: Set the maximum width of the image as a percentage. It allows to set different max-width for each device.
  • Height: Set the height of the image. It allows to set different heights for each device.
  • Alignment: Align the image to the left, center, or right.
  • Image Fit: Resize the image to fit its container. There are five selections.

HOVER/NORMAL

  • Opacity: Control the opacity of the image.
  • CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings.
  • Box Shadow: Adjust box shadow options.
  • Border: Select the type of border.
  • Border Radius: Set the border radius to control corner roundness. It allows setting different border radius for each device.

Hover Tab: The settings under this tab are used to select elements when you mouse over them.

  • Animation: When a customer hovers over an animated image, it can change grow, shrink, rotate, etc. This is enjoyable for the customer and shows that your site is working.
  • Transition Duration (ms): Specifies how many milliseconds a transition effect takes to complete. It allows you to change property values smoothly (from one value to another) when hovering.

Title, Description, Counter

It includes AlignmentTypographyText ColorText Shadow fields that are applicable to text. Alignment and Typography can be set for all devices.

You can learn more about design options here.

Leave a Comment

On this page