# Introduction ### **Welcome to the official OpenSpaces Themes Documentation** > **Built for Designers, By Designers** Get the most out of your OpenSpaces Shopify theme with our complete setup guides, feature breakdowns, and best practices. ***
#### **What You’ll Find Here** Whether you're using **Plain Jane Starter**, **Plain Jane**, or **Plain Jane** **Interactive**, this documentation will walk you through: * Theme installation and setup * Customizing sections, fonts, and layouts * Adding powerful features like email popups, countdown timers, custom cursors, and more * Tips for mobile optimization and conversions * Version-specific feature guides *** #### **Getting Started** Not sure where to begin? 👉 [Plain Jane Starter](/plain-jane-starter) 👉 [Plain Jane](/readme-1) 👉 [Plain Jane Interactive](/plain-jane-interactive) #### **Need Help?** * 💬 **Join our community on Discord:** ​ * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Plain Jane Welcome to the Plain Jane theme documentation. This is our flagship theme that includes all standard features and functionality for a complete e-commerce experience.
## What's Included in Plain Jane * Full homepage customization options * Complete product and collection page features * All theme settings and customization options * Customer account functionality * Full suite of sections and features * Advanced customization capabilities ## Getting Started Start with our [installation guide](https://github.com/OpenSpaces-Design/theme-documentation/blob/v3/broken-reference/README.md) to set up your Plain Jane theme. ## Documentation Sections * [**Getting Started**](https://github.com/OpenSpaces-Design/theme-documentation/blob/v3/plain-jane-docs/plain-jane/getting-started/README.md) - Installation and basic setup * [**Pages & Menus**](/readme-1/pages-and-menus) - Customizing your site structure * [**Sections & Features**](/readme-1/sections-and-features) - Available content blocks * [**Theme Settings**](/readme-1/theme-settings) - Configuring your theme * [**Advanced**](/readme-1/advanced) - Advanced customization options * [**Customer Accounts**](/readme-1/customer-accounts) - Customer portal setup # Getting Started Welcome to **Plain Jane**, a clean, minimal Shopify theme designed for modern clothing brands that value simplicity, structure, and storytelling. This guide will walk you through the core setup process — from installation to full customization — so you can get your store up and running quickly. {% stepper %} {% step %} **Installing the Plain Jane Theme** Learn how to add the theme to your Shopify store, upload the ZIP file, and publish it safely without disrupting your live site.\ [➡️ Installing the Plain Jane Theme](/readme-1/getting-started/1.-installing-the-plain-jane-theme) *** {% endstep %} {% step %} **Setting Up Your Homepage** Discover how to customize your homepage layout, hero sections, and featured collections to create a clean, editorial first impression.\ [➡️ Setting Up Your Homepage](/readme-1/getting-started/2.-setting-up-your-homepage) {% endstep %} {% step %} **Creating and Customizing Your Collections Page** Organize your product collections with flexible grid options, filters, and sidebar layouts. You’ll learn how to control spacing, typography, and hover styles for each look.\ [➡️ Creating and Customizing Your Collections Page](/readme-1/getting-started/3.-creating-and-customizing-your-collections-page) *** {% endstep %} {% step %} **Creating and Customizing Your Product Page** Explore your product page options — from minimal layouts to fully interactive galleries. This section covers product media, variant options, and recommended product blocks.\ [➡️ Creating and Customizing Your Product Page](/readme-1/getting-started/4.-creating-and-customizing-your-product-page) {% endstep %} {% step %} **Setting Up Password Pages and Email Waitlist** Learn how to set up your password-protected pages and email waitlist integration for upcoming drops or private launches.\ [➡️ Setting Up Password Pages and Email Waitlist](/readme-1/getting-started/5.-setting-up-password-pages-and-email-waitlist) {% endstep %} {% endstepper %} # 1. Installing the Plain Jane Theme For Plain Jane Starter, Plain Jane, and Plain Jane Interactive ### What You’ll Learn How to upload and install the Plain Jane Shopify theme using a ZIP file through the Shopify admin. Follow the video below, or scroll for a written tutorial instead {% embed url="" %} *** ### 1. Access the Themes Section 1. Log in to your **Shopify Admin**. 2. In the left sidebar, click **Online Store**, then select **Themes**.
Shopify Themes main page showing theme library

Navigate to Online Store > Themes to access your theme library

*** ### 2. Import the Theme 1. On the **Themes** page, click the **Add theme** button or **Explore free themes** to access the theme import options.
Add theme interface in Shopify admin

Click Add theme to access import options

2. You'll see the theme import interface where you can upload a ZIP file or browse the theme library.
Theme library and upload interface

Theme library interface showing upload options

3. A modal will pop up. Click **Add file**.
*** ### 3. Upload the Theme ZIP 1. Locate the **Plain Jane theme ZIP file** in your file browser. 2. > ⚠️ **Important:** Make sure the file is not unzipped. Shopify only accepts zipped theme files. 3. Select the correct file (e.g., `plain-jane-v3.0.3.zip`) and click **Upload**.
*** ### 4. Finalize the Upload * Once uploaded, Shopify will process the ZIP file. * You’ll see **Plain Jane v3.0.3** (or the version you uploaded) appear under **Theme library**. * Click **Actions > Publish** if you’re ready to make it your live theme. > 💡 Tip: You can upload multiple theme versions and preview them before publishing. ### **Need Help?** * 💬 **For Tech Shpport Join Us On Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # 2. Setting Up Your Homepage For Plain Jane and Interactive {% embed url="" %} {% hint style="info" %} > ⚠️ Note: The `Dynamic Background` section has been deprecated in the latest versions of Plain Jane and Interactive. Use `Page Canvas` instead—it offers the same functionality for background images, videos, colors, etc. > > ⚠️ Note: This guide does **not** apply to Plain Jane Starter users. > {% endhint %} ### What You'll Learn * How to customize your homepage layout in Plain Jane v3 and Interactive v2 * How to add and configure Center, Side-Aligned, and Compact menus * When to use each layout for best results * How to link menus and manage navigation * How to skip the homepage entirely if desired > *** ### 🛠️ For New Users: Setting Up a Menu 1. Go to **Online Store** > **Navigation** in your Shopify Admin. 2. Click **Add Menu** and name it something like `Test Menu`. 3. Add menu items like: * `Men` → link to your Men's collection * `Lookbook` → link to a custom page or homepage * `Contact` → link to Shopify's built-in contact page 4. Click **Save**. *** ### 🎨 Layout 1: Center Menu This is the most popular layout (e.g., Supreme-style homepage). #### How to Set It Up 1. Open your theme in the **Customize** editor.
Shopify theme customizer overview

Theme customizer interface showing homepage sections

2. Make sure these sections are present: * `Preloader` * `Email Popup` * `Page Canvas` * `Center Menu` > 💡 Tip: `Page Canvas` replaces the deprecated `Dynamic Background` section. Use it for background images or colors. #### Link Your Menu * Click the `Center Menu` section
Center Menu section selected in theme customizer

Center Menu section selected showing settings panel

* On the right panel, **choose your menu** from the dropdown (e.g., `Test Menu`)
Center Menu settings panel

Center Menu settings panel with menu dropdown

Center Menu dropdown selection

Menu dropdown showing available navigation menus

#### Social Media Icons * Toggle icons **on** * Paste full URLs to your profiles (e.g., TikTok, Threads, Tumblr) > 💡 Tip: Don't add scrollable content below the center menu. Keep it clean and simple. *** ### 🎨 Layout 2: Side-Aligned Menu Good for brands that want minimal vertical menus. #### Setup Steps 1. In the theme editor, remove the `Center Menu`. 2. Click **Add Section** > `Side Aligned Menu`
Add section modal in theme customizer

Add section modal showing available sections

Side Aligned Menu section added

Side Aligned Menu section successfully added

3. Select your menu from the right panel
Side Aligned Menu settings

Side Aligned Menu settings and customization options

#### Customization Options * Adjust **font size**, **link spacing**, and **colors** * Toggle **login link** visibility (requires customer accounts enabled) * Choose **logo alignment** (left or right) * Change **font family** under `Theme Settings > Typography` > 💡 Tip: Avoid stacking product sections beneath this layout—it’s not scroll-friendly. *** ### 🎨 Layout 3: Compact Menu This layout features a hamburger icon in the top right. #### Setup Steps 1. Add the `Compact Menu` section
Compact Menu section in theme customizer

Compact Menu section added to homepage

2. Link your menu under `Theme Settings > Global Menu Settings`
Global Menu Settings in Theme Settings

Global Menu Settings for configuring Compact Menu

3. Center or align your logo however you'd like #### Add Background + Content * Use the `Page Canvas` section to: * Set a background color or upload an image
Page Canvas settings for background customization

Page Canvas settings for adding background images and colors

* Add sections like `Collection List` or `Product Carousel` > ⚠️ Warning: This is the **only layout** recommended for scrollable homepages. *** ### 🚀 Skipping the Homepage (Optional) Want to take visitors straight to a collection? 1. Go to `Theme Settings > Homepage Settings` 2. Enable **Skip Enter Screen** 3. Set the destination page (e.g., a specific collection) > 💡 Tip: This is useful for product-focused brands that don’t need a homepage. *** ### 📌 Final Notes * Use **Page Canvas** for all homepage background customization * Keep your layout minimal and functional * Always save and refresh to preview your changes Supported Layouts: * Center Menu (static landing) * Side-Aligned Menu (minimal vertical nav) * Compact Menu (scrollable homepage builder) ### **Need Help?** * 💬 **For Tech Shpport Join Us On Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # 3. Creating and Customizing Your Collections Page For Plain Jane and Interactive {% embed url="" %} ### What You'll Learn * How to create and organize collections in Shopify * How to create and assign menus to collection pages * How to use and customize the "Classic Collection" and "Sidebar Collection" in the Plain Jane v3 and Interactive v2 themes * How to edit design settings like spacing, fonts, colors, and product display options ### 🛠️ Getting Started: Shopify Setup Basics This section is for beginners setting up their store for the first time. #### 1. Create Product Collections 1. Go to your **Shopify Admin** > **Products** > **Collections**. 2. Click **Create Collection**. 3. Name your collection (e.g., `Tops`, `Bottoms`, `Accessories`). 4. Set the collection **type** to `Manual`. > ⚠️ Manual collections let you control the product order manually. 5. Click **Save**, then use the **Browse** button to add products. Repeat for each category. #### 2. Create a Menu for Your Collection Sidebar 1. Go to **Online Store** > **Navigation**. 2. Click **Add Menu**. 3. Name it something like `Shop Menu`. 4. Add links like: * `Tops` → Link to your `Tops` collection * `Bottoms` → Link to your `Bottoms` collection * `Outerwear`, `Footwear`, etc. 5. You can drag items to nest them (e.g., `Shorts` under `Bottoms`). 6. Click **Save Menu**. *** ### 🎨 Theme Customization: Collection Pages These instructions apply to both **Plain Jane v3** and **Interactive v2** themes. 1. Navigate to **Online Store** > **Themes** > **Customize** 2. Use the page selector dropdown to switch to **Collections** template #### Classic Collection Section 1. Go to **Online Store** > **Themes** > **Customize**. 2. From the left panel, select the **Collection Page** template. 3. Look for a section labeled **Classic Collection**. **Key Settings:** * **Select Menu**: Assign the custom `Shop Menu` you created. * **Menu Position**: Choose `Left` or `Right`. * **Text Alignment**: Options for `Left`, `Center`, or `Right`. * **Font Size & Spacing**: Adjust menu and link spacing. * **Menu Colors**: Customize background and text colors. * **Show Product Titles/Prices**: Toggle visibility and adjust font size and color. * **Product Frames**: Add borders and hover effects. * **Product Background Radius**: Adjust corners from sharp to rounded. * **Make Background Transparent**: Works best with transparent PNGs. #### Search and Sort Options * **Position**: Align icons `Left`, `Center`, or `Right`. * **Colors**: Customize icon and dropdown menu colors. * **Search Overlay Settings**: * Adjust **background opacity** * Set **search box background color** * **Sort Menu**: Choose how products are sorted: `Featured`, `Newest`, `Price`, etc. #### Sale Labels * Show discount labels like "On Sale" * Customize label **font size**, **text color**, and **background color** #### Uploading Products with PNGs > 💡 Tip: Use transparent PNGs if you want to control background colors using the theme editor. *** ### 🧭 Sidebar Collection (Optional) Want a more traditional layout? Use the Sidebar Collection instead. 1. In the same **Collection Page** template, **hide** the `Classic Collection` section. 2. **Enable Sidebar Collection** instead. **Sidebar Collection Settings:** * Assign a `Menu` * Sidebar position: `Left` or `Right` * **Upload Sidebar Background** (called a "skin") * Adjust **opacity**, **shadows**, and **fixed scroll** behavior > 💡 Tip: Fixed sidebars stay visible when scrolling. All other display settings like product info, labels, and search/sort icons work the same as in the Classic Collection section. *** ### ✅ Final Notes * Always click **Save** in the theme editor after making changes. * If changes don’t appear right away, try refreshing the page. * Keep product image sizes consistent (e.g., 1000x1000px) for aligned layouts. ### **Need Help?** * 💬 **For Tech Shpport Join Us On Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # 4. Creating and Customizing Your Product Page For Plain Jane and Interactive {% embed url="" %} > 📓 Note: There is a **new Product Section Showcase** layout available that is not covered in this video. For setup instructions and details, visit: [Product Section Showcase](https://openspaces-labs.gitbook.io/openspaces/pages-and-menus/product-page/product-section-showcase) ### What You'll Learn * How to customize the product page layout in Plain Jane v3 and Interactive v2 * All block types and styling options inside the product section * How to use the Scroll Layout (archived version) product section * Where to adjust gallery size, button styles, accordions, and more > 📓 Note: The `Scroll Layout` (formerly called `Archived Layout`) is an older alternative to the default product section. It’s still available for use but lacks block-based customization. *** ### 🛠️ Accessing the Product Page in the Theme Editor 1. Go to **Online Store** > **Themes** > **Customize**. 2. Use the dropdown menu at the top center to select `Products > Default Product`. 3. To preview a different product, click **Change** in the preview bar and select a different item. *** ### 🧱 Core Product Section Blocks The product page is made up of a `Product Section` and individual **blocks** underneath. You can reorder, remove, or customize each one. **Common Blocks:** * **On Sale Label**: Custom color, padding, and spacing * **Header**: Controls product title display * **SKU**: Optional, shows SKU if available * **Price**: Show with or without currency symbol * **Description**: Supports word limit and "Read more" link * **Gallery**: Controlled via parent Product Section settings * **Buttons**: Add-to-cart and variant selectors * **Accordions**: Use for size charts, return policies, FAQs, etc. > 💡 Tip: To add a block, click the `Product Section`, then `Add Block`. *** ### 🎛️ Product Section Layout Settings Click the top-level **Product Section** to access these layout options: * **Image Position**: `Left` or `Right` * **Fade Animation**: Controls how the product fades into view * **Gallery Columns**: From 1 to 6 (only available if gallery is on left) * **Image Sizing (Desktop & Mobile)**: Use sliders to adjust > ⚠️ Some settings (like columns) are only available when the gallery is on the left. *** ### 🧩 Additional Block Settings #### On Sale Label * Change label background and text color * Adjust spacing around the badge #### Price Display * Toggle currency symbol * Adjust font size for luxury/minimal styles #### Description Block * Set color, margins, and word limit * Enables "Read more" expansion link #### Buttons and Variants * Enable/disable Next Product button * Customize corner radius, margins, spacing #### Accordions * Add multiple: e.g., `Size Chart`, `Returns/Exchanges` * Customize titles and margin spacing *** ### 🗂️ Scroll Layout Product Section (Archived) The Scroll Layout is an archived version of the product section that displays a full vertical gallery. #### How to Use: 1. Click **Add Section** > `Product Section Scroll` 2. Hide the current product section to avoid duplicates 3. Customize using the right-hand settings panel (this version does not use blocks) #### Key Differences: * Vertical scroll gallery with all images stacked * Great for mobile and long-form product storytelling * No block support — all settings are configured in the section panel * Fewer customization features (e.g., no rounded corners) > 💡 Tip: Use this if you prefer the old scroll experience from earlier theme versions. *** ### ➕ Adding Extra Sections to the Product Page You can add other Shopify theme sections to the product page just like any other page: * `Image Stream` * `Email Signup` * `Slideshow` * `Collection List` Rearrange and customize these to match your brand style. ### **Need Help?** * 💬 **For Tech Shpport Join Us On Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # 5. Setting Up Password Pages and Email Waitlist For Plain Jane and Interactive {% embed url="" %} ### What You'll Learn * How to enable the password page on your Shopify store * How to customize the Plain Jane v3 password page * How to set up a synced countdown timer for drops * How to collect email signups and export your list * Best practices for SMS integrations and custom forms > 📓 Note: The password page in Plain Jane v3 is completely rebuilt from previous versions. It now uses customizable sections like other templates. *** ### 🔐 How to Enable the Password Page 1. Go to **Shopify Admin** > **Online Store** > **Preferences** 2. Scroll down to **Password Protection** 3. Toggle the switch to **Enable password page** 4. Set a password your customers will use > 💡 Tip: Give early access to subscribers by sharing your password via email or SMS. *** ### 🎨 Customizing the Password Page in Theme Editor 1. Go to **Online Store** > **Themes** > **Customize** 2. Use the page dropdown and select `Others > Password` #### Sections You’ll See: * **Store Owner Link** * **Countdown Timer** * **Video Spotlight** (optional) * **Embedded Email Signup** (optional) *** ### 🕓 Setting Up the Countdown Timer 1. Click the `Timer` section in the left panel 2. Use **UTC time** to set your launch time correctly #### Convert Local Time to UTC Use Google: ``` 5:00 PM EST to UTC ``` Set your timer to match the UTC result (e.g., `21:00` for 5 PM EST) #### Styling Options * **Position**: Top or Center * **Typography**: Adjust size (desktop only) * **Glow effect**, **boxes**, **corner radius**, **opacity** #### Entrance Animation When the countdown hits 0, a full-screen logo + enter button appears. > ⚠️ Important: You **must** disable the password manually in Preferences for customers to access the store. *** ### ✉️ Adding an Email Signup Form 1. Click `Add Section` > **Embedded Email Signup** 2. Customize: * Title * Button text * Placeholder * Success message #### View Submissions 1. Go to **Shopify Admin** > **Customers** 2. All email entries appear here with 0 orders 3. Use **Export** to send to: * Klaviyo * Omnisend * Mailchimp > 💡 Tip: Use CSV export or automation to sync email subscribers. *** ### 📲 Can I Capture SMS Signups Too? Shopify does **not** allow themes to capture SMS numbers directly. To do this: * Use a Shopify app (e.g., **Postscript**, **Klaviyo**, **Yotpo**) * Build a form using their UI * Embed the code using the **Custom Liquid** section 1. Click `Add Section` > **Custom Liquid** 2. Paste your form embed code > ⚠️ Reminder: SMS forms must come from an app—Shopify restricts native SMS collection in themes. *** ### ➕ Optional Sections for the Password Page You can add any non-product section: * `Text Block` * `Video` * `Image Stream` * `FAQ` * `Collection List` * `Preloader` * `Music Player` > 💡 Tip: Use an FAQ if you expect lots of launch questions from customers. ### **Need Help?** * 💬 **For Tech Shpport Join Us On Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Theme Versions + Features Table ### **Overview** We offer three theme versions — each built for different stages of your brand’s journey: | Theme | Best For | | ------------------------------ | -------------------------------------------------------------------------------------- | | **Plain Jane Starter** | Beginners who want a clean, essential Shopify setup with minimal distractions. | | **Plain Jane 3.0** | Growing brands looking for creative flexibility, performance, and enhanced features. | | **Plain Jane Interactive 2.0** | Advanced users who want maximum interactivity, experimental layouts, and immersive UX. | *** ### **What's Included in Each Theme** > ✅ = Included\ > ⭐ = Exclusive to Interactive 2.0+ You can also reference the comparison chart image below to see all features side-by-side at a glance. ### **Need Help?** * 💬 **For Tech Shpport Join Us On Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Theme Settings > These are global settings that affect the overall design, behavior, and structure of your Shopify store using the **Plain Jane** theme. *** ### **What Are Theme Settings?** Theme Settings control the **site-wide appearance and functionality** of your store. Unlike individual “Sections” that apply to specific pages (like your homepage or product template), Theme Settings apply across the **entire storefront** — from fonts and logos to animations and SEO. Use this section to fine-tune your store’s: * **Branding and identity** (logos, fonts, colors) * **Interactive elements** (custom cursors, music, animations) * **Conversion tools** (announcement bar, cart drawer) * **Page structure** (skip homepage, global navigation) * **Technical details** (SEO, Cart) *** ### **Available Settings** Here’s what each Theme Setting does (click to dive into individual pages): * **Announcement Bar** – Display store-wide promos or messages * **Animations** – Control entrance and hover animations * **Cart Drawer** – Customize your cart’s behavior and design * **Collection Layout** – Set the default grid and style for product collections * **Cursor Settings** – Upload a custom cursor image * **Footer Settings** – Manage your footer layout and links * **Global Menu Settings** – Configure site-wide navigation * **Music Player** – Add background music to your store * **Store Logos** – Upload and manage your logo(s) * **Store Clock** – Display the current store time * **Skip Homepage** – Optionally redirect users past the intro page * **SEO Settings** – Control key meta and index settings for discoverability * **Typography** – Select fonts and type styles *** ### 📌 Keep In Mind * These settings apply **site-wide** unless otherwise noted. * Most updates will reflect instantly in your live preview. * Always click **Save** after making changes in the theme editor. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Typography Settings For Plain Jane Starter, Plain Jane, and Plain Jane Interactive > **What You’ll Learn** > > * How to update fonts for different areas of your store > * How to upload and use custom fonts with URLs > * Font pairing tips for a clean visual hierarchy *** ### 🔧 Access Typography Settings 1. From your **Shopify Admin**, go to **Online Store > Themes** 2. Click **Customize** on your current theme 3. In the Theme Editor, open the **Theme Settings** panel (paintbrush icon) 4. Click on **Typography** to open the full font customization menu *** ### 🔠 Font Categories Each section controls fonts for a specific part of your store. You can choose from default fonts or enable a custom font. #### Center/Side Menu Enter Page Fonts * Controls font for your Enter page (center or side layout) #### Countdown Fonts * Used on the password page countdown timer #### Header Fonts * Applies to headings/titles sitewide #### Paragraph Fonts * Used for general text, including product descriptions and about pages #### Button Fonts * Applies to buttons across the theme #### Marquee Fonts * Only affects scrolling marquee/announcement text if used *** ### 🖋️ Enable Custom Fonts To use a custom font instead of the default: 1. Toggle **Enable Custom Font** 2. Enter the **Font Name** (e.g. `Superfresh`) 3. Paste the **Custom Font URL** for a `.woff` or `.woff2` file > ⚠️ File must be hosted in `.woff` or `.woff2` format. TTF or OTF files will not work. *** ### 🌐 How to Upload a Custom Font 1. Download a font you like (e.g. from [dafont.com](https://www.dafont.com)) 2. Convert the file to `.woff` or `.woff2` format using [cloudconvert.com](https://cloudconvert.com/) 3. Go to **Shopify Admin > Content > Files** 4. Click **Upload Files** and select your `.woff` file 5. After it uploads, click the **link icon** to copy the hosted URL 6. Return to **Theme Settings > Typography** and paste this URL into the **Custom Font URL** field *** ### ✅ Font Pairing Best Practices > 🎨 Use 2–3 fonts max for a clean, consistent design * **1 for Headings**: Something bold or stylized * **1 for Body Text**: A clean sans-serif or serif * **Optional**: 1 additional for marquee or enter screens > 💡 Tip: Avoid using too many fonts—it can make your store feel cluttered or unprofessional. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Logo Settings For Plain Jane Starter, Plain Jane, and Plain Jane Interactive > **What You’ll Learn** > > * How to upload different logos for each page type > * How to control logo sizing and visibility > * Best practices for logo format and dimensions *** ### 🔧 Access Logo Settings 1. From your Shopify Admin, go to **Online Store > Themes** 2. Click **Customize** next to your active theme 3. In the Theme Editor, click the **Theme Settings** icon (paintbrush) 4. Select **Logo** from the menu *** ### 🏠 Home Page Logo * Upload a custom logo under **Home Page Logo** * Use the slider or input to set **Logo Size (px)** * Toggle **Show Home Page Logo** to enable or disable it *** ### 📋 Global Menu Logo * Upload a logo that will appear in the Global Menu * Adjust size using the **Logo Size (px)** slider * Toggle **Show Global Menu Logo** to enable or disable it *** ### 🌐 Default Logo This logo appears on all pages that don’t have a specific override: * Upload your logo under **Default Logo** * Set the logo size in pixels * Toggle **Show Default Page Logo** *** ### 🛍️ Collection Page Logo * Upload a logo specific to collection pages * Use **Logo Size (px)** to control its dimensions * Toggle **Show Collection Page Logo** *** ### 📦 Product Page Logo * Upload a logo for product pages * Adjust using **Logo Size (px)** * Toggle **Show Product Page Logo** *** ### 🔒 Password Page Logo * Upload a logo for your password-protected landing page * Use **Logo Size (px)** to fit your design * Toggle **Show Password Page Logo** *** ### ✅ Best Practices > 💡 Tip: Use .PNG or .SVG format for high-quality, transparent logos * Keep logos under 500px wide for performance * Make sure background colors and logo contrast are accessible * If using the same logo site-wide, only upload to **Default Logo** and toggle off the others *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Main Theme Color The main theme color is the primary color that defines your brand's visual identity throughout the Plain Jane theme. This color appears in key elements like buttons, links, accents, and interactive components. ## 🌈 Understanding Theme Colors ### What the Main Color Controls Your main theme color influences: * **Primary buttons** (Add to Cart, Buy Now, Submit) * **Link colors** throughout the site * **Active menu states** and navigation highlights * **Form focus states** and input highlights * **Loading indicators** and progress bars * **Icon accents** and decorative elements * **Hover effects** on interactive elements ### Color Psychology in E-commerce Choose colors that align with your brand personality: #### Trust & Reliability * **Blue tones** (#2563EB, #1E40AF): Professional, trustworthy * **Green tones** (#059669, #047857): Growth, stability, money #### Energy & Urgency * **Red tones** (#DC2626, #B91C1C): Excitement, urgency, power * **Orange tones** (#EA580C, #C2410C): Enthusiasm, warmth, call-to-action #### Luxury & Sophistication * **Purple tones** (#7C3AED, #5B21B6): Premium, creative, luxury * **Black/Charcoal** (#1F2937, #111827): Elegant, sophisticated, modern #### Natural & Organic * **Earth tones** (#A3A3A3, #78716C): Natural, sustainable, authentic * **Soft greens** (#10B981, #059669): Eco-friendly, health, nature ## 🛠️ Setting Your Main Color ### Step 1: Access Theme Settings 1. **Navigate to Theme Customizer** * Go to **Online Store → Themes** * Click **Customize** on your Plain Jane theme 2. **Find Theme Settings** * Scroll down to **Theme settings** section * Look for **Colors** or **Main theme color** ### Step 2: Choose Your Color #### Using the Color Picker * **Click the color box** to open the picker * **Drag the circle** to select hue * **Adjust brightness** with the vertical slider * **Fine-tune with hex codes** for precise colors #### Hex Color Input Enter colors directly using hex codes: ``` #FF6B6B // Coral Red #4ECDC4 // Turquoise #45B7D1 // Sky Blue #96CEB4 // Mint Green #FFEAA7 // Warm Yellow #DDA0DD // Plum Purple ``` ### Step 3: Preview Changes * **Use preview mode** to see changes in real-time * **Test on different pages** (homepage, product, collection) * **Check mobile appearance** for consistency * **Verify readability** of text over colored elements ## 🎯 Best Practices ### Accessibility Considerations Ensure your color choices meet accessibility standards: #### Contrast Ratios * **Normal text**: Minimum 4.5:1 contrast ratio * **Large text** (18pt+): Minimum 3:1 contrast ratio * **Interactive elements**: Clear visual distinction ### Brand Consistency * **Match existing brand colors** from your logo and marketing materials * **Consider seasonal variations** for special campaigns * **Maintain consistency** across all touchpoints * **Document your color choices** for team reference ### Conversion Optimization * **High-contrast CTAs**: Make buttons stand out clearly * **Trust signals**: Blues and greens often perform well * **Urgency elements**: Reds and oranges for time-sensitive offers * **A/B testing**: Try different colors to optimize conversions ## 📱 Mobile Considerations ### Touch Target Colors * **Ensure sufficient contrast** for touch elements * **Test on actual devices** under different lighting * **Consider larger touch areas** with colored backgrounds * **Verify visibility** in bright sunlight ### Performance Impact * **CSS optimization**: Modern themes use efficient color rendering * **Avoid complex gradients** that might impact performance * **Test loading times** especially on slower devices ## 🐛 Troubleshooting ### Common Issues #### Color Not Appearing * **Clear browser cache** and reload the page * **Check theme settings** are saved properly * **Verify color format** (hex codes should include #) #### Poor Contrast * **Use darker colors** for better text readability * **Test with accessibility tools** to verify contrast * **Consider outlined buttons** instead of filled ones #### Inconsistent Display * **Check across different pages** for consistency * **Test on various devices** and screen types * **Verify CSS isn't being overridden** by custom code ### Performance Issues * **Simplify color schemes** if experiencing slowdowns * **Avoid animated color transitions** on low-end devices * **Use system colors** when possible for better performance # Music Player Settings For Plain Jane, and Plain Jane Interactive > **What You'll Learn** > > * How to enable and customize the built-in music player > * How to upload and configure your own audio files > * Advanced options including disk art, mobile display, and countdown integration > * Styling and positioning options for different devices *** ## 📂 Access Music Player Settings 1. From your Shopify Admin, go to **Online Store > Themes** 2. Click **Customize** next to your active Plain Jane theme 3. In the Theme Editor, open the **Theme Settings** panel (paintbrush icon) 4. Select **Music Player** from the menu *** ## 🎧 Basic Configuration ### **Enable Music Player** * **Show Music Player**: Toggle to enable the music player on desktop * **Show Music Player on Mobile**: Optional mobile display control * **Countdown Music**: Integration with password page countdown features ### **Audio File Setup** * **Music URL**: Upload your audio file (MP3, WAV, or OGG formats supported) * **Audio Preload**: Automatically preloads metadata for faster playback * **Autoplay**: Music starts playing when page loads (subject to browser policies) > 💡 **Note**: Modern browsers often block autoplay with sound until user interaction occurs. *** ## 🎨 Visual Customization ### **Disk Image Display** * **Show Disk**: Toggle to display a rotating disk/vinyl record aesthetic * **Disk Cover Image**: Upload custom album artwork (recommended: 200x200px minimum) * **Disk Rotation**: Animated spinning effect when music is playing ### **Player Controls** * **Music Player Button Color**: Customize play/pause button color * **Play Button**: Large, accessible play control * **Progress Bar**: Visual indicator of playback progress * **Navigation Controls**: Play/pause functionality *** ## 📱 Mobile Optimization ### **Mobile Display Options** * **Show Music Player on Mobile**: Control mobile visibility separately * **Mobile Play Alignment**: Automatic alignment adjustment when disk is hidden * **Responsive Design**: Player adapts to different screen sizes ### **Mobile-Specific Features** * **Touch-Friendly Controls**: Optimized button sizes for mobile * **Bandwidth Consideration**: Option to disable on mobile to save data * **Performance Optimization**: Lighter mobile experience *** ## 🎵 Advanced Features ### **Song Information Display** * **Current Track Name**: Displays in song bar * **Track Title**: Customizable track information * **Progress Tracking**: Real-time playback progress ### **Integration Options** * **Password Page Integration**: Music can play during countdown timers * **Theme Synchronization**: Coordinates with overall theme animations * **Cross-Page Continuity**: Music continues as users navigate (if configured) *** ## ⚙️ Technical Configuration ### **Audio Settings** * **Preload Metadata**: Faster initial load times * **Audio Element**: HTML5 audio with fallback support * **File Format Support**: MP3 (recommended), WAV, OGG * **Browser Compatibility**: Works across all modern browsers ### **Performance Considerations** * **File Size**: Keep audio files under 5MB for optimal performance * **Loading Strategy**: Metadata preload for balance of speed and functionality * **Mobile Data**: Consider mobile users' data usage *** ## 🎯 Best Practices ### **Audio File Preparation** * **Format**: Use MP3 for best compatibility and file size balance * **Quality**: 128-256 kbps provides good quality with reasonable file size * **Length**: Consider shorter loops or ambient tracks for background music * **Volume**: Normalize audio levels to prevent jarring volume changes ### **User Experience** * **Subtle Implementation**: Background music should enhance, not distract * **User Control**: Always provide clear play/pause controls * **Mobile Consideration**: Test on mobile devices with limited bandwidth * **Accessibility**: Ensure controls are keyboard accessible *** ## 🔧 Troubleshooting ### **Common Issues** **Music Won't Autoplay** * Modern browsers require user interaction before playing audio **Mobile Performance** * Large audio files can impact mobile performance * Consider disabling on mobile for data-sensitive users * Test on actual mobile devices, not just browser dev tools **File Loading Issues** * Ensure audio file URL is accessible * Check file format compatibility * Verify file size isn't too large ### **Browser Support** * **Chrome/Edge**: Full support for all features * **Safari**: May have stricter autoplay policies * **Firefox**: Good support with standard configurations * **Mobile Browsers**: Varies by device and browser *** # SEO Settings For Plain Jane Starter, Plain Jane, and Plain Jane Interactive > **What You’ll Learn** > > * How to upload a favicon and Apple Touch icon for branding > * Recommended dimensions and file formats for SEO image assets > * Best practices to optimize visual icons for site visibility *** ### 🧭 Access SEO Settings 1. From your Shopify Admin, go to **Online Store > Themes** 2. Click **Customize** next to your active theme 3. In the Theme Editor, open the **Theme Settings** panel (paintbrush icon) 4. Scroll down and select **SEO Settings** *** ### 📌 Favicon Image * Upload your **Favicon Image** to appear in the browser tab * This image will be automatically scaled to **32x32 pixels** > 💡 Tip: Use a square image (1:1 aspect ratio) for best clarity in tab view *** ### 🍏 Apple Touch Icon * Upload an **Apple Touch Icon Image** to show when visitors save your site to their mobile home screen (mostly used on iOS devices) * This image will be scaled down to **120x120 pixels** > ⚠️ Warning: Avoid overly detailed graphics. Stick to simple, high-contrast icons to maintain legibility when scaled down *** ### 🔧 File Format Recommendations * Use **.PNG** or **.JPG** format * Transparent background is optional, but preferred for favicons * Recommended file sizes: under **100 KB** to ensure fast load times *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Skip Home Screen For Plain Jane, and Plain Jane Interactive > **What You’ll Learn** > > * How to skip the homepage enter screen > * How to redirect users to a specific URL when they visit your store *** Some brands want customers to land directly on a product or collection page, skipping the homepage enter screen entirely. The **Skip Enter Screen** setting lets you do exactly that. #### How to Enable 1. Go to **Theme Settings** in the Shopify Theme Editor. 2. Scroll to **Home Page Settings**. 3. Toggle on **Skip Enter Screen**. 4. In the **Redirect URL** field, paste the full URL or relative path of the page you want visitors to land on. * Example: `/collections/all` or `/products/your-product` > ⚠️ Make sure the page you're linking to is published and accessible, or customers may land on a 404 page. *** ### 💡 When to Use This Feature * You want your store to feel more like a traditional online shop * You’re running a campaign and want users to land directly on a featured product or collection * You don’t need an intro or splash page for your brand *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Animations For Plain Jane and Plain Jane Interactive > **What You’ll Learn** > > * How to enable page load transitions > * How to control the speed of your page animations *** ### About This Setting The **Animations** setting in Plain Jane themes lets you control how your pages animate when they first load. This is a simple way to add polish and improve the visual flow of your site. *** ### Page Transitions #### Page Transition Animation Choose how your page appears when it loads: * **None** — No animation * **Fade In** — Smooth fade effect as the page loads #### Transition Duration * Adjust the time (in seconds) the animation lasts * Use the slider or input box (e.g. `1s`, `2s`) to fine-tune the speed > ✨ A 1-second fade is a balanced choice that feels smooth but not slow. *** ### When to Use It Use the Fade In animation if: * You want to reduce harsh transitions between pages * Your site includes large background images or video * You're aiming for a refined or cinematic aesthetic Avoid using if: * You want the fastest load times with no effects * Your store relies on rapid navigation between product pages *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Announcement Bar For Plain Jane, and Plain Jane Interactive > **What You’ll Learn** > > * How to enable and customize the announcement bar in Plain Jane > * How to style it uniquely for different page types *** ### Overview The **Announcement Bar** is a small banner that appears at the top of your store. It’s a great place to display important messages like promotions, restocks, or store policies. You can control whether this bar appears globally or on specific pages, and style it independently per page type. *** ### How to Enable 1. In the **Theme Editor**, go to the **Theme Settings** tab 2. Scroll down to the **Announcement Bar** section 3. Toggle **Show Announcement Bar** to turn it on > 💡 To show it on specific pages, enable these toggles: > > * **Show Announcement Bar on Home Page** > * **Show Announcement Bar on Collection Page** > * **Show Announcement Bar on Product Page** *** ### Settings Reference #### Message * **Announcement Text**: Add your announcement message (e.g., "FREE SHIPPING ALL WEEKEND") * **Text Font Size**: Adjust the size of the message text (in pixels) #### Page-Specific Styling Set different background and text colors per page type: * **Home Page** * Background Color * Text Color * **Collection Page** * Background Color * Text Color * **Product Page** * Background Color * Text Color * **Default (Other Pages)** * Background Color * Text Color > ⚠️ These overrides apply only when the announcement bar is enabled on those specific page types. *** ### Advanced Display Options * **Enable Shadow**: Adds a shadow behind the bar for better visibility * **Enable Scrolling Text**: Activates a ticker-style scroll animation * **Float Announcement Bar**: Keeps the bar fixed at the top while scrolling * **Curve Announcement Bar Corners**: Adds rounded edges to the bar * **Enable Larger Announcement Bar**: Increases the height for more impact *** ### Best Practices * Keep the message short and action-driven * Match text/background contrast for readability * Use scrolling or floating options for urgent alerts *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Cart Drawer For Plain Jane, and Plain Jane Interactive > **What You'll Learn** > > * How to enable and style the slide-out cart drawer > * Advanced customization options including backgrounds and FOMO timers > * How to optimize the cart experience for better conversions *** ## 📋 Overview The **Cart Drawer** is a slide-out panel that appears when a customer adds a product to their cart. It provides an improved shopping flow by letting users review their cart without leaving the current page, increasing conversion rates and enhancing user experience. > 💡 **Note**: This replaces the traditional cart page. You can use either the cart drawer or cart page, but not both simultaneously. *** ## 🔧 How to Enable 1. Go to **Theme Settings** > **Cart Drawer** 2. Toggle **Enable Cart Drawer** to `on` 3. Configure the customization options below *** ## 🎨 Basic Styling Options ### **Colors & Appearance** **Background Color** * Customize the main drawer panel background * Default: `#ffffff` (white) * Supports any hex color value **Text Color** * Controls general text color inside the drawer * Default: `#000000` (black) * Affects product names, quantities, and general content **Button Styling** * **Button Color**: Primary action button background (Add to Cart, Checkout) * **Button Text Color**: Text color on buttons * Default: Black background with white text ### **Drawer Dimensions** **Drawer Width** * Adjustable width from 300px to 320px * Default: `320px` * Optimized for mobile and desktop viewing *** ## ⏰ FOMO Timer Feature Create urgency and drive faster purchasing decisions with the built-in FOMO (Fear of Missing Out) timer. ### **Timer Configuration** **Show FOMO Timer** * Toggle to enable/disable the urgency timer * Default: Enabled **Timer Styling** * **FOMO Timer Background Color**: Alert banner background (default: `#ffeb3b` - yellow) * **FOMO Timer Text Color**: Timer text color (default: `#333333` - dark gray) **Timer Content** * **FOMO Timer Text**: Customizable urgency message * Default: "Offer expires in:" * Examples: "Limited time offer!", "Cart expires soon!", "Hurry! Only a few left!" **Timer Duration** * **FOMO Timer Duration**: Set countdown time (1-72 hours) * Default: 24 hours * Timer resets with each new cart session *** ## 💰 Price & Currency Options ### **Currency Display** **Show Price with Currency** * Toggle to display currency symbols/codes with prices * Default: Disabled (shows prices without currency indicators) * Useful for international stores or multi-currency setups *** ## 🖼️ Advanced Background Customization ### **Cart Items Background** Transform your cart drawer with custom background imagery: **Background Image** * Upload custom background image for cart items area * Supports standard image formats (JPG, PNG, WebP) * Recommended size: 500x600px or larger **Background Size Options** * **Cover**: Scales image to cover entire area (may crop) * **Contain**: Scales image to fit within area (shows entire image) * **Auto**: Uses image's natural size **Background Position** * **Center**: Centers image in available space * **Top Left**: Positions image at top-left corner * **Top Right**: Positions image at top-right corner * **Bottom Left**: Positions image at bottom-left corner * **Bottom Right**: Positions image at bottom-right corner *** ## 🚀 Best Practices ### **Design Recommendations** **Color Harmony** * Use colors that complement your overall theme * Ensure sufficient contrast for accessibility * Test readability across different devices **FOMO Timer Usage** * Use sparingly to maintain effectiveness * Choose urgent but not aggressive messaging * Test different duration settings for your audience **Background Images** * Use subtle, low-contrast images that don't interfere with text * Optimize image file sizes for faster loading * Consider mobile viewing experience ### **Conversion Optimization** **Clear Call-to-Actions** * Make checkout buttons prominent and accessible * Use contrasting colors for important buttons * Keep the path to purchase simple and obvious **Mobile Experience** * Test drawer functionality on actual mobile devices * Ensure touch targets are appropriately sized * Verify text remains readable on smaller screens **Loading Performance** * Optimize background images for web * Test drawer opening speed on slower connections * Monitor impact on overall page performance *** ## 🔧 Troubleshooting ### **Common Issues** **Drawer Not Appearing** * Verify "Enable Cart Drawer" is toggled on * Check if cart page is conflicting * Test adding products to trigger drawer **FOMO Timer Not Working** * Ensure timer is enabled in settings * Check browser localStorage support * Verify timer duration is set correctly **Background Image Problems** * Confirm image is uploaded correctly * Check image file size and format * Test different background size settings **Mobile Display Issues** * Test on actual mobile devices * Check drawer width on smaller screens * Verify touch functionality works properly *** ## 📱 Mobile Considerations * Drawer automatically adapts to mobile screen sizes * Touch-friendly controls and buttons * Optimized spacing for finger navigation * Simplified layout for smaller screens *** ## ⚡ Performance Tips * Keep background images under 200KB when possible * Use WebP format for better compression * Test loading times with various network speeds * Monitor impact on overall site performance *** # Clock Settings For Plain Jane Starter, Plain Jane, and Plain Jane Interactive > **What You’ll Learn** > > * How to show a live, real-time clock on your storefront > * How to set the timezone and adjust the display using an offset *** ### 🧭 Overview The **Clock** setting displays a real-time digital clock on specific layouts like the Center Menu. It syncs with the selected timezone and updates live on your storefront, adding a dynamic and global feel to your store. > 💡 This feature works best when paired with layouts where time or regional relevance is important (like product drops or localized campaigns). *** ### 🔧 How to Enable and Set Time 1. Go to **Theme Settings** > **Clock Settings** 2. Choose your timezone using the **Pick A Timezone** dropdown * Options include global zones like `America/New_York`, `Europe/London`, `Asia/Tokyo`, etc. 3. (Optional) Set a **Time Offset** in minutes: * Use a positive number to show the time ahead * Use a negative number to show the time behind > 💡 Offsets are helpful for syncing the clock display to brand launches or regional adjustments. *** ### 🌍 Timezone Support The timezone selector includes hundreds of options grouped by continent and region (e.g., `America/Los_Angeles`, `Asia/Seoul`, `Europe/Berlin`). Use this to: * Match your brand’s local time * Display local time for an international audience * Coordinate global launches, countdowns, or promos *** ### 📌 Notes * The Clock is only visible on templates or sections that support it (e.g., **Center Menu**, **Side-Aligned Menu** if enabled) * Time is displayed in **12-hour format** with real-time updates > ⚠️ If the clock doesn’t appear, double-check that your chosen layout includes it and that it's not hidden by custom code. *** ### 🧪 Common Use Cases * Real-time storefront branding ("Always Open" feel) * Local time awareness for international stores * Aligning your store to drop times or limited-time sales ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Collection Layout Settings For Plain Jane, and Plain Jane Interactive > **What You’ll Learn** > > * How to customize the layout of your collection pages > * How to adjust column count, spacing, image size, and hover effects *** ### 🧭 Overview The **Collection Layout** settings allow you to control how products are displayed on your collection pages across desktop and mobile. These options help create the ideal shopping experience that matches your brand's look and product range. *** ### 🖥️ Layout Options #### Desktop Columns * Choose how many products display per row on desktop: * Options: **2**, **3**, **4**, **5**, or **6** columns #### Mobile Columns * Choose how many products display per row on mobile: * Options: **One** or **Two** columns > 💡 Use fewer columns for large product images or premium items #### Column & Row Gaps Adjust spacing between products to control visual density: * **Column Gap (Desktop)** * **Row Gap (Desktop)** * **Column Gap (Mobile)** * **Row Gap (Mobile)** All values are measured in pixels (`px`) and adjustable via slider. *** ### 🖼️ Image Settings #### Product Image Size * Adjust the percentage size of the product image relative to its container (e.g., 100%) #### Product Image Aspect Ratio Choose how product images are shaped across your grid: * **Natural (Original Image Size)** * **Square** * **Portrait** * **Landscape** > 💡 Choose **Square** for a more uniform layout #### Show 2nd Product Image on Hover * Toggle this on to reveal the second image in a product listing when hovering on desktop * Commonly used to show alternate views or product angles *** ### 🧪 Common Use Cases * **Minimal Stores** — Use 2–3 columns and larger spacing * **High-Volume Stores** — Use 4–6 columns to display more products * **Interactive Displays** — Enable 2nd image hover for product engagement *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Cursor Settings For Plain Jane, and Plain Jane Interactive > **What You’ll Learn** > > * How to upload and apply a custom cursor > * Recommended dimensions and file formats > * Best practices for designing cursors that enhance usability *** ### 🎨 Accessing Cursor Settings To upload a custom cursor: 1. Go to **Shopify Admin > Online Store > Themes** 2. Find your **Plain Jane** theme and click **Customize** 3. In the Theme Editor, click the **Theme Settings** icon (paintbrush) 4. Scroll down and select **Cursor Settings** !\[Placeholder for Screenshot - Cursor Settings Panel] *** ### 📁 Uploading a Custom Cursor 1. Click **Upload Image** under Cursor Settings 2. Choose the image you want to use as your cursor 3. The preview will update immediately so you can see it live > 💡 You’ll still see the standard pointer (hand icon) when hovering over clickable elements like buttons or links. *** ### 📐 Recommended Image Details Choose an image that balances visibility and precision: * **Format:** `.PNG` with a transparent background * **Size:** 24×24 to 32×32 pixels is typical * **Click hotspot:** The cursor click registers from the **top-left corner** of the image > ⚠️ Large cursors can feel intrusive and affect click accuracy. *** ### 🎯 Design Tips When designing your cursor image: * Keep icons simple and high contrast * Include a visual pointer in the **top-left corner** for accuracy * Avoid centered designs unless intentionally offsetting the click zone > 💡 Tools like Photoshop or Figma are helpful for adding click indicators to your image. *** ### 🧪 Testing Your Cursor 1. Click **Save** in the Theme Editor 2. Open your live store in a new tab 3. Hover around your site: * The **custom cursor** will appear on most sections * The **default pointer** will still appear on clickable elements *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Footer Settings For Plain Jane, and Plain Jane Interactive > **What You’ll Learn** > > * How to configure footer content and email signup > * How to adjust layout, visibility, and typography > * How to control footer color styling for links, text, and backgrounds *** ### 🔧 Accessing Footer Settings 1. In your **Shopify Admin**, go to `Online Store > Themes`. 2. Click **Customize** on your active Plain Jane theme. 3. Click the **Theme Settings** icon (paintbrush). 4. Scroll down and open **Footer Settings**. *** ### 📅 Content & Data Use this area to customize your email signup form and basic footer messaging. * **Footer Email Header**: Headline text for the email form * **Email Description Text**: Descriptive line encouraging signup * **Email Placeholder Text**: Placeholder inside the email input field * **Privacy Policy Text**: Optional text to indicate data privacy * **Footer Submit Button Text**: Button label (e.g. "Subscribe") * **Footer Copyright Text**: Appears at the bottom of the footer > 💡 Tip: Keep the privacy text short and clear to boost trust. *** ### 🌐 Layout & Display Options Toggle visibility of different footer elements: * **Show Payment Types**: Displays accepted payment icons * **Hide Footer On All Pages**: Overrides and hides footer completely * **Show Footer On Home Page** * **Show Footer On Collection Pages** * **Show Footer Footer Copyright**: Toggles the copyright text * **Show Email Footer Signup**: Shows or hides the newsletter form *** ### 🎨 Typography Settings Fine-tune the text appearance: * **Footer Link Header Size (Desktop)**: Adjusts heading size for desktop * **Footer Link Size (Mobile)**: Controls mobile font sizing * **Copyright Font Size**: Smallest text in the footer, useful for disclaimers *** ### 🌈 Color Settings Fully customize the color palette used in the footer: * **Background**: Main footer background color * **Email Header / Description / Placeholder Text Color** * **Privacy Text Color** * **Input & Button Colors**: Text and background colors for form elements * **Link Colors**: * **Header Text**, **Links**, **Hover Background**, **Hover Text** * **Copyright Text**: Usually lighter or muted for subtlety > 🚨 Warning: Always check contrast between text and background for accessibility. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Global Menu Settings For Plain Jane, and Plain Jane Interactive > **What You’ll Learn** > > * How to assign a navigation menu to the global menu > * How to customize the icon, cart, search bar, colors, and typography *** ### ⚙️ Setup Instructions 1. In your Shopify Admin, go to **Online Store > Themes**. 2. Click **Customize** to open the Theme Editor. 3. In the left sidebar, click the **Theme Settings** icon (paintbrush). 4. Scroll to **Global Menu Settings**. *** ### 🔍 Choose a Menu * Assign your primary navigation using the **Choose a menu** dropdown. * You can create or edit menus in **Shopify Admin > Online Store > Navigation**. *** ### 🔹 Global Menu Icon * **Auto-inverse Icon Color**: Automatically switches icon color based on background * **Icon Color**: Set a fixed icon color if auto-inverse is turned off > 💡 Tip: Use auto-inverse for consistent readability across light/dark backgrounds. *** ### 🛒 Global Menu Cart Enable this to show a mini cart icon inside the global menu: * **Show Global Menu Cart**: Toggle visibility * **Cart Text Color**: Color of the label or total amount * **Cart Number Background Color**: Background behind item count * **Cart Number Color**: Text color of item count *** ### 🔍 Global Menu Search Bar Add a search field to your menu: * **Show Search Bar**: Toggle visibility * **Round Corners**: Apply border radius to the input field * **Search Background Color** * **Search Text Color** *** ### 🔹 Global Menu Background Color * **Background Color**: Choose the menu panel's background *** ### 🔎 Global Menu Link Colors Style navigation links by level: * **Top-Level, Second-Level, Third-Level Link Colors** * **Arrow Dropdown Color**: For submenu indicators * **Line Divider Color**: For spacing lines between links * **Font Size**: Adjust text size of all link levels *** ### 👤 Login Link * **Hide Login Link**: Toggle visibility of the customer account link > 🚨 Warning: Customer accounts must be enabled in Shopify Settings for login links to work. *** ### 🔧 Misc Settings * **Hide Global Menu on Collection Page (Desktop)**: Optionally remove the menu from specific templates *** ### 🚪 When to Use The Global Menu is ideal for: * Compact navigation that appears across all pages * Mobile-first layouts * Sites using the **Compact Menu** layout in sections *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Languages and SEO ### **What You’ll Learn** * How to customize the language and wording throughout your storefront * How to manage translated content with Shopify’s locale system * How to improve your store’s SEO setup using theme tools * How to configure icons and structured data for better visibility *** ### 🧩 Overview This section covers everything related to **language customization** and **search engine optimization** in your Shopify store. You’ll learn how to: * Edit **locale files** to customize labels, buttons, and default text * Upload a **favicon** and **Apple touch icon** to reinforce your brand identity * Configure **meta descriptions** to improve how your pages appear in Google * Enable **structured data (rich snippets)** for products and blog posts These settings are essential for building a multilingual, search-friendly store that looks polished and performs well across regions and devices. *** > 💡 Most of these settings can be found under **Theme Settings > SEO Settings** or within your Shopify Admin under **Online Store > Preferences**. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Language Files (Locales) ### **What You’ll Learn** * What locale files are and where they live in your theme * How to customize text labels throughout your storefront * How to add new languages and manage translations *** ### 🧩 What Are Locale Files? Locale files control all the translatable text in your Shopify theme. These are stored as `.json` files inside your theme's `locales` folder. Each file represents one language (e.g., `en.default.json` for English). You’ll see translations for things like: * Button labels (e.g., “Add to Cart”) * Section headings * System messages (e.g., “No products found”) *** ### 📁 File Location in Your Theme ```plaintext plain-jane-theme └── locales ├── en.default.json ├── fr.default.json └── es.default.json ``` Each file contains a set of **key-value pairs**, where the key is the identifier and the value is the translatable text. Example: ```json "products": { "product": { "add_to_cart": "Add to Cart" } } ``` *** ### ✏️ How to Edit Text Labels 1. From your **Shopify Admin**, go to **Online Store > Themes** 2. Click **Customize** next to your current theme 3. In the theme editor, click the **three-dot menu (⋯)** > **Edit default theme content** 4. Use the search bar to find any text you want to update (e.g., “Sold Out”) 5. Change the value and click **Save** > 💡 This is the easiest way to rename buttons like “Buy Now” or “Learn More” without touching code. *** ### 🌍 Adding or Managing Multiple Languages To offer your store in more than one language: 1. Go to **Settings > Languages** in your admin 2. Add the languages you want to support 3. Shopify will automatically generate the new `.json` locale files in your theme 4. You can then translate content using: * Shopify’s admin UI * Translation apps (like Weglot or Langify) * Manually editing the `.json` files (developer-level) > ⚠️ Be sure to update metafields and custom content for each language too if you're using those. *** ### 🧠 Developer Notes You can access locale strings in Liquid using the `t` filter: ```liquid {{ 'products.product.add_to_cart' | t }} ``` If you’re building or extending a theme, structure your locale keys by section or context (e.g., `header`, `footer`, `cart`, etc.) to keep things organized. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Update Favicon ### **What You’ll Learn** * How to upload a favicon to your Shopify store * How to set an Apple touch icon * How to enable SEO features like rich snippets *** ### 🧩 What Is a Favicon? A favicon is the small icon that appears in browser tabs, bookmarks, and mobile search results. It helps reinforce your brand visually across all browsing contexts. > 💡 Recommended size: **32x32px**, saved as a `.png` with a transparent background. *** ### How to Add or Update Your Favicon #### Step 1: Open Theme Settings 1. In the **Shopify Theme Editor**, click the ⚙️ **Theme settings** icon in the left sidebar 2. Scroll down and open the **SEO Settings** panel *** #### Step 2: Upload Your Favicon * Click **Select** under the **Favicon Image** field * Upload a square image (preferably 32x32 pixels) * Choose from your existing files or upload a new one The image will automatically be scaled and applied across all browser tabs. *** ### Add an Apple Touch Icon (Optional) This icon appears when a user saves your site to their iOS home screen. * Upload a 120x120px image under **Apple touch icon image** * This image should match your branding and have good contrast *** ### Enable Rich Snippets (Optional) These toggles help boost your visibility in search engines: * **Enable Product Rich Snippets**: Includes structured data for price, availability, and reviews * **Enable Article Rich Snippets**: Useful if your site includes blog content > ⚠️ These features assist search engines but do not guarantee rich results. Actual display is determined by Google. *** ### ✅ You’re Done! Once saved, your favicon will appear in: * Browser tabs * Bookmarks * Mobile device previews * Google search results (if eligible) Make sure to clear your browser cache if you don’t see the changes right away. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Meta Descriptions ### **What You’ll Learn** * What a meta description is and why it matters for SEO * How to add or update meta descriptions for products, pages, collections, and your homepage * Best practices for writing effective meta descriptions *** ### 🧩 What Is a Meta Description? A meta description is the short blurb of text that appears under your page title in search engine results. Example: > *Shop the latest from Plain Jane. Minimalist Shopify themes designed for creatives. Mobile-first, fast, and easy to customize.* While not a direct ranking factor, meta descriptions impact **click-through rate**, which can affect SEO over time. *** ### ✏️ Where to Edit Meta Descriptions in Shopify You can set a meta description for almost any page in Shopify: #### For Products, Collections, Pages, and Blog Posts: 1. Go to the **Shopify Admin** 2. Open **Products**, **Collections**, **Pages**, or **Blog Posts** 3. Scroll to the **Search engine listing preview** 4. Click **Edit website SEO** 5. Update the **Meta description** field 6. Click **Save** > 💡 Keep your meta descriptions under **155 characters** so they don’t get cut off in search results. *** #### For Your Homepage: 1. Go to **Online Store > Preferences** 2. Under **Title and meta description**, update the homepage’s meta description 3. Click **Save** *** ### ✍️ Meta Description Best Practices * Keep it clear and concise (1–2 sentences) * Include your main keyword or phrase naturally * Mention a unique selling point (free shipping, handmade, eco-friendly, etc.) * Use a call to action when relevant (Shop now, Learn more) *** ### ✅ You’re Done! Once saved, your meta descriptions will be included in your site's HTML for Google and other search engines to read. Changes may take several days to show up in search results. > ⚠️ Google may choose to override your meta description if it finds other content it considers more relevant. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Pages and Menus > **What You’ll Learn** > > * The purpose of each page type in the Plain Jane theme > * How to assign layouts and templates > * Where to find and customize page content *** ### 📄 What Are Layouts? In Shopify, a layout defines the structure of a page—what sections appear and in what order. Plain Jane uses custom layouts for homepage, product, collection, and password pages. You can assign a layout when editing a page in the **Admin > Online Store > Pages** or by selecting a **template** in the Theme Editor. *** ### 🔑 Common Page Types in Plain Jane | Page Type | Purpose | | --------------------- | ------------------------------------------------------------------------------- | | **Home Page** | The main landing page. Often includes the "Enter Screen" experience. | | **Collection Page** | Displays a grid of products under a category. | | **Product Page** | Shows details for a specific product. | | **Password Page** | Used when your store is password-protected. Includes optional timer. | | **Default Page** | Used for About, Contact, FAQ, and other content pages. | | **About Page** | Great for brand storytelling. Uses the default page template unless customized. | | **Lookbook Page** | Designed for showcasing curated image collections. | | **Interactive Space** | A dynamic, immersive layout available only in **Plain Jane Interactive**. | > 💡 Tip: You can assign any Shopify page to use a custom template from the Theme Editor sidebar. *** ### 🧩 How to Customize Layouts 1. Go to **Online Store > Themes** and click **Customize** 2. Use the top page selector dropdown to switch between: * `Home page` * `Collections > [Name]` * `Products > [Name]` * `Pages > [Name]` 3. Click on any section to edit, reorder, or delete it 4. Use **Add section** to insert new blocks like text, galleries, videos, etc. *** ### ⚙️ Template Assignment Tips * Use unique templates (e.g. `page.about.json`, `page.contact.json`) when you want a different section layout per page * Create and manage templates from your theme code or via the Shopify Editor *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Homepage + Menu For Plain Jane, and Plain Jane Interactive ### About Homepage Layouts Plain Jane offers a flexible homepage system designed to support a range of brand styles—from minimalist drops to content-heavy collections. The layout you choose determines how your navigation, visuals, and homepage flow is experienced by the user. This guide is focused on **Plain Jane 3.0** and **Plain Jane Interactive 2.0**. If you’re using **Plain Jane Starter**, you won’t have access to these homepage layouts. *** ### Available Homepage Layouts Plain Jane offers **three primary homepage layouts**, each built around a different menu/navigation structure: #### 1. **Center Menu** * Inspired by sites like Supreme * Logo centered at the top with links stacked underneath * Best for simple landing experiences * Often paired with a full-screen background > 🔗 See: [Center Menu](/plain-jane-interactive/pages-and-menus/homepage-+-menu/center-menu) *** #### 2. **Side-Aligned Menu** * Menu positioned vertically along the left side of the screen * Logo sits above or below the links * Clean and minimal look * Great for brands that want to emphasize visuals in the center of the screen > 🔗 See: [Side Aligned Menu](/readme-1/pages-and-menus/homepage-+-menu/side-aligned-menu) *** #### 3. **Compact (Hamburger) Menu** * Collapsed "hamburger" icon reveals menu drawer on click * Logo can be centered or aligned left/right * Ideal for brands that want to build scrolling homepages with multiple sections > 🔗 See: [Compact Menu Layout Setup](/readme-1/pages-and-menus/homepage-+-menu/compact-menu-layout-global-menu) *** ### Building Around the Layout Each menu layout is designed to work with: * **Dynamic Backgrounds**: Add solid colors, images, or slideshow backgrounds behind your menu * **Section Blocks**: Use homepage sections like Collection Lists, Product Carousels, or Image Streams to build scrollable content * **Page Canvas**: Use the `Page Canvas` section to structure your homepage when stacking multiple content blocks > 💡 **Tip:** Compact menu is best for scroll-heavy homepages. Center/Side menus work best as single-screen landing pages. *** ### Want to Skip the Homepage? You can bypass the homepage entirely by enabling **Skip Enter Screen** in Theme Settings. This will load a collection or product page as the first screen. > 🔗 Learn more: [Skip Homepage Setting](/readme-1/theme-settings/skip-home-screen) *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Center Menu > **What You’ll Learn** > > * How to build a homepage using the Center Menu layout > * How to connect your menu links and customize fonts, colors, and alignment *** ### About the Center Menu The **Center Menu** layout places your logo and navigation items stacked vertically in the center of the page. It’s inspired by brands like Supreme and is designed for stores that want a high-impact landing experience with minimal scroll. This layout works best with a strong background (image or video) and minimal homepage content. > ⚠️ The `Dynamic Background` section has been deprecated in the latest theme versions. All background customization should now be handled directly within the Center Menu section.
### How to Set It Up #### 1. Start with a Clean Canvas * In the Theme Editor, remove all sections except `Page Canvas`.
#### 2. Add the Center Menu Section * Click **Add Section > Center Menu** * Your logo and menu will appear centered on the page
#### 3. Connect Your Navigation Menu * In the Center Menu settings, select a Shopify menu from the dropdown * If you don’t have a menu yet: * Go to **Shopify Admin > Online Store > Navigation** and create one
*** ### Customizing the Center Menu #### Logo Settings * **Clock**: Enable or disable the live store clock display * **Date Format**: Choose your preferred date format * **Time Color**: Customize clock text color #### Menu Configuration * **Choose Menu**: Connect your navigation * **Alignment**: Align your links to the left, center, or right * **Show Login Link**: Optionally display a customer login button #### Styling Options * **Link Text Color** * **Link Text Color (on hover)** * **Link Background Color (on hover)** * **Link Font Size** * **Link Vertical Spacing** #### Social Media Icons * Add links for X, Instagram, TikTok, and more via the Social Media Link block under the section ***
### Background Options The Center Menu section allows the following background types: * **Solid Color**: Set different colors for desktop and mobile * **Image**: Upload background images per device * **Slideshow**: Add up to 3 rotating images * **Video**: Add a looping video background (Note: videos may not autoplay on iOS with Low Power Mode enabled) #### Additional Settings * **Section Height**: Set to Full Height or adjust manually * **Overlay Options**: * Control top and bottom overlay colors and opacity * Separate controls for desktop and mobile > 💡 Tip: Use overlays to help white or light text stand out against background images or video. ***
### When to Use This Layout Use the Center Menu layout when: * You want a bold, minimal homepage * You want the first interaction to be a simple menu with high visual impact * You want to drive traffic directly into collections or product pages *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Side Aligned Menu For Plain Jane and Plain Jane Interactive > **What You’ll Learn** > > * How to create a homepage using the Side-Aligned Menu layout > * How to customize background, menu links, and styling *** ### About the Side-Aligned Menu The **Side-Aligned Menu** layout places your logo and navigation vertically along the left side of the screen. This layout is clean and minimal, giving visual priority to your background or brand image. *** ### How to Set It Up #### 1. Start with a Clean Canvas 1. In the Theme Editor, remove all existing sections. 2. Keep only the `Page Canvas` section. 2\. Add the Side-Aligned Menu 1. Click **Add Section > Side-Aligned Menu** 2. Your navigation will now appear on the left side of the screen. 3. Select a **Shopify menu** to connect your navigation links. {% hint style="info" %} 💡 If you don’t have a menu yet, go to **Shopify Admin > Online Store > Navigation** to create one. {% endhint %} *** ### Customizing Your Menu Once added, you can configure the following: #### Menu Content and Behavior * **Choose Menu**: Connect a menu from your Shopify navigation * **Social Media Icons**: Click "Add Social Media Link" to add icons for X, TikTok, Threads, and more * **Show Login Link**: Choose to show it at the `Top`, `Bottom`, or hide it completely #### Logo and Link Styling * **Logo Alignment**: Left or Right * **Menu Alignment**: Align links left or right within the menu * **Link Text Color / Hover Color** * **Link Background Color (on hover)** * **Link Font Size and Vertical Spacing** #### Visual Effects * **Disable Highlight Effect**: Turns off the hover highlight style * **Enable Nav Scaling**: Enables animation for menu item scaling *** ### Background Customization The Side-Aligned Menu section includes built-in background options, so you no longer need to use the `Dynamic Background` section. In newer versions of the theme, `Dynamic Background` is deprecated for this layout. #### Background Style Options: * **Solid Color**: Set a color for desktop and mobile * **Image**: Upload different images for desktop and mobile * **Slideshow**: Add up to 3 rotating image slides * **Video**: Upload a video background (note: may not autoplay on iPhones with Low Power Mode) #### Additional Background Settings: * **Section Height**: Set to Full Height (100%) or custom * **Overlay Colors & Opacity**: * Separate control for top and bottom overlays * Independent settings for desktop and mobile > 💡 Tip: Use overlays to create contrast between text and background visuals. *** ### When to Use This Layout Use the Side-Aligned Menu when: * You want a clean, modern layout with vertical nav * Your background image or brand art is central to the experience * You don’t plan to use many scrollable sections on the homepage *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Compact Menu Layout (Global Menu) > **What You’ll Learn** > > * How to use the Compact Menu section in Plain Jane > * How to connect navigation using Global Menu settings > * Best practices for scrollable homepages > *** > > **What is the Compact Menu?** > > The **Compact Menu** is a section available in the Plain Jane theme that adds a "hamburger-style" navigation icon to the top of your homepage. When clicked, it opens a full menu drawer containing your navigation links. > > While the section is called **Compact Menu**, it connects to the navigation defined in your **Theme Settings > Global Menu Settings**. That’s why you may see it referred to both ways. > > This layout is best for brands that want: > > * A minimal, modern top bar with expandable navigation > * Full control over scrollable homepage content > * A clean visual experience for storytelling or drops > > *** > > **How to Add the Compact Menu** > > 1. In the Theme Editor, go to the **Sections** panel. > 2. Remove any existing menu sections (Center Menu, Side-Aligned Menu). > 3. Click **Add Section > Compact Menu**. > 4. You’ll see a hamburger icon appear in the top-right preview. > > *** > > **Connect Your Navigation** > > To make the drawer menu functional: > > 1. Go to **Theme Settings > Global Menu Settings**. > > 2. Select a Shopify menu (or create a new one via Shopify admin). > > 3. The menu will now appear when clicking the hamburger icon. > > > 💡 Tip: Update your navigation structure under **Online Store > Navigation** in your Shopify admin. > > *** > > **Customizing the Look** > > * **Logo Positioning**: Left, center, or right > * **Backgrounds**: Pair with a `Dynamic Background` section for color, image, or slideshow > * **Fonts & Sizes**: Tweak menu link size and spacing under **Theme Settings > Typography** > * **Sections**: Add other homepage sections such as: > * Collection List > > * Product Carousel > > * Image Stream > > > ⚠️ Use the `Page Canvas` section to wrap and structure all homepage sections. > > *** > > **When to Use the Compact Menu** > > Great for: > > * Scroll-heavy homepages > * Brands using visuals, videos, or carousels > * Mobile-friendly layouts > > Avoid if: > > * You want a single-screen landing page (use Center or Side-Aligned Menu instead) > > *** > > **Sample Build Workflow** > > 1. Add the `Compact Menu` section > 2. Add a `Dynamic Background` (image, color, or slideshow) > 3. Add key content sections (Collections, Products, etc.) > 4. Link navigation via Theme Settings > Global Menu Settings > 5. Tweak font sizes and logo position > > *** > > **Need Help?** > > * 💬 **Join our community on Discord:** > * 📧 **Email us at:** > * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Collection Page For Plain Jane, and Plain Jane Interactive > **What You’ll Learn** > > * The difference between Classic and Sidebar Collection layouts > * How to connect a custom menu to your collection pages > * Tips for displaying products and customizing design settings *** ### 🧱 Collection Layout Options Plain Jane includes **two layout types** for collection pages: | Layout Type | Description | | ---------------------- | --------------------------------------------------------------------------- | | **Classic Collection** | Minimal design with a fixed category menu and sort/search icons | | **Sidebar Collection** | Includes a customizable sidebar with advanced layout and background options | You can toggle between these layouts by enabling/disabling the `Classic Collection` or `Sidebar Collection` section in the **Theme Editor**. > 💡 Tip: Use only one collection section at a time (hide the other). *** ### 🔗 Connect a Custom Collection Menu To create a custom navigation menu for your collection page: 1. Go to **Online Store > Navigation** in the Shopify Admin 2. Click **Add menu** and name it (e.g. `Shop Menu`) 3. Add links for your categories (e.g. Tops, Bottoms, Accessories) 4. (Optional) Nest items for second/third-level dropdowns 5. Click **Save** Then: 1. Open the **Theme Editor** 2. Select **Collections > \[Your Collection]** from the top dropdown 3. Click on `Classic Collection` or `Sidebar Collection` 4. Under **Select Collection Menu**, choose the menu you just created *** ### ⚙️ Key Layout Settings #### 🧭 Menu Settings * **Position**: Left or right * **Text alignment**: Left, center, or right * **Font size and spacing**: Adjust top-level and nested menu link spacing #### 🎨 Style Settings * **Menu Colors**: Customize link, hover, and background colors * **Product Titles & Prices**: Show/hide, adjust size, and change colors * **Product Labels**: Enable "On Sale" tags with custom colors and size > 💡 Tip: Use consistent image dimensions (e.g. 1000x1000px) to align product grids. *** ### 🖼 Product Image Styling * **Product Frame**: Add a hover outline with adjustable color and thickness * **Image Corners**: Adjust background radius for sharp or rounded edges * **Background Color**: Only works if images are uploaded as transparent `.png` ``` To enable custom background colors: - Use transparent PNGs - Toggle "Make Background Transparent" off ``` *** ### 🔍 Search and Sort Controls * **Icon Position**: Left, center, or right * **Toggle Visibility**: Hide or show icons individually * **Color Settings**: Customize icon and background colors * **Search Bar Overlay**: Adjust opacity and background color When customers click the filter or sort icons: * Filter icon opens a draggable search overlay * Sort icon lets customers sort by price, newest, A-Z, or featured *** ### 🧰 Sidebar Collection Extras (Sidebar Layout Only) * **Upload Sidebar Skin**: Add a background image or pattern * **Sidebar Opacity**: Control transparency of sidebar * **Sticky Sidebar**: Enable fixed position as users scroll * **Sidebar Shadow**: Adds a subtle edge shadow for depth *** ### 🛠 Manual Product Sorting > ⚠️ Important: To control product order in a collection, set the sort type to **Manual**. Steps: 1. Go to **Products > Collections** in Shopify Admin 2. Choose your collection and click **Sort > Manual** 3. Drag and reorder products as needed This order will reflect on the front-end collection page. *** ### 📌 Notes on Product Images * Misaligned product titles/prices are usually caused by inconsistent image sizes * Use uniform square images (e.g. 1000x1000) for best visual alignment *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Classic Collection For Plain Jane Starter, Plain Jane, and Plain Jane Interactive ### What You’ll Learn * How to enable and configure the Classic Collection section on your Collection page * How to use built-in product sorting * How to adjust styling and labels
*** ### 1. Add the Classic Collection Section 1. In the Shopify admin, navigate to **Online Store > Themes**. 2. Click **Customize** on the active theme. 3. From the **Collection** page template, add the **Classic Collection** section. > 💡 Tip: This section supports sorting, product labels (preorder, on sale, out of stock), and detailed display settings. *** ### 2. Add and Configure Sorting Options You can add multiple sort types like "Featured", "Lowest Priced", and "Newest First". #### Steps: 1. Inside the **Classic Collection** section settings, add new **Sort Option** blocks. 2. For each one: * Set the **Option Title** (what your users will see) * Choose the **Sort By** method (e.g. Featured, Price, Date) *** ### 3. Style the Collection Layout The Classic Collection section provides many options for layout and typography: #### Cart & Header Settings: * Toggle date/time * Set cart icon colors #### Collection Menu: * Menu position and alignment * Link spacing and font size * Menu colors (hover, submenu, etc.) !\[Placeholder for Screenshot - Collection menu styling] #### Product Titles & Prices: * Font size and colors * Compare price styling * Currency format toggle *** ### 4. Label Controls Show or hide product labels and change their appearance: * **Pre-Order** * **On Sale** * **Out Of Stock** You can adjust label background, text colors, and font sizes. *** ### 5. Background & Icons Control the visual appearance of the section: * Product background colors and border radius * Search and sort icon colors and placement *** ### 6. Pagination Settings Choose between **infinite scroll** or **pagination** and style the navigation elements: * Set active page colors * Customize arrow icons and fonts ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Sidebar Collection For Plain Jane, and Plain Jane Interactive ### What You’ll Learn * How to configure the Sidebar Collection section * How to adjust cart, menu, product, and label settings * How to enable sort, search, and pagination behavior *** ### How to Customize the Sidebar Collection 1. **Navigate to Theme Editor** * From your Shopify admin, go to **Online Store > Themes** * Click **Customize** on your active theme * Open the **Collection** template and select the **Sidebar Collection** section 2. **Sidebar Menu** * Click **Select** to assign a menu * Position the sidebar on the **Left** or **Right** * Optionally **upload a skin image** to customize the background 3. **Sidebar Settings** * Adjust **Sidebar Opacity** using the slider (e.g. 1 px) * Set the **Background Color** (e.g. `#202020`) * Toggle **Enable Fixed Menu** or **Enable Sidebar Shadow** as needed 4. **Date & Time (Optional)** * Customize **Date/Time Colors** for desktop and mobile * Toggle **Show Date/Time** to display timestamps 5. **Sidebar Links** * Set **Text Alignment** (Left, Center) * Adjust spacing for **link levels** and **font size** * Customize colors: * **Menu & Cart Link Colors** * **Cart Text**, **Quantity**, and **Background** colors * **Mobile Colors** included 6. **Product Titles & Prices** * Customize **font size** and **text color** for titles and prices * Set **Compare Price Color** (e.g. red `#FF0000`) * Toggle display options: * Show Product Titles * Show Product Prices * Show Compare Prices 7. **Labels** * Set font size and background/text colors for: * Pre-Order * On Sale * Out of Stock * Toggle visibility of each label type 8. **Product Background** * Set **corner radius** and **background color** * Optionally make the background transparent 9. **Search & Sort Icons** * Set icon **position** and **colors** * Toggle visibility of **search/sort icons** and **swap icons** 10. **Search Bar** * Adjust **background opacity** and **colors** for: * Search box * Cancel button * Search results * Input field * Style corners and shadows optionally 11. **Sort Menu** * Customize: * Text & background colors for default and active options * Sort menu handle colors 12. **Pagination & Loading** * Choose **Pagination Type**: `Infinite Scroll` or `Page Numbers` * Set colors for: * Pagination Text * Active Page and its text * Pagination Arrows > 💡 Tip: Make sure to preview on both desktop and mobile views to confirm spacing, readability, and layout integrity. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Collection List Page For Plain Jane, and Plain Jane Interactive > **What You’ll Learn** > > * How to set up and style your Collection List page > * How to customize 3D Collection Cards > * Where to assign collections, images, and visual effects *** ### 🧭 Where to Find It In the Shopify Theme Editor: 1. Go to **Online Store > Themes** 2. Click **Customize** on your active theme 3. Use the top dropdown to navigate to `Collection list` *** ### 🗂 Section Overview The Collection List page is a stylized grid of selected collections using fully customizable **3D Collection Cards**. Each card can link to a specific collection and respond to mouse hover with visual effects and text overlays. #### 🧱 Collection Card Blocks Each card allows you to: * Select a specific **collection** to display * Assign **desktop** and **mobile featured images** * Control **hover effects** and text **alignment** * Adjust **colors**, **shadows**, **spacing**, and **hover animation** *** 🖼️ Setting the Featured Image > ⚠️ Featured images for Collection Cards are pulled directly from the collection setup in the Shopify Admin. 1. Go to **Shopify Admin > Products > Collections** 2. Click on the collection you want to use 3. Upload a featured image 4. Return to the Theme Editor to continue styling the card *** ### 🎛 Key Settings (per Collection Card) #### ✅ Visibility Toggles * `Show Collection Image` * `Show Header` * `Show Description` * Toggle hover-specific content (Image, Header, Description) #### 🌀 Card Effects (Desktop Only) * `Enable Tilt` * `Enable Tilt Glare` > 💡 Effects only display on the **live site**, not in the Theme Editor preview. #### 🎨 Colors * Background color * Hover background color * Header and description colors (default and hover) #### 🎯 Alignment and Position Adjust **header** and **description** alignment and pixel positioning using: * `Up/Down` and `Left/Right` sliders * Separate options for **default** and **hover** states *** ### 📐 Card Design Settings * **Card Curve**: Rounds the corners of the card (e.g., `30px`) * **Custom Hover Title & Description**: Optional text overlay on hover * **Card Background on Hover**: Upload alternate background image * **Gradient Overlays**: Add top/bottom gradients on hover with color + opacity *** ### 📏 Image Sizing * **Desktop Card Dimensions**: `740px x 350px` * **Mobile Card Dimensions**: `315px x 350px` > ⚠️ Ensure all your collection cards use consistent image sizes for a clean layout *** ### 🎵 Bonus Tip If using the **Music Player** section with Collection List, remember: > ⚠️ The music player **only works with direct `.mp3` file URLs.** Links to streaming platforms (e.g., Spotify, Apple Music) will not work. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Product Page For Plain Jane, and Plain Jane Interactive > **What You'll Learn** > > * The different product page layout options available in Plain Jane v3.1 > * How to switch between Product Section 2 and Product Section 3 layouts > * Key features and customization options for each layout > * Additional product-related sections and features *** ## 🎯 Available Product Sections Plain Jane v3.1 offers two main product page layouts: ### **Product Section 3** (Default Layout) A modern, flexible layout with advanced grid system, bottom modal features, and extensive customization options. This is the default section used in new Plain Jane v3.1 installations. **Key Features:** * Advanced grid-based image gallery * Bottom modal interface for mobile * Enhanced media handling (images, videos) * Advanced variant selection * Model information support * Color swatches and size charts * Mobile-optimized experience ### **Product Section 2** (Alternative Layout) A more traditional side-by-side layout with thumbnails and classic product information display. **Key Features:** * Traditional thumbnail gallery * Side-by-side image and product info layout * Configurable image positioning * Customizable gallery columns * Mobile-responsive design *** ## 🔧 How to Switch Between Layouts 1. Go to **Online Store > Themes > Customize** 2. Navigate to **Products > Default product** 3. In the product template editor: * Remove the current product section * Click **Add section** * Choose either: * **Product Section 3** (recommended for modern stores) * **Product Section 2** (traditional layout) *** ## 📱 Additional Product-Related Sections Plain Jane v3.1 includes several additional sections that enhance the product page experience: * **Related Products** - Show similar or complementary products * **Product Logo Section** - Customizable header with cart and navigation * **Product Page Background** - Custom backgrounds for product pages * **Product Navigation** - Enhanced navigation between products * **Product Typography** - Custom typography settings for product pages *** ## 📚 Detailed Documentation For complete setup instructions and customization options: * [Product Section 3 (Default)](https://github.com/OpenSpaces-Design/theme-documentation/blob/v3/plain-jane/pages-and-menus/product-page/broken-reference/README.md) - Modern layout guide * [Product Section 2 (Alternative)](https://github.com/OpenSpaces-Design/theme-documentation/blob/v3/plain-jane/pages-and-menus/product-page/broken-reference/README.md) - Traditional layout guide *** # Product Section (Showcase) For Plain Jane, and Plain Jane Interactive > **What You'll Learn** > > * How to set up and customize the "Showcase" product layout, the traditional side-by-side layout > * Configuration options for image galleries, positioning, and responsive behavior > * When to use this layout vs. the modern Thumbnail layout *** ## 🎯 What is the Showcase Layout? **Product Section (Showcase)** offers a traditional side-by-side product layout with thumbnail galleries and classic product information display. This layout is ideal for stores that prefer a more conventional e-commerce experience with familiar navigation patterns. **Key Features:** * Traditional thumbnail gallery system * Side-by-side image and product info layout * Configurable image positioning (left/right) * Customizable gallery columns and spacing * Mobile-responsive design with stacked layout * Classic product information hierarchy Available in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ *** ## 🔧 How to Enable Product Section (Showcase) 1. Go to **Online Store > Themes > Customize** 2. Navigate to **Products > Default product** 3. If another product section is currently active: * Click on the existing product section * Select **Remove section** 4. Click **Add section** 5. Select **Product Section (Showcase)** 6. Configure the layout and blocks as needed *** ## 📐 Layout Configuration ### **Image & Product Info Positioning** **Switch Product Info & Image** * Toggle to move product information to the left side * Default: Images on left, product info on right * Reversed: Product info on left, images on right **Image Gallery Setup** * **Reverse Additional Photos**: Control whether thumbnails appear above or below main image * **Gallery Column Amount**: Set number of thumbnail columns (1-6) * **Gallery Margins**: Adjust spacing around image gallery ### **Responsive Behavior** **Desktop Layout** * Side-by-side layout with configurable proportions * Image gallery takes approximately 60% width * Product information in remaining 40% space **Mobile Layout** * Automatically stacks to single column * Featured image displays first * Thumbnail gallery below main image * Product information follows images *** ## 🖼️ Image Gallery Options ### **Gallery Configuration** **Column Amount** * Set 1-6 columns for thumbnail display * Can be overridden per-product using metafields * Mobile automatically adjusts for optimal viewing **Image Sizing** * **Desktop Image Size**: Control maximum image dimensions * **Mobile Image Size**: Optimize for smaller screens * **Gallery Margins**: Fine-tune spacing between elements **Gallery Positioning** * **Place Additional Photos Under Main**: Move thumbnails below featured image * **Reverse Additional Photos**: Change thumbnail order * **Grid Gap**: Adjust spacing between thumbnail images ### **Image Display** **Featured Image** * Large main product image with zoom functionality * Click to open full-screen view * Smooth transitions between images * Support for multiple media types (images, videos) **Thumbnail Navigation** * Click thumbnails to change main image * Hover effects for better user feedback * Consistent aspect ratios recommended * Lazy loading for performance *** ## 📱 Mobile Optimization ### **Responsive Design** **Mobile Layout Behavior** * Automatic column stacking for mobile devices * Optimized thumbnail sizes for touch interaction * Simplified navigation for smaller screens * Improved loading performance **Touch Interactions** * Swipe gesture support for image navigation * Touch-friendly thumbnail sizing * Optimized button placement for mobile * Improved accessibility for touch devices *** ## ⚙️ Customization Options ### **Animation Settings** * **Fade Duration**: Control transition timing between images * **Page Transition**: Set overall page load animation * **Hover Effects**: Configure thumbnail hover behavior ### **Layout Fine-Tuning** * **Margin Controls**: Adjust spacing around all elements * **Alignment Options**: Control text and element positioning * **Color Customization**: Match your brand colors * **Typography Settings**: Control font sizes and styling *** ## 🛍️ Product Information Display Product Section (Showcase) maintains the traditional hierarchy of product information: ### **Information Order** 1. **Product Title**: Prominent heading 2. **Price Display**: Clear pricing with sale indicators 3. **Product Description**: Rich text content 4. **Variant Selection**: Size, color, and other options 5. **Quantity Selector**: Add to cart controls 6. **Action Buttons**: Add to cart and buy now buttons ### **Additional Features** * **Sale Badges**: Highlight discounts and promotions * **Stock Indicators**: Show availability status * **Product Reviews**: Integration with review apps * **Social Sharing**: Share buttons for social media *** ## 🎨 Best Practices ### **Image Guidelines** * Use consistent aspect ratios across all product images * Minimum 1000px width for sharp display * Include multiple angles and detail shots * Optimize file sizes for fast loading ### **Layout Considerations** * Test on various screen sizes and devices * Ensure information hierarchy is clear * Keep essential details above the fold * Use white space effectively for clean appearance ### **User Experience** * Make thumbnail navigation intuitive * Ensure fast image loading times * Test touch interactions on mobile devices * Provide clear calls-to-action *** ## 🔄 When to Use Product Section (Showcase) ### **Best For:** * Traditional retail brands * Stores with conventional customer expectations * Products that benefit from detailed thumbnail galleries * Brands wanting familiar e-commerce patterns ### **Consider Product Section (Thumbnail) Instead If:** * You want the most modern mobile experience * Your customers prefer app-like interactions * You need advanced features like bottom modals * Mobile optimization is your top priority *** ## 🚀 Performance Considerations * **Image Optimization**: Use WebP format when possible * **Lazy Loading**: Built-in for improved page speed * **Responsive Images**: Automatic size optimization * **Mobile Performance**: Optimized for slower connections *** # Product Section (Thumbnail) For Plain Jane, and Plain Jane Interactive > **What You'll Learn** > > * How to configure the "Thumbnail" layout, the default modern layout in Plain Jane v3.1 > * Advanced customization options including grid system, mobile modals, and media handling > * Best practices for product images, variants, and mobile optimization *** ## 🎯 What is the Thumbnail Layout? **Product Section (Thumbnail)** is the default, modern product layout in Plain Jane v3.1. It features an advanced grid-based image system, bottom modal interface for mobile, and extensive customization options. This section offers the most flexibility and modern UX patterns. **Key Features:** * Advanced grid-based image gallery * Bottom modal interface for mobile devices * Enhanced media handling (images, videos, 3D models) * Advanced variant selection with color swatches * Model information and size chart support * Mobile-optimized responsive design * Customizable gallery columns and spacing Available in: * ✅ Plain Jane v3.1+ (Default) * ✅ Plain Jane Interactive v2+ *** ## 🔧 How to Enable Product Section (Thumbnail) 1. Go to **Online Store > Themes > Customize** 2. Navigate to **Products > Default product** 3. Click **Add section** if not already present 4. Select **Product Section (Thumbnail)** 5. Configure the blocks and settings as needed > 💡 **Note**: Product Section (Thumbnail) is the default section in new Plain Jane v3.1 installations. *** ## 📱 Layout & Gallery Options ### **Image Gallery Configuration** **Gallery Column Amount** * Set number of columns for desktop gallery (1-6 columns) * Mobile automatically optimizes for smaller screens * Can be overridden per-product using metafields **Gallery Spacing** * Adjust margin between gallery and main image * Desktop and mobile image sizes can be customized * Grid gap and auto-rows settings for fine-tuning **Image Positioning** * Choose whether additional photos appear above or below main image * Reverse image and product info layout * Mobile-specific positioning options ### **Mobile Modal Experience** Product Section (Thumbnail) includes a sophisticated bottom modal system for mobile: * **Bottom Modal**: Slides up from bottom with product details * **Responsive Heights**: Automatically adjusts to content * **Touch-Friendly**: Optimized for mobile interactions * **Smooth Animations**: 0.3s transition timing *** ## 🛍️ Product Information Blocks Product Section (Thumbnail) supports modular blocks that can be reordered: ### **Core Blocks** * **Sale Badge** - Display sale/discount indicators * **Product Header** - Title and breadcrumb navigation * **Product Price** - Price display with sale pricing * **Product Description** - Rich text product description * **Product Variants** - Size, color, and other variant selectors * **Product Buttons** - Add to cart and buy now buttons ### **Advanced Blocks** * **Model Info** - Display model measurements and information * **Color Swatches** - Visual color selection interface * **Size Charts** - Pop-up or embedded size guides * **Custom Accordions** - Expandable content sections *** ## ⚙️ Advanced Customization ### **Color Swatches Setup** Enable visual color selection: 1. Add color metafields to your products 2. Configure swatch display options 3. Set up color variant connections **Learn more**: [Setting Up Color Swatches](/plain-jane-interactive/advanced/setting-up-color-swatches) ### **Model Information** Display model details for fashion products: 1. Add model metafields (height, measurements, size worn) 2. Configure display format and positioning 3. Customize styling and layout **Learn more**: [Setting Up Model Info](/readme-1/advanced/setting-up-model-info) ### **Size Charts** Add product-specific size guides: 1. Create size chart metafields 2. Upload size chart images or tables 3. Configure popup behavior **Learn more**: [Adding Size Charts](/readme-1/advanced/how-to-add-size-charts-to-each-product) *** ## 📐 Customization Options ### **Layout Settings** * **Switch Product Info & Image**: Reverse the layout order * **Reverse Additional Photos**: Control gallery positioning * **Gallery Column Amount**: 1-6 columns for desktop * **Gallery Margins**: Adjust spacing around images ### **Styling Options** * **Fade Duration**: Control page transition animations * **Mobile Image Sizes**: Optimize for different screen sizes * **Desktop Image Sizes**: Set maximum image dimensions * **Grid Gap**: Fine-tune spacing between images ### **Responsive Behavior** * **Mobile Layout**: Automatic optimization for mobile devices * **Tablet View**: Intermediate sizing for tablet screens * **Desktop Layout**: Full grid system with customizable columns *** ## 🎨 Best Practices ### **Image Optimization** * Use high-quality images (minimum 1000px width) * Maintain consistent aspect ratios across product images * Include lifestyle shots alongside product-only images * Optimize file sizes for fast loading ### **Product Information** * Write clear, compelling product descriptions * Use model information for fashion/apparel products * Include size charts for items requiring fit guidance * Set up color swatches for products with multiple colors ### **Mobile Experience** * Test the bottom modal functionality on actual devices * Ensure all interactive elements are touch-friendly * Keep important information visible without scrolling * Use appropriate image sizes for mobile viewing *** ## 🚀 Performance Tips * **Image Compression**: Use optimized image formats (WebP when possible) * **Lazy Loading**: Built-in lazy loading for better performance * **Mobile-First**: Design considers mobile experience as primary * **Grid Efficiency**: Advanced CSS Grid for optimal rendering *** # About Page For Plain Jane, and Plain Jane Interactive > **What You’ll Learn** > > * How to create and assign a custom About page template > * Recommended sections to include for a brand story > * Tips for layout, typography, and animations *** ### 🧭 How to Set Up an About Page 1. **Create a New Page in Shopify** * Go to **Online Store > Pages** * Click **Add Page** * Title it something like `About` or `Our Story` * Under **Theme template**, select: `page.about` * Click **Save** 2. **Add to Navigation (Optional)** * Go to **Online Store > Navigation** * Choose your header or main menu * Add a new menu item labeled `About` or `Our Story` * Link it to your new page 3. **Customize in the Theme Editor** * Go to **Online Store > Themes > Customize** * Use the page selector dropdown and choose `Pages > About` * You’ll see a blank canvas *** ### 🎨 Recommended Sections You can add any section, but for most brands we recommend: #### 📄 Text Block * Add a `Text Block` section for your story * Include a subtitle like “Our Story” * Paste your brand description or mission statement * Customize: * Font family and size * Text alignment * Text color * Animated text effects (e.g. Typewriter, Fade Up, Reveal) #### 🖼 Image Stream * Add a `Image Stream` section to display lifestyle or brand imagery * Optional: Add a “Shop All” link below the images * Customize: * Scroll speed * Layout (grid, stream, etc.) * Link destination > 💡 Tip: Add more sections such as FAQ, video blocks, product carousels, or hero images for a more dynamic layout. *** ### 📚 Building Tips * Use concise, emotionally resonant copy * Incorporate real team or behind-the-scenes images * Align all text and visual styles with your brand aesthetic * Keep the layout clean—avoid clutter *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Contact Page For Plain Jane Starter, Plain Jane, and Plain Jane Interactive ### What You’ll Learn * How to enable and customize the contact form on the contact page * How to edit text and styling for form inputs and buttons * How to adjust color settings *** ### Step 1: Enable the Contact Page Template 1. From your Shopify admin, go to **Online Store > Themes**. 2. Click **Customize** on your active theme. 3. In the page dropdown at the top center, choose **Pages > contact**. 4. Ensure the `Contact Message` and `Contact Form Colors` blocks are visible in the left-side panel. > 💡 Tip: The contact form is prebuilt into the "contact" template and doesn't need a separate app. *** ### Step 2: Customize the Contact Message 1. In the left sidebar, select **Contact Message**. 2. Edit the message text shown above the form (e.g., "Allow 3–5 business days for a response to your inquiry."). 3. Adjust the text color using the **Contact Content Text Color** picker. *** ### Step 3: Style the Contact Form 1. In the left sidebar, click on **Contact Form Colors**. 2. Customize each color field: * **Form BG Color**: background of the form * **Form Text Color**: input text * **Submit Button Color** and **Text Color** * **Home Button Color** and **Text Color** > 💡 Tip: Use high-contrast color pairs to ensure accessibility. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Lookbook Page For Plain Jane, and Plain Jane Interactive ## 🖼 Lookbook Overview > **What You’ll Learn** > > * What Lookbooks are and how they’re used in Plain Jane > * How many Lookbook templates are available > * How to organize multiple Lookbooks like an archive *** ### ✨ What Is a Lookbook? A Lookbook is a visual storytelling page used to showcase styled outfits, editorial campaigns, or curated collections. It’s perfect for fashion brands or creatives who want to show their products in a more immersive, design-forward way. Plain Jane includes **9 unique Lookbook templates** (`page.lookbook-1` through `page.lookbook-9`), allowing you to build multiple pages in this style. *** ### 🔢 How Many Can You Create? You can create **up to 9 different Lookbook pages** using the pre-made templates: * `page.lookbook-1` * `page.lookbook-2` * ... * `page.lookbook-9` Each template is editable through the Theme Editor and supports all section types, including image streams, text blocks, videos, and more. *** ### ✅ When to Use a Lookbook Use Lookbooks when you want to: * Create a visual landing page for styled campaigns * Highlight editorial or product drops * Inspire customers with creative brand storytelling *** ### 🔍 Next Steps * How to Create a Lookbook * Organizing Multiple Lookbooks * Lookbook Settings & Features *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # How to Create a Lookbook Page ### What You’ll Learn * 📝 How to create and assign a Lookbook page in Shopify * 🔗 How to link Lookbooks into your site's navigation * 🧩 How to structure multiple Lookbooks as part of an archive *** ### 1. Create a Lookbook Page To create a new Lookbook page: 1. Go to **Online Store > Pages** 2. Click **Add Page** 3. Name your page (e.g. `AW23 Campaign`, `Fall Collection`, etc.) 4. Under **Theme template**, select one of: * `lookbook-1`, `lookbook-2`, ..., up to `lookbook-9` 5. Click **Save** > 💡 You can create **up to 9 separate Lookbook pages**, each with its own content by using a different Lookbook template. *** ### 2. Link Your Lookbook in Navigation (Optional) To make your new Lookbook easy to access: 1. Go to **Online Store > Navigation** 2. Open your **Main Menu** (or another menu) 3. Click **Add menu item** 4. Name it something like `Lookbook`, `Campaigns`, or `Editorial` 5. For the link, choose **Pages > \[Your Lookbook Page]** 6. Click **Add**, then **Save** > 🔗 Want to showcase multiple Lookbooks like an archive? Use a dropdown menu with child links to each Lookbook page. *** ### 3. Open the Lookbook Page in the Theme Editor 1. Go to **Online Store > Customize** 2. Use the top dropdown to find and open the Lookbook page you just created 3. The page will load with the default **Lookbook** section ready for setup From here, you can start adding images and styling content. To learn how to do that, continue to the Lookbook Settings & Features guide. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Creating a Lookbook Archive > **What You’ll Learn** > > * How to organize multiple lookbooks into an archive-style layout > * How to link each lookbook individually > * Tips for naming and structuring your archive navigation *** ### 📂 What Is a Lookbook Archive? A lookbook archive is a curated collection of multiple lookbooks (up to 9) that showcase past or seasonal styles, campaigns, or editorial content. Each lookbook is built as a standalone page using the Lookbook templates, and then linked together to form an accessible archive. This is perfect for brands that want to: * Maintain a visual history of drops or collections * Share seasonal stories in a clean, navigable layout * Build long-term brand narrative without clutter *** ### 🧱 Step 1: Create Individual Lookbook Pages Each lookbook in your archive must be built using one of the 9 available Lookbook templates. 1. Go to **Online Store > Pages** 2. Click **Add Page** 3. Name the page (e.g. `Lookbook SS24`, `Campaign 01`, etc.) 4. Under **Theme Template**, choose one of the Lookbook templates: * `lookbook.1` * `lookbook.2` * … * `lookbook.9` 5. Click **Save** *** ### 🧭 Step 2: Add Lookbooks to Your Menu To make your archive accessible, you can create a custom menu structure. 1. Go to **Online Store > Navigation** 2. Choose your header or custom menu (e.g. “Lookbooks”) 3. Add the top-level item (e.g. `Lookbook Archive`) 4. Underneath, add **child links** for each individual lookbook page Example: ``` Lookbooks ├── SS24 Campaign ├── FW23 Lookbook ├── Editorial Drop 01 ``` > 💡 Tip: Use clear naming conventions like seasons or drop numbers to keep your archive organized. *** ### 📁 Optional: Create a Dedicated Archive Page Want a visual hub for your archive? 1. Create a new **Default Page** (e.g. `All Lookbooks`) 2. In the Theme Editor, assign the `page.default` template 3. Use sections like: * **Image Links** * **Collection List** * **Gallery Grid** This gives you full control over how your archive is presented while linking out to each lookbook page. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Lookbook Settings & Features ### What You’ll Learn * How to configure and style your Lookbook * Overview of all customization settings * How each feature impacts layout and display *** ### 📸 Lookbook Section Overview Once you've added the **Lookbook** section to a page, you’ll see a parent block for the entire Lookbook and multiple **Lookbook Item** blocks beneath it. Each Lookbook Item is a single image. You can add as many as you'd like to build your grid. > 💡 Tip: Click on any Lookbook image in the live preview to enter fullscreen gallery mode! *** ### 🔧 Lookbook Settings (Parent Block) Click on the **Lookbook** section (not the items) to access these settings: #### **Content & Data** * **Title** – Add a campaign name or title (e.g. `AW23 CAMPAIGN`) * **Description** – Add rich text or instructions * **Link Text + Link** – Add a call to action (e.g. “SHOP COLLECTION”) #### **Layout & Display** * **Header Alignment** – Left or Center * **Columns (Desktop)** – Control how many image columns appear (up to 6) * **Scroll Animation** – Enable smooth animation when scrolling * **Swipe Animation (Mobile)** – Adds swipe effects on touch devices #### **Typography** * Control font size and alignment for the title and description #### **Colors** Customize the color of: * Title, description, link * Caption text * Gallery controls (Close button, scroll bar, swipe animation) #### **Styling** * **Round Image Corners** – Adjust corner radius (e.g. 16px) #### **Spacing** Set margin space for titles and descriptions on both desktop and mobile *** ### 🖼️ Lookbook Item Settings Each **Lookbook Item** is just an image. To add or replace an image: 1. Click on the item block 2. Upload or choose an image You can add as many image blocks as you'd like under the Lookbook section. > 💡 Tip: The images will automatically arrange into the number of columns you set in the parent section. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Password Page For Plain Jane, and Plain Jane Interactive ### 🔒 What You’ll Learn * What the Password Page is used for * What’s new in Plain Jane v3.0 * Sections and features available on the Password Page *** The **Password Page** is a landing screen shown to visitors when your store is password-protected. This is useful for: * 🔧 Stores under construction * 🎁 Launching exclusive drops * 🕰️ Creating hype with countdowns and email collection In **Plain Jane v3.0**, the Password Page is completely customizable using drag-and-drop sections—just like the homepage. It now supports: * Timers with animations * Store owner login links * Email & SMS capture (via blocks or apps) * Custom unlock animations * Music players, preloaders, and more *** ### 📦 What’s Included By default, your password page includes: * **Text Block** – For headlines and info * **Store Owner Link** – Lets you (or early customers) unlock the store * **Timer** – Countdown to launch or access * **Music Player** – Optional background audio * Ability to add other theme blocks like: * Image Stream * FAQ * Embedded Email Signup * Custom Liquid > 💡 You can hide, re-order, or add new sections just like any other page in the Theme Editor. *** ### 🆕 What’s New in Plain Jane 3.0 | Feature | v2.0 | v3.0 ✅ | | ---------------------- | ---------- | ------------------- | | Section-based layout | ❌ Fixed | ✅ Yes | | Countdown timer block | ❌ Limited | ✅ Full control | | Email + SMS capture | ❌ Limited | ✅ Built-in | | Store unlock animation | ✅ Included | ✅ Included | | Custom styling options | ✅ Minimal | ✅ Advanced controls | > ⚠️ Important: Even when the timer finishes, you still need to manually disable password protection in **Online Store > Preferences** for customers to access your live store. *** ### 🛠️ Next Steps To begin customizing: * Go to **Online Store > Customize** * Use the dropdown to switch to the **Password** page * Start editing each section *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # How To Password Lock Store ### 🔐 What You’ll Learn * How to enable password protection on your Shopify store * How to set your store password * Why password-locking is useful for launches *** ### Step 1: Go to Preferences 1. In your Shopify admin, click **Online Store** 2. Then click **Preferences** 3. Scroll to the **Password Protection** section *** ### Step 2: Enable the Password Page 1. Check the box **"Restrict access to visitors with the password"** 2. Enter a **password** of your choice * This is what you'll give to team members or early access customers 3. Add an **optional message** that appears above the password box (e.g. "Coming Soon – Enter Password to View") 4. Click **Save** > 💡 Only visitors with this password can access your storefront. Others will see the Password Page. *** ### Step 3: Preview Your Password Page 1. Go to **Online Store > Customize** 2. Use the dropdown at the top to select **"Password"** from the page list 3. You'll now be in the live preview of your password page *** ### Use Case Ideas 🛠️ **Development Mode** – Hide your unfinished store while you build\ 🚨 **Product Drop** – Create hype with a countdown and unlock access at drop time\ 🎁 **VIP Access** – Email your password to subscribers for early entry > ⚠️ Reminder: When you're ready to launch, return to **Online Store > Preferences** and uncheck the password box. Otherwise, customers will stay locked out even after your timer finishes. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # How To Add and Set Timer ### ⏳ What You’ll Learn * How to add a countdown timer to your Password Page * How to set the correct launch time using UTC * How to style and position the timer *** ### Step 1: Open the Theme Editor 1. In your Shopify admin, go to **Online Store > Customize** 2. In the top dropdown, select **Password** 3. Look for the **Timer** section in the sidebar * If it’s not there, click **Add section > Timer** *** ### Step 2: Set the Countdown Time On the right-hand settings panel under **Countdown Timer**: * **Set your drop date and time** * Choose Month, Day, Year, Hour, and Minute * Select AM or PM * **Use UTC time** > ⚠️ IMPORTANT: Convert your local time to UTC so all visitors see the same countdown. > > Example:\ > If your launch is at 5PM EST, convert it to **9PM UTC**.\ > Use Google:\ > `5PM EST to UTC` ➜ `9PM UTC` *** ### Step 3: Adjust Timer Layout Under **Timer Positioning**: * Toggle **Center Timer** if it’s the only main element on the page * Set **Top Timer Margin** and **Bottom Timer Margin** for spacing *** ### Step 4: Style the Timer Under **Countdown Typography**: * Adjust font size for countdown numbers and labels (Desktop only) Under **Countdown Styling**: * Toggle labels: Days / Hours / Minutes / Seconds * Enable glow or boxes around numbers for visual flair * Set box border radius (Curve Countdown Box Corners) * Adjust transparency with **Countdown Box Opacity** Under **Countdown Colors**: * Change colors for box, numbers, and labels: * Countdown Box Color * Days / Hours / Mins / Secs Text + Label Colors *** ### Step 5: Save and Preview Click **Save** 💾 and refresh your live store to test the countdown. > 💡 Countdown is great for drops, presales, and new collection hype. Make sure to combine it with your unlock animation for the full effect. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # How To Collect Emails + SMS ### 📬 What You’ll Learn * How to add an email signup form to your password page * How to capture email subscribers inside Shopify * How to integrate SMS using third-party apps *** ### 📥 Step 1: Add an Email Signup Section 1. Go to **Online Store > Customize** 2. In the top dropdown, select **Password** 3. In the left sidebar, click **Add section > Email Signup** * Choose **Embedded Email Signup** (recommended) * Optional: Use **Popup Email Signup** if you prefer it to appear on delay *** ### ✍️ Step 2: Customize the Form In the section settings on the right: * **Title** – e.g. “Join Our VIP List” or “Early Access” * **Text** – Short description or campaign message * **Email Placeholder** – Default text inside the input field * **Button Text** – e.g. “Notify Me” or “Join Now” * **Success Message** – Confirmation after submission You can also adjust: * Fonts * Colors * Layout spacing > 💡 This form automatically collects emails in your Shopify Customers list. *** ### 📋 Step 3: View and Export Your Subscribers 1. Go to your **Shopify Admin > Customers** 2. New subscribers will show here with: * No orders * Email opt-in status marked 3. Click **Export** to download your list 4. Upload this list to: * **Klaviyo** * **Mailchimp** * **Omnisend**, etc. *** ### 📲 Step 4: Capture SMS Numbers (Optional) > ⚠️ Shopify does not allow themes to natively support SMS signup. > > You’ll need to use a third-party app such as: * **Postscript** * **Klaviyo** * **Yotpo SMSBump** #### Using a Custom Form 1. Build your form inside your SMS platform (like Klaviyo) 2. Copy the embed code 3. In Shopify, add a **Custom Liquid** section to your Password page 4. Paste the code there This is how you can add non-native forms and capture both email + SMS on the same page. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Using The Store Unlock Animation ### 🎬 What You’ll Learn * How the unlock animation works * How to enable it when the countdown ends * Important setup notes so customers can enter your store *** ### 🔓 What Is the Unlock Animation? When your countdown timer hits zero, the theme can show a branded **unlock animation**: * A smooth full-screen screen appears * Displays your **logo** and a customizable **“Enter” button** * Clicking “Enter” takes visitors into the store > 💡 This creates a polished moment to launch a drop or reveal your site. *** ### ✅ How To Enable It 1. In **Online Store > Customize**, go to your **Password Page** 2. Click the **Unlock Screen** section 3. Toggle **Enable Unlock Screen Animation** 4. Customize: * **Logo Image** * **Header Text** – e.g. “Welcome In” or “The Wait Is Over” * **Enter Button Text** * **Colors & Typography** > 💡 You can also adjust spacing, alignment, and background styles. *** ### ⚠️ Important: You Must Still Disable the Password **The unlock screen does not automatically remove your store password!** Once your timer ends: * Go to **Shopify Admin > Preferences** * Scroll to **Password Protection** * Uncheck **Enable password** * Click **Save** If you skip this step, even after users click “Enter,” they’ll still be blocked. *** ### 💬 Best Practice Be ready at your launch time to manually disable the password once the timer ends.\ This gives customers instant access when the animation finishes. > 🛑 We've seen frequent issues where customers can't enter because the password was never turned off. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Sections and Features ## Sections and Features Overview ### What You'll Learn 🧱 A full list of flexible, theme-native sections\ 🎯 Where and how to use them in Plain Jane and Interactive\ 🔀 How they combine with immersive or traditional layouts *** Plain Jane themes give you access to a wide range of reusable **sections** that can be stacked, styled, and re-ordered to create dynamic pages. These work across all versions — including *Plain Jane Starter*, *Interactive*, and *Standard*. > 💡 Sections can be added to **any page** via the Shopify Theme Editor — including your homepage, custom pages, password page, and now *inside Interactive Space layouts*. *** ### Supported Sections Here's a quick look at what's available out of the box: * **Blog Feed Section**\ Show recent blog posts with thumbnails, titles, and descriptions. * **Collection Display Section**\ Highlight a specific collection with optional call-to-action text and buttons. * **Collection List Section**\ Display multiple collections in a grid with customizable layout options. * **Dynamic Background Section**\ Create immersive page backgrounds with video, images, overlays, and animations. * **Email Signup (Popup)**\ Display a timed or exit-intent modal for email capture. * **Email Signup (Embed)**\ Add inline email signup forms anywhere on your pages. * **FAQ Section**\ Create expandable question and answer sections with custom styling. * **Hero Section**\ Large banner areas perfect for headlines, calls-to-action, and featured content. * **Image Selector Section**\ Interactive image galleries with hover effects and click actions. * **Image Stream Section**\ Flowing image galleries with scroll effects and custom layouts. * **Marquee Section**\ Scrolling text banners for announcements and promotional messages. * **Preloader Section**\ Custom loading screens with animations and brand elements. * **Product Carousel Section**\ Horizontal scrolling product displays with navigation controls. * **Text Block Section**\ Rich text content areas with advanced typography and layout options. * **Video Spotlight Section**\ Embedded video players with custom controls and overlay text. *** ### Section Categories **Content & Text** * [Text Block Section](/readme-1/sections-and-features/text-block-section) * [FAQ Section](/readme-1/sections-and-features/faq-section) * [Marquee Section](/plain-jane-interactive/sections-and-features/marquee-section) **Images & Media** * [Hero Section](/plain-jane-interactive/sections-and-features/hero-section) * [Image Selector Section](/readme-1/sections-and-features/image-selector-section) * [Image Stream Section](/plain-jane-interactive/sections-and-features/image-stream-section) * [Video Spotlight Section](/plain-jane-interactive/sections-and-features/video-spotlight-section) * [Dynamic Background Section](/readme-1/sections-and-features/dynamic-background-section) **Products & Commerce** * [Product Carousel Section](/plain-jane-interactive/sections-and-features/product-carousel-section) * [Product Header Section](/readme-1/sections-and-features/product-header-section) * [Product Logo Section](/readme-1/sections-and-features/product-logo-section) * [Collection Display Section](/plain-jane-interactive/sections-and-features/collection-display-section) * [Collection List Section](/readme-1/sections-and-features/collection-list-section) * [Collection Logo Section](/readme-1/sections-and-features/collection-logo-section) **Email & Engagement** * [Email Signup (Popup)](/plain-jane-interactive/sections-and-features/email-signup-popup) * [Email Signup (Embed)](/readme-1/sections-and-features/email-signup-embed) **Blog & Content** * [Blog Feed Section](/readme-1/sections-and-features/blog-feed-section) * [Blog Articles Section](/plain-jane-interactive/sections-and-features/blog-articles-section) * [Blog Background Section](/plain-jane-interactive/sections-and-features/blog-background-section) * [Blog Timezone Section](/plain-jane-interactive/sections-and-features/blog-timezone-section) **Utility & Effects** * [Preloader Section](/readme-1/sections-and-features/preloader-section) * [Related Products Section](/readme-1/sections-and-features/related-products-section) * [About Content Section](/readme-1/sections-and-features/about-content-section) * [About Home Button Section](/readme-1/sections-and-features/about-home-button-section) * [Contact Background Section](/readme-1/sections-and-features/contact-background-section) # Blog Feed Section ### What You'll Learn * How to display recent blog posts in Plain Jane or Interactive * How to customize layout, typography, and styling *** The **Blog Feed Section** lets you display a list of recent blog posts from a selected blog. This section is useful for showcasing updates, news, lookbooks, or editorial content directly on your homepage or any page that supports sections. > 💡 Tip: This section pulls from the "Blog posts" you've created in your Shopify admin under `Online Store > Blog posts`. You must have posts published for them to appear. ### How To Add the Blog Feed Section 1. From your Shopify Admin, go to **Online Store > Themes** 2. Click **Customize** next to your active theme 3. Use the dropdown at the top to select the page you want to add it to 4. In the left sidebar, click **Add section** 5. Select **Blog Feed Section** 6. Click **Save** *** ### Blog Feed Settings #### 📁 Content & Data * **Blog**: Select which blog (from Shopify admin) to display posts from * **Blog Header Title**: Customize the title that shows above the blog feed (e.g. "From Our Journal") #### 🖥️ Layout & Display * **Posts to Show – Desktop**: Number of articles to show on larger screens * **Posts to Show – Mobile**: Number of articles to show on smaller screens #### ✍️ Typography * **Title Size – Desktop / Mobile**: Control the size of your blog header text * **Bold Section Title**: Toggle to make the blog title bold #### 🎨 Colors Customize the appearance of each blog article's components: * **Background Color** * **Blog Title Color** * **Article Row Background Color** * **Article Border Color** * **Author Text Color** * **Article Title Color** * **Article Date Color** * **Article Tag Background/Text/Border Color** #### 💅 Styling * **Article Tag Border Radius**: Round the corners of the article tag background #### 📏 Spacing Set how much padding appears above/below the section: * **Top/Bottom Spacing – Desktop** * **Top/Bottom Spacing – Mobile** #### 🧑‍💻 Custom CSS Use the **Custom CSS** field to fine-tune the section with your own styles. *** > ⚠️ Warning: If no blog posts are published in the selected blog, this section will appear empty in the live store. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Blog Articles Section For Plain Jane and Plain Jane Interactive > **What You'll Learn** > > * How to display blog articles in a customizable card layout with advanced styling options > * Configuration options for article alignment, colors, dates, and animation effects > * How to create engaging blog article grids with fade-in animations and custom styling > * Best practices for blog page layout optimization and content presentation *** ## 🎯 What is the Blog Articles Section? The **Blog Articles Section** is a sophisticated article display system designed specifically for blog pages that showcases blog posts in a visually appealing card-based grid layout. Unlike the simple Blog Feed Section, this section provides extensive customization options for card styling, animations, alignment, and visual effects to create a professional, magazine-style blog presentation. **Key Features:** * Customizable article card layouts with rounded corners * Advanced alignment options for titles and dates * Fade-in animations with adjustable duration * Comprehensive color customization for cards, headers, and dates * Responsive design optimized for blog browsing * Automatic article pagination (up to 600 articles) * Integration with article images, titles, and creation dates * Professional card-based layout system Available in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **Note**: This section is specifically designed for blog template pages and automatically pulls articles from the current blog context. *** ## 🔧 How to Add Blog Articles Section 1. Go to **Online Store > Themes > Customize** 2. Navigate to **Blog posts > \[Your Blog]** or create a blog template page 3. Click **Add section** 4. Select **Blog Articles** section 5. Configure the styling, colors, and animation options 6. Position the section where you want articles to appear > ⚠️ **Important**: This section only works on blog template pages and requires existing blog articles to display content. *** ## 📄 Article Display & Layout ### **Automatic Article Loading** **Article Source** * Automatically loads articles from the current blog * Displays up to 600 articles with built-in pagination * Shows article images, titles, and creation dates * Links each article card to the full article page **Article Card Structure** * **Article Image**: Featured image from each blog post * **Article Title**: Customizable alignment and color * **Creation Date**: Optional display with custom color and alignment * **Card Background**: Customizable background color and corner radius **Grid Layout** * Responsive grid layout that adapts to screen size * Automatic spacing and alignment for professional appearance * Touch-friendly cards optimized for mobile browsing * Hover effects for better user interaction *** ## 🎨 Alignment & Typography ### **Article Title Alignment** **Title Positioning Options** * **Left**: Traditional left-aligned titles with left margin * **Center**: Centered titles for balanced appearance * **Right**: Right-aligned titles for alternative layout **Title Styling** * **Article Header Color**: Custom color for article titles * Text automatically adjusts position based on alignment choice * Consistent typography across all article cards * Responsive text sizing for mobile devices ### **Date Display Options** **Creation Date Settings** * **Display Article Created Date**: Toggle to show/hide publication dates * **Article Date Color**: Custom color for date text * **Date Alignment**: Coordinated with title alignment for consistency * **Date Format**: Uses Shopify's abbreviated date format (e.g., "Jan 15, 2024") *** ## 🎨 Card Styling & Colors ### **Article Card Customization** **Card Background** * **Article Card Color**: Background color for each article card * Default: White (#FFF) for clean, readable appearance * Supports any hex color or theme colors * Consistent background across all cards **Card Shape & Corners** * **Card Curve**: Adjustable border radius (0-10px) * Range from sharp rectangular cards to rounded modern cards * Default: 0px for clean, professional appearance * Creates consistent visual style across blog layout ### **Color Scheme Options** **Comprehensive Color Control** * **Article Header Color**: Title text color (default: Black #000) * **Article Date Color**: Date text color (default: Black #000) * **Article Card Color**: Card background color (default: White #FFF) * All colors support transparency and custom hex values **Visual Hierarchy** * Color choices create clear information hierarchy * High contrast options for accessibility compliance * Consistent color application across all article cards *** ## ✨ Animation & Effects ### **Fade-In Animation** **Animation Configuration** * **Fade-In Duration**: Adjustable from 0-8 seconds * Default: 2 seconds for smooth, noticeable effect * Creates professional page loading experience * Applies to entire article grid simultaneously **Animation Behavior** * CSS-based fade-in animation for performance * Triggers when section becomes visible * Smooth transition from transparent to full opacity * No impact on page load speed or SEO **Animation Timing** * 0 seconds: Instant display (no animation) * 1-3 seconds: Quick, subtle animation * 4-6 seconds: Slow, dramatic animation * 7-8 seconds: Very slow, cinematic effect *** ## 📱 Mobile Optimization ### **Responsive Design** **Mobile Layout** * Article cards automatically resize for mobile screens * Touch-friendly card size and spacing * Optimized image loading for mobile performance * Consistent typography scaling across devices **Mobile-Specific Features** * Fast loading article images * Touch-optimized card interactions * Responsive grid layout adaptation * Mobile-friendly date and title formatting **Performance Considerations** * Optimized image loading for mobile bandwidth * Efficient CSS animations that don't impact scrolling * Fast card rendering for smooth mobile browsing * Minimal JavaScript for better mobile performance *** ## 🔄 Integration with Blog System ### **Shopify Blog Integration** **Automatic Content Pulling** * Seamlessly integrates with Shopify's blog system * Automatically displays published articles * Respects article publication dates and status * Links directly to individual article pages **Article Metadata** * Displays article featured images * Shows article titles with custom styling * Includes publication dates with formatting options * Maintains article URL structure for SEO ### **Content Management** **Blog Management** * Works with any blog created in Shopify Admin * Automatically updates when new articles are published * Respects article visibility settings * Maintains proper SEO structure for blog content **Article Requirements** * Articles need featured images for optimal appearance * Article titles display automatically * Publication dates show creation time * All published articles appear in chronological order *** ## 🎛️ Advanced Customization ### **Design Strategy** **Professional Blog Layouts** * Use left alignment for traditional blog appearance * Choose center alignment for modern, magazine-style layout * Apply subtle corner radius (2-4px) for contemporary feel * Use high contrast colors for better readability **Color Coordination** * Match card colors with overall blog theme * Ensure title colors have sufficient contrast * Use consistent date colors across all cards * Consider brand colors for cohesive appearance ### **Animation Strategy** **Loading Experience** * Use 2-3 second fade-in for professional feel * Avoid very long animations (>4 seconds) for user experience * Consider no animation (0 seconds) for content-heavy blogs * Test animation timing on actual devices **Performance Balance** * Shorter animations reduce perceived loading time * Longer animations can create dramatic effect but may feel slow * Consider your audience and content style when choosing duration *** ## 🔧 Troubleshooting ### **Articles Not Displaying** **Common Issues** * No published articles in the current blog * Section added to non-blog template page * Blog articles missing featured images * Section settings need to be configured **Solutions** * Ensure blog has published articles with featured images * Verify section is added to correct blog template * Check article publication status in Shopify Admin * Configure section colors and settings properly * Test section on actual blog page, not in theme editor ### **Card Styling Issues** **Potential Problems** * Cards appearing with no background or borders * Text colors too light to be visible * Corner radius not applying correctly * Inconsistent card appearance **Solutions** * Set card color to contrast with page background * Increase color contrast for title and date text * Adjust corner radius settings and save changes * Clear browser cache after making style changes * Test card appearance with actual blog content ### **Animation Problems** **Common Problems** * Fade-in animation not working * Animation too slow or too fast * Animation causing performance issues * Animation not displaying on mobile **Solutions** * Verify fade duration is set above 0 seconds * Adjust animation timing for better user experience * Test animation on different devices and browsers * Consider reducing duration if performance issues occur * Check for CSS conflicts with custom code ### **Mobile Display Issues** **Potential Issues** * Cards too small on mobile devices * Text not readable on mobile screens * Images not loading properly on mobile * Layout breaking on different screen sizes **Solutions** * Test section on actual mobile devices * Ensure sufficient color contrast for mobile viewing * Verify article images are high-quality and properly sized * Check mobile layout in different orientations * Test loading speed on mobile connections *** ## 📊 Performance Impact ### **Loading Efficiency** **Optimized Performance** * CSS-based animations for smooth performance * Efficient article loading with pagination * Optimized image loading for featured images * Minimal JavaScript overhead **SEO Benefits** * Proper article linking structure * Clean HTML markup for search engines * Semantic article markup for better indexing * Fast loading times support SEO rankings **User Experience** * Smooth animations enhance perceived performance * Quick card interactions improve engagement * Responsive design ensures accessibility * Professional appearance builds trust *** ## 🎯 Best Practices Summary ### **Setup Checklist** ``` ✅ Ensure blog has published articles with featured images ✅ Add section to blog template page (not homepage) ✅ Configure article title alignment for your blog style ✅ Set card colors with sufficient contrast for readability ✅ Choose appropriate corner radius for your brand aesthetic ✅ Configure fade-in duration for good user experience (2-3 seconds recommended) ✅ Test article date display and formatting ✅ Verify mobile appearance and touch interactions ✅ Check color contrast for accessibility compliance ✅ Test loading performance with multiple articles ✅ Ensure article links work properly ✅ Verify animation performance on different devices ``` ### **Content Strategy** **Article Optimization** * Use high-quality featured images for all blog articles * Write compelling article titles that work with your chosen alignment * Maintain consistent publishing schedule for fresh content * Optimize article images for fast loading **Visual Consistency** * Use consistent color scheme across all blog articles * Maintain uniform image dimensions for better grid appearance * Apply consistent corner radius settings throughout blog * Create cohesive visual experience with other blog sections *** ## 🚀 Advanced Use Cases ### **Magazine-Style Blogs** **Professional Publishing** * Use center alignment for modern magazine layout * Apply subtle corner radius (3-5px) for contemporary feel * Choose sophisticated color schemes for professional appearance * Implement moderate fade-in animation (2-3 seconds) for elegance ### **Content-Heavy Blogs** **Information-Dense Layouts** * Use left alignment for traditional reading patterns * Minimize animation duration for faster content access * Ensure high contrast colors for optimal readability * Focus on clean, efficient card layouts ### **Brand-Focused Blogs** **Brand Integration** * Coordinate card colors with brand color palette * Use brand fonts through theme typography settings * Apply brand-appropriate corner radius styling * Create cohesive experience with other site sections *** The Blog Articles Section provides sophisticated article display capabilities that transform basic blog listings into engaging, professional content presentations with extensive customization options for alignment, styling, and animation effects. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Blog Background Section For Plain Jane and Plain Jane Interactive > **What You'll Learn** > > * How to create immersive blog page backgrounds with video, images, and color overlays > * Advanced configuration options for desktop and mobile background customization > * How to set up gradient overlays and opacity controls for professional blog aesthetics > * Best practices for blog background optimization and performance *** ## 🎯 What is the Blog Background Section? The **Blog Background Section** is a comprehensive background system designed specifically for blog pages that enables the creation of immersive, visually striking blog environments. This section provides advanced options for video backgrounds, separate desktop and mobile image backgrounds, color overlays, and gradient effects to create professional, magazine-quality blog presentations that enhance content readability and brand presence. **Key Features:** * **Video Backgrounds**: Auto-playing video backgrounds with mobile optimization * **Separate Desktop/Mobile Images**: Independent background images for different devices * **Gradient Overlays**: Customizable top-to-bottom gradient overlays with opacity controls * **Color Backgrounds**: Solid color backgrounds with separate desktop/mobile options * **Advanced Overlay System**: Professional overlay effects for content readability * **Performance Optimized**: Efficient loading and mobile battery considerations * **Responsive Design**: Automatic adaptation for different screen sizes and orientations Available in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **Note**: This section is optimized for blog template pages and provides sophisticated background options specifically designed for content-rich blog environments. *** ## 🔧 How to Add Blog Background Section 1. Go to **Online Store > Themes > Customize** 2. Navigate to **Blog posts > \[Your Blog]** or create a blog template page 3. Click **Add section** 4. Select **Background** section 5. Configure background type (video, image, or color) 6. Set up overlay options and responsive settings 7. Position the section as the first element for full-page coverage > ⚠️ **Important**: This section works best when added as the first section on blog template pages to create full-page background effects. *** ## 🎬 Video Background Options ### **Video Background Setup** **Video Configuration** * **Background Video URL**: Direct link to MP4 video file * **Show Background Video**: Toggle to enable/disable video background * **Auto-play**: Automatic video playback on page load * **Muted**: Videos start muted for better user experience * **Loop**: Continuous video playback for seamless background effect **Video Features** * **Responsive Design**: Automatically scales to fit different screen sizes * **Mobile Optimization**: Special handling for mobile devices and battery modes * **Performance Optimized**: Efficient video loading and playback * **Context Menu Disabled**: Prevents right-click on video for cleaner experience ### **Mobile Video Considerations** **Battery Mode Compatibility** * Automatic fallback when iPhone Low Battery Mode is enabled * Follows Apple's guidelines for video autoplay restrictions * Graceful degradation to image or color backgrounds on mobile * Option to show background images on mobile instead of video **Mobile Performance** * Optimized video compression for mobile bandwidth * Efficient loading strategies for cellular connections * Touch-friendly controls and interactions * Battery-conscious playback options *** ## 🖼️ Image Background System ### **Desktop Image Backgrounds** **Desktop Configuration** * **Desktop Background Image**: High-resolution image picker for desktop displays * **Show On Desktop**: Toggle to enable/disable desktop image background * **Automatic Scaling**: Images scale to cover full screen while maintaining aspect ratio * **Professional Quality**: Support for high-resolution images for crisp display **Desktop Optimization** * **Image Quality**: Master quality images for sharp desktop display * **Responsive Scaling**: Automatic adjustment for different desktop screen sizes * **Loading Optimization**: Efficient image loading for fast page display * **Visual Consistency**: Consistent appearance across different desktop resolutions ### **Mobile Image Backgrounds** **Mobile-Specific Images** * **Mobile Background Image**: Separate image picker optimized for mobile devices * **Show On Mobile**: Independent toggle for mobile image display * **Mobile Optimization**: Images optimized for mobile screen dimensions and bandwidth * **Portrait/Landscape Support**: Automatic adaptation for device orientation **Mobile Performance Features** * **Bandwidth Optimization**: Compressed images for faster mobile loading * **Touch-Friendly**: Optimized for touch interactions and mobile browsing * **Battery Efficiency**: Reduced processing overhead for better battery life * **Network Awareness**: Efficient loading for various mobile connection speeds *** ## 🎨 Color Background System ### **Solid Color Backgrounds** **Desktop Color Configuration** * **Desktop Background Color**: Custom color picker for desktop displays * **Hex Color Support**: Full hex color and theme color compatibility * **Brand Integration**: Easy coordination with brand color schemes * **High Contrast Options**: Support for accessibility-friendly color choices **Mobile Color Configuration** * **Mobile Background Color**: Independent color selection for mobile devices * **Responsive Color Strategy**: Different colors for different device contexts * **Mobile-Optimized Colors**: Colors chosen specifically for mobile readability * **Consistent Branding**: Maintain brand identity across device types ### **Color Strategy** **Professional Color Selection** * **Brand Coordination**: Colors that align with overall brand aesthetic * **Content Readability**: Background colors that enhance text readability * **Accessibility Compliance**: High contrast options for accessibility standards * **Visual Hierarchy**: Colors that support content organization and hierarchy *** ## 🌈 Advanced Overlay System ### **Gradient Overlay Configuration** **Desktop Overlay Options** * **Overlay Top Color**: Color for the top of gradient overlay * **Overlay Bottom Color**: Color for the bottom of gradient overlay * **Top Opacity**: Adjustable transparency (0-1) for top overlay color * **Bottom Opacity**: Adjustable transparency (0-1) for bottom overlay color * **180-degree Gradient**: Smooth top-to-bottom gradient transition **Mobile Overlay Options** * **Mobile Top Color**: Independent top color for mobile gradient * **Mobile Bottom Color**: Independent bottom color for mobile gradient * **Mobile Top Opacity**: Separate opacity control for mobile top overlay * **Mobile Bottom Opacity**: Separate opacity control for mobile bottom overlay ### **Overlay Effects** **Professional Overlay Applications** * **Content Readability**: Overlays improve text readability over complex backgrounds * **Brand Integration**: Colored overlays reinforce brand color schemes * **Visual Depth**: Gradient effects create professional visual depth * **Content Focus**: Overlays direct attention to blog content areas **Opacity Control Strategy** * **0.0**: No overlay effect (fully transparent) * **0.1-0.3**: Subtle overlay for slight content enhancement * **0.4-0.6**: Moderate overlay for balanced background/content visibility * **0.7-1.0**: Strong overlay for maximum content focus and readability *** ## 📱 Responsive Design Features ### **Device-Specific Optimization** **Desktop Experience** * **High-Resolution Support**: Full support for 4K and high-DPI displays * **Video Performance**: Optimized video playback for desktop hardware * **Large Image Support**: High-quality background images for large screens * **Desktop-Specific Colors**: Colors optimized for desktop viewing conditions **Mobile Experience** * **Touch Optimization**: Backgrounds optimized for touch interactions * **Battery Conservation**: Efficient rendering for mobile battery life * **Bandwidth Awareness**: Optimized assets for mobile data connections * **Orientation Support**: Automatic adaptation for portrait/landscape modes ### **Cross-Device Consistency** **Brand Consistency** * **Visual Continuity**: Consistent brand experience across all devices * **Color Coordination**: Coordinated color schemes for desktop and mobile * **Professional Appearance**: Maintains professional quality on all screen sizes * **User Experience**: Seamless experience regardless of device type *** ## 🔄 Background Type Combinations ### **Video + Overlay Strategy** **Professional Video Backgrounds** * Use video backgrounds for dynamic, engaging blog environments * Apply subtle overlays (0.2-0.4 opacity) to ensure content readability * Choose brand-appropriate overlay colors for visual consistency * Test video performance across different devices and connections ### **Image + Gradient Strategy** **Sophisticated Image Backgrounds** * Use high-quality images that complement blog content * Apply gradient overlays to create professional reading environments * Choose separate desktop/mobile images for optimal device experience * Coordinate gradient colors with overall blog design ### **Color + Mobile Image Strategy** **Performance-Optimized Approach** * Use solid colors for fast-loading desktop experience * Implement optimized images for mobile visual impact * Apply consistent overlay strategies across both approaches * Balance visual appeal with loading performance *** ## 🎛️ Advanced Configuration ### **Professional Setup Strategy** **Content-First Approach** * **Readability Priority**: Choose backgrounds that enhance rather than compete with content * **Brand Integration**: Coordinate all background elements with brand identity * **Performance Balance**: Balance visual impact with loading speed * **User Experience**: Prioritize user experience over visual complexity **Visual Hierarchy** * **Background Role**: Backgrounds should support, not overwhelm content * **Color Psychology**: Use colors that support content mood and brand message * **Overlay Strategy**: Use overlays to create clear content focus areas * **Responsive Consideration**: Ensure background works across all device types ### **Performance Optimization** **Loading Strategy** * **Image Optimization**: Use appropriately sized images for each device type * **Video Compression**: Choose video files optimized for web delivery * **Progressive Loading**: Implement backgrounds that load efficiently * **Fallback Options**: Provide color fallbacks for slow connections **Mobile Optimization** * **Battery Awareness**: Consider mobile battery impact when choosing background types * **Bandwidth Consideration**: Optimize for various mobile connection speeds * **Performance Monitoring**: Test background performance on actual mobile devices * **User Experience**: Prioritize mobile user experience in background choices *** ## 🔧 Troubleshooting ### **Video Background Issues** **Common Problems** * Video not auto-playing on mobile devices * Video backgrounds causing performance issues * Video not loading or displaying properly * Audio playing despite muted setting **Solutions** * Verify video URL is direct link to MP4 file * Check mobile device Low Battery Mode settings * Test video file size and compression for web delivery * Ensure video files are properly formatted for web playback * Verify "Show Background Video" toggle is enabled ### **Image Background Problems** **Potential Issues** * Images not displaying on specific devices * Image quality appears pixelated or blurry * Images not covering full background area * Different images not switching properly between devices **Solutions** * Upload high-resolution images appropriate for target screen sizes * Verify "Show On Desktop" and "Show On Mobile" settings * Check image file formats are web-compatible (JPG, PNG) * Test background display on actual devices * Ensure image files are properly uploaded and saved ### **Overlay Configuration Issues** **Common Problems** * Overlays too strong, making content unreadable * Overlays not displaying correctly * Different overlay colors between desktop and mobile * Gradient effects not appearing smooth **Solutions** * Adjust opacity settings for better content visibility * Test overlay combinations for optimal readability * Verify overlay colors are properly configured for each device * Check browser compatibility for gradient effects * Clear browser cache after making overlay changes ### **Performance Problems** **Potential Issues** * Blog pages loading slowly with background elements * Video backgrounds causing browser lag * Mobile performance issues with background images * Background elements not loading on slow connections **Solutions** * Optimize video file sizes for web delivery * Compress background images without quality loss * Test loading speed on various connection types * Consider simpler background options for performance-critical situations * Monitor mobile performance and battery impact *** ## 📊 Performance Impact ### **Loading Efficiency** **Optimized Performance** * **Efficient Asset Loading**: Optimized loading strategies for different background types * **Device-Specific Optimization**: Separate assets for optimal device performance * **Progressive Enhancement**: Graceful degradation for slower connections * **Battery Consideration**: Mobile-optimized approaches for battery conservation **SEO Considerations** * **Loading Speed**: Fast-loading backgrounds support SEO rankings * **Mobile Performance**: Mobile optimization directly impacts search rankings * **User Experience**: Better performance leads to better user engagement metrics * **Accessibility**: Properly configured backgrounds support accessibility standards *** ## 🎯 Best Practices Summary ### **Setup Checklist** ``` ✅ Choose background type appropriate for blog content and brand ✅ Upload high-quality images optimized for web delivery ✅ Configure separate desktop and mobile background options ✅ Set up overlay colors and opacity for optimal content readability ✅ Test video backgrounds on multiple devices and connection speeds ✅ Verify mobile performance and battery impact ✅ Check background display across different browsers ✅ Test accessibility and readability with background elements ✅ Optimize asset sizes for fast loading ✅ Configure fallback options for slow connections ✅ Test responsive behavior across device sizes ✅ Verify brand consistency across all background options ``` ### **Content Strategy** **Visual Coordination** * **Brand Alignment**: Ensure all background elements support brand identity * **Content Readability**: Prioritize content visibility over visual complexity * **User Experience**: Choose backgrounds that enhance rather than distract * **Performance Balance**: Balance visual impact with loading performance **Professional Implementation** * **Quality Standards**: Use high-quality assets appropriate for professional blogs * **Consistency**: Maintain visual consistency across all blog pages * **Accessibility**: Ensure backgrounds meet accessibility standards * **Mobile Experience**: Optimize specifically for mobile blog reading *** ## 🚀 Advanced Use Cases ### **Editorial Blogs** **Magazine-Style Backgrounds** * Use sophisticated image backgrounds with subtle overlays * Implement gradient effects for professional editorial appearance * Choose colors that complement article photography * Create immersive reading environments for long-form content ### **Brand Blogs** **Brand-Integrated Backgrounds** * Use brand colors in overlay systems for consistent identity * Implement brand imagery in background selections * Create cohesive visual experience with other brand touchpoints * Balance brand expression with content readability ### **Content-Heavy Blogs** **Performance-Optimized Backgrounds** * Prioritize fast-loading color backgrounds for content focus * Use minimal overlay effects to reduce visual complexity * Implement efficient loading strategies for content-first experience * Choose backgrounds that support sustained reading experiences *** The Blog Background Section provides sophisticated background capabilities that transform basic blog pages into immersive, professional content environments with extensive customization options for video, images, colors, and overlay effects. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Blog Timezone Section For Plain Jane and Plain Jane Interactive > **What You'll Learn** > > * How to add a clock and logo display to blog pages for professional branding > * Configuration options for date and time display with custom colors > * How to integrate timezone-aware clock functionality with blog layouts > * Best practices for blog header optimization with logo and time display *** ## 🎯 What is the Blog Timezone Section? The **Blog Timezone Section** (also known as the Clock section) is a specialized header component designed for blog pages that combines logo display with real-time clock functionality. This section provides a clean, professional way to show your brand logo alongside current date and time information, creating a sophisticated blog header that reinforces brand presence while providing useful temporal context for your content. **Key Features:** * **Logo Display**: Automatic logo display with customizable sizing * **Real-Time Clock**: Live date and time display with timezone awareness * **Color Customization**: Separate color controls for date and time elements * **Responsive Design**: Optimized layout for both desktop and mobile viewing * **Brand Integration**: Seamless integration with existing brand assets * **Clean Layout**: Minimalist design that doesn't compete with blog content * **Fallback Logo**: Automatic fallback to default logo if custom logo isn't uploaded Available in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **Note**: This section is specifically designed for blog template pages and provides timezone-aware clock functionality using your store's configured timezone settings. *** ## 🔧 How to Add Blog Timezone Section 1. Go to **Online Store > Themes > Customize** 2. Navigate to **Blog posts > \[Your Blog]** or create a blog template page 3. Click **Add section** 4. Select **Clock** section 5. Configure logo display and clock color options 6. Position the section in your blog header area 7. Save and test the real-time clock functionality > ⚠️ **Important**: This section works best in blog header areas and uses your store's timezone settings configured in Shopify Admin. *** ## 🏢 Logo Display System ### **Logo Configuration** **Automatic Logo Display** * **Shop Logo**: Uses logo uploaded in Theme Settings > Logo * **Logo Size**: Controlled by "Logo Size" setting in Theme Settings * **Fallback Logo**: Displays default "Supreme-dummy.png" if no custom logo uploaded * **Responsive Sizing**: Logo automatically scales based on configured size settings * **Link Integration**: Logo links directly to store homepage (root URL) **Logo Features** * **High-Quality Display**: Supports high-resolution logos for crisp appearance * **Lazy Loading**: Optimized image loading for better performance * **Responsive Design**: Logo scales appropriately for mobile devices * **Brand Consistency**: Maintains consistent branding across blog pages ### **Logo Setup Requirements** **Logo Configuration Steps** 1. Upload logo in **Theme Settings > Logo > Shop Logo** 2. Set appropriate logo size in **Theme Settings > Logo > Logo Size** 3. Logo automatically appears in Blog Timezone Section 4. Test logo display and sizing on different devices 5. Verify logo links correctly to homepage **Logo Best Practices** * Use high-resolution logo files for crisp display * Choose logo size appropriate for blog header space * Ensure logo has transparent background for clean integration * Test logo visibility against various blog background colors *** ## ⏰ Clock Display Features ### **Date & Time Display** **Real-Time Clock Functionality** * **Live Date Display**: Shows current date based on store timezone * **Live Time Display**: Shows current time with real-time updates * **Timezone Integration**: Uses timezone configured in Shopify Admin * **Automatic Updates**: Clock updates in real-time without page refresh * **Professional Format**: Uses clean, readable date and time formatting **Clock Display Elements** * **Date Container**: Shows current date with custom color control * **Time Container**: Shows current time with independent color control * **Responsive Layout**: Clock elements stack appropriately on mobile devices * **Clean Typography**: Professional font styling that matches blog design ### **Clock Configuration Options** **Display Controls** * **Show Date/Time**: Toggle to enable/disable entire clock display * **Date Color**: Custom color picker for date text * **Time Color**: Independent color picker for time text * **Default Colors**: Both default to black (#000) for maximum readability **Color Customization** * **Separate Controls**: Independent color settings for date and time * **Brand Integration**: Colors can match overall blog color scheme * **Accessibility Support**: High contrast color options for better readability * **Hex Color Support**: Full hex color and theme color compatibility *** ## 🎨 Visual Design & Styling ### **Layout Structure** **Container Design** * **Logo Container**: Clean container for logo display and linking * **Date-Time Container**: Organized container for clock elements * **Responsive Layout**: Elements stack and resize appropriately for mobile * **Clean Spacing**: Professional spacing between logo and clock elements **Visual Hierarchy** * **Logo Prominence**: Logo positioned prominently for brand recognition * **Clock Integration**: Clock elements positioned to complement, not compete with logo * **Balance**: Well-balanced layout that works with various blog designs * **Professional Appearance**: Clean, sophisticated design suitable for business blogs ### **Color Strategy** **Professional Color Coordination** * **Brand Alignment**: Colors should coordinate with overall brand palette * **Readability Priority**: Ensure sufficient contrast for easy reading * **Consistency**: Use consistent colors across all blog page elements * **Accessibility**: Choose colors that meet accessibility standards **Color Application Examples** * **Traditional**: Black (#000) for both date and time for classic appearance * **Brand Colors**: Use brand colors for subtle brand reinforcement * **Accent Colors**: Use accent colors that complement blog background * **High Contrast**: Ensure colors contrast well with blog background *** ## 📱 Mobile Optimization ### **Responsive Design** **Mobile Layout Adaptation** * **Logo Scaling**: Logo automatically resizes for mobile screen dimensions * **Clock Layout**: Date and time elements stack appropriately on smaller screens * **Touch-Friendly**: Layout optimized for mobile touch interactions * **Performance**: Efficient rendering for mobile devices **Mobile-Specific Features** * **Bandwidth Optimization**: Efficient logo loading for mobile connections * **Battery Efficiency**: Clock updates designed to minimize battery impact * **Touch Targets**: Appropriate sizing for mobile touch interactions * **Readable Typography**: Font sizes optimized for mobile reading ### **Cross-Device Consistency** **Consistent Experience** * **Brand Recognition**: Logo appears consistently across all devices * **Clock Functionality**: Date and time display works reliably on all platforms * **Visual Continuity**: Consistent appearance and behavior across device types * **Performance**: Optimized loading and display for various device capabilities *** ## 🔄 Integration with Blog System ### **Timezone Integration** **Shopify Timezone Settings** * **Store Timezone**: Uses timezone configured in Shopify Admin settings * **Automatic Updates**: Clock reflects current time in store's timezone * **Global Consistency**: All blog pages show consistent timezone * **Real-Time Updates**: Clock updates automatically without page refresh **Timezone Configuration** 1. Configure store timezone in **Shopify Admin > Settings > General** 2. Clock automatically uses configured timezone 3. Verify timezone accuracy on blog pages 4. Test clock display across different browsers and devices ### **Blog Page Integration** **Header Placement** * **Blog Header**: Ideal placement in blog page header areas * **Content Separation**: Clear separation between header and blog content * **Navigation Integration**: Works well with blog navigation elements * **Brand Consistency**: Maintains consistent branding across blog pages **Content Coordination** * **Non-Intrusive Design**: Doesn't interfere with blog content reading * **Professional Appearance**: Enhances professional blog appearance * **Brand Reinforcement**: Subtle brand presence on every blog page * **User Experience**: Provides useful information without cluttering layout *** ## 🎛️ Advanced Configuration ### **Logo Optimization** **Logo Setup Best Practices** * **High Resolution**: Use high-quality logo files for all screen types * **Appropriate Sizing**: Choose logo size that balances prominence with space efficiency * **Format Optimization**: Use web-optimized image formats (PNG, JPG) * **Loading Performance**: Optimize logo file size for fast loading **Brand Integration Strategy** * **Consistent Branding**: Ensure logo matches branding used elsewhere * **Color Coordination**: Consider logo colors when choosing clock colors * **Professional Appearance**: Maintain professional appearance across all blog pages * **Mobile Consideration**: Verify logo appearance and legibility on mobile devices ### **Clock Customization Strategy** **Color Selection Guidelines** * **Brand Harmony**: Choose colors that harmonize with overall brand palette * **Readability Focus**: Prioritize readability over decorative color choices * **Background Consideration**: Ensure colors work with various blog backgrounds * **Accessibility Compliance**: Meet color contrast requirements for accessibility **Display Strategy** * **Content First**: Ensure clock enhances rather than distracts from content * **Professional Appearance**: Choose professional color combinations * **User Experience**: Consider user preference for minimal vs. prominent clock display * **Brand Reinforcement**: Use clock as subtle brand reinforcement tool *** ## 🔧 Troubleshooting ### **Logo Display Issues** **Common Problems** * Logo not appearing on blog pages * Logo appearing pixelated or blurry * Logo size too large or too small for header space * Logo not linking properly to homepage **Solutions** * Verify logo uploaded in Theme Settings > Logo * Upload high-resolution logo file for crisp display * Adjust logo size setting in Theme Settings * Test logo file format compatibility (PNG, JPG recommended) * Clear browser cache after making logo changes * Verify logo file isn't corrupted or too large ### **Clock Display Problems** **Potential Issues** * Clock not showing date or time * Incorrect timezone displaying * Clock colors not appearing correctly * Clock not updating in real-time **Solutions** * Verify "Show Date/Time" toggle is enabled * Check store timezone settings in Shopify Admin * Confirm date and time color settings are configured * Test clock display in different browsers * Refresh page to ensure clock updates are working * Verify browser JavaScript is enabled for real-time updates ### **Layout and Styling Issues** **Common Problems** * Logo and clock elements not aligning properly * Colors not displaying as expected * Layout breaking on mobile devices * Section not integrating well with blog design **Solutions** * Test layout on different screen sizes * Verify color settings are saved properly * Check for theme conflicts with custom CSS * Test section placement within blog template * Ensure section doesn't conflict with other blog sections * Clear browser cache after making style changes *** ## 📊 Performance Impact ### **Loading Efficiency** **Optimized Performance** * **Efficient Logo Loading**: Optimized image loading with lazy loading * **Minimal JavaScript**: Lightweight clock functionality * **Fast Rendering**: Quick section rendering for immediate display * **Mobile Optimization**: Efficient performance on mobile devices **User Experience Benefits** * **Immediate Brand Recognition**: Quick logo display for brand recognition * **Real-Time Information**: Useful time information without performance impact * **Professional Appearance**: Enhanced blog professionalism * **Clean Integration**: Seamless integration with existing blog design *** ## 🎯 Best Practices Summary ### **Setup Checklist** ``` ✅ Upload high-quality logo in Theme Settings > Logo ✅ Configure appropriate logo size for blog header ✅ Enable "Show Date/Time" toggle in section settings ✅ Choose date and time colors that ensure good readability ✅ Test logo display and clock functionality on multiple devices ✅ Verify store timezone is correctly configured in Shopify Admin ✅ Check logo link functionality to homepage ✅ Test color contrast for accessibility compliance ✅ Verify clock updates in real-time ✅ Test mobile layout and readability ✅ Ensure section integrates well with overall blog design ✅ Check performance impact on blog page loading ``` ### **Design Strategy** **Professional Implementation** * **Brand Consistency**: Use consistent branding across all blog pages * **Readability Priority**: Choose colors that prioritize content readability * **Clean Design**: Maintain clean, uncluttered header design * **User Experience**: Enhance user experience without adding complexity **Content Integration** * **Header Placement**: Position in header area for consistent brand presence * **Non-Intrusive**: Ensure design doesn't interfere with blog content * **Professional Appearance**: Maintain professional blog appearance * **Functional Value**: Provide useful information (time) along with branding *** ## 🚀 Use Cases ### **Professional Blogs** **Business Blog Headers** * Use company logo with professional black clock colors * Position prominently in blog header for brand recognition * Coordinate with professional blog design and typography * Provide useful timezone information for business content ### **Editorial Blogs** **Magazine-Style Headers** * Integrate logo and clock into sophisticated editorial layout * Choose colors that complement editorial design palette * Create professional publication appearance * Balance brand presence with editorial content focus ### **Brand Blogs** **Brand-Focused Integration** * Use brand colors for clock elements to reinforce brand identity * Coordinate logo and clock with overall brand aesthetic * Create cohesive brand experience across blog pages * Maintain brand visibility without overwhelming content *** The Blog Timezone Section provides professional blog header functionality that combines essential branding with useful temporal information, creating sophisticated blog environments that reinforce brand presence while supporting content readability. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # About Content Section For Plain Jane and Plain Jane Interactive > **What You'll Learn** > > * How to display and style rich content on about pages with advanced typography controls > * Configuration options for about page content text color and formatting > * How to integrate page content with professional about page layouts > * Best practices for about page content presentation and brand storytelling *** ## 🎯 What is the About Content Section? The **About Content Section** is a specialized content display system designed specifically for about pages that automatically pulls content from your Shopify page content and provides advanced styling controls. This section bridges the gap between Shopify's basic page content system and professional about page presentation by offering dedicated typography controls, color customization, and about-specific formatting that enhances brand storytelling and company information presentation. **Key Features:** * **Automatic Content Display**: Automatically displays content from your Shopify page without manual duplication * **Advanced Typography**: Rich text formatting with professional styling options * **Color Customization**: Dedicated text color controls for about page content * **Brand Integration**: Professional presentation that supports brand storytelling * **Responsive Design**: Content optimized for both desktop and mobile about page viewing * **Content-Container Styling**: Specialized container styling for professional about page layouts * **Rich Text Support**: Full support for Shopify's rich text formatting options Available in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **Note**: This section is specifically designed for about template pages and automatically pulls content from your Shopify page content, providing professional styling and presentation controls. *** ## 🔧 How to Add About Content Section 1. Go to **Online Store > Themes > Customize** 2. Navigate to **Pages > About** or create an about template page 3. Click **Add section** 4. Select **About Content** section 5. Configure text color and content formatting options 6. Position the section where you want your main about content to appear 7. Content will automatically display from your Shopify page content > ⚠️ **Important**: This section automatically displays content from your Shopify page, so make sure to add your about content to the page content area in Shopify Admin for it to appear in this section. *** ## 📝 Content Management System ### **Automatic Content Integration** **Shopify Page Content Connection** * **Direct Integration**: Section automatically displays content from `page.content` * **No Duplication**: Content is managed in one place (Shopify page content) and displayed professionally * **Real-Time Updates**: Changes to page content immediately reflect in the section * **Rich Text Support**: Full support for Shopify's rich text editor formatting **About Page Content Features** * **Professional Presentation**: Content displayed with professional styling and typography * **Brand Story Focus**: Optimized for brand storytelling and company information presentation * **Visual Hierarchy**: Proper content organization and visual hierarchy for about pages * **Reading Experience**: Enhanced reading experience with professional typography controls ### **Content Creation Strategy** **About Page Content Best Practices** 1. **Add Content in Shopify Admin**: Go to **Online Store > Pages > About** and add content in the page content editor 2. **Use Rich Text Formatting**: Utilize Shopify's rich text editor for headers, paragraphs, lists, and links 3. **Structure Your Story**: Organize content with clear sections for mission, history, team, values, etc. 4. **Professional Writing**: Use clear, engaging copy that reflects your brand voice and values 5. **Call-to-Action Integration**: Include relevant calls-to-action within your about content **Content Organization Tips** * **Clear Sections**: Use headers to organize different aspects of your story * **Engaging Introduction**: Start with a compelling brand introduction or mission statement * **Visual Breaks**: Use formatting to create visual breaks and improve readability * **Contact Integration**: Include contact information or links to contact pages * **Social Proof**: Integrate testimonials, awards, or recognition within your about story *** ## 🎨 Typography and Color Controls ### **Text Color Customization** **Content Text Color Settings** * **Content Text Color**: Custom color picker for all about content text * **Default Color**: Set to black (#000000) for maximum readability and professional appearance * **Brand Integration**: Choose colors that align with your overall brand color palette * **Accessibility Support**: High contrast color options for accessibility compliance **Color Application** * **Consistent Styling**: Color applies to all text within the about content area * **Professional Appearance**: Color choices that support business and brand presentation * **Readability Priority**: Colors chosen to ensure optimal reading experience * **Brand Coordination**: Colors that coordinate with other about page elements and overall site design ### **Professional Typography Features** **Rich Text Display System** * **Rich Text Block**: Professional rich text block styling with enhanced typography * **Responsive Typography**: Text automatically scales and adjusts for different screen sizes * **Reading Optimization**: Typography optimized for comfortable reading of longer about content * **Visual Hierarchy**: Proper styling for headers, paragraphs, lists, and other rich text elements **Content Container Styling** * **Content Container Class**: Specialized container styling for professional about page presentation * **Professional Layout**: Clean, organized layout that supports extended content reading * **Visual Consistency**: Consistent styling with other about page elements and overall theme design * **Brand Integration**: Container styling that supports brand presentation and professional appearance *** ## 📱 Mobile Optimization ### **Responsive Content Display** **Mobile Reading Experience** * **Responsive Text**: Text automatically adjusts for optimal mobile reading * **Touch-Friendly**: Content optimized for mobile touch interactions and scrolling * **Mobile Typography**: Font sizes and line spacing optimized for mobile reading * **Portrait/Landscape**: Content adapts appropriately for device orientation changes **Mobile About Page Features** * **Fast Loading**: Efficient content rendering for mobile devices and slower connections * **Battery Optimization**: Minimal processing overhead for extended mobile reading sessions * **Touch Navigation**: Optimized for mobile touch navigation through longer about content * **Mobile Accessibility**: Enhanced accessibility features for mobile about page reading ### **Cross-Device Consistency** **Consistent Brand Experience** * **Visual Continuity**: Consistent about content presentation across all devices * **Color Consistency**: Same color appearance across different screen types * **Typography Consistency**: Consistent reading experience regardless of device * **Professional Appearance**: Maintains professional quality on all screen sizes *** ## 🔄 Integration with About Page System ### **About Template Integration** **Template-Specific Design** * **About Page Optimization**: Specifically designed for about template pages * **Page Content System**: Seamless integration with Shopify's page content management * **Template Coordination**: Works perfectly with other about page sections and elements * **Professional Layout**: Supports professional about page layouts and brand presentation **Content Workflow Integration** 1. **Create About Page**: Create about page in Shopify Admin with content 2. **Add About Content Section**: Add section to about template in theme customizer 3. **Style Content**: Configure text color and content presentation options 4. **Combine with Other Sections**: Use with other about sections for comprehensive about pages ### **About Page Architecture** **Section Coordination** * **Primary Content**: Serves as the main content area for about pages * **Supporting Elements**: Works with other about sections like clock, home button, and backgrounds * **Visual Hierarchy**: Integrates properly with about page visual hierarchy and layout * **Brand Storytelling**: Supports comprehensive brand storytelling with other about page elements **Professional About Page Structure** * **Content Foundation**: Provides the content foundation for professional about pages * **Flexible Positioning**: Can be positioned anywhere within about page layout * **Consistent Styling**: Maintains consistent styling with overall about page design * **Scalable Content**: Supports both short and extended about content presentations *** ## 🎛️ Advanced Configuration ### **Content Strategy for About Pages** **Professional Content Approach** * **Brand Voice**: Ensure content reflects your authentic brand voice and values * **Story Structure**: Organize content with clear beginning, development, and call-to-action * **Audience Focus**: Write content that speaks directly to your target audience * **Professional Tone**: Maintain professional tone appropriate for business about pages **Content Optimization Strategy** * **SEO Considerations**: Include relevant keywords naturally within your about content * **Readability**: Structure content for easy scanning and reading * **Engagement**: Include engaging elements that encourage further exploration * **Contact Integration**: Include clear paths for customers to contact or connect ### **Visual Integration Strategy** **Color Coordination** * **Brand Alignment**: Choose text colors that align with overall brand color strategy * **Background Coordination**: Ensure text color works with various background options * **Accessibility Focus**: Prioritize color choices that meet accessibility standards * **Professional Appearance**: Choose colors that support professional business presentation **Layout Coordination** * **Section Flow**: Position section to create logical content flow on about pages * **Visual Balance**: Balance content section with other about page visual elements * **Reading Experience**: Optimize section positioning for comfortable content reading * **Brand Presentation**: Support overall brand presentation goals with section placement *** ## 🔧 Troubleshooting ### **Content Display Issues** **Common Content Problems** * Content not appearing in About Content section * Text color not applying correctly * Content formatting appearing incorrect * Rich text formatting not displaying properly **Content Solutions** * Verify content is added to Shopify page content (not page description) * Check that About Content section is added to about template * Confirm text color setting is configured and saved * Test rich text formatting in Shopify page editor * Clear browser cache after making content changes ### **Styling Problems** **Potential Styling Issues** * Text color not matching expected appearance * Content container not displaying properly * Typography not appearing professional * Content not integrating well with about page design **Styling Solutions** * Verify Content Text Color is properly set and saved * Check browser developer tools for color application * Test content display across different browsers * Ensure rich text formatting is properly applied in Shopify * Verify section is positioned correctly within about template ### **Mobile Display Issues** **Common Mobile Problems** * Content not displaying properly on mobile devices * Text too small or large for mobile reading * Content layout breaking on mobile screens * Touch interactions not working properly **Mobile Solutions** * Test about content on actual mobile devices * Verify responsive typography is working correctly * Check content layout on different mobile screen sizes * Ensure touch targets are appropriately sized * Test content readability across mobile browsers *** ## 📊 Performance Impact ### **Content Loading Efficiency** **Optimized Content Performance** * **Efficient Rendering**: Lightweight content rendering for fast about page loading * **Minimal Processing**: Simple content display with minimal processing overhead * **Mobile Optimization**: Efficient performance on mobile devices for about content * **Fast Typography**: Quick text rendering for immediate about content visibility **SEO Benefits for About Pages** * **Content Accessibility**: Properly structured content for search engine indexing * **Professional Presentation**: Enhanced about content presentation supports SEO * **Mobile Performance**: Mobile-optimized content supports mobile SEO rankings * **User Experience**: Better about content experience leads to improved engagement metrics *** ## 🎯 Best Practices Summary ### **Setup Checklist** ``` ✅ Create about page in Shopify Admin with comprehensive content ✅ Add About Content section to about template in theme customizer ✅ Configure Content Text Color for brand coordination and readability ✅ Test content display across desktop and mobile devices ✅ Verify rich text formatting appears correctly ✅ Check color contrast for accessibility compliance ✅ Test content integration with other about page sections ✅ Optimize content for both reading experience and SEO ✅ Ensure content reflects authentic brand voice and values ✅ Test about page loading speed and performance ✅ Verify content updates reflect immediately in section ✅ Check professional appearance across different browsers ``` ### **Content Strategy** **Professional Content Development** * **Authentic Voice**: Develop content that authentically represents your brand * **Clear Structure**: Organize content with clear sections and logical flow * **Engaging Writing**: Write content that engages readers and encourages action * **Professional Quality**: Maintain professional writing standards throughout **About Page Integration** * **Section Coordination**: Use with other about sections for comprehensive about pages * **Visual Harmony**: Ensure content coordinates with overall about page design * **Brand Consistency**: Maintain brand consistency across all about page elements * **User Experience**: Prioritize user experience in content presentation and layout *** ## 🚀 Use Cases ### **Professional Business About Pages** **Corporate About Content** * Use professional business language for corporate about presentations * Include company history, mission, values, and team information * Coordinate text colors with corporate brand colors for consistent presentation * Create comprehensive about content for business credibility and trust ### **Brand Storytelling About Pages** **Creative Brand Narratives** * Develop engaging brand story content with personality and voice * Use creative formatting and rich text elements for visual interest * Choose text colors that support brand aesthetic and storytelling goals * Create compelling about content that connects emotionally with audience ### **Service-Based Business About Pages** **Professional Service Presentation** * Focus about content on expertise, experience, and service quality * Include professional credentials, testimonials, and service philosophy * Use professional text colors for credibility and trustworthiness * Create about content that establishes authority and encourages contact *** The About Content Section provides professional content display capabilities that transform basic Shopify page content into sophisticated, well-styled about page presentations with advanced typography controls and brand integration options. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # About Home Button Section For Plain Jane and Plain Jane Interactive > **What You'll Learn** > > * How to add a "Back Home" button to about pages for improved navigation > * Configuration options for button colors, styling, and professional appearance > * How to enhance about page user experience with clear navigation paths > * Best practices for about page navigation and call-to-action integration *** ## 🎯 What is the About Home Button Section? The **About Home Button Section** is a specialized navigation component designed specifically for about pages that provides visitors with a clear, professional way to return to your homepage. This section creates a prominent "Back Home" button with customizable styling that enhances about page user experience by offering an immediate navigation path back to your main store, improving user flow and reducing bounce rates from about pages. **Key Features:** * **Direct Homepage Navigation**: Button links directly to your store's homepage * **Professional Styling**: Clean, professional button design appropriate for business about pages * **Custom Color Controls**: Independent background and text color customization * **Centered Layout**: Professional center-aligned button presentation * **Small Button Format**: Compact size that doesn't overwhelm about page content * **Brand Integration**: Customizable colors for brand consistency and professional appearance * **Mobile Optimized**: Touch-friendly button design for mobile about page visitors Available in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **Note**: This section is specifically designed for about template pages and provides professional navigation back to the homepage, enhancing about page user experience and site flow. *** ## 🔧 How to Add About Home Button Section 1. Go to **Online Store > Themes > Customize** 2. Navigate to **Pages > About** or create an about template page 3. Click **Add section** 4. Select **Back Home Button** section 5. Configure background and text colors for brand coordination 6. Position the section where you want the navigation button to appear 7. Button automatically links to your homepage and displays "Back Home" text > ⚠️ **Important**: This section automatically links to your store's homepage and is optimized for about page navigation flow and user experience. *** ## 🎨 Button Design and Styling ### **Color Customization Options** **Background Color Settings** * **Background Color**: Custom color picker for button background * **Default Color**: Set to black (#000) for professional appearance * **Brand Integration**: Choose background colors that align with your brand palette * **Professional Options**: Dark colors typically work best for business button backgrounds **Text Color Settings** * **Text Color**: Custom color picker for button text * **Default Color**: Set to white (#FFF) for optimal contrast with dark backgrounds * **Readability Focus**: Choose colors that ensure button text is easily readable * **Accessibility Support**: High contrast combinations for accessibility compliance ### **Professional Button Features** **Button Design Elements** * **Small Format**: Compact button size that doesn't dominate about page content * **Center Alignment**: Professional center-aligned presentation for visual balance * **Clean Typography**: Clear, readable button text with professional font styling * **Hover Effects**: Professional hover states for enhanced user interaction **Navigation Functionality** * **Direct Homepage Link**: Button uses `routes.root_url` for reliable homepage navigation * **Professional Labeling**: "Back Home" text provides clear navigation indication * **Touch-Friendly**: Optimized button size and target area for mobile touch interactions * **Fast Navigation**: Immediate navigation response for better user experience *** ## 📱 Mobile Optimization ### **Mobile Button Design** **Touch-Friendly Features** * **Appropriate Size**: Button sized for comfortable mobile touch interaction * **Clear Target Area**: Adequate touch target size following mobile design best practices * **Readable Text**: Text sized appropriately for mobile reading and interaction * **Professional Appearance**: Maintains professional quality on mobile devices **Mobile User Experience** * **Fast Loading**: Lightweight button section for quick mobile rendering * **Responsive Design**: Button automatically adapts to different mobile screen sizes * **Touch Response**: Immediate touch feedback for mobile user interactions * **Mobile Navigation**: Optimized for mobile about page navigation patterns ### **Cross-Device Consistency** **Consistent Brand Experience** * **Visual Continuity**: Consistent button appearance across all devices * **Color Consistency**: Same color appearance across different screen types * **Professional Quality**: Maintains professional appearance on all screen sizes * **Navigation Reliability**: Consistent homepage navigation across all devices *** ## 🔄 Integration with About Page Flow ### **About Page Navigation Strategy** **User Flow Enhancement** * **Clear Exit Path**: Provides obvious way for visitors to return to main store * **Reduced Bounce Rate**: Encourages continued site exploration rather than leaving * **Professional Navigation**: Maintains professional about page user experience * **Content Coordination**: Works seamlessly with other about page content and sections **About Page Architecture** * **Strategic Placement**: Can be positioned at end of about content or in sidebar areas * **Visual Balance**: Button size and styling complement about page content without overwhelming * **Navigation Hierarchy**: Supports clear about page navigation hierarchy and user flow * **Brand Consistency**: Maintains consistent navigation styling with overall site design ### **Call-to-Action Integration** **About Page CTA Strategy** * **Primary Navigation**: Serves as primary navigation call-to-action for about pages * **Professional Appearance**: Professional button design appropriate for business about pages * **Clear Action**: "Back Home" text provides clear, actionable navigation instruction * **User Experience**: Enhances overall about page user experience and site navigation *** ## 🎛️ Advanced Configuration ### **Color Strategy for Professional About Pages** **Business Color Combinations** * **Classic Professional**: Black background (#000) with white text (#FFF) * **Brand Colors**: Use primary brand colors for background with contrasting text * **Subtle Approach**: Dark gray background with light text for sophisticated appearance * **Accessibility Focus**: High contrast combinations that meet accessibility standards **Brand Integration Approach** * **Primary Brand Color**: Use primary brand color for button background * **Secondary Brand Color**: Use secondary brand color for text if contrast allows * **Neutral Professional**: Use neutral colors for understated professional appearance * **Color Coordination**: Coordinate with other about page elements and overall site colors ### **About Page Placement Strategy** **Strategic Positioning Options** * **Content End**: Place at end of about content as natural next step * **Sidebar Placement**: Include in about page sidebar for persistent navigation option * **Header Area**: Position in about page header area for immediate navigation access * **Footer Area**: Include in about page footer as secondary navigation option **User Experience Considerations** * **Content Flow**: Position to support natural about content reading flow * **Visual Hierarchy**: Ensure button doesn't compete with important about content * **Professional Appearance**: Position to maintain professional about page presentation * **Navigation Logic**: Place where users naturally expect navigation options *** ## 🔧 Troubleshooting ### **Button Display Issues** **Common Button Problems** * Button not appearing on about pages * Button colors not applying correctly * Button not linking to homepage properly * Button appearing too large or small for about page **Button Solutions** * Verify About Home Button section is added to about template * Check that background and text colors are properly configured and saved * Test homepage link functionality across different browsers * Verify button appears correctly on both desktop and mobile devices * Clear browser cache after making button styling changes ### **Color and Styling Problems** **Potential Styling Issues** * Background and text colors not providing sufficient contrast * Button colors not matching brand expectations * Button not integrating well with about page design * Text not readable against background color **Styling Solutions** * Test color combinations for adequate contrast and readability * Use accessibility tools to verify color contrast ratios * Coordinate button colors with overall about page color scheme * Test button appearance across different browsers and devices * Verify color settings are properly saved in theme customizer ### **Navigation and Functionality Issues** **Common Navigation Problems** * Button not linking to correct homepage * Button link not working on mobile devices * Button not providing expected user experience * Button causing about page layout issues **Navigation Solutions** * Verify button uses correct homepage URL structure * Test button functionality on actual mobile devices * Check button positioning within about page layout * Test button interaction across different browsers * Ensure button doesn't interfere with other about page elements *** ## 📊 Performance Impact ### **Lightweight Navigation Solution** **Optimized Button Performance** * **Minimal Code**: Simple, lightweight button implementation * **Fast Rendering**: Quick button display for immediate about page navigation * **Mobile Efficiency**: Efficient performance on mobile devices * **Low Overhead**: Minimal processing requirements for button functionality **User Experience Benefits** * **Immediate Navigation**: Fast button response for better user experience * **Professional Appearance**: Enhanced about page professionalism * **Improved Site Flow**: Better navigation flow from about pages to homepage * **Reduced Bounce Rate**: Encourages continued site exploration *** ## 🎯 Best Practices Summary ### **Setup Checklist** ``` ✅ Add About Home Button section to about template in theme customizer ✅ Configure background color for professional appearance and brand coordination ✅ Set text color for optimal readability and contrast ✅ Test button colors for accessibility compliance ✅ Verify button links correctly to homepage ✅ Test button appearance and functionality on mobile devices ✅ Check button integration with overall about page design ✅ Position button strategically within about page layout ✅ Test button interaction across different browsers ✅ Verify professional appearance matches brand standards ✅ Test button touch functionality on mobile devices ✅ Ensure button enhances rather than detracts from about content ``` ### **Design Strategy** **Professional Button Design** * **Brand Coordination**: Choose colors that align with brand identity and about page design * **Readability Priority**: Prioritize text readability over decorative color choices * **Professional Appearance**: Maintain professional quality appropriate for business about pages * **User Experience**: Design button to enhance about page user experience and navigation **About Page Integration** * **Strategic Placement**: Position button to support natural about page user flow * **Visual Balance**: Ensure button complements about page content without overwhelming * **Navigation Logic**: Place button where users expect to find navigation options * **Brand Consistency**: Maintain consistent styling with overall about page and site design *** ## 🚀 Use Cases ### **Professional Business About Pages** **Corporate About Navigation** * Use professional color combinations for corporate about page navigation * Position button strategically to encourage homepage exploration * Coordinate button colors with corporate brand identity * Create clear navigation path for business credibility and user experience ### **Brand-Focused About Pages** **Brand Navigation Integration** * Use brand colors for button styling to reinforce brand identity * Position button to support brand storytelling flow * Create cohesive visual experience with other brand touchpoints * Balance brand expression with functional navigation needs ### **Service-Based Business About Pages** **Professional Service Navigation** * Use understated professional colors for service business credibility * Position button to encourage service exploration and contact * Create trustworthy navigation experience for potential clients * Support professional service presentation with quality navigation design *** The About Home Button Section provides professional navigation capabilities that enhance about page user experience with clear, customizable homepage navigation that supports business goals and brand consistency. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Collection Display Section ### What You’ll Learn * How to feature products from a collection * Customize layout, typography, spacing, and product hover styles * Use the **Auto Cycle** feature to rotate product images automatically
*** ### Overview The **Collection Display Section** in the Plain Jane and Interactive themes allows you to highlight products from any Shopify collection. It’s a minimalist, image-first layout, great for showcasing lookbooks or featured drops. This section supports: * Title display * Flexible grid layouts (1–6 products per row on desktop, 1–3 on mobile) * Custom spacing and hover effects * Auto-rotating product images using the **Auto Cycle** feature > 💡 Tip: This section is visually distinct from the **Collection List Section**, which displays multiple collections. Here, you’re featuring products from a single collection. *** ### How to Use 1. In the **Theme Editor**, click **Add Section** → **Collection Display**. 2. Under **Content & Data**: * Choose a **Collection** from your Shopify store. * Add a **Section Title** (optional). 3. In the **Layout & Display** panel: * Adjust **Text Alignment** (Left, Center, Right). * Toggle whether to show **Titles**, **Prices**, **Compare-at Price**, and product status tags like **Sold Out**, **Pre-Order**, or **Sale**. * Set **Products per Row** for both desktop and mobile. *** ### Auto Cycle Feature > 🎯 Purpose: Enhance visual engagement by rotating through product images automatically. When you enable **Auto Cycle** under **Image Hover Effect**, your product images will transition through multiple angles or styles (if uploaded to the product in Shopify). #### How to Enable It 1. Scroll to **Image Hover Effect**. 2. Select: * `Auto Cycle Through All Images` * Or limit the number using the **Misc** dropdown: `Loop through all images`, `Limit to first 2`, etc. 3. Adjust **Image Transition Duration** (default: 550ms). > 💡 Tip: For best results, ensure your products have multiple images in Shopify. This feature won’t activate for products with only one image. *** ### Typography You can adjust font sizes for: * Section Title * Product Title * Product Price Controls are available separately for desktop and mobile. *** ### Colors Customize: * Background Color * Section Title Color * Product Title Color *** ### Spacing Includes granular controls for: * Top & bottom padding (desktop and mobile) * Space between section title and products * Space between product image, title, and price * Gaps between products and rows *** ### View All Button You can add a CTA linking to the full collection: * Customize **Button Background Color** * Customize **Button Text Color** *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Collection List Section ### What You’ll Learn * How to showcase multiple collections or lookbooks in a grid * How to customize layout, spacing, typography, and colors * How to link each block to specific collections or custom pages *** ### 📚 Overview The **Collection List Section** lets you highlight multiple collections or visual lookbooks on a page. Each block includes an image, title, description, and optional link. This is perfect for building a curated gallery or category grid. *** ### 🧭 How To Add the Section 1. In the **Theme Editor**, click `Add section`. 2. Select **Collection List**. 3. Drag the section to where you want it on the page. *** ### 🛠 Section Settings #### Content & Data * **Section Title** – The heading text that appears at the top of the section. #### Layout & Display * **Number of Items to Show on Mobile** – Choose how many blocks appear on smaller screens. #### Typography Control font sizes across devices: * Section Title Size (Desktop & Mobile) * Lookbook Title Size (Desktop & Mobile) * Description Size (Desktop & Mobile) * Toggle `Bold Section Title` and `Bold Lookbook Title` as needed. #### Colors Customize each element’s appearance: * Background Color * Section Title Color * Lookbook Title Color * Description Color #### Styling * **Round Image Corners** – Adjust border radius for the images. #### Spacing Control the padding and visual separation: * Top/Bottom Spacing (Desktop & Mobile) * Space Between Header and Lookbooks * Gap Between Items (Desktop & Mobile) *** ### 🧱 Block Settings (Collection Item) Each block in the Collection List allows the following: * **Cover Image** – Upload a visual for the collection or lookbook. * **Title** – Name your collection or lookbook. * **Description** – Optional supporting text. * **Lookbook Link** – Paste a link to any collection or page in your store. > 💡 Tip: You can add multiple collection blocks under the same section using `+ Add block`. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Contact Background Section For Plain Jane and Plain Jane Interactive > **What You'll Learn** > > * How to create immersive contact page backgrounds with video, images, and color overlays > * Advanced configuration options for desktop and mobile background customization > * How to set up gradient overlays and opacity controls for professional contact aesthetics > * Best practices for contact page background optimization and user experience *** ## 🎯 What is the Contact Background Section? The **Contact Background Section** is a comprehensive background system designed specifically for contact pages that enables the creation of immersive, visually engaging contact environments. This section provides advanced options for video backgrounds, separate desktop and mobile image backgrounds, color overlays, and gradient effects to create professional contact page presentations that enhance user engagement while maintaining form functionality and accessibility. **Key Features:** * **Video Backgrounds**: Auto-playing video backgrounds with mobile optimization and battery awareness * **Separate Desktop/Mobile Images**: Independent background images optimized for different devices * **Gradient Overlays**: Customizable top-to-bottom gradient overlays with separate opacity controls * **Color Backgrounds**: Solid color backgrounds with separate desktop/mobile options * **Advanced Overlay System**: Professional overlay effects for form readability and contact information visibility * **Performance Optimized**: Efficient loading and mobile battery considerations * **Form Integration**: Backgrounds designed to work seamlessly with contact forms and content Available in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **Note**: This section is optimized for contact template pages and provides sophisticated background options specifically designed for contact form environments and business communication needs. *** ## 🔧 How to Add Contact Background Section 1. Go to **Online Store > Themes > Customize** 2. Navigate to **Pages > Contact** or create a contact template page 3. Click **Add section** 4. Select **Background** section 5. Configure background type (video, image, or color) 6. Set up overlay options and responsive settings 7. Position the section as the first element for full-page coverage > ⚠️ **Important**: This section works best when added as the first section on contact template pages to create full-page background effects that support contact forms and business information. *** ## 🎬 Video Background Options ### **Video Background Setup** **Video Configuration** * **Background Video URL**: Direct link to MP4 video file optimized for contact pages * **Show Background Video**: Toggle to enable/disable video background * **Auto-play**: Automatic video playback on page load * **Muted**: Videos start muted for better user experience and form focus * **Loop**: Continuous video playback for seamless background effect **Contact Page Video Features** * **Professional Appearance**: Creates sophisticated business presentation * **Form Compatibility**: Video backgrounds don't interfere with contact form functionality * **Mobile Optimization**: Special handling for mobile devices and battery modes * **Performance Optimized**: Efficient video loading and playback for contact pages * **Context Menu Disabled**: Prevents right-click on video for cleaner contact experience ### **Mobile Video Considerations** **Battery Mode Compatibility** * Automatic fallback when iPhone Low Battery Mode is enabled * Follows Apple's guidelines for video autoplay restrictions * Graceful degradation to image or color backgrounds on mobile * Option to show background images on mobile instead of video **Contact Page Mobile Performance** * Optimized video compression for mobile bandwidth during contact sessions * Efficient loading strategies for cellular connections * Touch-friendly contact form interactions over video backgrounds * Battery-conscious playback options for extended contact page visits *** ## 🖼️ Image Background System ### **Desktop Image Backgrounds** **Desktop Configuration** * **Desktop Background Image**: High-resolution image picker for desktop contact displays * **Show On Desktop**: Toggle to enable/disable desktop image background * **Automatic Scaling**: Images scale to cover full screen while maintaining aspect ratio * **Professional Quality**: Support for high-resolution business imagery for crisp contact display **Business Image Optimization** * **Professional Imagery**: Master quality images for sharp business presentation * **Responsive Scaling**: Automatic adjustment for different desktop screen sizes * **Loading Optimization**: Efficient image loading for fast contact page display * **Visual Consistency**: Consistent business appearance across different desktop resolutions ### **Mobile Image Backgrounds** **Mobile-Specific Contact Images** * **Mobile Background Image**: Separate image picker optimized for mobile contact experiences * **Show On Mobile**: Independent toggle for mobile image display * **Mobile Optimization**: Images optimized for mobile screen dimensions and contact form usability * **Portrait/Landscape Support**: Automatic adaptation for device orientation during contact sessions **Mobile Contact Performance Features** * **Bandwidth Optimization**: Compressed images for faster mobile loading during contact * **Touch-Friendly**: Optimized for touch interactions with contact forms * **Battery Efficiency**: Reduced processing overhead for better battery life during contact sessions * **Network Awareness**: Efficient loading for various mobile connection speeds *** ## 🎨 Color Background System ### **Solid Color Backgrounds** **Desktop Color Configuration** * **Desktop Background Color**: Custom color picker for desktop contact displays * **Hex Color Support**: Full hex color and theme color compatibility * **Business Integration**: Easy coordination with business brand color schemes * **High Contrast Options**: Support for accessibility-friendly color choices for contact forms **Mobile Color Configuration** * **Mobile Background Color**: Independent color selection for mobile contact devices * **Responsive Color Strategy**: Different colors for different contact device contexts * **Mobile-Optimized Colors**: Colors chosen specifically for mobile contact form readability * **Consistent Branding**: Maintain business identity across contact device types ### **Business Color Strategy** **Professional Color Selection** * **Brand Coordination**: Colors that align with overall business brand aesthetic * **Contact Readability**: Background colors that enhance contact form and information readability * **Accessibility Compliance**: High contrast options for accessibility standards in business contact * **Visual Hierarchy**: Colors that support contact information organization and hierarchy *** ## 🌈 Advanced Overlay System ### **Gradient Overlay Configuration** **Desktop Overlay Options** * **Overlay Top Color**: Color for the top of contact page gradient overlay * **Overlay Bottom Color**: Color for the bottom of contact page gradient overlay * **Top Opacity**: Adjustable transparency (0-1) for top overlay color * **Bottom Opacity**: Adjustable transparency (0-1) for bottom overlay color * **180-degree Gradient**: Smooth top-to-bottom gradient transition for professional contact appearance **Mobile Overlay Options** * **Mobile Top Color**: Independent top color for mobile contact gradient * **Mobile Bottom Color**: Independent bottom color for mobile contact gradient * **Mobile Top Opacity**: Separate opacity control for mobile top contact overlay * **Mobile Bottom Opacity**: Separate opacity control for mobile bottom contact overlay ### **Contact Page Overlay Effects** **Professional Contact Applications** * **Form Readability**: Overlays improve contact form readability over complex backgrounds * **Business Integration**: Colored overlays reinforce business brand color schemes * **Visual Depth**: Gradient effects create professional visual depth for contact pages * **Contact Focus**: Overlays direct attention to contact form and business information areas **Contact Page Opacity Control Strategy** * **0.0**: No overlay effect (fully transparent) for direct background impact * **0.1-0.3**: Subtle overlay for slight contact form enhancement * **0.4-0.6**: Moderate overlay for balanced background/contact form visibility * **0.7-1.0**: Strong overlay for maximum contact form focus and business information readability *** ## 📱 Responsive Design Features ### **Device-Specific Contact Optimization** **Desktop Contact Experience** * **High-Resolution Support**: Full support for 4K and high-DPI business displays * **Video Performance**: Optimized video playback for desktop business hardware * **Large Image Support**: High-quality background images for large business screens * **Desktop-Specific Colors**: Colors optimized for desktop business viewing conditions **Mobile Contact Experience** * **Touch Optimization**: Backgrounds optimized for touch contact form interactions * **Battery Conservation**: Efficient rendering for mobile battery life during contact sessions * **Bandwidth Awareness**: Optimized assets for mobile data connections during contact * **Orientation Support**: Automatic adaptation for portrait/landscape contact modes ### **Cross-Device Contact Consistency** **Business Brand Consistency** * **Visual Continuity**: Consistent business experience across all contact devices * **Color Coordination**: Coordinated color schemes for desktop and mobile contact * **Professional Appearance**: Maintains business quality on all contact screen sizes * **User Experience**: Seamless contact experience regardless of device type *** ## 🔄 Background Type Combinations for Contact Pages ### **Video + Overlay Strategy for Business Contact** **Professional Video Contact Backgrounds** * Use video backgrounds for dynamic, engaging business contact environments * Apply subtle overlays (0.2-0.4 opacity) to ensure contact form readability * Choose business-appropriate overlay colors for professional consistency * Test video performance across different devices and business connections ### **Image + Gradient Strategy for Business Contact** **Sophisticated Image Contact Backgrounds** * Use high-quality business images that complement contact functionality * Apply gradient overlays to create professional contact reading environments * Choose separate desktop/mobile images for optimal business device experience * Coordinate gradient colors with overall business contact design ### **Color + Mobile Image Strategy for Business Contact** **Performance-Optimized Contact Approach** * Use solid business colors for fast-loading desktop contact experience * Implement optimized images for mobile business contact visual impact * Apply consistent overlay strategies across both contact approaches * Balance business visual appeal with contact loading performance *** ## 🎛️ Advanced Configuration for Business Contact ### **Professional Contact Setup Strategy** **Business-First Approach** * **Form Priority**: Choose backgrounds that enhance rather than compete with contact forms * **Brand Integration**: Coordinate all background elements with business brand identity * **Performance Balance**: Balance business visual impact with contact loading speed * **User Experience**: Prioritize contact user experience over visual complexity **Contact Visual Hierarchy** * **Background Role**: Backgrounds should support, not overwhelm contact forms and business information * **Color Psychology**: Use colors that support business communication mood and brand message * **Overlay Strategy**: Use overlays to create clear contact form focus areas * **Responsive Consideration**: Ensure background works across all business contact device types ### **Contact Performance Optimization** **Loading Strategy for Business Contact** * **Image Optimization**: Use appropriately sized images for each business contact device type * **Video Compression**: Choose video files optimized for business web delivery * **Progressive Loading**: Implement backgrounds that load efficiently for contact * **Fallback Options**: Provide color fallbacks for slow business connections **Mobile Contact Optimization** * **Battery Awareness**: Consider mobile battery impact when choosing contact background types * **Bandwidth Consideration**: Optimize for various mobile connection speeds during contact * **Performance Monitoring**: Test background performance on actual mobile contact devices * **User Experience**: Prioritize mobile contact user experience in background choices *** ## 🔧 Troubleshooting Contact Backgrounds ### **Video Background Issues in Contact** **Common Contact Video Problems** * Video not auto-playing on mobile contact devices * Video backgrounds causing contact form performance issues * Video not loading or displaying properly on contact pages * Audio playing despite muted setting during contact **Contact Video Solutions** * Verify video URL is direct link to MP4 file * Check mobile device Low Battery Mode settings for contact users * Test video file size and compression for business web delivery * Ensure video files are properly formatted for contact web playback * Verify "Show Background Video" toggle is enabled ### **Image Background Problems in Contact** **Potential Contact Image Issues** * Images not displaying on specific contact devices * Image quality appears pixelated or blurry on contact pages * Images not covering full contact background area * Different images not switching properly between contact devices **Contact Image Solutions** * Upload high-resolution images appropriate for contact screen sizes * Verify "Show On Desktop" and "Show On Mobile" contact settings * Check image file formats are web-compatible for contact (JPG, PNG) * Test contact background display on actual devices * Ensure image files are properly uploaded and saved for contact ### **Overlay Configuration Issues in Contact** **Common Contact Overlay Problems** * Overlays too strong, making contact forms unreadable * Overlays not displaying correctly on contact pages * Different overlay colors between desktop and mobile contact * Gradient effects not appearing smooth on contact backgrounds **Contact Overlay Solutions** * Adjust opacity settings for better contact form visibility * Test overlay combinations for optimal contact readability * Verify overlay colors are properly configured for each contact device * Check browser compatibility for contact gradient effects * Clear browser cache after making contact overlay changes ### **Performance Problems in Contact** **Potential Contact Performance Issues** * Contact pages loading slowly with background elements * Video backgrounds causing browser lag during contact * Mobile performance issues with contact background images * Background elements not loading on slow contact connections **Contact Performance Solutions** * Optimize video file sizes for business web delivery * Compress contact background images without quality loss * Test contact loading speed on various connection types * Consider simpler background options for performance-critical contact situations * Monitor mobile performance and battery impact during contact *** ## 📊 Performance Impact for Business Contact ### **Loading Efficiency for Contact Pages** **Optimized Contact Performance** * **Efficient Asset Loading**: Optimized loading strategies for different contact background types * **Device-Specific Optimization**: Separate assets for optimal contact device performance * **Progressive Enhancement**: Graceful degradation for slower business connections * **Battery Consideration**: Mobile-optimized approaches for battery conservation during contact **SEO Considerations for Business Contact** * **Loading Speed**: Fast-loading contact backgrounds support business SEO rankings * **Mobile Performance**: Mobile contact optimization directly impacts search rankings * **User Experience**: Better contact performance leads to better business engagement metrics * **Accessibility**: Properly configured contact backgrounds support accessibility standards *** ## 🎯 Best Practices Summary for Business Contact ### **Setup Checklist for Contact Backgrounds** ``` ✅ Choose contact background type appropriate for business content and brand ✅ Upload high-quality images optimized for business web delivery ✅ Configure separate desktop and mobile contact background options ✅ Set up overlay colors and opacity for optimal contact form readability ✅ Test video backgrounds on multiple contact devices and connection speeds ✅ Verify mobile performance and battery impact during contact sessions ✅ Check contact background display across different browsers ✅ Test accessibility and readability with contact background elements ✅ Optimize asset sizes for fast contact loading ✅ Configure fallback options for slow business connections ✅ Test responsive behavior across contact device sizes ✅ Verify brand consistency across all contact background options ``` ### **Contact Strategy for Business** **Visual Coordination for Business Contact** * **Brand Alignment**: Ensure all contact background elements support business brand identity * **Form Readability**: Prioritize contact form visibility over visual complexity * **User Experience**: Choose contact backgrounds that enhance rather than distract * **Performance Balance**: Balance business visual impact with contact loading performance **Professional Implementation for Contact** * **Quality Standards**: Use high-quality assets appropriate for professional business contact * **Consistency**: Maintain visual consistency across all business contact pages * **Accessibility**: Ensure contact backgrounds meet accessibility standards * **Mobile Experience**: Optimize specifically for mobile business contact *** ## 🚀 Advanced Use Cases for Business Contact ### **Professional Service Contact** **Business Contact Backgrounds** * Use sophisticated image backgrounds with subtle overlays for professional appearance * Implement gradient effects for business editorial contact appearance * Choose colors that complement business communication goals * Create immersive contact environments for business relationship building ### **Brand-Focused Business Contact** **Brand-Integrated Contact Backgrounds** * Use brand colors in overlay systems for consistent business identity * Implement brand imagery in contact background selections * Create cohesive visual experience with other business brand touchpoints * Balance brand expression with contact form readability and functionality ### **Service-Oriented Business Contact** **Performance-Optimized Contact Backgrounds** * Prioritize fast-loading color backgrounds for contact form focus * Use minimal overlay effects to reduce contact visual complexity * Implement efficient loading strategies for contact-first business experience * Choose backgrounds that support sustained business contact experiences *** The Contact Background Section provides sophisticated background capabilities that transform basic contact pages into immersive, professional business environments with extensive customization options for video, images, colors, and overlay effects specifically designed for business communication and contact form optimization. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Dynamic Background Section For Plain Jane, and Plain Jane Interactive > **What You'll Learn** > > * How to add and configure dynamic background sections > * Advanced background options including videos, images, and overlays > * Mobile optimization and responsive background settings > * Animation and transition effects *** ## 🎯 What is the Dynamic Background Section? The **Dynamic Background Section** is a powerful, flexible background system in Plain Jane v3.1 that allows you to create immersive page backgrounds with advanced customization options. Unlike static backgrounds, this section supports video backgrounds, image overlays, gradients, and responsive mobile configurations. **Key Features:** * Video background support with fallback images * Gradient overlays with opacity controls * Separate mobile and desktop configurations * Animation and transition effects * Multiple background sizing and positioning options * Performance-optimized loading Available in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ *** ## 🔧 How to Add Dynamic Background Section 1. Go to **Online Store > Themes > Customize** 2. Navigate to the page where you want to add the background 3. Click **Add section** 4. Select **Dynamic Background** 5. Configure the background settings in the sidebar > 💡 **Note**: This section is often used on homepages, landing pages, and special promotional pages. *** ## 🖼️ Background Configuration Options ### **Background Style** **Color Background** * Solid color background option * Choose any hex color value * Separate desktop and mobile color settings * Ideal for minimalist designs **Image Background** * Upload custom background images * Support for high-resolution images * Multiple sizing and positioning options * Automatic optimization for web **Video Background** * Upload MP4 video files for dynamic backgrounds * Automatic fallback to image on mobile (for performance) * Looping and autoplay controls * Optimized for performance and data usage ### **Desktop Background Settings** **Background Color** * Primary background color for desktop * Default: `#ffffff` (white) * Used as fallback when images/videos don't load **Background Image** * Upload desktop-specific background image * Recommended minimum size: 1920x1080px * Supports JPG, PNG, WebP formats **Background Video** * Upload background video for desktop * MP4 format recommended * Keep file size under 10MB for optimal performance * Automatic loop and mute settings ### **Mobile Background Settings** **Mobile Background Color** * Separate color setting for mobile devices * Often different from desktop for better mobile experience * Optimized for smaller screens **Mobile Background Image** * Mobile-specific background image * Recommended size: 800x1200px (portrait orientation) * Automatically replaces video backgrounds on mobile **Show Background Image on Mobile** * Toggle to enable/disable images on mobile * Improves performance on slower connections * Uses color background as fallback *** ## 🎨 Overlay and Gradient Effects ### **Top Overlay** **Overlay Top Color** * Gradient overlay color at the top of the background * Creates depth and improves text readability * Separate settings for desktop and mobile **Overlay Top Opacity** * Control transparency of top overlay (0-100%) * Desktop: Adjustable opacity for design flexibility * Mobile: Separate opacity control for mobile optimization ### **Bottom Overlay** **Overlay Bottom Color** * Gradient overlay color at the bottom * Creates smooth color transitions * Enhances visual hierarchy **Overlay Bottom Opacity** * Control bottom overlay transparency * Independent desktop and mobile settings * Allows for subtle or dramatic effects *** ## 📱 Mobile Optimization ### **Responsive Behavior** **Automatic Mobile Switching** * Videos automatically switch to images on mobile * Optimized for mobile data usage * Maintains visual consistency across devices **Mobile-Specific Settings** * Separate color, image, and overlay settings * Optimized file sizes for mobile viewing * Touch-friendly interaction considerations **Performance Optimization** * Lazy loading for background images * Compressed video files for faster loading * Automatic format selection based on browser support *** ## ⚙️ Advanced Customization ### **Background Sizing** **Cover (Default)** * Scales background to cover entire area * May crop parts of image/video * Best for full-screen effects **Contain** * Scales to fit within container * Shows entire image/video * May leave empty space **Auto** * Uses natural size of background media * No scaling applied * Best for specific design requirements ### **Background Position** **Center (Default)** * Centers background in available space * Balanced composition **Top/Bottom Alignment** * Align to top or bottom of container * Useful for specific focal points **Left/Right Alignment** * Horizontal positioning control * Creative layout possibilities *** ## 🚀 Best Practices ### **Performance Optimization** **Video Backgrounds** * Keep video files under 10MB * Use H.264 encoding for best compatibility * Provide high-quality poster images as fallbacks * Test on various connection speeds **Image Optimization** * Compress images without quality loss * Use WebP format when possible * Provide appropriate sizes for desktop and mobile * Consider file size impact on loading times ### **Design Considerations** **Content Readability** * Use overlays to ensure text remains readable * Test contrast ratios for accessibility * Consider different device viewing conditions * Provide fallback colors for failed loads **Mobile Experience** * Prioritize mobile performance over visual effects * Test on actual mobile devices with slower connections * Consider data usage implications for users * Provide meaningful fallbacks ### **Accessibility** **Motion Sensitivity** * Provide options to disable video backgrounds * Respect user's motion preferences * Use subtle animations when possible * Test with accessibility tools **Color Contrast** * Ensure sufficient contrast for text readability * Test with various background combinations * Consider colorblind users * Use overlay gradients strategically *** ## 🔧 Troubleshooting ### **Common Issues** **Video Not Playing** * Check video file format (MP4 recommended) * Verify file size is under limits * Ensure proper encoding settings * Test across different browsers **Poor Mobile Performance** * Reduce image file sizes * Enable mobile background optimizations * Test on actual mobile devices * Consider disabling video on mobile **Loading Issues** * Optimize image and video file sizes * Check internet connection requirements * Verify file formats are supported * Test with different browser caching settings ### **Browser Compatibility** **Video Support** * Modern browsers: Full support * Older browsers: Fallback to images * Mobile browsers: Image replacement for performance **Image Formats** * WebP: Best compression, modern browser support * JPEG: Universal compatibility * PNG: Best for graphics with transparency *** # Email Signup (Popup) > **What You’ll Learn** > > * How to enable and customize the email signup popup > * Which theme version supports this feature > * How to collect and export email signups to your email marketing tool ***
### **Access the Theme Editor** 1. From your Shopify Admin, go to **Online Store > Themes**. 2. Find your Plain Jane Lite theme and click **Customize**. 3. Inside the Theme Editor, click the **Theme Settings** icon (paintbrush). *** ### **Enable and Configure the Email Popup** 1. In **Theme Settings**, select **Email Pop-up**. 2. Configure the following options: #### **Visibility** * **Disable Email Pop-up**: Check this box to turn off the popup completely. > 💡 Tip: Disable this if you're using Klaviyo, Mailchimp, or another email marketing tool with its own popup. #### **Visual Customizations** * **Show Logo**: Upload your brand logo.\ \&#xNAN;*If left blank, the default "Dummy Supreme" logo will display.* * **Background Image**: Optional. Adds a visual background to the popup. * **Overlay Color**: Background layer behind the popup (e.g., white, red). * **Popup Background Color**: Color shown if no background image is set. * **Border Color**: Optional border around the popup. * **Exit Button Color**: Customize the close ("X") button. * **Inner Background Color**: Background for the form area (e.g., behind text and inputs). #### **Text Fields** All of the following fields are customizable: * **Header Text** * **Description** * **Success Message** * **Submit Button Text** #### **Input Styling** * **Placeholder Text Color**: Text color before the user types. * **Input Text Color**: Text color while typing. * **Submit Button Background and Text Color** * **Popup Opacity**: Controls the transparency of the overlay. *** ### **Save and Preview Your Popup** 1. Click **Save** in the top right. 2. To test the popup: * Open your live store in a **new browser tab**. * This resets session data so the popup reappears. > ⚠️ **Popup not showing?** The theme prevents the popup from reappearing repeatedly in the same tab. Use a new tab for each test. *** ### **Where Do Collected Emails Go?** All signups from the popup are stored in your Shopify **Customers** section: 1. Go to **Shopify Admin > Customers**. 2. You'll see new entries listed as customers with **zero orders**. 3. Click **Export** to download the list: * Choose "All Customers" or current page * Import to Klaviyo, Mailchimp, MailerLite, etc. ### How to Filter for Zero-Order Signups If you want to target only new signups who haven't made a purchase yet (ideal for welcome flows or early access): 1. Go to **Shopify Admin > Customers** 2. Click **Filters** 3. Select: * **Tagged with** → `Email subscriber` * **Number of orders** → `is equal to` → `0` 4. Save this filter view for quick access later > 💡 Tip: This is especially helpful if you’re collecting signups on a store with existing customers and want to separate new leads. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Email Signup (Embed) This section allows you to add an embedded email signup form to your page, perfect for building a newsletter list or collecting subscriber data in-line with your site content. ### What You’ll Learn * How to configure the form header and success message * How to customize placeholder, button text, and styling * Where email signups are stored in Shopify * How to filter for new (zero-order) subscribers in your customer list *** ### How to Set It Up 1. **Add the Section**: In the Shopify Theme Editor, click **Add Section** > **Email Signup (Embed)**. 2. **Configure Content**: * **Header**: Add a section title like `Join Our VIP List`. * **Email Message**: Provide a short description encouraging signups. * **Email Placeholder**: Set placeholder text (e.g. `EMAIL`). * **Button Text**: Customize the call-to-action (e.g. `JOIN`). * **Success Message**: Message shown after a successful signup. *** ### Layout & Display * **Text Alignment**: Choose between Left or Center alignment. *** ### Colors Customize every visual element of the form using color settings: * Heading text * Email message text * Background color * Button and input background/text * Input borders and placeholder color * Success message color *** ### Styling * **Round Button Corners**: Add rounded corners to the signup button. * **Round Input Corners**: Add rounded corners to the input field. *** ### Spacing Control spacing for: * Top and bottom padding on desktop * Top and bottom padding on mobile *** ### Typography * Adjust section title font sizes for desktop and mobile. * Choose between `Regular` or `Bold` font weight. *** ### Where Do the Emails Go? All emails collected through this embedded form are stored in your Shopify **Customers** section. * Go to your **Shopify Admin > Customers** * New signups will appear as customers with the tag **“Email subscriber”** * If you're using Shopify Email or Klaviyo, these will be synced to your lists depending on your setup *** ### How to Filter for Zero-Order Signups If you want to target only new signups who haven't made a purchase yet (ideal for welcome flows or early access): 1. Go to **Shopify Admin > Customers** 2. Click **Filters** 3. Select: * **Tagged with** → `Email subscriber` * **Number of orders** → `is equal to` → `0` 4. Save this filter view for quick access later > 💡 Tip: This is especially helpful if you’re collecting signups on a store with existing customers and want to separate new leads. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # FAQ Section ### What You’ll Learn * How to display expandable questions and answers on your storefront * How to customize layout, colors, and spacing for your FAQ * How to add or remove FAQ items (blocks) > 💡 Tip: The FAQ Section is a great way to reduce support tickets by answering common questions right on your storefront. *** ### Adding the FAQ Section 1. Open your Shopify **Theme Editor** 2. In the **left sidebar**, click **+ Add section** 3. Choose **FAQ Section** 4. Click **Add** Once added, you’ll see one or more “Question” blocks pre-filled. You can edit these or add new ones. *** ### Editing FAQ Content Each FAQ item is a **block** inside the FAQ section. To update a question and answer: 1. Click on a block labeled **Question – \[Title]** 2. Update the **Question Title** 3. Add the **Answer** text in the multiline text field 4. Repeat for all desired FAQs To add a new FAQ item: * Click **Add block** and choose **Question** To remove an FAQ item: * Click the block and select **Remove block** at the bottom *** ### Settings Reference #### Content & Data * **Section Title** – Add a title above the FAQ section (optional) #### Layout & Display * **Expand First Question on Load** – Toggles whether the first FAQ is open by default * **Alignment** – Align text left, center, or right #### Typography * **Section Title Size – Desktop / Mobile** – Adjust header font size * **Question Text Size – Desktop / Mobile** – Adjust question font size * **Answer Text Size – Desktop / Mobile** – Adjust answer font size * **Bold Section Title** – Toggle to bold the header #### Colors * **Background Color** – Overall section background * **Section Title Color** – Header text color * **Question Text Color** – Color of the question text * **Answer Text Color** – Color of the answer body text * **Divider Line Color** – Controls color of the line between items #### Styling * **Divider Line Thickness** – Set line weight between questions * **Divider Line Style** – Choose between solid, dashed, dotted #### Spacing * Top & Bottom Spacing – Controls padding above/below section on both desktop and mobile #### Custom CSS * Add optional custom styles scoped to just this section *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website \\ # Hero Section ### **What You’ll Learn** * How to add and customize the Hero section * How to switch between image and video backgrounds * How to configure title, overlays, and spacing * How to add and style up to 2 call-to-action buttons
*** ### 🧩 Section Overview The Hero section in the Plain Jane theme is a full-width banner used to create a bold first impression on your storefront. You can feature an image or autoplaying video with a title and up to two call-to-action buttons. > 💡 Tip: For best results, use high-quality imagery or short, muted video loops under 10MB. *** ### ⚙️ How to Add and Customize the Hero Section #### 1. Add the Section * From the Shopify **Theme Editor**, open your **Home page** * Click **Add Section** and choose **Hero** * Drag it to the top of your layout (optional) #### 2. Upload Background Media Under **Content & Data**: * **Media Type**: Choose `Image` or `Video` * **Image**: Upload or select your **First Image** * **Second Image (Optional)**: Used for mobile fallback if enabled * **Video**: Upload `.mp4` format only; autoplay is muted > ⚠️ Warning: On iPhones in Low Power Mode, video autoplay may be disabled. *** ### 🖋️ Text and Layout Settings #### Title * **Hero Title**: Add your message (e.g., “NEW ARRIVALS”) #### Layout & Display * **Hero Height**: Choose from `50%`, `75%`, or `100% of viewport height` * **Use Image Instead of Video on Mobile**: Toggle ON to override mobile video * **Show only one image on mobile**: Helps control layout and speed * **Mobile Image Selection**: Choose which image to display #### Content Position * Set the text and buttons to: * `Top Left` * `Top Center` * `Center` * `Bottom Left` * `Bottom Right` *** ### 🎨 Typography, Colors & Styling #### Typography * **Font Weight**: Choose between `Regular` and `Bold` #### Colors * **Title Color**: Set custom hex color (e.g., `#FFFFFF`) #### Overlays * **Top/Bottom Overlays**: Optional gradients for readability * Set: * Overlay Color * Overlay Height (%) using slider > 💡 Tip: Use a semi-transparent black (`#000000` at 40%) to make text stand out. *** ### 📦 Spacing Customize spacing separately for desktop and mobile: ```plaintext plaintextCopyEditTop Spacing (Desktop): 0px Bottom Spacing (Desktop): 20px Top Spacing (Mobile): 0px Bottom Spacing (Mobile): 16px ``` *** ### 🔘 Buttons You can add up to **two buttons**. Each button includes: #### Content & Data * **Button Text**: Example: `SHOP COLLECTION` * **Button Link**: Paste any internal or external URL #### Colors * **Background Color**: (e.g., `#FFFFFF`) * **Text Color**: (e.g., `#000000`) #### Styling * **Round Corners**: Adjust border radius in `px` > ⚠️ Button limit: You can only add 2 buttons per Hero section. *** ### 🧩 Section Tree Example ``` Hero ├── Button └── Button ``` *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Image Selector Section ### **What You’ll Learn** * How to add and configure the Image Selector section * How to upload images and link them to products, pages, or collections * How to customize styles for mobile and desktop * How to control text size, indicator styling, and layout *** ### 🧩 Section Overview The Image Selector section allows customers to toggle through a series of clickable images—perfect for showcasing different product looks, color variants, or featured collections. Each image functions like a visual link with optional text and a clickable URL. *** ### ⚙️ How to Add and Customize the Image Selector #### 1. Add the Section * In the **Shopify Theme Editor**, click **Add section** * Select **Image Selector** * Drag the section into place in your layout *** ### 📷 Adding Slides (Images) Each image is added as a **Slide** block. #### To Add a Slide: 1. Click **Add Slide** 2. Upload an image 3. (Optional) Add: * **Link Text**: Appears beneath the image * **Link URL**: Paste a product, collection, or any link > 💡 Tip: Leave **Link Text** blank for a clean, image-only layout. *** ### 🎨 Design and Style Options Under the **Image Selector** settings, customize: #### Colors * **Background Color**: Choose solid or gradient * **Link Color**: Affects text below each image * **Indicator Border Color**: Outline color for selected image (seen in thumbnail nav) #### Typography * **Link Text Size (Desktop)**: Adjustable in `px` * **Link Text Size (Mobile)**: Adjustable in `px` * **Link Text Weight**: Toggle between `Regular` and `Bold` > 💡 Tip: Use bold and larger text for emphasis if you're highlighting different collections. *** ### 🧩 Section Tree Example ``` Image Selector ├── Slide – Look 1 ├── Slide – Look 2 ├── Slide – Look 3 ├── Slide – Look 4 ├── Slide – Look 5 └── Slide – Look 6 ``` *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Image Stream Section ### **What You’ll Learn** * How to create a horizontally scrolling image gallery * How to control scroll speed, direction, and spacing * How to add captions and links to images * How to adjust layout and typography for desktop and mobile
*** ### 🧩 Section Overview The Image Stream section is a horizontally scrolling row of images, great for displaying campaign shots, editorial looks, or brand highlights. It adds motion to your storefront and can be set to scroll automatically. *** ### How to Add the Section 1. In the **Shopify Theme Editor**, click **Add section** 2. Select **Image Stream** 3. Drag the section to your preferred location on the page *** ### Adding Images Each image is added using a block called **Image**. To add an image: * Click **Add Block**, then select **Image** * Upload or choose your image * (Optional) Add a **Caption** – this appears below the image > 💡 Tip: Keep captions short for a clean layout *** ### Section Settings #### Content & Links * **Section Title**: Add a heading for the section (optional) * **View Link URL**: Add a link to a product, collection, or page * **View Link Text**: This is the button text, like "SHOP" #### Colors * **Background Color**: Set the background behind the stream * **Section Title Color**: Set the heading and view link color *** ### Layout & Display * **Images per row on desktop**: Choose how many images show across (2 to 6) * **Image aspect ratio**: Controls image shape (e.g., Portrait, Square, Landscape) * **Height Mode**: * *Responsive*: Images scale based on aspect ratio * *Full Height*: Section fills the screen height (title and buttons are hidden) Additional options: * **Reverse Stream Direction**: Enable to scroll right-to-left * **Hide on mobile**: Hides the entire section on phones * **Auto-scroll speed**: Controls how fast images move (measured in pixels per second) > ⚠️ Slower scroll speeds look smoother and are easier to follow *** ### Typography Settings * **Section Header Size (Desktop)**: Default is 16px * **Section Header Size (Mobile)**: Default is 14px * **Bold Section Title**: Toggle on/off * **Bold View Link**: Toggle on/off *** ### Spacing Settings You can adjust spacing for both desktop and mobile. **Desktop Spacing** * Top: 20px * Bottom: 20px **Mobile Spacing** * Top: 16px * Bottom: 16px **Gap Between Images** * Choose from: None, Small, Medium, or Large > 💡 Tip: Use "None" for a seamless look, or add spacing to let each image breathe *** ### Section Structure Example The section includes multiple image blocks, each with its own image and caption. Example: * Image – Look 1 * Image – Look 2 * Image – Look 3 * Image – Look 4 *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Marquee Section ### **What You’ll Learn** * How to create a scrolling text marquee * How to add image, slideshow, or video backgrounds * How to adjust text speed, size, and layout * How to customize desktop and mobile appearance
*** ### 🧩 Section Overview The Marquee section displays large, horizontally scrolling text with optional backgrounds. It's perfect for bold messaging—like promotional statements, slogans, or headlines. This section supports background customization with: * Static images * Slideshows (up to 3 slides) * Videos (autoplayed and muted) * Solid color fills *** ### How to Add the Section 1. In the **Shopify Theme Editor**, click **Add section** 2. Select **Marquee** 3. Drag it to your desired spot in the layout *** ### Marquee Text Settings * **Marquee Text Content**: Add your scrolling text here * **Show Marquee Text**: Toggle on or off (helpful if using as a background-only section) * **Marquee Text Size (Desktop)**: Adjust text size in pixels * **Marquee Text Size (Mobile)**: Set a different size for small screens * **Marquee Text Color**: Set the text color using a hex code * **Marquee Speed**: Controls how fast the text moves (higher = faster) > 💡 Tip: Speeds between 5 and 15 usually offer the best balance of visibility and motion. *** ### Background Style Options Choose your background style under **Marquee Background Style**: * **Solid Color**: Set different colors for desktop and mobile * **Image Background**: Upload separate images for desktop and mobile * **Slideshow Background**: Upload up to 3 rotating images * **Video Background**: Upload a muted `.mp4` file that loops > ⚠️ On iPhones in Low Power Mode, videos may not autoplay due to system restrictions. *** ### Layout & Display * **Section Height**: Choose from: * Full Height (fills the entire screen) * Auto Height (based on content) #### Overlay Settings Customize overlays for both **Desktop** and **Mobile**: * **Overlay Color (Top/Bottom)**: Adds shading above or below * **Overlay Opacity (Top/Bottom)**: Adjust to control transparency Use overlays to improve text contrast on bright backgrounds. *** ### Spacing You can set different top and bottom spacing for desktop and mobile: **Desktop Spacing** * Top: Adjustable (default is 0px) * Bottom: Adjustable (default is 0px) **Mobile Spacing** * Top: Adjustable (default is 0px) * Bottom: Adjustable (default is 0px) > 💡 Use extra spacing if the marquee is stacked near other full-height sections. *** ### Mobile Fallback Option If your main background is a **video** or **slideshow**, you can force the mobile version to show an image instead. * Toggle **Override Mobile Background with Image** to enable this This is helpful for performance and reliability on older devices or low-bandwidth conditions. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Preloader Section ### **What You’ll Learn** * How to enable a branded loading screen before your site loads * How to customize the background, logo, and text * How to set the display duration *** ### 🧩 Section Overview The Preloader adds a full-screen loading screen that briefly appears when visitors land on your store. This is useful for enhancing brand presentation and creating a more polished user experience during the initial page load. You can display either text or an image (like a logo) along with custom background colors and timing. *** ### How to Enable the Preloader 1. In the **Shopify Theme Editor**, open the **Theme Settings** 2. Locate and expand the **Preloader** panel 3. Toggle on the **Preloader Logo Type** (choose between *Text* or *Image*) *** ### Preloader Settings #### Preloader Logo Type * **Text**: Displays a brand or theme name * **Image**: Use your logo or an animated visual #### Preloader Text * Add a short title (e.g., “Plain Jane 3.0”) * Customize the **Text Color** * Adjust **Text Size** using the slider > 💡 Tip: Use bold or large fonts for more visual impact #### Preloader Image * Upload a static or animated image (like a .GIF or .webp) #### Background Color * Set the background color of the preloader screen #### Preloader Duration * Controls how long the screen is shown (in seconds) * Default is 1 second; increase for longer loading animation effects *** ### Example Use Cases * Display your **logo animation** before the store opens * Match the **Preloader background** with your Hero section for a seamless transition * Use branded text like: “Loading Collection…” or “Powered by Plain Jane” > ⚠️ Keep durations short (1–3 seconds) to avoid slowing down user access *** ### Styling Tips * Match the preloader’s **colors** to your brand palette * Keep the **text minimal** for a clean look * Use a transparent or white background for a lightweight feel *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Product Carousel Section ### **What You’ll Learn** * How to display products in a horizontally scrollable layout * How to customize product labels, pricing, and badges * How to adjust product spacing, typography, and colors * How to set desktop and mobile layout preferences
*** ### 🧩 Section Overview The Product Carousel section displays a scrollable row of featured products. It’s ideal for promoting a specific collection or highlighting bestsellers. Products can include pricing, labels (like “Sale” or “Sold Out”), and custom layout settings. *** ### How to Add the Section 1. In the **Shopify Theme Editor**, click **Add section** 2. Choose **Product Carousel** 3. Drag and drop the section where you want it on the page *** ### Content & Data Settings * **Section Title**: Add a heading for the carousel (e.g., “Featured Products”) * **Shop Link Text**: Add a call-to-action button (e.g., “Shop All”) * **Shop Link URL**: Paste a collection or page link *** ### Layout & Display Options * **Product Text Alignment**: Align titles left, center, or right * Toggle the following options: * **Show Product Titles** * **Show Product Prices** * **Show Compare at Price** * **Show Sold Out Badge** * **Show Sale Badge** * **Show Pre-Order Badge** > 💡 Tip: Enable badges to highlight discounts or stock status. * **Products per Row – Desktop**: Choose how many products to display (1–6) * **Products per Row – Mobile**: Choose between 1–3 products *** ### Typography Controls * Adjust font sizes independently for desktop and mobile: * Section Header * Product Title * Product Price * Optional: Toggle **Bold** styles for: * Section Title * View Link * Product Title *** ### Color Customization * **Background Color**: Transparent, solid, or brand color * **Section Title & Link Color** * **Arrow Color** (navigation arrows) * **Product Title Color** * **Product Price Color** Label colors for each badge: * **Pre-Order** * **Sold Out** * **On Sale** * **Compare at Price** Each badge has both: * Text color * Background color > ⚠️ Make sure text and background colors contrast clearly for legibility. *** ### Spacing Settings You can adjust spacing for better visual balance across screen sizes. **Desktop** * Top spacing: 20px * Bottom spacing: 20px **Mobile** * Top spacing: 16px * Bottom spacing: 16px Additional controls: * **Space Between Section Header and Products** * **Space Between Product Image and Info** * **Space Between Product Title and Price** * **Gap Between Products (Desktop and Mobile)** *** ### Navigation Context Use the **Navigation Context** setting to define which collection customers stay in when clicking a product. For example: * If set to “Summer Collection,” clicking any product keeps customers browsing within that same collection. If this is not set, clicking a product takes users to the product's standard page without collection context. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Product Header Section For Plain Jane and Plain Jane Interactive > **What You'll Learn** > > * How to configure the Product Header section for branding and navigation > * Advanced typography and color customization options for product text elements > * How to set up price display formatting and sale price styling > * Best practices for product page text hierarchy and readability *** ## 🎯 What is the Product Header Section? The **Product Header Section** is a specialized typography and color control system designed specifically for product pages. Unlike a traditional page header, this section focuses on the visual styling of key product information elements including titles, descriptions, prices, and sale indicators. **Key Features:** * Advanced typography controls for product titles and descriptions * Customizable price display formatting with currency options * Sale price styling with highlighted colors * Consistent text color management across all product elements * Mobile-responsive typography scaling * Integration with product page layouts Available in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **Note**: This section controls the styling of product text elements rather than layout structure. It works in conjunction with Product Section layouts. *** ## 🔧 How to Configure Product Header Section 1. Go to **Online Store > Themes > Customize** 2. Navigate to **Products > Default product** 3. Look for **Product Header** or **Text Colors** section 4. Configure the typography and color settings 5. Preview changes on different products to ensure consistency > ⚠️ **Important**: This section affects the styling of product text elements across all product page layouts (Showcase, Thumbnail, etc.). *** ## ✏️ Typography & Color Controls ### **Product Title Styling** **Product Title Color** * Set the primary color for product names * Should provide strong contrast against page background * Typically uses brand primary color or neutral dark color * Default: #000000 (Black) **Best Practices:** * Use high contrast colors for accessibility * Maintain consistency with overall brand color scheme * Test readability on both light and dark backgrounds * Consider mobile viewing conditions ### **Product Description Styling** **Product Description Color** * Controls the color of product description text * Usually a slightly lighter shade than the title for hierarchy * Should remain highly readable while being less prominent than title * Default: #000000 (Black) **Content Guidelines:** * Keep descriptions concise and scannable * Use consistent tone and voice across products * Include key features and benefits * Optimize for mobile reading *** ## 💰 Price Display Configuration ### **Primary Price Styling** **Price Color** * Set the color for regular product pricing * Often matches product title color for consistency * May use brand accent color to highlight pricing * Default: #000000 (Black) **Price Font Size** * Adjustable range: 10-30px * Default: 24px * Should be prominent enough to be easily seen * Consider price importance in purchase decision ### **Currency Format Options** **Currency Display Settings** * **With Currency**: Shows full currency symbol (e.g., "$24.99") * **Without Currency**: Shows only numerical value (e.g., "24.99") * Default: Without Currency **When to Use Each Format:** * **With Currency**: International stores, multiple currencies, clarity for new customers * **Without Currency**: Clean minimal aesthetic, domestic stores, space constraints *** ## 🏷️ Sale Price & Promotion Styling ### **Sale Text Configuration** **Sale Text Color** * Color for "Was" or "Originally" text preceding crossed-out prices * Usually a neutral gray or muted color * Should be readable but less prominent than sale price * Default: #000000 (Black) **Typical Sale Text Examples:** * "Was $XX.XX" * "Originally $XX.XX" * "MSRP $XX.XX" * "Compare at $XX.XX" ### **Sale Price Styling** **Sale Price Color** * Color for the highlighted sale or discounted price * Commonly uses red, orange, or brand accent color * Should create visual urgency while maintaining readability * Default: #FF0000 (Red) **Sale Price Font Size** * Adjustable range: 10-30px * Default: 16px * Often smaller than regular price to show it's a comparison * Should maintain visual hierarchy with current price *** ## 🎨 Visual Hierarchy Best Practices ### **Color Strategy** **Information Priority Order:** 1. **Product Title** - Highest contrast, most prominent 2. **Current Price** - Bold, clear, brand color 3. **Product Description** - Readable but secondary 4. **Sale Price** - Attention-grabbing accent color 5. **Sale Text** - Muted, supporting information ### **Typography Hierarchy** **Font Size Recommendations:** * **Product Title**: Largest, typically 24-32px desktop * **Current Price**: Prominent, 20-28px desktop * **Description**: Readable, 14-16px desktop * **Sale Price**: Supporting, 14-18px desktop ### **Color Contrast Guidelines** **Accessibility Standards:** * Minimum 4.5:1 contrast ratio for normal text * Minimum 3:1 contrast ratio for large text (18px+ bold or 24px+) * Test with accessibility tools like WebAIM Contrast Checker * Consider colorblind users with sufficient brightness contrast *** ## 📱 Mobile Optimization ### **Responsive Typography** **Mobile Considerations:** * All font sizes automatically scale for mobile devices * Text hierarchy remains consistent across screen sizes * Touch-friendly spacing maintained around clickable elements * Reading distance optimized for mobile viewing **Mobile-Specific Adjustments:** * Slightly smaller font sizes for space efficiency * Increased line height for better readability * Optimized color contrast for outdoor viewing conditions * Consideration for thumb navigation around text elements ### **Mobile Performance** **Loading Optimization:** * CSS color values load instantly with page * No additional image assets required for text styling * Minimal impact on page load speed * Efficient rendering across all mobile devices *** ## 🔄 Integration with Product Layouts ### **Showcase Layout Integration** When using Product Section (Showcase): * Text colors apply consistently to traditional layout * Typography scales appropriately for side-by-side display * Price styling integrates with thumbnail gallery positioning * Description formatting works with expanded text areas ### **Thumbnail Layout Integration** When using Product Section (Thumbnail): * Colors work seamlessly with modern grid-based layout * Typography optimizes for bottom modal experience on mobile * Price display adapts to advanced variant selection * Sale pricing integrates with badge system *** ## 💡 Advanced Customization Tips ### **Brand Consistency** **Color Coordination:** * Match product title colors to brand primary colors * Use sale price colors that align with promotional branding * Coordinate with button colors and accent elements * Maintain consistency across all product pages **Typography Coordination:** * Align font sizes with overall theme typography scale * Consider how product text relates to section headers * Maintain readable hierarchy throughout the page * Test with various product title lengths ### **Conversion Optimization** **Price Psychology:** * Use red or orange for sale prices to create urgency * Make regular prices prominent and trustworthy * Consider hiding currency symbols for cleaner aesthetic * Test different color combinations for conversion impact **User Experience:** * Ensure quick scanability of key information * Prioritize mobile readability for on-the-go shoppers * Make price information immediately clear and trustworthy * Create visual flow from title to price to action *** ## 🔧 Troubleshooting ### **Color Not Applying** **Common Issues:** * Browser cache may need clearing after color changes * Some third-party apps may override theme colors * Custom CSS might be conflicting with theme settings * Ensure changes are saved and published **Solutions:** * Clear browser cache and refresh page * Check for app conflicts in theme code * Review any custom CSS for color overrides * Test in incognito/private browsing mode ### **Text Readability Problems** **Accessibility Issues:** * Insufficient contrast between text and background * Font sizes too small for comfortable reading * Color combinations difficult for colorblind users * Mobile viewing challenges **Solutions:** * Use contrast checking tools to verify accessibility * Test font sizes on actual mobile devices * Consider colorblind-friendly color combinations * Get feedback from users with accessibility needs ### **Mobile Display Issues** **Common Problems:** * Text appearing too small on mobile devices * Color contrast insufficient in bright lighting * Typography hierarchy unclear on small screens * Touch targets too close to text elements **Solutions:** * Test on actual mobile devices, not just browser resize * Increase font sizes if mobile readability is poor * Check color contrast in various lighting conditions * Ensure adequate spacing around clickable elements *** ## 📊 Performance Impact ### **Loading Efficiency** **Minimal Resource Usage:** * Text styling uses efficient CSS properties * No additional image or font loading required * Instant application of color changes * No JavaScript required for basic functionality **SEO Benefits:** * Clean HTML structure maintains search engine readability * Proper heading hierarchy supports SEO * Accessible color contrast improves user experience signals * Fast loading contributes to page speed scores *** ## 🎯 Best Practices Summary ### **Setup Checklist** ``` ✅ Set product title color with high contrast ✅ Configure price color for clear visibility ✅ Choose sale price color that creates urgency ✅ Test currency format preference (with/without symbol) ✅ Verify description color provides good readability ✅ Check all colors for accessibility compliance ✅ Test typography hierarchy on mobile devices ✅ Ensure integration with chosen product layout ✅ Review consistency across different product types ✅ Test with actual product content and images ``` ### **Ongoing Maintenance** * Regularly review color choices for brand consistency * Test new products with existing typography settings * Monitor customer feedback about readability * Update colors when refreshing brand guidelines * Ensure accessibility compliance with any changes *** The Product Header section provides the foundation for creating professional, readable, and conversion-optimized product pages. Proper configuration ensures customers can quickly find and understand key product information while maintaining your brand aesthetic. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Product Logo Section For Plain Jane and Plain Jane Interactive > **What You'll Learn** > > * How to configure the Product Logo Section for branding and cart display > * Advanced customization options for logo, cart, and timezone features > * How to set up cart counter styling and promotional timing displays > * Best practices for product page header optimization and user experience *** ## 🎯 What is the Product Logo Section? The **Product Logo Section** is a specialized header component designed specifically for product pages that combines branding, cart functionality, and optional timezone display. Unlike traditional page headers, this section is optimized for the product shopping experience and includes integrated cart counter and real-time information displays. **Key Features:** * Product-specific logo display with custom sizing * Live cart counter with customizable styling * Optional date/time display with timezone support * Streamlined header design optimized for product pages * Mobile-responsive layout and interactions * Integration with global cart functionality Available in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **Note**: This section specifically appears on product pages and works in conjunction with product layouts to provide optimal shopping experience. *** ## 🔧 How to Add Product Logo Section 1. Go to **Online Store > Themes > Customize** 2. Navigate to **Products > Default product** 3. Click **Add section** 4. Select **Logo, Cart, & Clock** (Product Logo Section) 5. Configure the logo, cart, and timezone settings 6. Position the section at the top of the product page layout > ⚠️ **Important**: This section is designed for product pages specifically and includes cart functionality integrated with the product purchase flow. *** ## 🏢 Logo Configuration ### **Product Page Logo Display** **Show Product Logo** * Enable/disable logo display on product pages * Controlled via Theme Settings → Logo → "Show Product Page Logo" * Independent from other page logos (homepage, collection, etc.) **Logo Image Source** * Uses the logo uploaded in Theme Settings → Logo → "Product Page Logo" * Falls back to default logo if product-specific logo not set * Supports PNG, JPG, and SVG formats **Logo Sizing** * **Product Screen Logo Size**: Adjustable via theme settings * Range typically 50-200px width * Automatically maintains aspect ratio * Responsive scaling for mobile devices ### **Logo Linking & Navigation** **Homepage Link** * Logo automatically links to store homepage (routes.root\_url) * Provides consistent site navigation from product pages * Opens in same window for seamless user experience **Accessibility Features** * Includes proper alt attributes for screen readers * Keyboard navigation support * Touch-friendly sizing for mobile devices *** ## 🛒 Cart Counter Integration ### **Live Cart Display** **Real-Time Updates** * Shows current cart item count * Updates automatically when products added/removed * Synchronizes across all page interactions * No page refresh required for updates **Cart Text Customization** * **Cart Text Color**: Color for "Cart" label text * Default: #000000 (Black) * Should contrast well with section background ### **Cart Quantity Indicator** **Cart Count Badge** * **Cart Quantity Color**: Text color for item count number * Default: #FFFFFF (White) * **Cart Quantity Background Color**: Badge background color * Default: #000000 (Black) **Badge Styling** * Circular badge design for clear visibility * Automatically positioned relative to cart text * Scales appropriately for mobile viewing * High contrast for accessibility compliance ### **Cart Interaction** **Cart Access** * Clicking cart area can trigger cart drawer (if enabled) * Integrates with theme's cart functionality * Provides quick cart overview without leaving product page * Optimized for conversion and user experience *** ## ⏰ Date & Time Display ### **Timezone Information** **Show Date/Time Toggle** * **Show Date/Time**: Enable/disable timezone display * Default: Enabled * Useful for creating urgency or providing store context **Date Display** * **Date Color**: Customizable color for date text * Default: #000000 (Black) * Shows current date in store timezone * Automatically updates daily **Time Display** * **Time Color**: Customizable color for time text * Default: #000000 (Black) * Shows current time in store timezone * Updates in real-time ### **Alignment Options** **Date/Time Positioning** * **Alignment**: Left, Center, or Right positioning * Default: Right alignment * Allows coordination with logo and cart positioning * Responsive behavior on mobile devices *** ## 🎨 Layout & Design Configuration ### **Section Positioning** **Header Structure** * Logo positioned on left side * Cart counter positioned on right side * Date/time display integrated with cart area * Clean, minimal design aesthetic **Z-Index & Layering** * Section positioned with z-index: 2 for proper layering * Ensures visibility over other page elements * Maintains accessibility for interactive elements ### **Spacing & Padding** **Section Padding** * Top padding: 25px (desktop) * Bottom padding: 10px (desktop) * Responsive adjustments for mobile devices **Logo Margins** * Top margin: 5px * Bottom margin: 10px * Provides proper visual spacing **Cart Text Positioning** * Top margin: 10px for alignment with logo * Coordinated spacing with date/time elements *** ## 📱 Mobile Optimization ### **Responsive Design** **Mobile Layout** * Logo scales appropriately for smaller screens * Cart counter maintains touch-friendly size * Date/time display adapts to available space * Maintains functionality across all devices **Touch Interactions** * Cart area optimized for touch navigation * Logo link sized appropriately for mobile tapping * No small touch targets that could cause user frustration **Performance Considerations** * Minimal JavaScript for real-time updates * Efficient CSS for smooth animations * Fast loading without impacting page speed *** ## 🔄 Integration with Product Experience ### **Shopping Flow Enhancement** **Conversion Optimization** * Cart counter provides immediate feedback * Logo maintains brand presence during shopping * Date/time can create urgency for limited offers * Streamlined header reduces distractions **User Experience Benefits** * Consistent branding throughout shopping process * Easy cart access without leaving product page * Clear navigation back to homepage * Professional, trustworthy appearance ### **Coordination with Product Sections** **Layout Harmony** * Works with all product section layouts (Showcase, Thumbnail) * Maintains consistent header experience * Doesn't interfere with product image galleries * Coordinates with product page typography *** ## 💡 Advanced Customization Tips ### **Brand Consistency** **Logo Coordination** * Use product-specific logo if different from homepage * Maintain consistent sizing across product pages * Ensure logo quality at all screen sizes * Consider logo visibility against various product images **Color Strategy** * Coordinate cart colors with product page elements * Ensure sufficient contrast for accessibility * Match date/time colors with overall theme * Test color combinations with different product backgrounds ### **Marketing Integration** **Promotional Timing** * Use date/time display for flash sales * Create urgency with countdown messaging * Coordinate with limited-time offers * Enhance seasonal campaigns **Cart Psychology** * Use contrasting cart badge colors to draw attention * Position cart prominently for easy access * Maintain cart visibility throughout product browsing * Encourage cart completion with clear indicators *** ## 🔧 Troubleshooting ### **Logo Not Displaying** **Common Issues** * Logo not uploaded in Theme Settings → Logo → Product Page Logo * "Show Product Page Logo" setting disabled * Image file format not supported * Logo size setting too small to be visible **Solutions** * Upload logo in Theme Settings first * Enable "Show Product Page Logo" toggle * Use PNG, JPG, or SVG formats * Increase logo size setting * Clear browser cache after changes ### **Cart Counter Not Updating** **Potential Problems** * JavaScript conflicts with other apps * Theme cache preventing real-time updates * Cart drawer conflicts with section * Browser compatibility issues **Solutions** * Check for app conflicts in theme code * Clear theme cache and browser cache * Disable conflicting cart apps temporarily * Test in different browsers * Ensure cart functionality enabled in theme settings ### **Date/Time Display Issues** **Common Problems** * Timezone not set correctly in Shopify settings * Date/time colors too light to be visible * Text positioning conflicts with other elements * Mobile display formatting problems **Solutions** * Verify timezone in Shopify Admin → Settings → General * Increase color contrast for better visibility * Adjust alignment settings for better positioning * Test on actual mobile devices for formatting * Check date/time translation settings if using multiple languages *** ## 📊 Performance Impact ### **Loading Efficiency** **Minimal Resource Usage** * Lightweight section with minimal JavaScript * CSS-based styling for fast rendering * No additional image loading beyond logo * Efficient cart counter updates **SEO Considerations** * Logo provides proper branding for search engines * Clean HTML structure supports SEO * No negative impact on page speed scores * Proper heading hierarchy maintained *** ## 🎯 Best Practices Summary ### **Setup Checklist** ``` ✅ Upload product-specific logo in Theme Settings ✅ Enable "Show Product Page Logo" setting ✅ Configure cart text and badge colors ✅ Set appropriate logo size for mobile viewing ✅ Choose date/time display based on store needs ✅ Test cart counter functionality with actual products ✅ Verify color contrast for accessibility ✅ Check mobile display and touch interactions ✅ Coordinate colors with product page design ✅ Test logo link functionality to homepage ``` ### **Ongoing Optimization** **Regular Reviews** * Monitor cart counter performance during high traffic * Test logo visibility with new product images * Update colors when refreshing brand guidelines * Verify date/time accuracy during timezone changes **Conversion Optimization** * A/B test cart badge colors for better visibility * Monitor cart abandonment rates with section enabled * Track logo click-through rates to homepage * Analyze user interaction with date/time information *** ## 🚀 Advanced Use Cases ### **Seasonal Customization** **Holiday Branding** * Switch to seasonal logos for special events * Coordinate cart colors with holiday themes * Use date/time display for countdown to sales * Create cohesive seasonal shopping experience ### **Limited Edition Campaigns** **Urgency Creation** * Highlight current time for flash sales * Use cart styling to emphasize limited quantities * Coordinate with product scarcity messaging * Enhance premium product presentation ### **International Stores** **Multi-Region Setup** * Configure appropriate timezones for target markets * Consider cultural preferences for logo placement * Test cart functionality across different regions * Ensure date formats match local conventions *** The Product Logo Section provides essential branding and functionality for product pages, creating a cohesive shopping experience that builds trust and encourages conversions while maintaining your brand presence throughout the customer journey. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Related Products Section For Plain Jane and Plain Jane Interactive > **What You'll Learn** > > * How to display related products with horizontal scrolling carousel > * Advanced customization options for layout, typography, and spacing > * How to configure product recommendations and navigation > * Best practices for improving cross-selling and upselling *** ## 🎯 What is the Related Products Section? The **Related Products Section** is a dynamic product recommendation carousel that appears on product pages to showcase related, complementary, or similar products. This section uses Shopify's built-in product recommendation engine to automatically suggest relevant products to customers, helping increase average order value and improve the shopping experience. **Key Features:** * Automatic product recommendations based on Shopify's algorithm * Horizontal scrolling carousel with navigation arrows * Customizable product display options (titles, prices, badges) * Advanced typography and spacing controls * Mobile-responsive design with touch navigation * Real-time product data loading Available in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **Note**: This section is only available on product pages and uses Shopify's product recommendations API. *** ## 🔧 How to Add Related Products Section 1. Go to **Online Store > Themes > Customize** 2. Navigate to **Products > Default product** 3. Scroll down to the bottom of the section list 4. Click **Add section** 5. Select **Product Recommendations** or **Related Products** 6. Configure the display options and styling > ⚠️ **Important**: This section only appears on actual product pages, not in the theme editor preview when viewing collections or the homepage. *** ## 📋 Content & Display Options ### **Section Header** **Section Title** * Customize the heading text (e.g., "You May Also Like", "Related Products") * Leave blank to hide the section header entirely * Default: "Related Products" **Products Limit** * Set the maximum number of products to display (1-8 products) * Shopify automatically filters and selects the most relevant products * Default: 4 products ### **Product Information Display** **Show Product Titles** * Toggle product names on/off * Essential for product identification * Recommended: Keep enabled **Show Product Prices** * Display product pricing below titles * Helps customers make informed decisions * Includes sale price display when applicable **Show Compare-at Price** * Display original price when products are on sale * Shows crossed-out pricing for transparency * Automatically appears only when products have sale pricing **Product Badges** * **Show Sold Out Badge**: Indicates unavailable products * **Show Sale Badge**: Highlights discounted items * **Show Pre-Order Badge**: Marks upcoming products *** ## 🎨 Layout & Design Configuration ### **Product Grid Layout** **Products per Row (Desktop)** * Set how many products display across desktop screens (1-6 products) * Default: 4 products * Recommendation: 3-4 for optimal visual balance **Products per Row (Mobile)** * Control mobile display (1-3 products) * Default: 2 products * Mobile automatically enables horizontal scrolling **Product Text Alignment** * Align product titles and prices: Left, Center, or Right * Center alignment creates a more polished appearance * Left alignment offers better readability for longer product names ### **Navigation Controls** **Arrow Navigation** * Built-in left/right arrows for desktop navigation * Customizable arrow color to match brand * Automatically appears when more products exist than displayed **Touch/Swipe Navigation** * Native touch scrolling support on mobile devices * Smooth momentum scrolling for better user experience * No additional setup required *** ## ✏️ Typography Customization ### **Font Sizes** All text elements can be customized separately for desktop and mobile: **Section Title Size** * Desktop: 16-32px range * Mobile: 14-24px range * Default: 20px desktop, 18px mobile **Product Title Size** * Desktop: 12-20px range * Mobile: 10-16px range * Default: 14px desktop, 12px mobile **Product Price Size** * Desktop: 12-18px range * Mobile: 10-14px range * Default: 14px desktop, 12px mobile ### **Font Weight Options** **Bold Section Title** * Toggle to make section header bold (700 weight) * Helps section stand out from product content * Recommended for clear visual hierarchy **Bold Product Title** * Make product names bold for emphasis * Useful for minimalist designs where text needs more presence * Consider readability impact on longer product names **Bold View Link** * Make arrow navigation controls bold * Subtle enhancement for navigation visibility *** ## 🎨 Color Customization ### **Background & Section Colors** **Background Color** * Set section background color * Use transparent for seamless page integration * Consider subtle background colors for section definition **Section Title Color** * Customize header text color * Should contrast well with background * Typically matches primary brand color **Arrow Color** * Set navigation arrow color * Should be visible against background * Often uses accent color or neutral gray ### **Product Information Colors** **Product Title Color** * Color for product names * Usually neutral (black, dark gray) for readability * Should maintain good contrast for accessibility **Product Price Color** * Color for pricing information * Often matches product title color for consistency * May use accent color to highlight pricing ### **Product Badge Colors** Each badge type has separate text and background color controls: **Pre-Order Badge** * Text color and background color * Often uses blue or neutral tones * Should communicate "coming soon" clearly **Sold Out Badge** * Text color and background color * Typically uses gray or muted colors * Communicates unavailability clearly **On Sale Badge** * Text color and background color * Usually uses red, orange, or brand accent * Creates urgency and highlights savings **Compare-at Price Color** * Color for crossed-out original pricing * Typically gray or muted to de-emphasize * Should be readable but less prominent than sale price *** ## 📏 Advanced Spacing Controls ### **Section Spacing** **Top Spacing** * Desktop: 0-200px range, default 20px * Mobile: 0-100px range, default 16px * Controls space above the entire section **Bottom Spacing** * Desktop: 0-200px range, default 20px * Mobile: 0-100px range, default 16px * Controls space below the entire section ### **Internal Spacing** **Header to Products Spacing** * Range: 8-80px, default 32px * Space between section title and product grid * Helps create visual separation and breathing room **Image to Info Spacing** * Range: 8-80px, default 24px * Vertical space between product image and text information * Affects the visual connection between image and details **Title to Price Spacing** * Range: 4-40px, default 8px * Space between product name and pricing * Keep minimal for tight information grouping **Product Gap** * Desktop: 8-160px range, default 16px * Mobile: 8-160px range, default 16px * Horizontal space between products in the carousel *** ## 🚀 How Product Recommendations Work ### **Shopify's Algorithm** The Related Products section uses Shopify's machine learning algorithm to determine which products to show: **Recommendation Factors:** * Products frequently bought together * Products viewed together in the same session * Similar product categories and tags * Complementary product relationships * Customer behavior patterns **Automatic Updates:** * Recommendations improve over time as more data is collected * No manual configuration required for product relationships * Algorithm adapts to seasonal trends and customer preferences ### **Fallback Behavior** When insufficient data exists for recommendations: * Section may display products from the same collection * Random products from store inventory may appear * Section can be hidden if no suitable products found *** ## 📱 Mobile Optimization ### **Responsive Design** **Mobile Layout** * Automatically adjusts products per row for mobile screens * Touch-friendly navigation with swipe gestures * Optimized spacing for touch targets **Performance Optimization** * Lazy loading for improved page speed * Compressed images for faster loading * Minimal JavaScript for smooth scrolling **User Experience** * Smooth momentum scrolling * Clear visual indicators for more products * Easy-to-tap product images and information *** ## 💡 Best Practices ### **Content Strategy** **Section Placement** * Add near the bottom of product pages * Place after main product content but before footer * Consider adding after product reviews if available **Product Information** * Always show product titles for clarity * Include prices for transparent shopping experience * Use badges strategically to highlight key information ### **Design Recommendations** **Visual Hierarchy** * Keep section title clear but not overpowering * Ensure product images are the primary focus * Use consistent spacing throughout the section **Color Strategy** * Maintain brand consistency with existing product page colors * Ensure sufficient contrast for accessibility * Use sale badges sparingly to maintain impact ### **Performance Considerations** **Image Optimization** * Ensure related products have optimized images * Use consistent aspect ratios for visual harmony * Compress images without sacrificing quality **Loading Strategy** * Section loads after main product content * Graceful fallback if recommendations fail to load * Minimal impact on page load speed *** ## 🔧 Troubleshooting ### **Section Not Appearing** **Check Product Status** * Ensure viewing an actual product page (not collection) * Verify product is published and available * Check that store has multiple products for recommendations **Theme Configuration** * Confirm section is added to product template * Verify section isn't hidden or disabled * Check that product recommendation limits aren't set to 0 ### **No Products Showing** **Data Requirements** * Store needs sufficient product data for recommendations * Algorithm requires time to learn customer behavior patterns * Consider manually adding products to collections as fallback **API Limitations** * Shopify's recommendations API has daily limits * High-traffic stores may occasionally see empty sections * Algorithm performance improves with store age and traffic ### **Styling Issues** **Responsive Problems** * Test on actual mobile devices, not just browser resizing * Check that mobile spacing values are appropriate * Verify touch targets are large enough for easy interaction **Color Contrast** * Ensure text remains readable on chosen backgrounds * Test with accessibility tools for WCAG compliance * Consider different lighting conditions for mobile viewing *** ## 📊 Performance Impact ### **Loading Behavior** **Asynchronous Loading** * Section content loads after page initial render * Doesn't block main product page content * Graceful degradation if API calls fail **Data Usage** * Minimal additional data transfer * Cached product information when possible * Optimized API calls to Shopify's servers ### **SEO Considerations** **Content Value** * Provides additional internal linking opportunities * Helps search engines understand product relationships * Can improve time on site and reduce bounce rate **Page Speed** * Minimal impact on core page load metrics * Section loads progressively * Optimized for mobile Core Web Vitals *** The Related Products section is a powerful tool for increasing sales and improving customer experience. When properly configured, it can significantly boost average order value while providing genuine value to customers by surfacing relevant product options. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Collection Logo Section For Plain Jane and Plain Jane Interactive > **What You'll Learn** > > * How to configure the Collection Logo Section for enhanced collection page branding > * Advanced features including mobile menu, filter buttons, and cart integration > * Comprehensive mobile navigation and menu customization options > * Best practices for collection page header optimization and user experience *** ## 🎯 What is the Collection Logo Section? The **Collection Logo Section** is a sophisticated header component designed specifically for collection pages that provides comprehensive navigation, branding, and filtering functionality. This section goes beyond simple logo display to include a full mobile menu system, filter controls, cart integration, and date/time features optimized for the collection browsing experience. **Key Features:** * Collection-specific logo display with custom sizing * Interactive hamburger menu with filter functionality * Comprehensive mobile menu system with nested navigation * Live cart counter with customizable styling * Optional date/time display with timezone support * Advanced mobile navigation with swipe gestures * Customizable menu colors, typography, and spacing * Integration with collection filtering and search Available in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **Note**: This section is specifically designed for collection pages and includes advanced mobile navigation features not found in other page types. *** ## 🔧 How to Add Collection Logo Section 1. Go to **Online Store > Themes > Customize** 2. Navigate to **Collections > \[Any Collection]** 3. Click **Add section** 4. Select **Collection Logo Section** (or similar naming) 5. Configure the logo, menu, cart, and mobile settings 6. Position the section at the top of the collection page layout > ⚠️ **Important**: This section is optimized for collection pages and includes specialized functionality for product filtering and collection navigation. *** ## 🏢 Logo Configuration ### **Collection Page Logo Display** **Collection Logo Settings** * Uses the logo uploaded in Theme Settings → Logo → "Collection Page Logo" * Falls back to default logo if collection-specific logo not set * Supports PNG, JPG, and SVG formats * Independent from homepage and product page logos **Logo Sizing** * **Collection Screen Logo Size**: Adjustable via theme settings * Range typically 50-200px width * Automatically maintains aspect ratio * Responsive scaling for mobile devices **Logo Linking & Navigation** * Logo automatically links to store homepage * Provides consistent site navigation from collection pages * Opens in same window for seamless user experience * Accessible keyboard navigation support *** ## 🍔 Hamburger Menu & Filter Integration ### **Filter Button Functionality** **Interactive Filter Control** * Hamburger menu icon that serves as filter/menu toggle * SVG-based icon with customizable stroke color * Conditional display based on collection context * Touch-optimized for mobile devices **Filter Icon Styling** * **Background Color**: Customizable stroke color for hamburger lines * Uses section background color settings * Scalable SVG for crisp display at all sizes * Consistent with overall section color scheme **Filter Behavior** * Clicking opens mobile menu overlay * Integrates with collection filtering system * Provides access to collection navigation * Optimized for touch interactions *** ## 📱 Advanced Mobile Menu System ### **Mobile Menu Structure** **Navigation Menu Display** * Full-screen mobile menu overlay * Hierarchical menu structure support * Custom menu assignment from Shopify Navigation * Nested navigation with sub-menus **Mobile Menu Colors** * **Mobile Navigation Background Color**: Main menu background * **Mobile Navigation Link Color**: Text color for menu links * **Mobile Navigation Link Hover Color**: Hover text color * **Mobile Navigation Link Background Color**: Hover background color * **Close Button Color**: X button color for menu close ### **Typography & Layout** **Mobile Text Settings** * **Text Alignment**: Left, Center, or Right alignment * **Font Size**: Adjustable range 10-26px (default: 16px) * **Vertical Spacing**: Adjustable spacing 0-36px between menu items **Menu Interaction** * Smooth open/close animations * Touch-friendly menu items * Accessible navigation structure * Swipe gesture support *** ## 🛒 Cart Integration ### **Cart Display & Functionality** **Cart Wrapper Integration** * Full Shopify commerce cart integration * Right sidebar cart functionality * Configurable cart duration (default: 1000ms) * Real-time cart updates **Cart Counter Display** * Shows current cart item count * Updates automatically when products added/removed * Integrates with overall cart system * Consistent with theme cart functionality **Cart Styling Options** * Inherits styling from mobile menu color settings * Coordinates with filter button colors * Responsive design for all screen sizes * Touch-optimized for mobile interactions *** ## ⏰ Date & Time Display ### **Timezone Information** **Show Date/Time Toggle** * **Show Date/Time**: Enable/disable timezone display * Default: Varies by theme configuration * Useful for collection launch timing or store context **Date & Time Colors** * **Date Color**: Customizable color for date text * **Time Color**: Customizable color for time text * Consistent with logo section styling * Updates automatically based on store timezone **Date/Time Positioning** * Integrated with cart and logo layout * Responsive positioning for mobile devices * Coordinates with other header elements *** ## 🎨 Layout & Design Configuration ### **Section Structure** **Header Layout** * Logo positioned on left side * Hamburger menu/filter button on far left * Cart and date/time positioned on right side * Clean, organized header hierarchy **Container Styling** * Custom CSS class: "logo-container collection" * Optimized specifically for collection pages * Responsive design patterns * Consistent spacing and alignment ### **Visual Hierarchy** **Element Priority** 1. **Filter/Menu Button** - Primary navigation control 2. **Logo** - Brand presence and homepage link 3. **Cart Counter** - Shopping functionality 4. **Date/Time** - Supporting information **Color Coordination** * Unified color scheme across all elements * Customizable background and text colors * Hover state styling for interactive elements * Accessibility-compliant contrast ratios *** ## 📱 Mobile Optimization ### **Touch-First Design** **Mobile Interface** * Large touch targets for all interactive elements * Optimized hamburger menu for thumb navigation * Smooth animations and transitions * Gesture-based navigation support **Responsive Behavior** * Logo scales appropriately for mobile screens * Menu button maintains touch-friendly size * Cart counter remains visible and accessible * Date/time display adapts to available space **Performance Considerations** * Optimized mobile menu loading * Efficient CSS animations * Minimal JavaScript overhead * Fast cart integration *** ## 🔄 Integration with Collection Experience ### **Collection Navigation Enhancement** **Filter Integration** * Hamburger menu provides access to collection filters * Seamless integration with search functionality * Product sorting and filtering options * Category navigation within collections **Shopping Flow Optimization** * Quick access to cart from collection browsing * Brand consistency throughout collection navigation * Efficient product discovery through menu system * Streamlined path from collection to product pages ### **Collection-Specific Features** **Context-Aware Functionality** * Different behavior when on collection vs. other pages * Collection-specific menu options * Integration with collection page layouts * Optimized for product browsing experience *** ## 🎛️ Advanced Customization Options ### **Menu System Customization** **Navigation Menu Setup** 1. Go to **Online Store > Navigation** in Shopify Admin 2. Create or edit menu for collection navigation 3. Add collection links, categories, and filters 4. Organize hierarchical menu structure 5. Assign menu in theme section settings **Color Strategy** * Coordinate menu colors with collection page design * Ensure sufficient contrast for mobile viewing * Match filter button colors with menu styling * Create cohesive visual experience ### **Mobile Menu Enhancements** **Advanced Features** * Custom background images for menu overlay * Animated menu transitions * Nested submenu support * Integration with collection filtering * Search functionality within menu **Typography Customization** * Responsive font sizing for mobile devices * Consistent typography with collection pages * Readable hierarchy for menu navigation * Optimized spacing for touch interaction *** ## 🔧 Troubleshooting ### **Logo Not Displaying** **Common Issues** * Collection logo not uploaded in Theme Settings * "Show Collection Page Logo" setting disabled * Logo file format not supported * Conflicts with other collection sections **Solutions** * Upload logo in Theme Settings → Logo → Collection Page Logo * Enable "Show Collection Page Logo" toggle * Use PNG, JPG, or SVG formats * Check for section conflicts on collection pages * Clear browser cache after logo changes ### **Mobile Menu Not Working** **Potential Problems** * JavaScript conflicts with other apps * Menu not assigned in section settings * Mobile CSS conflicts * Touch interaction issues **Solutions** * Check for app conflicts affecting mobile menu * Assign navigation menu in section settings * Test mobile menu in different browsers * Verify touch targets are appropriately sized * Check for CSS conflicts with custom code ### **Filter Button Issues** **Common Problems** * Filter button not responding to clicks * Icon colors not displaying correctly * Filter functionality not working * Mobile interaction problems **Solutions** * Verify background color settings for icon * Check for JavaScript conflicts * Test filter functionality on actual devices * Ensure proper integration with collection filtering * Review mobile touch target sizing ### **Cart Integration Problems** **Potential Issues** * Cart counter not updating * Cart drawer conflicts * Integration with collection add-to-cart * Mobile cart interaction issues **Solutions** * Check cart functionality across theme * Verify cart drawer settings compatibility * Test cart updates from collection pages * Ensure proper cart JavaScript integration * Review mobile cart interaction flow *** ## 📊 Performance Impact ### **Loading Efficiency** **Optimized Performance** * Lightweight section with minimal JavaScript * Efficient CSS for mobile menu animations * SVG icons for scalable graphics * Optimized cart integration **Mobile Performance** * Fast-loading mobile menu * Smooth animations without lag * Efficient touch event handling * Minimal impact on collection page load times **SEO Considerations** * Proper heading hierarchy for navigation * Accessible menu structure * Logo provides branding context * Clean HTML structure for search engines *** ## 🎯 Best Practices Summary ### **Setup Checklist** ``` ✅ Upload collection-specific logo in Theme Settings ✅ Enable "Show Collection Page Logo" setting ✅ Create and assign navigation menu for mobile interface ✅ Configure hamburger menu colors for visibility ✅ Set up cart integration and test functionality ✅ Configure date/time display if using promotional timing ✅ Test mobile menu functionality on actual devices ✅ Verify touch targets are appropriately sized ✅ Check color contrast for accessibility compliance ✅ Test integration with collection filtering ✅ Verify cart counter updates properly ✅ Ensure smooth mobile menu animations ``` ### **Ongoing Optimization** **Regular Maintenance** * Monitor mobile menu performance during traffic spikes * Update navigation menu structure as collections change * Test new mobile devices for compatibility * Review color schemes when updating brand guidelines * Verify cart integration after theme updates **Conversion Optimization** * Analyze mobile menu usage patterns * Test different menu structures for navigation efficiency * Monitor cart conversion rates from collection pages * Optimize filter button visibility for better engagement * Track user interaction with date/time promotional elements *** ## 🚀 Advanced Use Cases ### **Seasonal Collections** **Dynamic Branding** * Switch collection logos for seasonal campaigns * Coordinate menu colors with seasonal themes * Use date/time display for limited collection launches * Create cohesive seasonal collection experience ### **Product Launch Strategy** **Launch Optimization** * Highlight launch timing with date/time display * Use mobile menu for exclusive collection access * Coordinate cart styling with launch campaign * Create urgency through visual design elements ### **Multi-Category Stores** **Complex Navigation** * Organize extensive menu structures for large catalogs * Use nested menus for category hierarchies * Optimize mobile navigation for complex product ranges * Streamline collection-to-collection navigation *** The Collection Logo Section provides essential navigation and branding functionality specifically optimized for collection pages, creating an enhanced browsing experience that supports product discovery while maintaining brand presence and providing easy access to cart and navigation features. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Text Block Section ### **What You’ll Learn** * How to add and format subtitle and body text * How to control alignment, font size, and colors * How to enable animation effects * How to upload and apply custom fonts *** ### 🧩 Section Overview The Text Block section is perfect for storytelling, mission statements, or brand descriptions. You can add a **subtitle**, a **main text block**, and customize layout, typography, and spacing for both desktop and mobile. *** ### How to Add the Section 1. In the **Shopify Theme Editor**, click **Add section** 2. Choose **Text Block** 3. Position it in your layout as needed *** ### Content & Data * **Subtitle**: A small label or intro line (e.g., “ABOUT US”) * **Main Text**: The primary paragraph text * Both fields support plain text only (no HTML or rich formatting) *** ### Layout & Display * **Subtitle Alignment**: Choose left, center, or right * **Text Alignment**: Choose left, center, or right > 💡 Tip: Center alignment works well for short mission statements or quotes *** ### Typography Settings #### Fonts You can choose from built-in fonts or upload your own. * **Subtitle Font** and **Text Font**: Pick from dropdown * **Enable Custom Font**: Toggle this ON to use your own To use a **custom font**, follow these steps: #### 🛠️ How to Add a Custom Font 1. Upload your font file (usually `.woff2`) to **Settings > Files** in Shopify Admin 2. Copy the file URL 3. In the Text Block settings: * Paste the **font name** (e.g., "MyCustomFont") into `Custom Subtitle Font Name` or `Custom Text Font Name` * Paste the **file URL** into `Custom Subtitle Font URL` or `Custom Text Font URL` Once saved, your text will render using the custom font you uploaded. *** #### Font Sizes Adjust font sizes separately for desktop and mobile: * **Subtitle Font Size** (Desktop / Mobile) * **Text Font Size** (Desktop / Mobile) * Toggle **Bold Subtitle** or **Bold Text** for added emphasis *** ### Colors * **Background Color**: Solid or gradient background * **Subtitle Color** * **Text Color** All colors are set using hex codes or Shopify's color picker. *** ### Styling * **Text Animation**: Choose from: * No Animation * Typewriter * Fade Up * Reveal Animations apply to the main text only and trigger as the section scrolls into view. *** ### Spacing Control top and bottom padding for both desktop and mobile: * **Top Spacing (Desktop / Mobile)** * **Bottom Spacing (Desktop / Mobile)** * Toggle **Remove Section Padding** to flush the section edge-to-edge > 💡 Use increased spacing when stacking this section between media-heavy blocks. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Video Spotlight Section ### **What You’ll Learn** * How to showcase a featured video with a title and call-to-action * How to customize video behavior (autoplay, controls) * How to adjust layout, spacing, and aspect ratio * How to style the section’s colors and typography
*** ### 🧩 Section Overview The Video Spotlight section is designed to highlight a single video with supporting text and an optional CTA link. Ideal for campaigns, interviews, or product feature videos, this section is fully responsive and supports autoplay or manual controls. *** ### How to Add the Section 1. In the **Shopify Theme Editor**, click **Add section** 2. Choose **Video Spotlight** 3. Drag it into position on your page layout *** ### Content & Data Settings * **Video**: Upload or select your video file * **Cover Image**: Optional fallback thumbnail image (used before video loads) * **Header Text**: Title shown above the video (e.g., “Watch the Story”) * **View Link Text**: Button text (e.g., “Watch Now”) * **View Link URL**: Paste a product, page, or external video link > 💡 Tip: Use a short video (under 10MB) in `.mp4` format for best performance across devices. *** ### Layout & Display Options * **Autoplay Video (Muted)**: Toggle ON to play automatically on load (without sound) * **Show Video Controls**: Enable to show play, pause, volume, and fullscreen icons * **Width Style**: Choose between: * Full width with Gaps * Full width (edge to edge) * Content width (aligned to inner content) * **Aspect Ratio**: Pick from common formats like 16:9 or 4:3 > ⚠️ Autoplay may not work on iPhones if Low Power Mode is enabled. *** ### Typography * **Section Header Size**: * Desktop: Adjustable in pixels * Mobile: Adjustable in pixels * Toggle **Bold Section Title** and **Bold View Link** if desired *** ### Colors * **Header Color**: Choose any hex value (e.g., `#000000`) * **Background Color**: Transparent by default; customize as needed *** ### Styling * **Round Corners**: Adjust the border radius of the video container *** ### Spacing Customize spacing independently for desktop and mobile: * **Top and Bottom Spacing (Desktop)** * **Top and Bottom Spacing (Mobile)** Each spacing option can be adjusted to fine-tune the layout flow. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Advanced This section covers advanced customization options and features for the Plain Jane theme. These features help you create a more sophisticated and tailored shopping experience for your customers. ## 📋 What's Included ### Product Enhancement Features * [**Size Charts**](/plain-jane-interactive/advanced/how-to-add-size-charts-to-each-product) - Add detailed sizing information to help customers make informed decisions * [**Color Swatches**](https://github.com/OpenSpaces-Design/theme-documentation/blob/v3/plain-jane/advanced/broken-reference/README.md) - Display product variants as visual color swatches instead of dropdown menus * [**Model Information**](/plain-jane-interactive/advanced/setting-up-model-info) - Add model details to showcase how products look in real life * [**Pre-Orders**](/plain-jane-interactive/advanced/setting-up-pre-orders) - Set up pre-order functionality for upcoming products ## 🎯 When to Use Advanced Features ### Size Charts Perfect for: * Clothing and apparel stores * Footwear retailers * Any products where sizing is crucial * International stores with different sizing standards ### Color Swatches Ideal for: * Fashion brands with color variants * Home decor items * Beauty products * Any products where color is a key selling point ### Model Information Great for: * Fashion photography * Lifestyle products * Creating aspirational shopping experiences * Building brand storytelling ### Pre-Orders Useful for: * Limited edition releases * Seasonal products * Managing inventory for high-demand items * Building anticipation for new launches ## 🛠️ Implementation Guidelines ### Before You Start 1. **Plan Your Features**: Decide which advanced features align with your brand and products 2. **Prepare Assets**: Gather all images, charts, and content you'll need 3. **Test Thoroughly**: Always test new features on different devices and browsers 4. **Consider Your Customers**: Ensure features enhance rather than complicate the shopping experience ### Best Practices * **Mobile First**: Ensure all advanced features work seamlessly on mobile devices * **Performance**: Optimize images and content to maintain fast loading times * **Consistency**: Keep styling and functionality consistent across your store * **Accessibility**: Ensure features are accessible to all users ## 📱 Mobile Considerations All advanced features in Plain Jane are designed to be mobile-responsive, but consider these additional tips: * **Touch Interactions**: Ensure swatches and interactive elements are finger-friendly * **Content Sizing**: Size charts and model info should be easily readable on small screens * **Loading Performance**: Optimize images for faster mobile loading * **User Experience**: Test the complete customer journey on mobile devices ## 🔧 Customization Options ### Styling * Customize colors to match your brand * Adjust sizing and spacing * Modify typography * Create custom layouts ### Functionality * Enable/disable features per product or collection * Set up conditional display rules * Configure interaction behaviors * Integrate with third-party apps ## 📊 Measuring Success Track the impact of your advanced features: ### Key Metrics to Monitor * **Conversion Rate**: Are customers making more purchases? * **Time on Product Pages**: Are customers spending more time viewing products? * **Cart Abandonment**: Are size charts reducing returns? * **Customer Feedback**: What do customers say about the new features? ### Analytics Setup * Use Google Analytics Enhanced Ecommerce * Track interactions with advanced features * Monitor customer behavior changes * Set up conversion goals ## 🚀 Getting Started 1. **Choose Your Features**: Start with one advanced feature that best suits your products 2. **Follow the Guides**: Use our detailed setup guides for each feature 3. **Test Everything**: Thoroughly test on all devices and browsers 4. **Gather Feedback**: Ask customers about their experience 5. **Iterate**: Refine and improve based on data and feedback ## 🆘 Need Help? If you encounter issues while setting up advanced features: 1. **Check the Troubleshooting Section**: Each guide includes common solutions 2. **Review Prerequisites**: Ensure your products and Shopify settings are properly configured 3. **Test in Isolation**: Try features one at a time to identify conflicts 4. **Contact Support**: Reach out with specific details about your setup and the issue ## 🔗 Related Resources * [Theme Settings](/plain-jane-interactive/theme-settings) - Configure global theme options * [Product Page Setup](https://github.com/OpenSpaces-Design/theme-documentation/blob/v3/plain-jane/advanced/broken-reference/README.md) - Basic product page configuration * [FAQ & Troubleshooting](/readme-1/faq-and-troubleshooting) - Common questions and solutions Ready to enhance your store with advanced features? Start with the feature that best fits your product catalog and customer needs! # How to Add Size Charts to Each Product ## **What You’ll Learn** * How to create a size chart metafield for products * How to link custom size chart pages to individual products * How to display each chart inside the “Additional Information” block on the product page *** ### 🧩 Overview This tutorial walks you through assigning a different size chart to each product using **Shopify metafields** and the **theme editor**. This is useful for stores selling multiple brands or product categories with different sizing standards. > 💡 You can follow the same process to display other types of product-specific info, like care instructions or material details. *** ### Step 1: Create the Product Metafield 1. From your **Shopify Admin**, go to **Settings** 2. Click **Custom data**, then select **Products** 3. Click **Add definition** Now configure the metafield: * **Name**: `Size Chart` * **Namespace and key**: `custom.size_chart` * **Type**: `Page` * Click **Save** *** ### Step 2: Create Your Size Chart Pages 1. In the Admin sidebar, go to **Online Store > Pages** 2. Click **Add page** 3. Title the page based on the product type or brand (e.g., “Men’s Jackets Size Chart”) 4. Add your chart content: * You can copy paste in a Google Sheets table * Or upload an image of a chart you made from Photoshop, Canva, etc 5. Make sure the page is **visible**, then click **Save** > 💡 Repeat this step to create additional pages for every unique size chart you'll be using. *** ### Step 3: Assign Size Charts to Products 1. Go to **Products** in your admin 2. Select a product you want to assign a size chart to 3. Scroll down to the **Metafields** section 4. Locate the **Size Chart** metafield 5. Select the correct page you created for that product’s size chart 6. Click **Save** *** ### Step 4: Connect the Metafield in the Theme Editor 1. Open the **Theme Editor** 2. Navigate to a **Product page template** 3. Add or select an **Additional Information** block 4. Change the **Title** and **Icon** to match your branding (e.g., “Size Chart”) Then: 5. Next to the **Information Page** setting, click the **dynamic source icon (🔗)** 6. Select the **Size Chart** metafield (`custom.size_chart`) 7. Click **Save** *** ### ✅ You’re Done! Now, when you click on the **Additional Information** toggle on a product page, it will load the specific size chart linked through that product’s metafield. > 🎉 You can reuse this workflow for other product-specific content too—like care instructions, fabric types, or warranty info. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Setting Up Color Swatches For Plain Jane and Interactive Only **What You’ll Learn** * How to assign a product category * How to apply color swatches using Shopify's category metafields * How to connect a color metafield to your theme’s product variants
### 1. Open the Product Page in the Theme Editor * In the Shopify admin, go to **Online Store > Themes**, then click **Customize** on your live theme. * Navigate to a product page. * Click the **Product Variants** block inside the **Product Section**. * Under **Variant Style**, select **Color Swatches**. > 💡 Tip: Use the preview selector to load a product that has multiple color variants.
### 2. Assign a Category in the Shopify Admin * Go to **Products** in the Shopify Admin. * Click on the product you want to edit. * Scroll to the **Category** section and assign it to a relevant option (e.g. **Apparel & Accessories**).
### 3. Add Color Values to the Category Metafields * After assigning a category, scroll down to **Category Metafields**. * You'll now see options specific to that category (like "Color"). * Click into the **Color** field and either select from the list or choose **Add new entry** to type in a custom color.
### 4. Link the Color Metafield to the Variant Block * Return to the Theme Editor and click the **Product Variants** block again. * Locate the **color variant** and click the **dynamic source icon** (stacked circle icon). * Select the color metafield you added from the dropdown.
### 5. Save Your Changes * Click **Done** and then **Save** at the top-right of the theme editor. *** ✅ Your product should now display clickable color swatches based on the metafield values you added. > ⚠️ Warning: Color swatches only appear if your product has a **variant option named “Color”** and it’s matched with the corresponding metafield.
### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Setting Up Model Info **What You’ll Learn** * How to enable and configure the “Model Information” block on your product pages * How to create metafields for model photo and specs * How to assign model info to individual products in your Shopify admin > 💡 Tip: Model info only appears on desktop views by default in most OpenSpaces themes. ### 🧩 Step 1 – Enable the Model Info Block 1. In your Shopify Admin, go to `Online Store` > `Themes`, then click **Customize** on your current theme. 2. On the product page, check that the **Model Information** block is present under the Product Section. ### ⚙️ Step 2 – Add Model Metafields 1. Go to `Settings` > `Custom data` > **Products**. 2. Click **Add definition** to create a new metafield. * **Name**: `Model Image` * **Namespace and key**: `custom.model_image` * **Type**: `File` * Click **Save** 3. ```
``` 3. Click **Add definition** again and repeat this for the specs: * **Name**: `Model Spec 1` * Key: `custom.model_spec_1` * Type: `Single line text` * **Name**: `Model Spec 2` * Key: `custom.model_spec_2` * Type: `Single line text` * **Name**: `Model Spec 3` * Key: `custom.model_spec_3` * Type: `Single line text` > 💡 Tip\ > You can rename "Model Spec 1" etc. in your theme editor labels, but keep the keys exactly as shown. ### 🧾 Step 3 – Add Model Info to a Product 1. Go to `Products` in your Shopify admin and open any product. 2. Scroll down to the **Metafields** area and fill in: * The model image * Height or size info in Spec 1–3 3. Click **Save**. ### 👀 Step 4 – View on the Storefront When a customer views the product, the model info should now appear visually next to the product image. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Setting Up Pre-Orders For Plain Jane and Plain Jane Interactive ### What You’ll Learn How to enable a "Pre-Order" label for selected products using metafields in Shopify Admin and display them using Plain Jane *** ### 1. Create the "Preorder" Metafield To classify products as pre-orderable, start by creating a metafield: 1. In your Shopify Admin, go to **Settings** 2. Click **Custom data** from the sidebar, then choose **Products** 3. Click **Add definition** in the top right 4. Fill out the fields as follows: * **Name:** `Preorder` * **Namespace and key:** `custom.preorder` * **Type:** `True or False` 5. Click **Save** to create the metafield. *** ### 2. Add Preorder Info to a Product Now that the metafield is set up: 1. Navigate to the **Products** section in your admin. 2. Select any product you’d like to enable for preorder. 3. Scroll down to the **Product Metafields** section. 4. You should see the new **preorder** metafield. 5. Set the value to **True** to activate preorder status for this product. > 💡 Tip: You can toggle preorder status on and off for any product anytime using this field. *** ### 3. Theme Output Once a product has `preorder: true`, the OpenSpaces theme will automatically: * Display a **"Pre-Order"** button on the product page * Tag the product with a **"Pre-Order"** label wherever it appears (featured, collections, etc.) > ⚠️ Warning: Ensure the product is **in stock or available for backorder** so customers can actually complete checkout. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Customer Accounts **What You’ll Learn** * The difference between Shopify’s legacy and new customer account systems * How to set up and style the login, registration, and account dashboard pages using your theme * Why we recommend using legacy accounts for full theme customization *** Shopify offers two types of customer account systems: the **new login flow** (email-only access) and the **legacy account system** (email + password). For stores using OpenSpaces themes like **Plain Jane**, the legacy system allows full page customization and theme integration. > ⚠️ Warning: The new Shopify account pages (with email login codes) do **not** support theme customization. We strongly recommend using **legacy accounts** if you want to control styling and layout for login, register, and account dashboard pages. *** ### ✨ Customizable Account Pages in the Theme Here are the pages included in the legacy customer account flow — all of which support full visual customization inside the Shopify Theme Editor: * **Login Page** – Add images, colors, button labels, and custom text * **Register Page** – Edit field labels, error colors, and form button styles * **Account Dashboard** – Customize the hero image, welcome text, and order table styling * **Address Management** – Let users add/edit addresses with flexible button and text settings > 💡 Tip: Some pages (like the account dashboard) require you to log in through the Theme Editor preview to view or edit them. *** ### 🔐 How to Enable Legacy Accounts You can enable legacy customer accounts by: 1. Going to **Shopify Admin → Settings → Customer accounts** 2. Enabling **Show login links** 3. Selecting **Legacy** as the account type This ensures your customers will use the legacy system, allowing your customized account pages to show properly. !\[Placeholder for Screenshot - Legacy Account Settings] *** Once legacy accounts are enabled, use the documentation pages in this section to style each part of the customer experience. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # How To Setup Customer Accounts Customer accounts provide your customers with personalized experiences, order tracking, and streamlined checkout processes. This guide walks you through enabling and customizing customer accounts in the Plain Jane theme. ## 🌟 Benefits of Customer Accounts ### For Your Customers * **Faster checkout**: Saved shipping and billing information * **Order history**: Easy access to past purchases and tracking * **Wishlist functionality**: Save products for later purchase * **Address management**: Multiple shipping addresses * **Account dashboard**: Centralized account management * **Exclusive access**: Member-only content and offers ### For Your Business * **Customer retention**: Encourage repeat purchases * **Data collection**: Better customer insights and analytics * **Marketing opportunities**: Targeted campaigns and personalization * **Reduced support**: Self-service order tracking * **Higher conversion**: Streamlined returning customer experience ## ⚡ Quick Setup Guide ### Step 1: Enable Customer Accounts in Shopify 1. **Access Settings** * Go to **Settings** in your Shopify admin * Click **Checkout and accounts** 2. **Configure Account Settings** * Under **Customer accounts**, select one of these options: * **Optional**: Customers can create accounts (recommended) * **Required**: All customers must create accounts * **Disabled**: No customer accounts (not recommended) 3. **Account Creation Options** * **Allow customers to create accounts**: Enable this setting * **Show login link**: Display login link in your theme * **Send account invites**: Automatically invite customers to create accounts ### Step 2: Customize Account Pages in Plain Jane 1. **Navigate to Theme Customizer** * Go to **Online Store → Themes** * Click **Customize** on your Plain Jane theme 2. **Configure Login Page** * In the left sidebar, go to **Templates** * Select **Customer Login** * Customize the login page layout and content 3. **Configure Registration Page** * Select **Customer Register** template * Customize registration form and welcome content 4. **Configure Account Dashboard** * Select **Customer Account** template * Customize dashboard layout and sections ## 🎨 Customization Options ### Login Page Customization #### Visual Elements * **Hero image**: Add branded background image * **Logo placement**: Position your logo prominently * **Color scheme**: Match your brand colors * **Typography**: Set consistent fonts #### Content Options * **Welcome message**: Custom greeting for returning customers * **Benefits list**: Highlight account advantages * **Social login**: Enable Google, Facebook login (requires apps) * **Help links**: Password reset, account creation ### Registration Page Settings #### Form Fields ``` Standard Fields: - First Name (required) - Last Name (required) - Email Address (required) - Password (required) - Password Confirmation (required) Optional Fields: - Phone Number - Date of Birth - Company Name - Marketing opt-in checkbox ``` #### Welcome Experience * **Welcome email**: Customize account creation email * **Confirmation page**: Thank you message after registration * **First-time offers**: Special discounts for new accounts * **Onboarding**: Guided tour of account features ### Account Dashboard Configuration #### Dashboard Sections * **Account overview**: Recent orders, account details * **Order history**: Past purchases with status * **Address book**: Shipping and billing addresses * **Wishlist**: Saved products (if enabled) * **Account settings**: Profile and preferences #### Customization Options * **Section layout**: Grid vs. list view * **Order display**: Number of orders shown * **Quick actions**: Reorder, track package buttons * **Personalization**: Welcome message with customer name ## 🔧 Advanced Features ### Customer Groups and Tags #### Automatic Tagging Set up automatic tags based on: * **Purchase amount**: VIP, loyal customer tags * **Product categories**: Tag based on buying preferences * **Geographic location**: Region-specific tags * **Account age**: New vs. established customer tags #### Group Benefits Create different experiences for: * **VIP customers**: Exclusive access, early releases * **Wholesale customers**: Special pricing, minimum orders * **Loyalty members**: Points, rewards, discounts ### Enhanced Account Features #### Address Validation ```javascript // Example address validation setup const addressValidation = { enableRealTimeValidation: true, requirePostalCode: true, suggestCorrections: true, validateOnBlur: true }; ``` #### Order Management * **Reorder functionality**: One-click reordering * **Order tracking**: Real-time shipment updates * **Order modifications**: Limited edit capabilities * **Return requests**: Self-service return process ### Email Integration #### Account Emails Customize these automated emails: * **Welcome email**: Account creation confirmation * **Password reset**: Secure password recovery * **Account updates**: Profile change notifications * **Order confirmations**: Enhanced for account holders #### Email Templates ```liquid

Welcome to {{ shop.name }}, {{ customer.first_name }}!

Your account has been successfully created.

Account benefits include:

  • Faster checkout
  • Order tracking
  • Exclusive offers
``` ## 📱 Mobile Experience ### Mobile Account Access Ensure smooth mobile experience: * **Touch-friendly forms**: Large input fields and buttons * **Simplified navigation**: Easy access to account sections * **Responsive design**: Optimized for all screen sizes * **Fast loading**: Optimized images and minimal scripts ### Mobile-Specific Features * **Biometric login**: Fingerprint/Face ID (where supported) * **One-touch reorder**: Quick reorder from order history * **Push notifications**: Order updates via mobile app * **Location services**: Auto-fill shipping addresses ## 🔒 Security and Privacy ### Security Best Practices * **Password requirements**: Enforce strong passwords * **Two-factor authentication**: Add extra security layer (requires app) * **Session management**: Automatic logout for security * **Account lockout**: Protection against brute force attacks ### Privacy Compliance * **GDPR compliance**: Right to data deletion * **Data retention**: Clear data retention policies * **Privacy policy**: Link to privacy terms * **Consent management**: Clear opt-in/opt-out options ### Data Protection ```javascript // Example data protection measures const securitySettings = { passwordMinLength: 8, requireSpecialChars: true, sessionTimeout: 30, // minutes maxLoginAttempts: 5, lockoutDuration: 15 // minutes }; ``` ## 📊 Analytics and Insights ### Account Metrics to Track * **Registration rate**: Percentage of visitors who create accounts * **Login frequency**: How often customers access accounts * **Account retention**: Long-term account usage * **Conversion improvement**: Account vs. guest checkout rates ### Customer Behavior Analysis * **Order patterns**: Frequency and seasonality * **Product preferences**: Most purchased categories * **Engagement levels**: Account feature usage * **Lifetime value**: Revenue per account holder ### Optimization Opportunities * **A/B testing**: Different account page layouts * **Conversion funnels**: Registration completion rates * **User experience**: Pain points in account usage * **Feature adoption**: Which account features are most used ## 🐛 Troubleshooting ### Common Issues #### Customers Can't Create Accounts * **Check Shopify settings**: Ensure accounts are enabled * **Verify email delivery**: Check spam folders * **Form validation**: Ensure all required fields work * **Browser compatibility**: Test across different browsers #### Login Problems * **Password reset**: Ensure reset emails are delivered * **Browser cache**: Clear cache and cookies * **Case sensitivity**: Check email format requirements * **Account status**: Verify account isn't disabled #### Account Page Display Issues * **Theme compatibility**: Ensure theme supports customer accounts * **Template customization**: Check for template errors * **CSS conflicts**: Look for styling issues * **Mobile responsiveness**: Test on various devices ### Performance Issues * **Page load speed**: Optimize account page loading * **Database queries**: Ensure efficient data retrieval * **Image optimization**: Compress profile/product images * **Caching**: Implement appropriate caching strategies ## 💡 Best Practices ### Encouraging Account Creation * **Highlight benefits**: Clearly show account advantages * **Streamline process**: Minimize registration steps * **Incentivize signup**: Offer discounts for new accounts * **Social proof**: Show number of existing members ### Account Management * **Regular communication**: Keep customers engaged with account updates * **Feature education**: Teach customers about account benefits * **Feedback collection**: Ask for input on account experience * **Continuous improvement**: Regularly update account features ### Customer Support * **Clear help documentation**: Provide easy-to-find help resources * **Self-service options**: Enable customers to solve common issues * **Contact options**: Multiple ways to get support * **Response time**: Quick resolution of account-related issues Setting up customer accounts properly creates a foundation for long-term customer relationships and improved business metrics. The Plain Jane theme provides all the tools you need to create an excellent account experience for your customers. # Login Page ### **What You’ll Learn** * How to enable and customize the login page template for legacy customer accounts * How to modify the login form appearance using theme settings * How to adjust text, button styles, layout, and links
*** ### 🧩 Overview This login page is part of Shopify’s **legacy customer account system** and is fully customizable using your theme editor. It supports custom layout blocks, side images, and stylized input fields — offering full visual control of the customer login experience. > ⚠️ This login page only applies when **Legacy Customer Accounts** are enabled under **Settings > Customer Accounts**. *** ### 🎨 Page Structure The login page is composed of the following sections: * **Logo & Clock** (Optional) * **Login Form** (Core functionality) * **Music Player** (Optional) * **Footer** (Optional) *** ### ✏️ Customizing the Login Form Navigate to **Theme Editor → Templates → customer/login.liquid**\ Click the **Login Form** block to begin customizing. #### 🔳 Login Side Image * **Choose an Image** – Upload or select a branded image * **Side Image Position** – Choose left or right * **Curve Side Image** – Adds rounded corners * **Remove Side Image** – Toggle to hide completely *** #### 🧾 Login Header Content * **Header Text** – Title of the login block (e.g. “Log in” or “Welcome Back”) * **Sub-Header Text** – Short description or custom message You can also customize **header and subheader text colors**. *** #### 🔐 Input Fields Each form field has its own design settings: **Email Field** * Label Color * Border Color * Text Color **Password Field** * Label Color * Border Color * Text Color *** #### 🔘 Login Button Customize: * **Button Text** (e.g. “Enter” or “Sign In”) * **Text Color** * **Background Color** Use bold contrast to maintain accessibility. *** #### ❗ Error Styling Set the **Login Error Info Text Color** to match your brand's alert style (usually red). *** #### 🔗 Additional Links You can update the text and color for: * **Register Link** * **Forgot Password Link** * **Back to Store Link** These appear underneath or around the login form. *** #### 🎨 Miscellaneous * **Curve Fields & Buttons** – Toggle on for rounded corners on inputs and the login button. *** ### ✅ You're Done! Your custom login page is now fully styled and live at:\ `yourstore.com/account/login` > 💡 Tip: Pair this with the “Register Page” and “Account Page” docs to fully build out the customer journey. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Register Page ### **What You’ll Learn** * How to enable and customize the legacy register page for new customer accounts * How to update form styling, placeholder text, button design, and links * How to use your theme’s visual settings to match your brand *** ### 🧩 Overview This register page is built using the **legacy customer account system** and is fully supported by your theme’s visual editor. It includes flexible layout tools, form styling, and optional brand imagery — ideal for a branded account sign-up experience. > ⚠️ Shopify's newer one-click login system bypasses this page. These settings apply **only when using legacy accounts**. *** ### 🎨 Page Structure The register page typically includes: * **Logo & Clock** (Optional) * **Register Form** (Main section) * **Music Player** (Optional) * **Footer** (Optional) *** ### ✏️ Customizing the Register Form Navigate to:\ **Theme Editor → Templates → customer/register.liquid**\ Click on the **Register Form** section to open settings. *** #### 🖼 Register Side Image * Upload a **side image** for the form (optional) * **Switch Side Image Position** – Left or right * **Remove Side Image** – Toggle off completely * **Curve Side Image** – Adds rounded visual styling *** #### 🧾 Header Content * **Header Text** – Typically “Register” or “Create Account” * **Sub-Header Text** – Add a short intro message * Customize **text colors** for both elements *** #### 🧍 Form Fields Each field group includes individual label, border, and text color controls. **First Name** * Label, Border, Text Color **Last Name** * Label, Border, Text Color **Email Address** * Label, Border, Text Color **Password** * Label, Border, Text Color > 💡 Tip: Consistent styling improves perceived trust during onboarding. *** #### 🔘 Join Button * **Button Text** (e.g. “Join” or “Create Account”) * **Background Color** * **Text Color** This button submits the registration form. *** #### ❗ Error Message Styling * Set **Register Error Info Text Color** to match alert or warning styles (e.g. red) *** #### 🔗 Additional Links * **Already Signed Up?**\ Add a prompt to redirect users to the login page * **Back To Store Link**\ Useful if customers want to return to the homepage Each of these can be renamed and recolored. *** #### 🌀 Miscellaneous * Toggle **"Enable Radius On Inputs & Buttons"** to apply rounded corners *** ### ✅ You’re Done! Your register page is now styled and ready at:\ `yourstore.com/account/register` > 💡 Tip: Use the same brand imagery and language across your Login and Register pages for visual consistency. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Account Dashboard Page ### **What You’ll Learn** * How to style the customer dashboard using legacy accounts * Where to find and customize the `customer/account` and `customer/addresses` pages * Tips for previewing account content inside the Shopify Theme Editor *** ### 🧭 Accessing the Account Page in the Theme Editor To customize the account dashboard (what customers see after logging in), you’ll need to: 1. Open your store in the **Shopify Theme Editor** 2. Navigate to the **Login** or **Register** page 3. Log in with a customer account through the preview 4. Once logged in, you’ll be redirected to the account dashboard > 💡 Tip: You must log in through the Theme Editor preview — typing `/account` into the editor's URL bar will just reload the login page. *** ### 🧑‍💼 Account Details Section (`customer/account`) This section shows the customer’s name, email, and order list. #### Customization Options **Hero Image** * Upload a header image to visually brand the page * Option to remove or curve the hero image **Text Settings** * Welcome Text (e.g. “Welcome”) * Email Label (e.g. “Email:”) * View Addresses link text * Logout button text **Color Settings** * Text color for welcome message, email, logout, and link * Table background and table text color * “No Orders” message color if no purchases exist > 💡 Use a neutral gray or brand accent color for text to match your overall theme. *** ### 🏠 Account Addresses Section (`customer/addresses`) This section lets customers view, add, or edit their saved addresses. #### Customization Options **Hero Image** * Optional header image, with toggle to remove or curve it **Text Fields** * Section Header (e.g. “Manage Addresses”) * Button Text for “Add New Address” * Labels for edit, delete, and return navigation **Colors** * Customize each text element: headers, buttons, links * Set divider and border colors for inputs * Edit form button background and text color > 💡 Tip: Keep button and link colors consistent with the rest of your account pages for a smooth experience. ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Address Management Page **What You’ll Learn** * How to customize the customer address management page in the legacy account system * Where to adjust labels, colors, and image settings *** The address management page lets logged-in customers view, add, or update their saved shipping addresses. This page is part of the legacy customer account flow, and is accessible after login. > 💡 Tip: You must log into your store preview through the Theme Editor to access and edit this page. Typing `/account/addresses` directly into the preview URL may not work unless you’re already logged in from within the customizer. *** ### Customizing the Address Management Page Inside the Shopify Theme Editor, navigate to: **Theme Editor → Customer account pages → `Customer addresses`** You’ll find the following editable options: #### 📸 Hero Image * **Register Side Image** – Upload a banner image that appears at the top of the page. * **Remove Account Hero Image** – Toggle to hide the image if not needed. * **Curve Hero Image** – Adds rounded corners to the hero banner. > 💡 Tip: Keep your image lightweight (under 1MB) for fast load times. *** #### 📝 Header & Button Text Customize these fields to match your tone and voice: * **Header Text** – Example: “Manage Your Addresses” * **Add New Address Text** – Button label shown above the address form *** #### 🎨 Color Settings All text and button colors are fully customizable: * **Back Arrow Color** – Shown in the header to navigate back * **Header Title Color** – Main title text * **Link & Button Colors** – Change colors for: * Add, Edit, and Delete Address links * Divider lines * Input fields * Submit buttons (background and text) *** #### 🖍️ Example Settings * **Form Btn Color**: `#9F9F9F` * **Form Btn Text Color**: `#FFFFFF` * **Address Line Divider Color**: `#9F9F9F` * **Input Text Color**: `#777777` > ⚠️ Warning: Using low-contrast color combinations can hurt accessibility. Make sure text stands out against the background. *** Once saved, customers will be able to: * See existing shipping addresses * Add new ones using the custom labels and button text * Edit or delete saved locations with your stylized UI ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # FAQ and Troubleshooting This section covers frequently asked questions and troubleshooting guides for the Plain Jane theme. ## 🛠️ Installation & Setup ### Q: How do I install the Plain Jane theme? **A:** Follow our step-by-step guide in the [Installing the Plain Jane Theme](https://github.com/OpenSpaces-Design/theme-documentation/blob/v3/plain-jane/broken-reference/README.md) section. You can install it through the Shopify Theme Store or by uploading the theme files directly. ### Q: Can I preview the theme before making it live? **A:** Yes! After installing the theme, you can preview it by going to **Online Store → Themes** and clicking **Preview** on the Plain Jane theme. This lets you see how it looks without affecting your live store. ### Q: How do I switch between different menu layouts? **A:** The Plain Jane theme offers three menu layouts: * **Center Menu**: Best for minimal branding * **Side-Aligned Menu**: Perfect for showcasing your logo * **Compact Menu**: Ideal for stores with many navigation items Switch between them in **Theme Settings → Homepage + Menu** section. ## 🎨 Design & Customization ### Q: How do I change the main theme color? **A:** Go to **Theme Settings → Main Theme Color** and select your desired color. This will update accent colors, buttons, and interactive elements throughout your store. ### Q: Can I customize fonts? **A:** Yes! Navigate to **Theme Settings → Typography Settings** to choose from various font combinations or upload custom fonts. You can set different fonts for headings and body text. ### Q: How do I add my logo? **A:** Upload your logo in **Theme Settings → Logo Settings**. You can adjust the logo size and positioning to match your brand. ### Q: How do I set up a password page for my store launch? **A:** Follow our comprehensive guide in [Password Page Setup](https://github.com/OpenSpaces-Design/theme-documentation/blob/v3/plain-jane/broken-reference/README.md). You can collect emails, add countdown timers, and create anticipation for your launch. ## 📱 Mobile & Responsive Design ### Q: Is the Plain Jane theme mobile-responsive? **A:** Absolutely! Plain Jane is fully responsive and optimized for all devices. The theme automatically adapts to different screen sizes and provides an excellent mobile shopping experience. ### Q: Why do some features look different on mobile? **A:** This is intentional design. Certain elements are optimized specifically for mobile viewing to ensure better usability and faster loading times on mobile devices. ## 🛒 Product & Collection Setup ### Q: How do I set up product variants (colors, sizes)? **A:** You can set up variants in your Shopify admin under **Products**. For enhanced variant display, check our guides on [Setting Up Color Swatches](https://github.com/OpenSpaces-Design/theme-documentation/blob/v3/plain-jane/broken-reference/README.md) and size charts. ### Q: How do I organize my collections? **A:** Use our [Collection Page Setup](/plain-jane-interactive/getting-started/3.-creating-and-customizing-your-collections-page) guide to learn about the different collection layouts available and how to customize them. ### Q: Can I add size charts to my products? **A:** Yes! Follow our [How to Add Size Charts](/plain-jane-interactive/advanced/how-to-add-size-charts-to-each-product) guide to add detailed size information to your products. ## 🔧 Advanced Features ### Q: How do I set up pre-orders? **A:** Use our [Setting Up Pre-Orders](/plain-jane-interactive/advanced/setting-up-pre-orders) guide to enable pre-order functionality for upcoming products. ### Q: Can I add a blog to my store? **A:** Yes! Use the Blog Feed Section to display your blog posts. You can customize the layout and choose how many posts to show. ### Q: How do I set up customer accounts? **A:** Enable customer accounts in your Shopify settings, then customize the account pages using our [Customer Accounts](/plain-jane-interactive/customer-accounts) guides. ## 🚀 Performance & SEO ### Q: How do I optimize my store for search engines? **A:** Use our SEO guides in the [Languages & SEO](/plain-jane-interactive/theme-settings/languages-and-seo) section to set up meta descriptions, update your favicon, and optimize your content. ### Q: Is the theme optimized for speed? **A:** Yes! Plain Jane is built with performance in mind, featuring optimized code, efficient image loading, and minimal resource usage. ### Q: How do I add Google Analytics? **A:** Add your Google Analytics tracking code in **Theme Settings → SEO Settings** under the "Google Analytics" field. ## 🎵 Special Features ### Q: How does the music player work? **A:** The music player allows you to add ambient music to your store. Configure it in **Theme Settings → Music Player Settings**. You can upload audio files and control playback settings. ### Q: What are the animation options? **A:** Plain Jane includes subtle animations that enhance the user experience. You can enable/disable animations in **Theme Settings → Animations**. ### Q: How do I set up the preloader? **A:** The preloader creates a smooth loading experience. Configure it in the **Preloader Section** to match your brand aesthetic. ## ⚠️ Common Issues & Solutions ### Issue: Theme not displaying correctly after installation **Solution:** 1. Clear your browser cache 2. Check if you're viewing the correct theme preview 3. Ensure all theme files uploaded successfully 4. Contact support if issues persist ### Issue: Images not loading properly **Solution:** 1. Check image file sizes (recommend under 2MB) 2. Ensure images are in supported formats (JPG, PNG, WebP) 3. Re-upload images through Shopify admin 4. Check your CDN settings ### Issue: Menu items not appearing **Solution:** 1. Verify menu is set up correctly in **Navigation** 2. Check if menu is assigned to the correct menu location 3. Ensure menu items are published and visible ### Issue: Mobile layout issues **Solution:** 1. Clear mobile browser cache 2. Test on different mobile devices 3. Check if any custom CSS is interfering 4. Verify responsive settings in theme customizer ### Issue: Checkout process problems **Solution:** 1. Test checkout process in incognito/private browsing 2. Check Shopify payment settings 3. Verify shipping settings are configured 4. Ensure checkout is enabled in your Shopify plan ## 📞 Getting Help ### When to Contact Support * Theme installation issues that persist after following guides * Custom feature requests * Technical bugs not covered in this FAQ * Integration questions with third-party apps ### Before Contacting Support 1. Check this FAQ section 2. Review the relevant documentation section 3. Clear your browser cache and test again 4. Note your Shopify plan and any installed apps 5. Take screenshots if there are visual issues ### How to Contact Support * **Email**: Include your store URL, theme version, and detailed description of the issue * **Screenshots**: Always helpful for visual issues * **Steps to Reproduce**: Explain exactly what you did when the issue occurred ## 🔗 Useful Resources * [Shopify Help Center](https://help.shopify.com/) * [Shopify Community](https://community.shopify.com/) * [Theme Development Documentation](https://shopify.dev/themes) * [Liquid Template Language](https://shopify.github.io/liquid/) ## 📋 Theme Limitations ### What Plain Jane Cannot Do * Completely custom checkout pages (Shopify limitation) * Modify Shopify's core functionality * Create new product types beyond Shopify's structure * Process payments (handled by Shopify) ### Recommended Third-Party Apps For functionality beyond the theme's scope, consider these app categories: * **Reviews**: Product review apps * **Email Marketing**: Newsletter and email automation * **Inventory**: Advanced inventory management * **Analytics**: Enhanced store analytics * **Marketing**: SEO and social media tools Remember: Most issues can be resolved by carefully following our documentation. If you're still having trouble, don't hesitate to reach out for support! # Plain Jane Interactive Welcome to the Plain Jane Interactive theme documentation. This is our most advanced theme that includes all standard features plus interactive storytelling capabilities and immersive shopping experiences.
## What's Included in Plain Jane Interactive * All Plain Jane features * Interactive space creation tools * Advanced animation and transition effects * Interactive shopping experiences * Mobile-optimized interactive elements * Enhanced visual storytelling capabilities ## Getting Started Start with our [installation guide](https://github.com/OpenSpaces-Design/theme-documentation/blob/v3/plain-jane-interactive/broken-reference/README.md) to set up your Plain Jane Interactive theme, then explore the [interactive features](https://github.com/OpenSpaces-Design/theme-documentation/blob/v3/plain-jane-docs/plain-jane-interactive/sections-and-features/how-to-create-an-interactive-space.md). ## Documentation Sections * [**Getting Started** ](/plain-jane-interactive/getting-started)- Installation and basic setup * [**Pages & Menus**](/plain-jane-interactive/pages-and-menus) - Customizing your site structure * [**Sections & Features**](/plain-jane-interactive/sections-and-features) - All sections plus interactive features * [**Theme Settings**](/plain-jane-interactive/theme-settings) - Complete customization options * [**Advanced Features**](/plain-jane-interactive/advanced) - Advanced customization and features * [**Customer Accounts**](/plain-jane-interactive/customer-accounts) - Account functionality * [**FAQ & Troubleshooting**](/plain-jane-interactive/sections-and-features/faq-section) - Common questions and solutions ## Interactive Features Unique to This Theme * **Interactive Spaces** - Create immersive product showcases * **Transition Arrows** - Smooth navigation between content * **Interactive Points** - Hotspots and interactive elements * **Mobile Optimization** - Touch-friendly interactive elements * **Animation Controls** - Advanced animation settings # Interactive Welcome to **Plain Jane Interactive** – where static becomes dynamic, and ordinary becomes extraordinary. This enhanced version of our beloved Plain Jane theme transforms your Shopify store into an immersive, interactive experience that captivates visitors and drives engagement. ## What Makes Interactive Special? Plain Jane Interactive isn't just another theme variant – it's a complete reimagining of how customers interact with your brand online. Built on the solid foundation of Plain Jane, it adds sophisticated interactive elements that create memorable shopping experiences. ## 🎯 The Unique Interactive Feature ### Interactive Environment Section ⭐ **This is the only truly unique feature exclusive to the Interactive theme.** This revolutionary section transforms your homepage into a navigable digital space where customers can explore different "rooms" or areas of your brand: * **Multi-Room Navigation**: Create distinct spaces for different product categories or brand stories * **Smooth Navigation Arrows**: Seamless transitions between content areas with elegant animations * **Dynamic Backgrounds**: Each environment can have its own immersive backdrop (video, image, or color) * **Logo Integration**: Your brand stays prominent throughout the interactive journey * **Mobile-Optimized**: Touch-friendly navigation for all devices * **Unique User Experience**: Unlike traditional static homepages, this creates an explorable brand universe *Perfect for: Showcasing product categories, telling your brand story, creating virtual showrooms, immersive brand experiences* ## 📋 Standard Plain Jane Features (Also Available) ### Dynamic Background System *Note: This feature is also available in the standard Plain Jane theme* * **Multi-Image Slideshows**: Rotate through collections of images * **Typewriter Text Effects**: Animated text that writes itself * **Smart Timing Controls**: Customize transition speeds and delays * **Video + Image Mixing**: Combine different media types seamlessly ### Index Center Layout *Note: This feature is also available in the standard Plain Jane theme* * **Centered Navigation Menu**: Clean, modern approach to site navigation * **Interactive Hover Effects**: Subtle animations that respond to user interaction * **Flexible Content Areas**: Showcase featured products, announcements, or brand content * **Responsive Design**: Adapts beautifully from desktop to mobile ## 🚀 Enhanced Standard Sections Interactive doesn't just add new features – it elevates familiar ones: ### Blog Sections with Advanced Layouts * **Blog Articles**: Card-based grids with fade-in animations * **Blog Background**: Immersive reading experiences with dynamic backdrops * **Blog Timezone**: Professional time display with logo integration ### Interactive Navigation Options * **Center Menu**: Balanced, sophisticated navigation * **Side-Aligned Menu**: Modern asymmetrical layouts * **Compact Menu**: Space-efficient global navigation ## 💡 Key Benefits ### For Your Brand * **Increased Engagement**: Interactive elements keep visitors exploring longer * **Professional Appearance**: Sophisticated animations and transitions * **Brand Differentiation**: Stand out from standard e-commerce experiences * **Storytelling Opportunities**: Multiple ways to share your brand narrative ### For Your Customers * **Intuitive Navigation**: Easy-to-understand interactive elements * **Engaging Experience**: Fun and memorable shopping journey * **Mobile Excellence**: Touch-optimized interactions on all devices * **Fast Performance**: Optimized code ensures smooth interactions ## 🎨 Perfect For These Business Types ### Fashion & Lifestyle Brands Create runway-worthy presentations with interactive lookbooks and dynamic showcases. ### Art & Design Studios Transform your portfolio into an immersive gallery experience. ### Luxury & Premium Brands Elevate your brand perception with sophisticated interactive elements. ### Creative Agencies Showcase your creativity through dynamic, engaging presentations. ## 🔄 How It Compares to Plain Jane | Feature | Plain Jane | Plain Jane Interactive | | ----------------- | -------------------- | ----------------------------------- | | Navigation | Static menus | Interactive navigation with effects | | Backgrounds | Single images/videos | Dynamic slideshows with transitions | | Homepage Layout | Traditional sections | Interactive environment system | | User Engagement | Standard | Enhanced with interactive elements | | Animation System | Basic | Advanced with multiple effect types | | Mobile Experience | Responsive | Touch-optimized interactive | ## 🛠️ Technical Excellence ### Performance Optimized * Lightweight code that doesn't sacrifice speed for features * Progressive loading for smooth user experiences * Optimized for Core Web Vitals ### Developer Friendly * Clean, well-documented code structure * Customizable settings through Shopify's theme editor * Extensible architecture for future enhancements ### Cross-Platform Compatible * Works seamlessly across all devices and browsers * Touch-optimized for mobile and tablet * Accessible design following WCAG guidelines ## 🚀 Getting Started Ready to transform your store? Here's your path to Interactive excellence: 1. [**Install the Theme**](https://github.com/OpenSpaces-Design/theme-documentation/blob/v3/plain-jane-interactive/broken-reference/README.md) - Get up and running quickly 2. [**Set Up Your Homepage**](https://github.com/OpenSpaces-Design/theme-documentation/blob/v3/plain-jane-interactive/broken-reference/README.md) - Configure your interactive experience 3. [**Explore Interactive Environment**](/plain-jane-interactive/sections-and-features/interactive-environment-section) - Master the signature feature 4. [**Configure Dynamic Backgrounds**](/plain-jane-interactive/sections-and-features/dynamic-background-section-enhanced) - Create stunning visual experiences ## 💫 Ready to Go Interactive? Plain Jane Interactive transforms ordinary e-commerce into extraordinary experiences. Whether you're launching a new brand or refreshing an existing store, Interactive gives you the tools to create something truly special. **Your customers are waiting for an experience that goes beyond the ordinary. Are you ready to deliver it?** *** *Explore our comprehensive documentation to discover every feature, setting, and possibility that Plain Jane Interactive offers. Your interactive journey starts here.* # Getting Started Welcome to **Plain Jane Interactive** — the most advanced version of the Plain Jane Shopify theme, designed for creative brands that want modern, dynamic layouts with built-in animations and interactivity. This guide will walk you through the essential steps to set up and customize your store from start to finish. {% stepper %} {% step %} **Installing the Plain Jane Theme** Learn how to add the theme to your Shopify store, upload the ZIP file, and publish it safely without disrupting your live site.\ [➡️ Installing the Plain Jane Theme](/plain-jane-interactive/getting-started/1.-installing-the-plain-jane-theme) *** {% endstep %} {% step %} **Setting Up Your Homepage** Discover how to customize your homepage layout, hero sections, and featured collections to create a clean, editorial first impression.\ [➡️ Setting Up Your Homepage](/plain-jane-interactive/getting-started/2.-setting-up-your-homepage) {% endstep %} {% step %} **Creating and Customizing Your Collections Page** Organize your product collections with flexible grid options, filters, and sidebar layouts. You’ll learn how to control spacing, typography, and hover styles for each look.\ [➡️ Creating and Customizing Your Collections Page](/plain-jane-interactive/getting-started/3.-creating-and-customizing-your-collections-page) *** {% endstep %} {% step %} **Creating and Customizing Your Product Page** Explore your product page options — from minimal layouts to fully interactive galleries. This section covers product media, variant options, and recommended product blocks.\ [➡️ Creating and Customizing Your Product Page](/plain-jane-interactive/getting-started/4.-creating-and-customizing-your-product-page) {% endstep %} {% step %} **Setting Up Password Pages and Email Waitlist** Learn how to set up your password-protected pages and email waitlist integration for upcoming drops or private launches.\ [➡️ Setting Up Password Pages and Email Waitlist](/plain-jane-interactive/getting-started/5.-setting-up-password-pages-and-email-waitlist) {% endstep %} {% endstepper %} # 1. Installing the Plain Jane Theme For Plain Jane Starter, Plain Jane, and Plain Jane Interactive ### What You’ll Learn How to upload and install the Plain Jane Shopify theme using a ZIP file through the Shopify admin. Follow the video below, or scroll for a written tutorial instead {% embed url="" %} *** ### 1. Access the Themes Section 1. Log in to your **Shopify Admin**. 2. In the left sidebar, click **Online Store**, then select **Themes**. *** ### 2. Import the Theme 1. On the **Themes** page, click the **Add theme** button or **Explore free themes** to access the theme import options. 2. You'll see the theme import interface where you can upload a ZIP file or browse the theme library. 3. A modal will pop up. Click **Add file**. *** ### 3. Upload the Theme ZIP 1. Locate the **Plain Jane theme ZIP file** in your file browser. 2. > ⚠️ **Important:** Make sure the file is not unzipped. Shopify only accepts zipped theme files. 3. Select the correct file (e.g., `plain-jane-v3.0.3.zip`) and click **Upload**. *** ### 4. Finalize the Upload * Once uploaded, Shopify will process the ZIP file. * You’ll see **Plain Jane v3.0.3** (or the version you uploaded) appear under **Theme library**. * Click **Actions > Publish** if you’re ready to make it your live theme. > 💡 Tip: You can upload multiple theme versions and preview them before publishing. ### **Need Help?** * 💬 **For Tech Shpport Join Us On Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # 2. Setting Up Your Homepage For Plain Jane and Interactive {% embed url="" %} {% hint style="info" %} > ⚠️ Note: The `Dynamic Background` section has been deprecated in the latest versions of Plain Jane and Interactive. Use `Page Canvas` instead—it offers the same functionality for background images, videos, colors, etc. > > ⚠️ Note: This guide does **not** apply to Plain Jane Starter users. > {% endhint %} ### What You'll Learn * How to customize your homepage layout in Plain Jane v3 and Interactive v2 * How to add and configure Center, Side-Aligned, and Compact menus * When to use each layout for best results * How to link menus and manage navigation * How to skip the homepage entirely if desired > *** ### 🛠️ For New Users: Setting Up a Menu 1. Go to **Online Store** > **Navigation** in your Shopify Admin. 2. Click **Add Menu** and name it something like `Test Menu`. 3. Add menu items like: * `Men` → link to your Men's collection * `Lookbook` → link to a custom page or homepage * `Contact` → link to Shopify's built-in contact page 4. Click **Save**. *** ### 🎨 Layout 1: Center Menu This is the most popular layout (e.g., Supreme-style homepage). #### How to Set It Up 1. Open your theme in the **Customize** editor. 2. Make sure these sections are present: * `Preloader` * `Email Popup` * `Page Canvas` * `Center Menu` > 💡 Tip: `Page Canvas` replaces the deprecated `Dynamic Background` section. Use it for background images or colors. #### Link Your Menu * Click the `Center Menu` section * On the right panel, **choose your menu** from the dropdown (e.g., `Test Menu`) #### Social Media Icons * Toggle icons **on** * Paste full URLs to your profiles (e.g., TikTok, Threads, Tumblr) > 💡 Tip: Don't add scrollable content below the center menu. Keep it clean and simple. *** ### 🎨 Layout 2: Side-Aligned Menu Good for brands that want minimal vertical menus. #### Setup Steps 1. In the theme editor, remove the `Center Menu`. 2. Click **Add Section** > `Side Aligned Menu` 3. Select your menu from the right panel #### Customization Options * Adjust **font size**, **link spacing**, and **colors** * Toggle **login link** visibility (requires customer accounts enabled) * Choose **logo alignment** (left or right) * Change **font family** under `Theme Settings > Typography` > 💡 Tip: Avoid stacking product sections beneath this layout—it’s not scroll-friendly. *** ### 🎨 Layout 3: Compact Menu This layout features a hamburger icon in the top right. #### Setup Steps 1. Add the `Compact Menu` section 2. Link your menu under `Theme Settings > Global Menu Settings` 3. Center or align your logo however you'd like #### Add Background + Content * Use the `Page Canvas` section to: * Set a background color or upload an image * Add sections like `Collection List` or `Product Carousel` > ⚠️ Warning: This is the **only layout** recommended for scrollable homepages. *** ### 🚀 Skipping the Homepage (Optional) Want to take visitors straight to a collection? 1. Go to `Theme Settings > Homepage Settings` 2. Enable **Skip Enter Screen** 3. Set the destination page (e.g., a specific collection) > 💡 Tip: This is useful for product-focused brands that don’t need a homepage. *** ### 📌 Final Notes * Use **Page Canvas** for all homepage background customization * Keep your layout minimal and functional * Always save and refresh to preview your changes Supported Layouts: * Center Menu (static landing) * Side-Aligned Menu (minimal vertical nav) * Compact Menu (scrollable homepage builder) ### **Need Help?** * 💬 **For Tech Shpport Join Us On Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # 3. Creating and Customizing Your Collections Page For Plain Jane and Interactive {% embed url="" %} ### What You'll Learn * How to create and organize collections in Shopify * How to create and assign menus to collection pages * How to use and customize the "Classic Collection" and "Sidebar Collection" in the Plain Jane v3 and Interactive v2 themes * How to edit design settings like spacing, fonts, colors, and product display options ### 🛠️ Getting Started: Shopify Setup Basics This section is for beginners setting up their store for the first time. #### 1. Create Product Collections 1. Go to your **Shopify Admin** > **Products** > **Collections**. 2. Click **Create Collection**. 3. Name your collection (e.g., `Tops`, `Bottoms`, `Accessories`). 4. Set the collection **type** to `Manual`. > ⚠️ Manual collections let you control the product order manually. 5. Click **Save**, then use the **Browse** button to add products. Repeat for each category. #### 2. Create a Menu for Your Collection Sidebar 1. Go to **Online Store** > **Navigation**. 2. Click **Add Menu**. 3. Name it something like `Shop Menu`. 4. Add links like: * `Tops` → Link to your `Tops` collection * `Bottoms` → Link to your `Bottoms` collection * `Outerwear`, `Footwear`, etc. 5. You can drag items to nest them (e.g., `Shorts` under `Bottoms`). 6. Click **Save Menu**. *** ### 🎨 Theme Customization: Collection Pages These instructions apply to both **Plain Jane v3** and **Interactive v2** themes. 1. Navigate to **Online Store** > **Themes** > **Customize** 2. Use the page selector dropdown to switch to **Collections** template
Collections page template in theme customizer

Collections page template in the theme customizer

#### Classic Collection Section 1. Go to **Online Store** > **Themes** > **Customize**. 2. From the left panel, select the **Collection Page** template. 3. Look for a section labeled **Classic Collection**. **Key Settings:**
Collection products display settings

Collection products display settings and customization options

* **Select Menu**: Assign the custom `Shop Menu` you created. * **Menu Position**: Choose `Left` or `Right`. * **Text Alignment**: Options for `Left`, `Center`, or `Right`. * **Font Size & Spacing**: Adjust menu and link spacing. * **Menu Colors**: Customize background and text colors. * **Show Product Titles/Prices**: Toggle visibility and adjust font size and color. * **Product Frames**: Add borders and hover effects. * **Product Background Radius**: Adjust corners from sharp to rounded. * **Make Background Transparent**: Works best with transparent PNGs.
Collection layout options Classic vs Sidebar

Collection layout options showing Classic and Sidebar variations

#### Search and Sort Options * **Position**: Align icons `Left`, `Center`, or `Right`. * **Colors**: Customize icon and dropdown menu colors. * **Search Overlay Settings**: * Adjust **background opacity** * Set **search box background color** * **Sort Menu**: Choose how products are sorted: `Featured`, `Newest`, `Price`, etc. #### Sale Labels * Show discount labels like "On Sale" * Customize label **font size**, **text color**, and **background color** #### Uploading Products with PNGs > 💡 Tip: Use transparent PNGs if you want to control background colors using the theme editor. *** ### 🧭 Sidebar Collection (Optional) Want a more traditional layout? Use the Sidebar Collection instead. 1. In the same **Collection Page** template, **hide** the `Classic Collection` section. 2. **Enable Sidebar Collection** instead. **Sidebar Collection Settings:** * Assign a `Menu` * Sidebar position: `Left` or `Right` * **Upload Sidebar Background** (called a "skin") * Adjust **opacity**, **shadows**, and **fixed scroll** behavior > 💡 Tip: Fixed sidebars stay visible when scrolling. All other display settings like product info, labels, and search/sort icons work the same as in the Classic Collection section. *** ### ✅ Final Notes * Always click **Save** in the theme editor after making changes. * If changes don’t appear right away, try refreshing the page. * Keep product image sizes consistent (e.g., 1000x1000px) for aligned layouts. ### **Need Help?** * 💬 **For Tech Shpport Join Us On Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # 4. Creating and Customizing Your Product Page For Plain Jane and Interactive {% embed url="" %} > 📓 Note: There is a **new Product Section Showcase** layout available that is not covered in this video. For setup instructions and details, visit: [Product Section Showcase](https://openspaces-labs.gitbook.io/openspaces/pages-and-menus/product-page/product-section-showcase) ### What You'll Learn * How to customize the product page layout in Plain Jane v3 and Interactive v2 * All block types and styling options inside the product section * How to use the Scroll Layout (archived version) product section * Where to adjust gallery size, button styles, accordions, and more > 📓 Note: The `Scroll Layout` (formerly called `Archived Layout`) is an older alternative to the default product section. It’s still available for use but lacks block-based customization. *** ### 🛠️ Accessing the Product Page in the Theme Editor 1. Go to **Online Store** > **Themes** > **Customize**. 2. Use the dropdown menu at the top center to select `Products > Default Product`.
Product page template in theme customizer

Product page template in the theme customizer

3. To preview a different product, click **Change** in the preview bar and select a different item. *** ### 🧱 Core Product Section Blocks The product page is made up of a `Product Section` and individual **blocks** underneath. You can reorder, remove, or customize each one. **Common Blocks:** * **On Sale Label**: Custom color, padding, and spacing * **Header**: Controls product title display * **SKU**: Optional, shows SKU if available * **Price**: Show with or without currency symbol * **Description**: Supports word limit and "Read more" link * **Gallery**: Controlled via parent Product Section settings * **Buttons**: Add-to-cart and variant selectors * **Accordions**: Use for size charts, return policies, FAQs, etc. > 💡 Tip: To add a block, click the `Product Section`, then `Add Block`. *** ### 🎛️ Product Section Layout Settings Click the top-level **Product Section** to access these layout options:
Product Section 1 (Showcase) settings

Product Section 1 (Showcase) settings and layout options

* **Image Position**: `Left` or `Right` * **Fade Animation**: Controls how the product fades into view * **Gallery Columns**: From 1 to 6 (only available if gallery is on left) * **Image Sizing (Desktop & Mobile)**: Use sliders to adjust
Product Section 2 (Thumbnail) settings

Product Section 2 (Thumbnail) layout alternative

> ⚠️ Some settings (like columns) are only available when the gallery is on the left.
Product image gallery settings

Product image gallery settings and customization options

*** ### 🧩 Additional Block Settings #### On Sale Label * Change label background and text color * Adjust spacing around the badge #### Price Display * Toggle currency symbol * Adjust font size for luxury/minimal styles #### Description Block * Set color, margins, and word limit * Enables "Read more" expansion link #### Buttons and Variants * Enable/disable Next Product button * Customize corner radius, margins, spacing #### Accordions * Add multiple: e.g., `Size Chart`, `Returns/Exchanges` * Customize titles and margin spacing *** ### 🗂️ Scroll Layout Product Section (Archived) The Scroll Layout is an archived version of the product section that displays a full vertical gallery. #### How to Use: 1. Click **Add Section** > `Product Section Scroll` 2. Hide the current product section to avoid duplicates 3. Customize using the right-hand settings panel (this version does not use blocks) #### Key Differences: * Vertical scroll gallery with all images stacked * Great for mobile and long-form product storytelling * No block support — all settings are configured in the section panel * Fewer customization features (e.g., no rounded corners) > 💡 Tip: Use this if you prefer the old scroll experience from earlier theme versions. *** ### ➕ Adding Extra Sections to the Product Page You can add other Shopify theme sections to the product page just like any other page: * `Image Stream` * `Email Signup` * `Slideshow` * `Collection List` Rearrange and customize these to match your brand style. ### **Need Help?** * 💬 **For Tech Shpport Join Us On Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # 5. Setting Up Password Pages and Email Waitlist For Plain Jane and Interactive {% embed url="" %} ### What You'll Learn * How to enable the password page on your Shopify store * How to customize the Plain Jane v3 password page * How to set up a synced countdown timer for drops * How to collect email signups and export your list * Best practices for SMS integrations and custom forms > 📓 Note: The password page in Plain Jane v3 is completely rebuilt from previous versions. It now uses customizable sections like other templates. *** ### 🔐 How to Enable the Password Page 1. Go to **Shopify Admin** > **Online Store** > **Preferences** 2. Scroll down to **Password Protection** 3. Toggle the switch to **Enable password page** 4. Set a password your customers will use > 💡 Tip: Give early access to subscribers by sharing your password via email or SMS. *** ### 🎨 Customizing the Password Page in Theme Editor 1. Go to **Online Store** > **Themes** > **Customize** 2. Use the page dropdown and select `Others > Password`
Password page template in theme customizer

Password page template showing available sections

#### Sections You’ll See: * **Store Owner Link** * **Countdown Timer** * **Video Spotlight** (optional) * **Embedded Email Signup** (optional) *** ### 🕓 Setting Up the Countdown Timer
Password page timer settings

Countdown timer settings and configuration options

1. Click the `Timer` section in the left panel 2. Use **UTC time** to set your launch time correctly #### Convert Local Time to UTC Use Google: ``` 5:00 PM EST to UTC ``` Set your timer to match the UTC result (e.g., `21:00` for 5 PM EST) #### Styling Options * **Position**: Top or Center * **Typography**: Adjust size (desktop only) * **Glow effect**, **boxes**, **corner radius**, **opacity** #### Entrance Animation When the countdown hits 0, a full-screen logo + enter button appears. > ⚠️ Important: You **must** disable the password manually in Preferences for customers to access the store. *** ### ✉️ Adding an Email Signup Form 1. Click `Add Section` > **Embedded Email Signup**
Email collection form settings

Email collection form settings and customization options

2. Customize: * Title * Button text * Placeholder * Success message #### View Submissions 1. Go to **Shopify Admin** > **Customers** 2. All email entries appear here with 0 orders 3. Use **Export** to send to: * Klaviyo * Omnisend * Mailchimp > 💡 Tip: Use CSV export or automation to sync email subscribers. *** ### 📲 Can I Capture SMS Signups Too? Shopify does **not** allow themes to capture SMS numbers directly. To do this: * Use a Shopify app (e.g., **Postscript**, **Klaviyo**, **Yotpo**) * Build a form using their UI * Embed the code using the **Custom Liquid** section 1. Click `Add Section` > **Custom Liquid** 2. Paste your form embed code > ⚠️ Reminder: SMS forms must come from an app—Shopify restricts native SMS collection in themes. *** ### ➕ Optional Sections for the Password Page You can add any non-product section: * `Text Block` * `Video` * `Image Stream` * `FAQ` * `Collection List` * `Preloader` * `Music Player` > 💡 Tip: Use an FAQ if you expect lots of launch questions from customers. ### **Need Help?** * 💬 **For Tech Shpport Join Us On Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Theme Versions + Features Table ### **Overview** We offer three theme versions — each built for different stages of your brand’s journey: | Theme | Best For | | ------------------------------ | -------------------------------------------------------------------------------------- | | **Plain Jane Starter** | Beginners who want a clean, essential Shopify setup with minimal distractions. | | **Plain Jane 3.0** | Growing brands looking for creative flexibility, performance, and enhanced features. | | **Plain Jane Interactive 2.0** | Advanced users who want maximum interactivity, experimental layouts, and immersive UX. | *** ### **What's Included in Each Theme** > ✅ = Included\ > ⭐ = Exclusive to Interactive 2.0+ You can also reference the comparison chart image below to see all features side-by-side at a glance. ### **Need Help?** * 💬 **For Tech Shpport Join Us On Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Theme Settings > These are global settings that affect the overall design, behavior, and structure of your Shopify store using the **Plain Jane** theme. *** ### **What Are Theme Settings?** Theme Settings control the **site-wide appearance and functionality** of your store. Unlike individual “Sections” that apply to specific pages (like your homepage or product template), Theme Settings apply across the **entire storefront** — from fonts and logos to animations and SEO. Use this section to fine-tune your store’s: * **Branding and identity** (logos, fonts, colors) * **Interactive elements** (custom cursors, music, animations) * **Conversion tools** (announcement bar, cart drawer) * **Page structure** (skip homepage, global navigation) * **Technical details** (SEO, Cart) *** ### **Available Settings** Here’s what each Theme Setting does (click to dive into individual pages): * **Announcement Bar** – Display store-wide promos or messages * **Animations** – Control entrance and hover animations * **Cart Drawer** – Customize your cart’s behavior and design * **Collection Layout** – Set the default grid and style for product collections * **Cursor Settings** – Upload a custom cursor image * **Footer Settings** – Manage your footer layout and links * **Global Menu Settings** – Configure site-wide navigation * **Music Player** – Add background music to your store * **Store Logos** – Upload and manage your logo(s) * **Store Clock** – Display the current store time * **Skip Homepage** – Optionally redirect users past the intro page * **SEO Settings** – Control key meta and index settings for discoverability * **Typography** – Select fonts and type styles *** ### 📌 Keep In Mind * These settings apply **site-wide** unless otherwise noted. * Most updates will reflect instantly in your live preview. * Always click **Save** after making changes in the theme editor. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website # Typography Settings For Plain Jane Starter, Plain Jane, and Plain Jane Interactive > **What You’ll Learn** > > * How to update fonts for different areas of your store > * How to upload and use custom fonts with URLs > * Font pairing tips for a clean visual hierarchy *** ### 🔧 Access Typography Settings 1. From your **Shopify Admin**, go to **Online Store > Themes** 2. Click **Customize** on your current theme 3. In the Theme Editor, open the **Theme Settings** panel (paintbrush icon) 4. Click on **Typography** to open the full font customization menu *** ### 🔠 Font Categories Each section controls fonts for a specific part of your store. You can choose from default fonts or enable a custom font. #### Center/Side Menu Enter Page Fonts * Controls font for your Enter page (center or side layout) #### Countdown Fonts * Used on the password page countdown timer #### Header Fonts * Applies to headings/titles sitewide #### Paragraph Fonts * Used for general text, including product descriptions and about pages #### Button Fonts * Applies to buttons across the theme #### Marquee Fonts * Only affects scrolling marquee/announcement text if used *** ### 🖋️ Enable Custom Fonts To use a custom font instead of the default: 1. Toggle **Enable Custom Font** 2. Enter the **Font Name** (e.g. `Superfresh`) 3. Paste the **Custom Font URL** for a `.woff` or `.woff2` file > ⚠️ File must be hosted in `.woff` or `.woff2` format. TTF or OTF files will not work. *** ### 🌐 How to Upload a Custom Font 1. Download a font you like (e.g. from [dafont.com](https://www.dafont.com)) 2. Convert the file to `.woff` or `.woff2` format using [cloudconvert.com](https://cloudconvert.com/) 3. Go to **Shopify Admin > Content > Files** 4. Click **Upload Files** and select your `.woff` file 5. After it uploads, click the **link icon** to copy the hosted URL 6. Return to **Theme Settings > Typography** and paste this URL into the **Custom Font URL** field *** ### ✅ Font Pairing Best Practices > 🎨 Use 2–3 fonts max for a clean, consistent design * **1 for Headings**: Something bold or stylized * **1 for Body Text**: A clean sans-serif or serif * **Optional**: 1 additional for marquee or enter screens > 💡 Tip: Avoid using too many fonts—it can make your store feel cluttered or unprofessional. *** ### **Need Help?** * 💬 **Join our community on Discord:** * 📧 **Email us at:** * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website --- [Next Page](/llms-full.txt/1)