Collection tabs
Learn to feature hand-picked collections with their highlight images in an interactive way
Last updated
Learn to feature hand-picked collections with their highlight images in an interactive way
Last updated
Collection tabs can be a great new way to showcase your highlighted collections and the information with an attractive design in one section.
Moreover, it can help you reduce page length and ensure mobile-friendliness for visitors.
A Collection tabs section has 2 blocks:
Section header and
Collection list
Use this block to give your section a Heading, Text, Button, Image, Icon, or Custom code if needed.
Change the tab behavior when opening by selecting the suitable behavior in the Open tab behavior field with two options: Click and Hover.
✨ Tip: Mobile always uses Click behavior.
✨ Tip: If you want your Collection list tabs to change automatically after a certain interval, or pause on hovering without manually clicking/ hovering, turn on the Autoplay toggle.
👀 Note: It only works on the live page ✅
Then, adjust the duration in the Change slide every field from 1s to 10s.
You can also provide the image with different aspect ratios in the Image aspect ratio field:
Square (1:1)
Portrait (3:4)
Landscape (4:3)
The Link can also be displayed in different styles in different positions:
Header icon link
Bottom button
Hidden
If you don't want to open the link in the current tab, enable the Open link in new tab toggle to open the link to a new tab ✅
In the section, add the collections you want to display.
By default, it will show the collection's featured image and name, select a new image, and/ or add a new collection title.
You can also add the description under the collection tab by inserting it in the Text field.
Give the button a new label if the Link type in the General settings is the Bottom button.
You can also reorder them by dragging and dropping the collection name.
Change the Desktop image position to the Left or Right.
The position will be automatically optimized for mobile
You can also change the following:
Desktop image width from 40% to 70%
Desktop content alignment with 3 options: Top, Middle, and Bottom
You can add and edit a maximum of 10 types of child blocks to the Collection list block in the Collection tabs section:
Block
Heading
Text
Button
Icon
Image
Add to cart button
Buy now button
Countdown
Custom code
