Unicorn Shopify Theme
  • Getting Started
  • Demo
  • Section Groups
    • Header
      • Menu icons
      • Badges
      • Popup menu
      • Image with button (Mobile)
      • Featured promotion (Mobile)
      • Contacts
    • Cart drawer
    • Search popup
    • Mega menu
      • Menu
      • Image with button
      • Featured promotion
      • Custom HTML
      • Empty column
      • Badges
    • Footer
      • Menu
      • Text
    • Popups
  • Dynamic Theme Sections
    • Before/after image
    • Blog posts
    • Brand list
    • Collage
      • Image
      • Collection products
      • Video
    • Collage of images
      • Image
      • List item
    • Collection list
    • Collection slider
    • Contact form
    • Countdown timer
    • Custom Liquid
    • Email signup
      • Heading
      • Subheading
      • Email form
    • FAQ
    • Featured collage
      • Product
      • Image
    • Featured collection
    • Featured collections
    • Featured product
    • Featured promotions
      • Content, Text on image
      • Content, Text below the image
      • Content, Button on image
    • Image with text overlay
      • Second image
      • Mobile settings
      • Heading
      • Text and Custom HTML
      • Buttons
    • Image gallery
    • Lookbook
    • Map
    • Media
    • Multicolumn
    • Page
    • Popup
      • Image
      • Text
      • Newsletter form
      • Buttons
      • Social media
      • Time countdown
      • Collection
      • Promotional code
    • Reels
    • Rich text
      • Heading
      • Text
      • Button
    • Slideshow
    • Tags
    • Testimonials
    • Ticker
  • Page Categories
    • Products
      • Product information
      • Product recommendations
    • Collections
      • Collection banner
      • Product grid
    • Collections list
    • Cart
    • Blogs
    • Blog posts
    • Search
    • Password
      • Email signup
    • 404 page
  • Theme Settings
    • Top bars
    • Header and Logo
    • Colors
    • Typography
    • Layout
    • Styles
    • Product
    • Variant picker
    • Social media
    • Search
    • Favicon
    • Currency format
    • Cart
    • Popups
    • Performance
    • Advanced settings
    • Custom CSS
    • Theme style
  • SVG Icons
  • FAQ
    • How to customize Metafields
    • How to group product images by variants?
    • How to create a template?
    • How to create webpages?
    • How to set up filters?
    • Understanding of metaobjects and their use in a store
Powered by GitBook
On this page
  • Collection list
  • Layout
  • Content
  • Button "View All"
  • Collection
  1. Dynamic Theme Sections

Collection list

The "Collections list" section can be operated to display numerous collections with links to Collection pages for each.

PreviousList itemNextCollection slider

Last updated 1 month ago

Collection list

Tip: To hide the title, description, or button, leave the corresponding fields blank.

Paste the section's title to the "Heading" field. The "Heading font size" can be changed to "Small", "Medium" or "Large" sizes. If you need to colorize the title, use the "Heading color" picker.

To represent the section, insert any text lines to the "Description" placeholder. If you need to change a paragraph color, use the "Description color" picker.

Layout

The layout settings change the look and feel of the section.

Choose one of the options "In-grid heading", "Heading on top", or "Heading top center" in the "Layout" drop-down.

Use the "Mobile align" settings to change the alignment of the heading and description to the "Left" or "Center". Leave the "Auto" option to use the pre-designed theme settings.

To add a divider between sections, use the "Dividing line" to set the position: "Top", "Bottom", or "Both". The dividing line will be hidden once you use the option "None".

On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

Content

The number of collections per row can be set in the "Collections in row" drop-down. Decide if to display 2, 4, or 6 items in each row.

Choose the appropriate aspect ratio of the collection images in the "Image ratio". You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Each image ratio, you can check .

The text alignment on all screen sizes can be defined in the "Alignment" picker. Display the title and description either on the "Left" or "Center".

The "Show product count" option helps to show or hide the number of products available in each collection. Deactivate the option to hide the number.

Enable swipe on mobile

Check the box to add scrollbars instead of displaying the list of collections on mobile view.

Button "View All"

Activate the "Enable "View all" checkbox to show the "View All" button on desktop and mobile if the blog contains more articles than is displayed in the section.

Use the "Color" picker to change the button background color for the "Primary" style. For the "Secondary" style the colorized text and border inside the button will be added. If you used the "Link style", the color will be applied to the text link.

Check the following examples of how the section might be displayed on desktop and mobile:


Collection

Tip: This block can be used several times to configure each collection individually.

Choose the required collection by pressing the "Select" button.

Edit the "Description" field to introduce a collection. Leave the field empty to deactivate the description.

Image

If you need to add or change the collection's image, use the image library or upload media from your device.

Here is how the block might be displayed in the section:

Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three styles that can work out in your store: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following .

here
help page