Announcement Bar
The Announcement Bar is a lightweight, eye‑catching banner pinned at the top of every page. Its purpose is to convey important messages—promotions, shipping updates, localized notices—without overwhelming your customers. Kapri’s Announcement Bar is designed for maximum flexibility and ease of use, so you can keep your store’s messaging fresh and relevant.
Key Features
- Minimalist Design & Smooth Animation
A clean, unobtrusive bar that slides in and out with a subtle fade‑and‑slide effect, ensuring your announcements feel polished and on‑brand. - Unlimited Announcement Blocks
Add as many messages as you like. Each “Announcement” block contains its own rich text editor, so you can mix plain text, bold highlights, links, or emojis. - Autoplay Slide Duration
Control how long each announcement stays on screen (in milliseconds). Set anywhere from a quick 2000 ms to a leisurely 7000 ms—autoplay is always active, cycling through your blocks continuously. - Country Selector Toggle
Optional drawer on the right side lets shoppers choose their country or region. Turn it on for localization or turn it off when you don’t need localization.
How to Configure
- Add the Announcement Bar Section
In your Shopify Admin, go to Online Store › Themes › Customize.
- Announcement Bar is on top of the shopify customizer left bar by default without being added
- Announcement Bar is on top of the shopify customizer left bar by default without being added
- Create & Edit Announcement Blocks
- Inside the Announcement Bar section, click Add block › Announcement.
- Use the built‑in rich text editor to type your message. You can add links (e.g. “Shop sale”), bold key words, or insert emojis for extra flair.
- Repeat to add additional blocks—each block becomes a new slide.
- Inside the Announcement Bar section, click Add block › Announcement.
- Set Autoplay Duration
- Under the section’s Settings, locate Autoplay duration (ms).
- Enter your desired timing (e.g. 5000 for 5 seconds). Autoplay will continuously loop through all announcement blocks.
- Under the section’s Settings, locate Autoplay duration (ms).
- Enable/Disable Country Selector
- Toggle Show country selector on to display a dropdown of all enabled markets.
- Toggle off to hide it entirely.
- Toggle Show country selector on to display a dropdown of all enabled markets.
- Style Adjustments(Optional)
- Typography inherit from your global theme settings—adjust fonts under Theme settings › Typography.
- If you need finer control, add custom CSS in Assets › custom.css (e.g. to increase padding).
- Typography inherit from your global theme settings—adjust fonts under Theme settings › Typography.
Best Practices & Tips
- Keep It Concise: Aim for 1–2 short sentences per announcement.
- Prioritize: Showcase your most urgent message first—autoplay will cycle through in order.
- Test Across Devices: Verify readability on mobile; shorter character counts work best on small screens.
- Leverage Localization: If you sell in multiple regions, enable the Country Selector and tailor messages per market.
- Combine with CTAs: Include a link or button (e.g., “Shop Now”) to drive immediate action from your announcement.
With Kapri’s Announcement Bar, you’ll always have dynamic, continuously rotating messaging that grabs attention and drives action.
Header
The Header in Kapri serves as the gateway to your store, seamlessly integrating branding, navigation, search, and cart access into a single, responsive bar that adapts beautifully across desktop, tablet, and mobile screens. Your logo is the focal point—uploadable via the Theme Editor and adjustable between 50 px and 250 px in width—ensuring your brand identity always looks its best.
Underneath the logo, the primary navigation menu draws from any Shopify link list (typically your “Main menu”), allowing you to guide shoppers to collections, pages, or external links without a single line of code. As customers scroll, you can enable sticky behavior so the header remains fixed at the top, keeping search and cart icons within easy reach on long‐scroll pages. The search icon appears next to a live‐updating cart icon, making product discovery and checkout access instantaneous.
Kapri’s transparent header mode adds a modern overlay effect: on the homepage, your header floats over the hero image or video, while on mobile product pages it maximizes screen space around product imagery until the user scrolls. For contextual navigation, an optional breadcrumbs block lets you display a trail of links reflecting the customer’s path—choose slash (/), chevron (›), or dot (·) separators, hide breadcrumbs on mobile, and enable a fade effect against transparent backgrounds to maintain visual harmony.
How to Configure
- In Shopify Admin, go to Online Store › Themes › Customize and select the Header section.
- Upload your logo using the Logo image picker and set its width with the Logo width slider (50–250 px).
- Under Menu, choose the Shopify link list that populates your primary navigation links.
- Toggle Sticky header on to keep the header fixed during scrolling.
- Toggle Enable search on or off to show or hide the search icon beside the cart.
- In the Homepage settings, enable Transparent header to overlay the header on your hero media.
- In the Product Page settings, enable Transparent header on mobile to float the header over product images on mobile devices.
- To add breadcrumbs, click Add block › Breadcrumbs, then select your Separator style, set Hide on mobile, and toggle Fade transparent background as desired.
Best Practices
- Aim for a logo width of 120 px–160 px on desktop for clarity; scale down on mobile for balance.
- Limit the main menu to 5–7 links to avoid wrapping or hiding items on smaller screens.
- Use sticky headers on content‑rich pages (e.g., blogs, lookbooks) and disable them on minimal layouts to reduce distraction.
- Reserve transparent headers for high‑contrast hero media to ensure icons and text remain legible.
- Employ breadcrumbs on collection, product, and blog pages to improve navigation and SEO without cluttering simpler layouts.
Products
Kapri’s Product Page transforms standard listings into an immersive shopping experience. It divides the page into two responsive columns: the left hosts a dynamic media gallery, and the right presents detailed product information and purchase actions in a sticky, scroll‑aware panel.
The media gallery adapts seamlessly between desktop and mobile. On desktop, it displays a horizontal carousel with smooth scrolling and snap alignment. On mobile, you can choose between image thumbnails, animated dot indicators, or hide navigation entirely. Alpine.js powers slide tracking, keyboard controls, and synchronized thumbnails.
On the info panel, Kapri renders your product title with adjustable font sizes. It shows real‑time pricing that includes taxes and shipping notes, and supports installment payments where available. Description blocks can appear next to your media or in a sidebar. You can highlight key selling points with the built‑in feature slider and control variant selection through dropdowns or swappable buttons with customizable size, spacing, and border‑radius.
For rich media, enable Video Autoplay to automatically play product videos. If your product includes a 3D model, Kapri loads optimized model‑viewer styles and scripts only when needed. Local pickup availability can be displayed in real time if enabled.
Kapri also offers advanced blocks to enhance merchant flexibility:
- Custom Liquid: Insert bespoke Liquid code for personalized layouts or integrations.
- Collapsible Tabs: Organize FAQs, size guides, or care instructions into interactive, expandable rows.
- Popup Modals: Trigger custom messages or promotional content with a click‑activated modal.
- Share Button: Copy the product link to the clipboard with a tooltip confirmation.
- Complementary Products & Ratings: Showcase related items and display ARIA‑friendly review stars and counts.
How to Configure
- In Shopify Admin, go to Online Store › Themes › Customize and select Product Page.
- Choose Desktop Media Column (one or two columns) and set Desktop Media Gap to adjust spacing.
- Toggle Enable Video Autoplay on to play product videos automatically.
- Select Mobile Gallery Style: Image thumbnails, Dot indicator, or None.
- Enable Enable Sticky Info to fix the info panel during scroll, and Show Pickup Availability to display local pickup options.
- Use Add block to insert and configure:
- Feature Slider, Shoppable Video, Complementary Products
- Variant Picker, Quantity Selector, Buy Buttons
- Description, Share, Custom Liquid, Collapsible Tabs, Popup, Rating
- Feature Slider, Shoppable Video, Complementary Products
Each block exposes its own settings—titles, icons, content fields, and layout controls—to tailor the product page to your brand.
Best Practices
Arrange your media so that videos and 3D models appear first to capture attention. Use concise variant titles when enabling image swatches to avoid layout shifts. Limit collapsible tabs to 3–5 entries for quick access without overwhelming shoppers. Highlight up to three core benefits in the feature slider to maintain focus. Test your layout on multiple devices to ensure performance and visual consistency. Keep the info panel uncluttered by only including essential purchase actions and information.
Footer
Kapri’s Footer anchors your store with essential links, brand messaging, and optional newsletter sign‑up, all wrapped in a dark, contrasting background that stands out without distracting from your content.
If enabled, the newsletter form sits at the top of the footer and invites your visitors to subscribe. You can customize the heading and subheading font sizes, edit the text fields, and style the subscribe button—all directly within the Theme Editor. This form adapts to mobile and desktop layouts, ensuring a seamless experience across devices.
Below the newsletter, a flexible block area supports three block types. Link List blocks let you add titled menus of quick links such as collections, policies, or account pages. Text blocks are perfect for sharing brand stories, promotions, or contact details in rich text format. Image blocks display a custom image—perhaps a brand logo or certification badge—with controllable width and alignment.
At the very bottom, Kapri displays your copyright text alongside optional social and payment icons. The copyright line automatically updates the year and uses your custom text or the store name. Toggle social icons on or off to show your social media profiles, and enable payment icons to reassure customers of accepted payment methods.
How to Configure
To set up the footer, go to Online Store › Themes › Customize and open the Footer section. Use the Show newsletter checkbox to enable or disable the sign‑up form, then adjust Newsletter title and Subtitle font sizes under the newsletter settings. Add, remove, or reorder blocks in the Footer blocks area by selecting Link List, Text, or Image, and configure each block’s heading, content, and styling options.
Further down in the settings, toggle Show Follow on Shop to enable Shopify’s follow button, choose Header font size and Link font size for your block headings and links, and enter your Copyright text. Finally, switch Show icons on to display your global social links and Payment enable on to reveal accepted payment type logos.
Fonts
Kapri gives you full control over the size of your header fonts for both desktop and mobile. You don’t need to write any code—just use the dropdowns in the Theme Editor to pick the sizes that look best for your brand.
For desktop, you can choose between Small, Medium, and Large font sizes. These control how big your headings appear on larger screens. For mobile, you get the same options, but tailored for smaller devices so your text stays readable without taking over the screen.
Everything is responsive by default. That means you can choose a slightly larger size for desktop and a smaller one for mobile, and Kapri will automatically adjust them for different devices.
How to Change Header Font Sizes
- In Shopify Admin, go to Online Store › Themes › Customize.
- Open Theme Settings › Fonts to change font type for header, body and button .
- Look for Desktop Font Size and Mobile Font Size dropdowns in every section.
- Choose what works best:
- Desktop options: Small (text-xl), Medium (text-2xl), Large (text-3xl)
- Mobile options: Small (text-md), Medium (text-lg), Large (text-xl)
Once you save, all headers across your store will follow these sizes automatically.
Tip
Keep mobile sizes slightly smaller for readability, and go bigger on desktop if you want strong headlines. Don’t overdo it—consistency is key for a clean look.