Sections versus blocks
A section is a full-width row on a page. Sections stack vertically and can be reordered, hidden, or deleted. A block is a piece of content inside a section: a text block, an image, a button, or a layout group. Some sections contain a fixed set of blocks (like the header), while others let you add, remove, and reorder blocks freely.
Global sections (appear on every page)
Announcement Bar
A slim promotional strip at the top of the page. You can add up to 7 individual announcement messages, each with its own text. Messages cycle in two modes: Ticker (continuous horizontal scroll) or Slider (distinct transitions with a configurable interval of 2–10 seconds). Additional options include text direction (left-to-right or right-to-left), a separator character between ticker messages, font size (10–30 px), and color scheme. You can add a maximum of 2 announcement bars per page.
Header
The main navigation bar. It contains five fixed blocks that cannot be added, removed, or reordered, only configured:
- Logo: displays your store's brand image. Set the position (left, center, or right), width (20–300 px), height (20–300 px), and padding.
- Menu: the navigation menu. Choose a menu you created in Menus, then set its horizontal position, which header row it sits on (top or bottom), display type (drawer, mega menu, or dropdown), and color scheme for the dropdown panel. A menu bar option adds a full-width colored strip behind the bottom row.
- Search: a search icon that opens a product search overlay. Set its horizontal position (left or right) and which row it sits on.
- Cart: the cart icon with an item count badge. Display type options: Drawer (a side panel), Dropdown (a mini cart in the header), or Page (redirects to the full cart page). Each type has its own color scheme selector.
- Localization: a country and language selector for multi-market stores. Toggle whether to show the country name and flag, and set the position and row.
Header-level settings include: Sticky behavior (Scroll (smart-sticky: hides when scrolling down, reappears on scroll up), Always (permanently fixed at the top), Reduce (shrinks on scroll), or Never (scrolls with the page)), plus Width (page-constrained or edge-to-edge), color scheme, top and bottom padding, and a custom CSS field. Maximum 1 header per page.
Footer
The bottom section of every page. You can add, remove, and reorder blocks inside the footer. Available footer blocks:
- About Us: a brand story area containing your logo, text blocks, contact information, and optional layout groups. Supports direction, alignment, gap, width, and padding controls. Maximum 1 per footer.
- Menu: a navigation menu displayed as a link list. Select a menu you created in Menus. Maximum 1 per footer.
- Social Media Icons: a row of social platform icons. Supported platforms: Facebook, Instagram, Threads, X (Twitter), TikTok, Snapchat, YouTube, LinkedIn, Pinterest, Tumblr, WhatsApp, and Telegram. Configure icon size (12–64 px), gap (0–48 px), shape (none, circle, rounded, or square), shape fill style (flat or outline), container size (26–80 px), color palette (brand colors, monochrome, or a custom color), and hover effect (none, brand, scale, lift, or opacity). Maximum 1 per footer.
- Payment Icons: automatically shows icons for the payment methods you have enabled in your store (Visa, Mastercard, PayPal, Stripe, Apple Pay, and so on). No configuration needed. Maximum 1 per footer.
- Privacy Links: links to your legal pages (Privacy Policy, Terms of Service, Refund Policy, Shipping Policy), generated automatically from your store policies. Set font size (12–20 px) and text case (default or uppercase). Maximum 1 per footer.
- Copyright: displays the copyright year and your store name, with an optional "Powered by Storeep" line. Set font size (12–20 px), text case, and whether to show the Storeep attribution. Maximum 1 per footer.
- Text, Divider, and Group: the same layout components available in other sections. See Layout components for full details.
Home page sections
Hero
A full-viewport banner section with a media background (image or video). Two display modes: Single (one background) and Split (two media panels side by side). Height presets: Small (50% of the viewport height), Medium (70%), Large (90%), Fullscreen (the full screen height), Image (adopts the natural size of your media so the entire image is visible), or Custom (a user-defined percentage). Content blocks overlay on the media and support the same layout controls as a group: direction, alignment, gap, and padding. An overlay with a solid or gradient fill can be applied over the media. When placed directly after the header and the Transparent header option is enabled, the header blends into the hero and uses its color scheme.
Featured Products
A product grid or carousel sourced from your catalog. Source options: Manual (you pick specific products), Newest (the most recently added products), or Bestselling (products ordered by sales volume). Configure the number of desktop columns (1–8), mobile columns (1 or 2), gap between cards, section width, and color scheme. Contains a product card block that defines each card's layout (image, title, price, rating, and buy button), plus optional text and divider blocks above or below the grid.
Slideshow
A full-width image or video carousel. Each slide can have its own media background, overlay, and content blocks (text, button, group, and divider). Up to 7 slides per slideshow, with a maximum of 2 slideshow sections per page. Available on the home page only.
Newsletter
An email subscription form. Display modes: Inline (embedded in the page) or Fixed (a floating widget anchored to the bottom corner). Blocks inside include text (headings and descriptions), an email input field (with optional label, placeholder, and privacy notice), a subscribe button (icon or text label, with an option to merge it visually into the input field), dividers, and groups. You can also configure the success heading and message shown after someone signs up.
Product page sections
Product Info
The main product detail section. Contains the product media gallery (images and videos), the product details area (title, price, savings badge, variants, purchase form, WhatsApp order button, and countdown timer), and the product description block. The purchase form supports an inline or pop-up layout, an order summary toggle, custom heading and subheading text, custom button labels for Add to Cart and Buy Now, a gift message hook, and a countdown timer for discount expiry. This section is required on the product page.
Related Products
A product grid showing products related to the one currently being viewed, based on the same collection or manually curated. Uses the same product card system as the Featured Products section.
Reviews
Displays customer reviews for the current product. Contains a reviews summary block (average star rating, total review count, and optional star distribution bars) and a review form block (a button that opens a review submission panel). Reviews are moderated before being published.
Landing page sections
Landing Info
The product sales section for landing pages. Similar to Product Info but laid out for a dedicated sales page: it combines the product form, media, description, and related content blocks in a single focused layout. This section is required on the landing page.
Collection page sections
Collection Products
The product grid for a collection page. Products shown are pulled from the collection the shopper navigated to. You can configure desktop columns (1–8), mobile columns (1 or 2), gap between cards, sort options, a filtering sidebar, and the product card layout. This section is required on the collection page.
Search page sections
Search Products
The product grid for search results. Renders products that match the shopper's search query. Uses the same card and grid configuration as the Collection Products section. This section is required on the search page.
Contact page sections
Contact
A contact form with name, email, subject, and message fields. You can add text blocks and layout groups above or below the form. The submit button label and style (primary or secondary) are configurable. Submitted messages are sent to your store email address. This section is required on the contact page.
Sections available on all pages
Text
A standalone text section for a heading, paragraph, or formatted content block. Up to 3 text sections per page. See Layout components for all text settings.
Image
A standalone image section. Up to 3 image sections per page. Configure width, alignment, aspect ratio (auto, portrait 3:4, square 1:1, or landscape 4:3), fit (cover or contain), corner rounding, padding, and an optional click-through link.
Divider
A horizontal or vertical separator line. Up to 10 divider sections per page. Configure thickness, length (as a percentage of the container), end cap style (sharp or rounded), alignment, color scheme, width (fit or fill), and padding. See Layout components for full details.
FAQ
An accordion-style frequently asked questions section. Add as many question-and-answer pairs as needed. Configure the color scheme, section width, and padding.
Custom Code
A section for raw HTML, CSS, and JavaScript. Your HTML is inserted inside a unique container on the page. CSS you write is automatically scoped to that container so your styles cannot affect other sections. JavaScript runs in an isolated scope and receives the container as its only reference, loaded after the page content is ready so your queries resolve correctly. Maximum 2 custom code sections per page. Useful for embedding third-party widgets, custom animations, or anything else the standard sections cannot express.