Start a project

Bundle builder, product carousel and quick add sections for Shopify

Sections built from your own catalogue: a bundle builder, product grids and carousels, quick-add rows, a single product with swatches, and a 3D viewer.

Install Panely free → See the demos

Product sections read your store live. Pick the products, or follow a collection so new arrivals appear on their own, and titles, prices, compare-at prices and images always match your catalogue. Add to cart buttons use Shopify’s own cart.

The bundle builder lets shoppers tick several products and add them to the cart in one go. Quick add rows put an add button on every line of a dense list, which suits refills, accessories and wholesale-style ordering. The single product section brings a product’s photos, variants and buy button to any page, such as a landing page. The 3D product viewer lets shoppers rotate and zoom a model, and view it in their own space on a phone.

Bundle Builder Quick Add Rows Single Product Product Carousel Product Grid 3D Product Viewer

Bundle Builder

Cart

Let shoppers tick several products and add them to the cart together.

Sample products. This demo uses placeholder products. On your store, the section shows your own products from your Shopify catalogue, with live prices and a working Add to cart.

4 designs: Grid, Rows, Cards, Compact. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 73

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Columns Slider, 1–6 phone & desktop
  • Gap Slider, 4–48px phone & desktop
  • Show price On / off
  • Show vendor On / off
  • Image height Slider, 80–620px phone & desktop
Add button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Products
  • Products to choose from Products from your store (up to 16)
  • Message when nothing is picked Text
Bundle
  • Counter label Text
  • Note when nothing is chosen Text
  • Fewest a shopper must pick Slider, 1–12
  • Most a shopper can pick Slider, 0–12 0 means no limit.
  • Message below the fewest Text {min} is replaced with the number.
  • Message at the most Text {max} is replaced with the number.
Add button
  • Button label Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Card style
  • Product title font Google Font and weight phone & desktop
  • Product title size Slider, 10–96px phone & desktop
  • Product title color Colour phone & desktop
  • Product title line height Slider, 0.9–2.4 phone & desktop
  • Product title letter spacing Slider, -3–8px phone & desktop
  • Product title alignment Design default · Left · Center · Right phone & desktop
  • Price font Google Font and weight phone & desktop
  • Price size Slider, 10–96px phone & desktop
  • Price color Colour phone & desktop
  • Price line height Slider, 0.9–2.4 phone & desktop
  • Price letter spacing Slider, -3–8px phone & desktop
  • Price alignment Design default · Left · Center · Right phone & desktop
  • Vendor font Google Font and weight phone & desktop
  • Vendor size Slider, 10–96px phone & desktop
  • Vendor color Colour phone & desktop
  • Vendor line height Slider, 0.9–2.4 phone & desktop
  • Vendor letter spacing Slider, -3–8px phone & desktop
  • Vendor alignment Design default · Left · Center · Right phone & desktop
  • Image corner radius Slider, 0–32px phone & desktop
  • Empty message font Google Font and weight phone & desktop
  • Empty message size Slider, 10–96px phone & desktop
  • Empty message color Colour phone & desktop
  • Empty message line height Slider, 0.9–2.4 phone & desktop
  • Empty message letter spacing Slider, -3–8px phone & desktop
  • Empty message alignment Design default · Left · Center · Right phone & desktop
  • Selected outline Colour phone & desktop
Add button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Add button alignment Design default · Left · Center · Right phone & desktop

Quick Add Rows

Cart

A dense list of products, each with its own add button.

Sample products. This demo uses placeholder products. On your store, the section shows your own products from your Shopify catalogue, with live prices and a working Add to cart.

4 designs: Rows, Bordered, Compact, Cards. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 69

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Gap between rows Slider, 0–40px phone & desktop
  • Thumbnail size Slider, 32–140px phone & desktop
  • Show price On / off
  • Show vendor On / off
Add button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Products
  • Products Products from your store (up to 16)
  • Sold out label Text
  • Message when nothing is picked Text
Add button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Row style
  • Product title font Google Font and weight phone & desktop
  • Product title size Slider, 10–96px phone & desktop
  • Product title color Colour phone & desktop
  • Product title line height Slider, 0.9–2.4 phone & desktop
  • Product title letter spacing Slider, -3–8px phone & desktop
  • Product title alignment Design default · Left · Center · Right phone & desktop
  • Price font Google Font and weight phone & desktop
  • Price size Slider, 10–96px phone & desktop
  • Price color Colour phone & desktop
  • Price line height Slider, 0.9–2.4 phone & desktop
  • Price letter spacing Slider, -3–8px phone & desktop
  • Price alignment Design default · Left · Center · Right phone & desktop
  • Vendor font Google Font and weight phone & desktop
  • Vendor size Slider, 10–96px phone & desktop
  • Vendor color Colour phone & desktop
  • Vendor line height Slider, 0.9–2.4 phone & desktop
  • Vendor letter spacing Slider, -3–8px phone & desktop
  • Vendor alignment Design default · Left · Center · Right phone & desktop
  • Row background Colour phone & desktop
  • Corner radius Slider, 0–28px phone & desktop
  • Thumbnail radius Slider, 0–28px phone & desktop
  • Empty message font Google Font and weight phone & desktop
  • Empty message size Slider, 10–96px phone & desktop
  • Empty message color Colour phone & desktop
  • Empty message line height Slider, 0.9–2.4 phone & desktop
  • Empty message letter spacing Slider, -3–8px phone & desktop
  • Empty message alignment Design default · Left · Center · Right phone & desktop
Add button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Add button alignment Design default · Left · Center · Right phone & desktop

Single Product

Cart

One product, live from your store: its photos, price, variants and a working Add to cart button.

Sample products. This demo uses placeholder products. On your store, the section shows your own products from your Shopify catalogue, with live prices and a working Add to cart.

4 designs: Split, Split reversed, Stacked, Card. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 69

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Product
  • Variant picker Buttons · Dropdown
  • Show vendor On / off
  • Show description On / off
  • Show all photos On / off Thumbnails under the main photo, when the product has more than one.
  • Show quantity On / off
Layout
  • Image height Slider, 200–800px phone & desktop
Add button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Product
  • Product A product from your store Its title, price, photos and variants come from your store and stay up to date.
  • Message when no product is picked Text
Add button
  • Button label Text
  • Sold out label Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Style
  • Corner radius Slider, 0–32px phone & desktop
Product style
  • Product title font Google Font and weight phone & desktop
  • Product title size Slider, 10–96px phone & desktop
  • Product title color Colour phone & desktop
  • Product title line height Slider, 0.9–2.4 phone & desktop
  • Product title letter spacing Slider, -3–8px phone & desktop
  • Product title alignment Design default · Left · Center · Right phone & desktop
  • Price font Google Font and weight phone & desktop
  • Price size Slider, 10–96px phone & desktop
  • Price color Colour phone & desktop
  • Price line height Slider, 0.9–2.4 phone & desktop
  • Price letter spacing Slider, -3–8px phone & desktop
  • Price alignment Design default · Left · Center · Right phone & desktop
  • Swatch label font Google Font and weight phone & desktop
  • Swatch label size Slider, 10–96px phone & desktop
  • Swatch label color Colour phone & desktop
  • Swatch label line height Slider, 0.9–2.4 phone & desktop
  • Swatch label letter spacing Slider, -3–8px phone & desktop
  • Swatch label alignment Design default · Left · Center · Right phone & desktop
  • Selected outline Colour phone & desktop
  • Empty message font Google Font and weight phone & desktop
  • Empty message size Slider, 10–96px phone & desktop
  • Empty message color Colour phone & desktop
  • Empty message line height Slider, 0.9–2.4 phone & desktop
  • Empty message letter spacing Slider, -3–8px phone & desktop
  • Empty message alignment Design default · Left · Center · Right phone & desktop
Add button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Add button alignment Design default · Left · Center · Right phone & desktop

Product Grid

Catalogue

Products in a grid. Pick an exact set, or follow a collection so new arrivals appear on their own.

Sample products. This demo uses placeholder products. On your store, the section shows your own products from your Shopify catalogue, with live prices and a working Add to cart.

4 designs: Grid, Boxed, Minimal, Editorial. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 61

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Products
  • Where the products come from Products I pick · A collection
  • How many to show Slider, 1–24
Layout
  • Columns Slider, 1–6 phone & desktop
  • Gap Slider, 4–56px phone & desktop
  • Show price On / off
  • Show vendor On / off
  • Image height Slider, 80–620px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Products
  • Products Products from your store (up to 12)
  • Collection A collection from your store
  • Message when nothing is picked Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Card style
  • Product title font Google Font and weight phone & desktop
  • Product title size Slider, 10–96px phone & desktop
  • Product title color Colour phone & desktop
  • Product title line height Slider, 0.9–2.4 phone & desktop
  • Product title letter spacing Slider, -3–8px phone & desktop
  • Product title alignment Design default · Left · Center · Right phone & desktop
  • Price font Google Font and weight phone & desktop
  • Price size Slider, 10–96px phone & desktop
  • Price color Colour phone & desktop
  • Price line height Slider, 0.9–2.4 phone & desktop
  • Price letter spacing Slider, -3–8px phone & desktop
  • Price alignment Design default · Left · Center · Right phone & desktop
  • Vendor font Google Font and weight phone & desktop
  • Vendor size Slider, 10–96px phone & desktop
  • Vendor color Colour phone & desktop
  • Vendor line height Slider, 0.9–2.4 phone & desktop
  • Vendor letter spacing Slider, -3–8px phone & desktop
  • Vendor alignment Design default · Left · Center · Right phone & desktop
  • Image corner radius Slider, 0–32px phone & desktop
  • Empty message font Google Font and weight phone & desktop
  • Empty message size Slider, 10–96px phone & desktop
  • Empty message color Colour phone & desktop
  • Empty message line height Slider, 0.9–2.4 phone & desktop
  • Empty message letter spacing Slider, -3–8px phone & desktop
  • Empty message alignment Design default · Left · Center · Right phone & desktop

3D Product Viewer

Media

A 3D model shoppers turn all the way round and zoom into: drag to rotate, scroll or pinch to zoom, and view it in their own space on a phone.

3 designs: Stage, Split, Bare. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 45

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Height Slider, 200–800px phone & desktop
Controls
  • Turn on its own On / off Stops as soon as a shopper takes hold of it.
  • Turning speed Slider, 5–90°/s
  • Allow zoom On / off
  • View in your space (phones) On / off Shows the model in the shopper’s room, on phones that support it.

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Model
  • 3D model 3D model file A .glb file. Upload it in Shopify Files, then choose it here, or paste a link.
  • Poster image Image Shows while the model loads.
  • Description Text Read out by screen readers.
  • Hint text Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Style
  • Corner radius Slider, 0–32px phone & desktop
  • Hint font Google Font and weight phone & desktop
  • Hint size Slider, 10–96px phone & desktop
  • Hint color Colour phone & desktop
  • Hint line height Slider, 0.9–2.4 phone & desktop
  • Hint letter spacing Slider, -3–8px phone & desktop
  • Hint alignment Design default · Left · Center · Right phone & desktop
  • Stage background Colour phone & desktop
  • Brightness Slider, 0.3–2
  • Shadow Slider, 0–2

How to add a Panely section to your Shopify store

  1. Install Panely from the Shopify App Store. It works with Online Store 2.0 themes, and your theme files are never edited.
  2. Pick a section and press Add. Choose a design, and change the settings in the editor with a live preview beside them. You get a short section code.
  3. Place it once. In the theme editor, add the Panely block where you want the section, and paste the code into its Section code field.
  4. Edit any time. Change the section in Panely and save. Your store shows the change on its next page load, with nothing to paste again.

Each Add is its own copy with its own settings, so you can use the same section on as many pages as you like. Panely must stay installed for its sections to show. If you uninstall, they disappear, and your theme is left exactly as it was.

Questions about product structures sections

Do product sections update when I change a price?

Yes. They read your products from Shopify on every page load, so prices, sale prices, images and availability are always current. There’s nothing to re-sync.

How does the bundle builder add products to the cart?

Shoppers tick the products they want and press one button, and every ticked product goes into the Shopify cart together. Pair it with a Shopify automatic discount if you want to reward the bundle.

Add these sections to your store

Install Panely from the Shopify App Store, pick a section and place it in your theme in a couple of minutes. A free plan is available.

Install Panely free →
More Panely sections
Data-shaped Chart, Progress meters, Stat counters… Forms & capture Sticky bar, Inline form, Multi step form… Grids Filterable grid, Bento grid, Mosaic collage… Interactive Before / after slider, Countdown timer, Accordion… Motion & carousel Draggable Card Stack, Advance Slideshow, Infinite Marquee… Overlay & split layouts Image with text overlay, Offset cards, Text over video… Typographic treatments Oversized Statement, Checklist, Icon And Text…