Comparison Banner
The Comparison Banner is a dynamic section that allows you to compare two or more products, services, or features side-by-side. It's ideal for showcasing key differences between similar products, helping customers quickly identify which option best suits their needs.
Go to Shopify Admin > Online Store > Themes.
Click Customize on your active theme.
In the theme editor, click Add Section > Comparison Banner.
Customize the section by adding images, pricing, and key feature comparisons.
Settings & Customization
Layout
Expand to Full Width: Enable this option to extend the banner 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 setting applies to the background image, customizable in theme settings.
Before & After Image Settings
Before Image: Upload an image (Recommended size: 2480 × 980px).
Before Label: Set a custom label (Default: "Before").
Text Position: Choose Top, Center, or Bottom (automatically optimized for mobile).
After Image: Upload an image (Recommended size: 2480 × 980px).
After Label: Set a custom label (Default: "After").
Text Position: Choose Top, Center, or Bottom (automatically optimized for mobile).
Shapes
Shaper : Adds shape effects to the section. Options: Shaper Top, Shaper Bottom, Shaper Both, None, Border Top, Border Bottom, and Both Border.
Shaper Top Color : Sets the top shape color (choose your preferred color).
Shaper Bottom Color : Sets the bottom shape color (choose your preferred color).
Theme Customization
Adjust additional styles in Theme Settings.
Use Custom CSS for further design modifications.
Last updated