Theme Documentation
Everything you need to set up and customize the One Right Solution multipurpose Shopify theme.
1 Getting Started
Thank you for purchasing the One Right Solution Shopify theme. Follow these steps to install and activate your theme.
Requirements
- A Shopify store on any plan (Basic, Shopify, Advanced, or Plus)
- The theme .zip file from your purchase
- A modern browser (Chrome, Firefox, Safari, or Edge)
Step 1: Upload the Theme
- 1 Go to your Shopify admin panel at your-store.myshopify.com/admin
- 2 Navigate to Online Store → Themes
- 3 Click Add theme then Upload zip file
- 4 Select the ors-theme.zip file and click Upload
Step 2: Activate the Theme
Once uploaded, the theme will appear in your Theme library. Click the ... menu on the theme card and select Publish. Confirm the dialog to make it your live theme.
Tip: Before publishing, you can click Preview to see how the theme looks with your existing products and content.
Step 3: Open the Theme Editor
Click Customize to open the Shopify theme editor. From here you can configure all sections, colors, fonts, and layout options described in this documentation.
2 Homepage Demos
The theme ships with four pre-built homepage demos, each tailored for a different product niche. You can use any demo as a starting point and customize it freely.
Herbal Demo
Designed for organic, herbal, and natural product stores. Earthy greens, soft textures, and nature-inspired layout.
Beauty Demo
Ideal for cosmetics, skincare, and beauty brands. Elegant typography, soft pinks, and luxurious feel.
Food Demo
Built for food, beverage, and grocery stores. Warm tones, appetizing layouts, and recipe-friendly sections.
Fashion Demo
Perfect for apparel, accessories, and fashion brands. Bold imagery, lookbook sections, and modern grid layouts.
Switching Between Demos
- 1 In the Shopify admin, go to Online Store → Themes
- 2 Click Customize, then in the top bar dropdown, select the template for the page you want to edit
- 3 Each demo uses its own JSON template file (e.g., index.herbal.json, index.beauty.json). Assign the desired template to your homepage via Online Store → Pages
Note: Switching demos only changes the homepage layout and section arrangement. Your products, collections, and settings remain unaffected.
3 Sections Overview
The theme includes 37+ customizable sections. Each section can be added, removed, or rearranged from the Shopify theme editor.
| Section | Description |
|---|---|
| Announcement Bar | Top-of-page scrolling announcement messages |
| Utility Bar | Secondary bar with contact info, social links, language/currency selectors |
| Header | Main navigation with mega menus, search, cart, and wishlist icons |
| Slideshow / Hero | Full-width hero banner with slides, text overlays, and CTA buttons |
| Collection Slider | Horizontal scrollable collection cards with images and titles |
| Featured Products | Grid of selected products with quick-add functionality |
| Product Tabs | Tabbed product grids filtered by collection or tag |
| Product Slider | Horizontal product carousel with autoplay options |
| Banner / Promo | Full-width promotional banners with countdown timers |
| Categories Grid | Visual grid of collection categories with hover effects |
| Image with Text | Split layout with image on one side, text on the other |
| Video Section | Embedded YouTube/Vimeo or self-hosted video with play button overlay |
| Testimonials | Customer review carousel with star ratings and avatars |
| Brand Logos | Auto-scrolling marquee of partner/brand logos |
| Blog Posts | Latest blog post cards with featured images |
| Newsletter | Email subscription form with customizable text |
| Instagram Feed | Instagram photo grid with hover overlays |
| Feature Icons | Icon-based feature highlights (free shipping, 24/7 support, etc.) |
| Countdown Timer | Sale countdown with dynamic date targeting |
| Before/After Slider | Draggable comparison slider for product transformations |
| FAQ Accordion | Expandable question and answer pairs |
| Rich Text | Free-form content block with heading, text, and button |
| Gallery / Lookbook | Masonry or grid image gallery with lightbox |
| Map | Google Maps embed for store location |
| Contact Form | Built-in contact form with validation |
| About / Story | Brand story section with timeline or milestones |
| Team Members | Staff/team member cards with photos and bios |
| Parallax Banner | Full-width banner with parallax scroll effect |
| Stats Counter | Animated number counters for statistics |
| Collection Page | Filterable product grid with sidebar filters |
| Product Page | Full product detail layout with sticky add-to-cart |
| Cart Page | Full cart with upsells, notes, and shipping calculator |
| Wishlist Page | Saved products page with localStorage support |
| Page Hero | Configurable hero banners for content pages |
| Breadcrumbs | Automatic breadcrumb navigation |
| Recently Viewed | Displays recently viewed products via cookies |
| Footer | Multi-column footer with newsletter, social links, and payment icons |
4 Header & Utility Bar
Announcement Bar
The announcement bar appears at the very top of the page. It supports multiple scrolling messages with auto-rotation.
Messages: Add up to 5 scrolling messages
Link: Optional URL for each message
Speed: Scroll speed in milliseconds
Background: Customizable background color
Dismissible: Allow visitors to close the bar
Utility Bar
The utility bar sits below the announcement bar and above the main header. It provides secondary information and actions.
- Contact info: Phone number, email address
- Social links: Icons linking to your social profiles
- Language selector: Multi-language switcher (requires Shopify Markets)
- Currency selector: Multi-currency switcher
- Custom text: Free-form text like "Free shipping over $50"
Main Header / Navigation
The header supports multiple layout styles and includes the following configurable elements:
- Logo: Upload your logo image and set its max width
- Menu: Assign a Shopify navigation menu. Supports up to 3-level dropdown menus
- Mega Menu: Create rich mega menus with images, links, and promotional blocks for specific menu items
- Sticky header: Enable to keep the header fixed on scroll
- Search: Built-in predictive search with product, article, and page results
- Cart icon: Shows item count badge, opens drawer cart on click
- Wishlist icon: Heart icon linking to the wishlist page
Important: To enable mega menus, your menu items must use the exact handle format: mega-menu-handle. See the menu setup in your Shopify Navigation settings.
5 Product Page
The product page is designed for maximum conversion with a feature-rich layout.
Key Features
The add-to-cart button and variant selectors remain visible as the user scrolls down the page. Configurable in the theme editor.
Supports dropdown, buttons, and color swatches. Variant images update automatically when a variant is selected.
Tabbed content area for Description, Reviews, Shipping Info, and custom tabs using metafields.
Visitors can save products to their wishlist. Works via localStorage, no account needed.
Additional Options
- Breadcrumbs: Automatic breadcrumb trail (Home → Collection → Product)
- Image gallery: Thumbnails, slider, or grid layout with zoom-on-hover
- Quantity selector: With +/- buttons and stock availability display
- Social sharing: Share buttons for Facebook, Twitter/X, Pinterest, and email
- Related products: Automatic recommendations below the main product
- Recently viewed: Section showing products the visitor has previously viewed
- Trust badges: Customizable trust/payment icons below the add-to-cart button
6 Blog Templates
The theme includes multiple blog layout options for both the blog index page and individual article pages.
Blog Index Layouts
Grid Layout
Standard card grid showing featured image, title, excerpt, and date. Configurable columns (2-4).
List Layout
Horizontal list view with image on the left and content on the right. Great for text-heavy blogs.
Left Sidebar
Blog grid with a left sidebar containing categories, tags, recent posts, and a search bar.
Right Sidebar
Same sidebar widgets but positioned on the right side of the content area.
Article Templates
Individual articles can use a full-width layout or include a sidebar with related posts, categories, and social sharing buttons. Assign templates via Online Store → Blog Posts → [Article] → Template.
7 Page Templates
The theme provides several purpose-built page templates beyond the default.
About Page
Dedicated about page template with brand story, team members, and timeline sections pre-configured.
Contact Page
Contact form, Google Maps embed, store hours, and address details in a clean layout.
Wishlist Page
Displays saved wishlist items. Requires a page with the handle wishlist.
Default Page with Hero
Standard page template with a configurable hero banner at the top (title, subtitle, background image).
Assigning Page Templates
In Shopify admin, go to Online Store → Pages → [Your Page]. In the right sidebar under Theme template, select the desired template from the dropdown.
8 Wishlist
The wishlist feature allows visitors to save products without creating an account. It uses the browser's localStorage to persist items across sessions.
Setting Up the Wishlist Page
- 1 Go to Online Store → Pages and click Add page
- 2 Set the title to Wishlist (this will automatically create the handle wishlist)
- 3 In the right sidebar, select the page.wishlist template
- 4 Save the page. The wishlist icon in the header will now link to this page
How it works: When a visitor clicks the heart icon on any product, the product handle is stored in localStorage. The wishlist page reads these handles and uses the Shopify AJAX API to fetch and display the corresponding products.
9 Contact & Map
Contact Form
The theme includes a built-in contact form section that sends submissions to the store owner's email. No third-party apps required.
Configure the form in Theme Editor → Sections → Contact Form. You can customize the heading text, description, and which fields to display.
Google Maps Embed
To add a Google Maps section:
- 1 Go to Google Maps and find your store location
- 2 Click Share → Embed a map and copy the iframe code
- 3 In the theme editor, go to the Map section and paste the embed URL (just the src value from the iframe)
Note: You only need the URL from the iframe's src attribute, not the entire <iframe> tag. The theme handles the embed markup.
11 Customization
The theme offers extensive customization options through the Shopify theme editor and CSS variables.
Theme Settings (Color & Typography)
In the theme editor, click Theme settings (gear icon at the bottom left) to access global settings:
- Colors: Primary color, secondary color, accent color, background, text colors, button colors
- Typography: Heading font, body font, font sizes, and line heights
- Buttons: Border radius, padding, hover effects
- Layout: Max container width, section spacing, grid gap
CSS Variables
For advanced customization, the theme exposes CSS custom properties that you can override via Theme Settings → Custom CSS or in a custom .css file:
Custom Fonts
The theme supports all Shopify font-picker fonts out of the box. To use a custom Google Font:
- 1 Go to Theme Settings → Custom CSS
- 2 Add an @import rule for the Google Font
- 3 Override the --font-heading or --font-body variable