Product

The Product section creates a complete, fully-functional single product display with a two-column layout that pairs product images on one side with product information and a purchase form on the other—perfect for showcasing featured products, creating custom product pages, or highlighting specific items anywhere on your site. If your product has multiple images, the section automatically creates a swipeable image slider with navigation arrows so customers can browse through all product photos, or you can replace the product images with a single custom image if you prefer. The product information side displays the product title, price, and description, plus a fully-functional purchase form that includes variant selectors, quantity input, and an add-to-cart button that integrates seamlessly with Shopify's cart system. You can customize the column ratio (from 80/20 to 20/80) to give more or less space to either the images or the product details, and you have full control over the layout order—place images on the left or right on desktop, and stack them on top or bottom on mobile. Everything is fully customizable through Shopify's Theme Customizer—adjust spacing, padding, colors, typography, and all the styling with no coding required—and it works seamlessly with any Shopify 2.0 theme like Dawn or Horizon, making it ideal for creating custom product showcases, featured product sections, or any spot where you want to display a single product with full purchase functionality outside of the standard product page.

Setup Instructions

1

Install the App

Visit the Shopify App Store and install Flexi Slider Sections. Start your free trial to access all features and sections.

2

Install Section

Open the Flexi app and navigate to the sections library. Search for "Product" and click "Add to Theme" to install it instantly.

3

Add to Your Store

Go to your Shopify admin → Online Store → Themes → Customize. Click "Add section" and select "Product" from the available sections.

4

Set Section Width

In the section settings, choose your preferred layout:

• Full width: Spans the entire page width

• Fixed width: Set a custom maximum width (320px - 1440px)

• Theme width: Use your theme's default container width

5

Add Content

Click "Add block" to add product groups. Each group can contain multiple products with customizable layouts including titles, prices, images, and buttons.

6

Customize & Style

Fine-tune your slider with the built-in settings:

• Adjust background colors or add background images

• Control spacing and padding

• Set slider behavior (auto-play, loop, arrows)

• Customize typography and colors

Why Use Flexi Sections?

Designed to Feel Native Flexi sections are built to inherit your theme’s structure and styles, so they blend in naturally instead of feeling bolted on. Spend less time overriding CSS and more time shipping polished layouts that feel intentional.

Prebuilt, Not Prescriptive Each section provides a production-ready foundation without locking you into rigid layouts. Configure content, spacing, and structure to match your client’s needs—without rebuilding the same patterns from scratch.

Theme-First Customization All styling and layout adjustments happen through the Shopify Theme Editor. Tweak typography, spacing, alignment, and behavior using familiar theme controls, just like native sections.

Built for Performance & SEO Flexi sections are optimized for real storefronts, not demos. Lightweight markup and thoughtful defaults help keep pages fast, stable, and search-friendly across devices.

Works Across Any Shopify Theme Flexi sections work with any Shopify 2.0 theme, including Dawn, Horizon, and custom builds. Test safely on duplicate themes and ship with confidence.

Easy to Maintain Over Time Once a section is in place, it’s easy to manage. Update content, swap images, or adjust layout directly in the Shopify admin—no fragile custom code or one-off fixes to maintain later.

Built for Reuse Across Projects Flexi is designed for builders shipping real work. Reuse the same section patterns across client projects to stay consistent, move faster, and avoid unnecessary technical debt.