Shopify Tabs Premium Section

Description of the Section

The "Tabs Premium" section for Shopify e-commerce stores allows you to create a visually appealing and highly functional tabbed interface within your website. Utilizing the Sections Pro app, this section gives you incredible flexibility to display a variety of content in a clean and organized way. Whether you're highlighting features, displaying different product categories, or sharing important information, the Tabs Premium section helps you engage users effectively with customizable tabs and content areas.

Demo of the Section

Installation Instructions

1. Download the Sections Pro app on the Shopify App Store
2. Open the app and navigate to Premium Sections
3. Search for "Tabs Premium"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

1. Product Categories: Use tabs to categorize different types of products, like clothing, electronics, accessories, etc. Each tab can host a range of products within that category.
2. Feature Highlights: Showcase various features or aspects of a single product. Each tab could provide detailed information about specifications, reviews, and pricing.
3. Customer Support: Provide segmented information about shipping, returns, and support policies, giving customers quick access to important information.
4. Educational Content: Share tutorials or guides related to your products. Each tab can serve as a chapter or section of your guide, offering a neat and organized reading experience.
5. Promotions and Deals: Announce special promotions and deals in a dedicated tabbed area, each tab specifying a different promotional event or offer.

Overview of the Configuration Settings

The Tabs Premium section comes loaded with a variety of configuration settings to customize its look and functionality:

Font Settings

• Override Theme Fonts: Option to override the theme fonts.
• Headline Font: Choose the font for headlines.
• Text Font: Select the font for the text.

Text Settings

• Text Size: Customize the size of the text (10px to 50px).
• Line Height: Choose the line height (0.75 to 2.0 or inherit).
• Text Color: Set the color of the text.
• Headline Size: Adjust the size of the headline text (10px to 50px).
• Headline Line Height: Select headline line height.

Colors

• Tab Active Color: Color for active tabs.
• Tab Inactive Color: Color for inactive tabs.
• Tab Border Color: Color for the tab border.

Section Design

• Background Color: Set the background color for the section.
• Padding: Adjust padding for top/bottom and left/right.

Container Design

• Background Color: Set the background color for the inner container.
• Max Width: Set the maximum width of the container.
• Padding: Adjust padding for top/bottom and left/right.
• Round Borders: Set the border radius for the container (0px to 50px).
• Shadow: Enable or disable subtle shadow on the container.
• Border: Customize border size and color on the container.

Grid Design

• Gap Between Columns: Set the gap between columns.
• Gap Between Content Elements: Set the gap between content elements.

Media Design

• Round Borders on Media: Set the border radius for media elements.
• Shadow: Enable or disable subtle shadow on media.

Tabs

• Tab Icon Size: Set the size of the tab icons.
• Tab Icon Spacing: Adjust the spacing between tab icons.
• Active Tab Border Height: Set the height of the active tab border.
• Tab Alignment: Choose the alignment for tabs (left, center, right).
• Tab Mobile Display: Choose between stacked or side-by-side display for mobile devices.

These settings allow you to tailor the Tabs Premium section to align perfectly with your store's branding and functionality needs.