Shopify Table Premium Section

Description of the Section

The "Table Premium" section is a flexible and customizable table layout that can be added to your Shopify store using the Sections Pro app. This section allows you to create well-structured tables with multiple rows and columns, customize text fonts, colors, and alignment, and style the borders and backgrounds to match your store's theme.

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 "Table Premium"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

1. Product Comparison: Use the table to compare multiple products based on their features, prices, and customer ratings.
2. Order Information: Display detailed order information, including order numbers, dates, and statuses, in a clear, tabulated format.
3. Pricing Tables: Create pricing tables for different service tiers or subscription plans, showcasing the benefits and costs associated with each option.
4. FAQ Section: Structure frequently asked questions and their answers in a neat and organized manner for better readability.
5. Size Charts: Display clothing size charts to help customers select the perfect size before purchasing.

Overview of the Configuration Settings

Font Settings:

• Override theme fonts: Option to override your Shopify theme's default fonts.
• Headline Font: Selector for the font family of the table's headline.
• Text Font: Selector for the font family of the table's text.

Text Settings:

• Text Size: Slider to adjust the text size in pixels (10px to 50px).
• Text Line Height: Dropdown to select the line height for the text.
• Text Color: Color picker for the text color.
• Headline Size: Slider to adjust the headline size (10px to 50px).
• Headline Line Height: Dropdown to select the line height for the headline.
• Headline Color: Color picker for the headline color.

Colors Settings:

• Background Color: Selector for the section's background color (supports gradients).
• Border Color: Color picker for the table borders.
• Row Color: Color picker for the table rows.
• Alternating Row Color: Color picker for alternating rows.
• Link Color: Color picker for links in the table.
• Row 1 Text Color: Color picker for the text color in the first row.
• Row 1 Background Color: Color picker for the background color of the first row.
• Column 1 Text Color: Color picker for the text in the first column.
• Column 1 Background Color: Color picker for the background of the first column.

Table Display Settings:

• Border Display: Dropdown to select border display options (none, outline, all cells, first row only, first row and column).
• Round Borders on Table: Slider to adjust border-radius (0px to 50px).
• Subtle Shadow on Table: Checkbox to add a subtle shadow to the table.

Dimensions Settings:

• Max Width of Section: Number input for the maximum width of the table section.
• Padding Top: Number input for top padding.
• Padding Bottom: Number input for bottom padding.
• Padding Left: Number input for left padding.
• Padding Right: Number input for right padding.
• Table Padding: Number input for the padding inside the table.
• Spacing Between Elements: Number input for the space between table elements.

Text Configuration:

• Headline: Inline rich text editor for the headline.
• Headline Alignment: Dropdown for the alignment of the headline text.
• Content: Inline rich text editor for the section content.
• Content Alignment: Dropdown for the alignment of the content text.