Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Kalles - Tabs collection

Mie Tran

Written by Mie Tran

Last updated

594 views

On this page


This section lets you create tabs to switch between different collections. It makes your store professional and flexible.

From Theme Section Sidebar > Add section > Tabs collection

1. Tab item

Click on Tabs collection > Add tab item. Each tab item is present for a tab. You are able to config many options for each tab.

  • Tab title: Show the title of tab item

  • Enter a icon name on tab title: Show icon in front of tab title.

  • Collection: You can choose the collection to show product.

12.gif

1.1. Product item design

  • Design: you can choose the design for product items. You can check this video:

  • Show product vendors, Show product countdown

14.webp
  • OPTIONS IMAGE PRODUCTS: you can change Image ratio, Image size, Image position.

  • Product content align: set text align for text content of product.

15.gif
  • Quantity of product to show and Space between items:

18.png

1.2. BOX OPTIONS

  • CAROUSEL LAYOUT: You can choose layout Carousel, customize for prev next button, page dots.

16.webp
  • GRID OR MASONRY LAYOUT: You can choose Pagination style, progress bar, icon and button design.

17.webp

2. Tabs collection setting

2.1. HEADING OPTIONS

You can change: design, align, content, icon, subheading and space bottom in this setting for heading.

21.gif

2.2. GENERAL OPTIONS

  • Tab design: we have 7 design for tab as the video below.

  • Tabs item border: choose border for tab items. There are 4 options: none, solid, dashes, dotted.

  • Customize color for item, background, border. Only working with design has border and background.

  • Space between items, Tabs List Position, Tabs list margin bottom:

Here is an example for customizing tab items:

23.webp

2.3. DESIGN OPTIONS

Please follow this guideline to config Layout, Background, Margin/Padding for the section.

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

We highly recommend Shopify apps from our partners.

We uses cookies to ensure you get the best experience on our website.