Product info tabs
The Product Info Tabs feature helps organize detailed product information into collapsible or clickable tabs, making it easier for customers to browse key details without scrolling through long descriptions.
Go to Shopify Admin > Online Store > Themes.
Click Customize on your active theme.
Select the Product Page from the theme editor.
Click Add Section > Product Info Tabs
Customize the tabs by adding relevant content like Description, Shipping Info, Reviews, FAQs, or Size Charts.
Settings & Customization
Layout Settings
Expand to Full Width: Enable this option to stretch the section across the entire screen width.
Color scheme : You can customize the section’s appearance by changing the text color, background color, and more using preset color options.
Background Opacity: Adjust transparency (Range: 0–100 %, Default: 100%). This applies to the background image, customizable in theme settings.
Content
Heading: Set a custom title (e.g., "Collection List with Banner")
Heading Size: Choose from Small, Medium, or Large.
Text: Add optional supporting text.
Text Position:
Above Main Heading : Position the subheading above the main heading.
Below Main Heading : Position the subheading below the main heading.
Desktop Content Alignment: Set text alignment for desktop (Left, Center, or Right).
Image
Desktop Tab Position: Choose Tab First (tabs appear before the image) or Tab Last (tabs appear after the image). Tabs autoplay on mobile devices.
Desktop Image Placement: Choose the options Image First and Image second (default for mobile layout).
Section Padding
Top Padding: Adjust spacing above the section.
Bottom Padding: Adjust spacing below the section.
Shapes divider
Shaper: Add visual elements (Shaper Top, Shaper Bottom, Shaper Both, None, Border Top, Border Bottom, and Both Border).
Shaper Top Color: Customize the top shape color (choose your preferred color).
Shaper Bottom Color: Customize the bottom shape color (choose your preferred color).
Theme Customization
Adjust additional styles in Theme Settings.
Use Custom CSS for further design modifications.
Product Info Tabs > Add Content Box
Content Box Settings
Tab Heading: Set a custom title for the tab (e.g., "Key Ingredients").
Tab Content: Provide details about the product, brand, or special announcements.
Caption: Add a short, descriptive caption.
Button Settings:
Button Label: Define button text (e.g., "Learn More").
Button Link: Enter a button URL.
Open in a New Window: Enable or disable this option.
Button Style: Choose between Primary or Secondary or Hyperlink.
Desktop Content Alignment: Set text alignment for desktop (Left, Center, or Right).
Image
Image : Upload a custom image or select from free images.
Icon : Upload a custom image or select from free images.
Last updated