Off-Canvas Layout
Last updated
Last updated
This layout displays the available filters that slides in the left/right side on the desktop or bottom on the mobile view. That would be perfect for mobile and minimalist designs when your collection always stay uncluttered, and full filtering opens only when the customer click for it.
Filters hidden behind a “Filter” button that slides in from the side (desktop) or bottom (mobile).
Partial-screen overlay for filtering controls.
Mobile-first usability: One tap opens the filter panel, then tap again to close—keeps product grid clean.
Clutter-free: Hides all filters until needed.
Pura Vida Bracelets was founded in 2010 by Griffin Thall and Paul Goodman and is headquartered in La Jolla, California. The brand sources handcrafted bracelets from Costa Rican artisans and sells via its own website, boutique partners, and cause-marketing collaborations.
Chubbies was launched in 2011 by four Stanford graduates and is based in San Francisco, California, with a direct-to-consumer e-commerce model and a handful of pop-up locations
Emma Bridgewater was established in 1985 by Emma Rice (née Bridgewater) and is headquartered in Hanley, Stoke-On-Trent, Staffordshire, England
From our app, click Library.
In the Sections tab, search for the keyword Collection Page 3-1
Click Install and Customize.
Click Add Section
Search for Collection Page 3-1 and click on it
Container
Full-width: When On, your collection grid stretches edge-to-edge of the browser window. When Off, it’s constrained to your theme’s maximum content width.
Enable spacing between items: Adds consistent margins between product cards for a clean look.
Toolbar Settings
Toolbar style (1 / 2 / 3): Three preset layouts for the toolbar
Show total results: Displays all the results
Show columns switcher: Lets user choose 1–4 columns on desktop.
Enable sorting: Adds a “Sort by” dropdown
Filter Settings
Filter style: Three preset layouts for the filter: Left drawer (slide-out panel on desktop), Right drawer and Toggle style.
Filter size (S / M / L / XL): Adjusts the width of the filter container.
Heading size (XS / S / M / L): Controls the font size of each filter group title
Limit filter widget height: When On, the filters area scrolls internally if it grows too tall, preventing the sidebar from pushing the product grid down
Collapse filters: When On, all groups start collapsed when you click to filter.
Show count: When On, displays the number of results next to each filter option
Tag filter label: Enter the name of filter label you set in Search & Discovery app.
Tag style (Default / 1 / 2): Controls the look of each tag option. You’ll usually see three presets: Default (Checkbox), Style 1 (Text Link), Style 2 (Text Link)
Layout Settings
Products per page: Drag the slider or type a value to set how many items load before paginating.
Number of columns on desktop (1 / 2 / 3 / 4): Choose your default grid width on large screens.
Number of columns on mobile (1 / 2): Choose grid width on mobile views.
Pagination: Default, Infinite scroll, or “Load more” button.
Default pagination style: Select shapes for page-number buttons (e.g. square, circle, text).
Product Card
Media ratio (Adapt, Square, Portrait, Landscape): Controls how images are cropped/fitted.
Media shape (Default, Round, Blob): Applies a mask to your images for a distinctive look.
Content alignment (Left, Center, Right): Aligns title, price, and buttons within each card.
Show “Add to cart” button
Show price (toggle)
Show second image on hover (toggle)
Show vendor (toggle)
Show color swatch (toggle)
Color
Section color scheme: Applies a preset background/text color palette to the whole section.
Product card color scheme:
Section Padding
Top padding & Bottom padding (px): add white-space above and below the collection grid.
Heading: Enter the title displayed above your list of category links. You can edit it to anything meaningful (e.g. “Shop by Style,” “Departments,” “Explore”)
Menu: Choose which navigation menu supplies the links here.
Heading: Enter the title shown above your thumbnails.
Use media style from theme settings: When On, each thumbnail inherits whatever border-radius, shadow, or overlay your theme applies to images globally. When Off, thumbnails don't display any styling.
Open link in new tab: Controls whether clicking an image opens its destination in a new browser tab.
Image & Link: Click the thumbnail to upload or choose an image from your library. Paste any URL or search for an internal collection/page.
Image & Link: Click the thumbnail to upload or choose an image from your library. Paste any URL or search for an internal collection/page.
Use media style from theme settings: When On, your banner inherits whatever border-radius, shadow, or overlay your theme applies to images globally. When Off, it don't display any styling.
Open link in new tab: Controls whether clicking an image opens its destination in a new browser tab.
Heading: You can change whatever label you like (“Connect,” “Follow us,” etc.).
Icon Style: Three preset looks for your icons.
Icon Size: Drag the slider or type a value to scale your icons up or down.
Revenue: In the fiscal year ended 1 February 2024, Pura Vida reported $53.2 million in revenue under its then-parent Vera Bradley.
Revenue: For its most recent fiscal year, Chubbies achieved $101.6 million in sales, up from $89.3 million the prior year, and recorded $9.1 million in net income.
Revenue: In the year ending 29 April 2023, Emma Bridgewater reported sales of £36.2 million, a 9 % rise from £33.1 million the previous year.
To add a social media icon link:
