Collections Tabs

The Collection Tabs is a code snippet that adds a tabbed collection section to your theme. Improve your website's UX and give comfort to your users while they browse multiple products with minimum effort.

No apps.
Compatible with all themes. (paid, free or custom made.)
Loads faster than any app.

→ Live Demo ←

What you'll get:

This code works out of the box with any theme.

At the customize page you'll be able to change options to your liking, such as:

- Background color
- Section's width (full width, automatic, custom)

- Section's top and bottom margin (individual values for desktop & mobile)

- Carousel or grid layout

- Products limit (show from 4 to 49 products per tab)
- Products per row (unique values for desktop/mobile)
- Gap between products (unique values for desktop/mobile)
- Loop carousel



- Free scroll - don't snap images when user is scrolling (unique values for desktop/mobile)

- Product title (edit the font weight, font size and color)
- Product price (edit the font weight, font size and color)
- Product "compare price" (edit the font weight, font size and color)
- Product "starting from": whenever a product has variant with multiple prices, you can add a "starting from" text. This text's size and text are customizable, as well as its visibility.

- Second image on hover: disable or show product's second or last image on hover.

- Border radius: add rounded border to the images.

- Lazyload: show images only when they're visible on screen. improves performance.

- Image size: choose whatever image size fits your images the best. Unique sizes for mobile/desktop.

- Title & subtitle font size (unique value for desktop/mobile)

- Title & subtitle alignment (left, center, right)

- Title & subtitle font weight

- Title & subtitle letter spacing

- Title & subtitle color

- Title & subtitle bottom and top margin

- Subtitle position (above or below the title)

- Tabs font size (unique value for desktop/mobile), letter spacing, color, hover color and active color are customizable.

- Space between tabs (unique values for desktop/mobile)

- Tabs font weight

- Arrows: show arrows on desktop and/or on mobile devices. Size, position and colors fully customizable.

- Progress bar: show a progress bar below the section.

- Sale badges: customize colors, text, border radius, position, text and size.

- Button: add a button below the section that leads to any link you wish. Fully customizable.

- Animations: choose between 5 animations or disable it.

- Use as many sections as you wish on the same page
- Fully compatible with Online Store 2.0

- Add to cart with dropdown picker (update image in real when variant has an associated image)

- Arrows for each individual product

Installation:

Installation takes 30 seconds. Please find detailed instructions clicking here.

Support:

We give 100% support to all of its users to ensure that what you're seeing on the demo page is exactly what you see on your website, same day responses are guaranteed.

If you have any questions just reach out to us at:

ezfycode@gmail.com