### ### Editing Section Settings
1. Click on a section in the sidebar OR click directly on the section in the preview
2. The sidebar shows all available settings for that section
3. Modify settings as needed - changes appear instantly in preview
4. Settings are organized into logical groups
**Common section settings include:**
- Layout options (columns, alignment)
- Color scheme selection
- Spacing (padding, margins)
- Visibility options
- Content settings (text, images)
### Section Actions
Each section has quick actions available:
| Action | Icon | Description |
|--------|------|-------------|
| Duplicate | Copy icon | Create a copy of this section |
| Hide/Show | Eye icon | Toggle section visibility |
| Delete | Trash icon | Remove section from page |
**To access section actions:**
1. Hover over the section in the sidebar
2. Click the three-dot menu (or look for icons)
3. Select the desired action
### Hiding vs Deleting Sections
**Hiding a Section:**
- Section remains in your template but is not visible to customers
- Useful for seasonal content or A/B testing
- Can be made visible again at any time
- Preserves all settings and content
**Deleting a Section:**
- Permanently removes the section
- All settings and content are lost
- Cannot be undone after saving
- Use with caution
---
## Working with Blocks
### What are Blocks?
Blocks are smaller, repeatable content elements that exist within sections. They allow you to add multiple items of the same type to a section.
### Example: How Blocks Work
Consider a "Featured Products" section:
- The section defines the overall layout and style
- Each product displayed is a separate block
- You can add, remove, and reorder product blocks
```
[Featured Products Section]
├── Product Block 1 (Blue T-Shirt)
├── Product Block 2 (Red Dress)
├── Product Block 3 (Black Jeans)
└── Product Block 4 (White Sneakers)
```
### Common Block Types
| Block Type | Found In | Purpose |
|------------|----------|---------|
| Product | Featured Products, Collection | Display a single product |
| Image | Image Gallery, Slideshow | Display an image |
| Text | Rich Text sections | Add text content |
| Button | Various sections | Add clickable buttons |
| Link | Navigation, Footer | Add menu links |
| Testimonial | Testimonials section | Single customer review |
| Slide | Slideshow | Single slide content |
| Icon | Icon lists | Icon with text |
| Column | Multi-column layouts | Column content |
### Adding Blocks to a Section
1. Select a section that supports blocks
2. In the section settings, find the blocks list
3. Click **Add Block** (or the + button)
4. Choose the block type from the modal
5. Configure the block settings
### Editing Block Settings
1. Expand the section in the sidebar
2. Click on the block you want to edit
3. The sidebar shows block-specific settings
4. Modify settings - changes appear in preview
5. Click the back arrow to return to section view
### Reordering Blocks
Just like sections, blocks can be reordered:
1. In the blocks list, hover over a block
2. Click and hold the drag handle
3. Drag to the new position
4. Release to apply
### Nested Blocks (Groups)
LaunchMyStore 2.0 supports nested blocks - blocks that contain other blocks:
**What is a Group Block?**
- A special block type that can hold child blocks
- Useful for complex layouts
- Allows organizing related content together
**Example structure:**
```
[Testimonials Section]
└── Group Block (First Row)
├── Testimonial Block
├── Testimonial Block
└── Testimonial Block
└── Group Block (Second Row)
├── Testimonial Block
└── Testimonial Block
```
**Creating nested blocks:**
1. Add a group-type block to your section
2. Select the group block
3. Add child blocks inside the group
4. Child blocks are indented in the sidebar
### Block Visibility
Some blocks support visibility settings:
- **Disabled/Visible** - Toggle whether block shows
- This is controlled per-block in block settings
- Hidden blocks show with reduced opacity in the sidebar
### Static vs Dynamic Blocks
**Static Blocks:**
- Required by the section to function
- Cannot be deleted
- May not be reorderable
- Usually core functionality
**Dynamic Blocks:**
- Can be added/removed freely
- Can be reordered
- User-controlled content
---
## All Setting Types Explained
The Theme Customizer uses various setting types to control different aspects of your theme. Understanding each type helps you customize more effectively.
### Text Input
**What it is:** A single-line text field for short text content.
**Used for:**
- Headings and titles
- Button text
- Short labels
- Alt text for images
**How to use:**
1. Click in the text field
2. Type your content
3. Changes appear instantly in preview
### Textarea (Multi-line Text)
**What it is:** A larger text area for longer content.
**Used for:**
- Descriptions
- Paragraphs of text
- Custom messages
**How to use:**
1. Click in the textarea
2. Type or paste your content
3. The field expands as you type
4. Line breaks are preserved
[SCREENSHOT PLACEHOLDER: Textarea input example]
### Rich Text Editor
**What it is:** A full text editor with formatting options.
**Used for:**
- Blog-style content
- Formatted descriptions
- Content with links
**Formatting options:**
- Bold, italic, underline
- Headings (H1-H6)
- Bullet and numbered lists
- Links
- Text alignment
**How to use:**
1. Click in the editor area
2. Use the toolbar for formatting
3. Type your content
4. Highlight text to format it
[SCREENSHOT PLACEHOLDER: Rich text editor with toolbar]
### Inline Rich Text
**What it is:** A simpler rich text field for basic formatting.
**Used for:**
- Short formatted text
- Text with basic styling
- Labels with emphasis
**Features:**
- Bold and italic
- No block-level formatting
- Inline use only
### Number/Range Slider
**What it is:** A slider control for numeric values.
**Used for:**
- Spacing values (padding, margins)
- Column counts
- Font sizes
- Timing (animation speed, autoplay)
- Opacity/transparency
**Components:**
- Slider track
- Draggable handle
- Number input box
- Unit label (px, %, etc.)
**How to use:**
1. Drag the slider to adjust value
2. OR type a number in the input box
3. Value updates in real-time
[SCREENSHOT PLACEHOLDER: Range slider with number input]
### Select Dropdown
**What it is:** A dropdown menu for choosing from predefined options.
**Used for:**
- Layout choices (grid, list, carousel)
- Alignment (left, center, right)
- Size options (small, medium, large)
- Style variants
**How to use:**
1. Click the dropdown
2. Options appear in a list
3. Click your choice
4. Selection applies immediately
**Toggle Buttons variation:**
For 2-4 options, the customizer may show toggle buttons instead of a dropdown:
```
[ Grid ][ List ][ Carousel ]
```
[SCREENSHOT PLACEHOLDER: Select dropdown and toggle button variations]
### Checkbox (Toggle Switch)
**What it is:** An on/off toggle switch.
**Used for:**
- Show/hide elements
- Enable/disable features
- Boolean options (yes/no)
**Examples:**
- "Show price" (on/off)
- "Enable autoplay" (on/off)
- "Display vendor name" (on/off)
**How to use:**
1. Click the toggle switch
2. It slides between on (colored) and off (gray)
3. Change applies immediately
[SCREENSHOT PLACEHOLDER: Toggle switch in on and off states]
### Color Picker
**What it is:** A color selection tool.
**Used for:**
- Custom colors not in color schemes
- Background colors
- Text colors
- Accent colors
**Components:**
- Color swatch preview
- Hex input field
- Clear/remove button
- Color picker popup
**How to use:**
1. Click the color swatch to open the picker
2. Choose a color from the palette
3. OR enter a hex code directly (e.g., #FF5733)
4. Click the X to clear the color
**"No Color" state:**
- Shown as a checkered pattern
- Means transparent or default
- Click to add a color
[SCREENSHOT PLACEHOLDER: Color picker showing swatch, hex input, and picker popup]
### Color Scheme Selector
**What it is:** A dropdown to choose from predefined color schemes.
**Used for:**
- Section background/text colors
- Consistent color application
- Easy theme-wide color changes
**Features:**
- Shows color swatches preview
- Each scheme shows background, text, and accent colors
- Selecting a scheme applies multiple colors at once
**How to use:**
1. Click the color scheme dropdown
2. See preview swatches for each option
3. Click to select a scheme
4. All related colors update
[SCREENSHOT PLACEHOLDER: Color scheme selector showing preview swatches]
**See [Color Schemes In-Depth](#color-schemes-in-depth) for detailed information.**
### Image Picker
**What it is:** An image selection interface.
**Used for:**
- Section backgrounds
- Product images
- Logos and icons
- Banner images
**Options:**
- **Choose** - Select from Media Library
- **URL** - Enter an external image URL
**How to use:**
1. Click "Choose" to open Media Library
2. Select an image OR upload a new one
3. Image appears in preview
4. Click the X to remove the image
**OR for external URLs:**
1. Click "URL" tab
2. Paste the image URL
3. Click apply/check button
4. Image loads from URL
[SCREENSHOT PLACEHOLDER: Image picker showing Choose/URL tabs and selected image]
### Video URL
**What it is:** Input for video embed URLs.
**Supported platforms:**
- YouTube
- Vimeo
**How to use:**
1. Copy the video URL from YouTube/Vimeo
2. Paste into the field
3. Video embeds in the preview
**Example URLs:**
- YouTube: `https://www.youtube.com/watch?v=XXXXX`
- Vimeo: `https://vimeo.com/XXXXXXXX`
[SCREENSHOT PLACEHOLDER: Video URL input field]
### URL/Link Input
**What it is:** A field for entering links.
**Used for:**
- Button destinations
- Image links
- Navigation links
**How to use:**
1. Enter a URL directly
2. OR use the link picker to select internal pages
**Link types:**
- External: `https://example.com`
- Internal pages: `/about`
- Products: `/products/product-handle`
- Collections: `/collections/collection-handle`
[SCREENSHOT PLACEHOLDER: URL input with link picker]
### Font Picker
**What it is:** A dropdown to select fonts.
**Used for:**
- Heading fonts
- Body text fonts
- Custom typography
**Features:**
- Preview of each font
- System fonts and Google Fonts
- Organized by category
**How to use:**
1. Click the font dropdown
2. Browse or search for fonts
3. Click to select
4. Font applies to preview
[SCREENSHOT PLACEHOLDER: Font picker dropdown with font previews]
### Radio Buttons
**What it is:** Single-select option buttons.
**Used for:**
- Mutually exclusive choices
- When you need to see all options at once
**How to use:**
1. All options are visible
2. Click one option to select it
3. Only one can be selected at a time
[SCREENSHOT PLACEHOLDER: Radio button options]
### Liquid Input (Advanced)
**What it is:** A code input for Liquid template code.
**Used for:**
- Advanced customizations
- Custom dynamic content
- Developer features
**Note:** This is an advanced feature. Only use if you understand Liquid templating.
[SCREENSHOT PLACEHOLDER: Liquid input code field]
---
## Color Schemes In-Depth
### Understanding Color Schemes
Color schemes are one of the most powerful features in LaunchMyStore 2.0. They allow you to define consistent color palettes and apply them throughout your store.
### What is a Color Scheme?
A color scheme is a predefined set of colors that work together:
| Color Role | Purpose | Example |
|------------|---------|---------|
| Background | Section/element background | White, Light Gray |
| Text | Body text color | Dark Gray, Black |
| Heading | Title and heading color | Black, Navy |
| Primary/Accent | Buttons, links, highlights | Blue, Orange |
| Secondary | Secondary buttons, borders | Gray, Light Blue |
### How Color Schemes Work
1. **Define schemes in Theme Settings** - Create named color schemes with specific colors
2. **Apply to sections** - Each section can use any color scheme
3. **Consistent design** - Change a scheme once, updates everywhere
### Example Color Schemes
**Scheme 1: Light (Default)**
- Background: #FFFFFF (White)
- Text: #333333 (Dark Gray)
- Accent: #007BFF (Blue)
**Scheme 2: Dark**
- Background: #1A1A1A (Near Black)
- Text: #FFFFFF (White)
- Accent: #00D4FF (Cyan)
**Scheme 3: Accent**
- Background: #007BFF (Blue)
- Text: #FFFFFF (White)
- Accent: #FFD700 (Gold)
### The Color Scheme Selector
When you see a "Color scheme" setting:
1. Click the dropdown
2. You'll see all available schemes
3. Each shows a **three-color swatch preview**:
- Left: Background color
- Middle: Text color
- Right: Accent color
4. Click to apply the scheme
[SCREENSHOT PLACEHOLDER: Color scheme dropdown with multiple scheme options and swatches]
### Creating Custom Color Schemes
To create or modify color schemes:
1. Click **Theme Settings** in the sidebar
2. Find **Colors** or **Color Schemes** section
3. Here you can:
- Edit existing schemes
- Create new schemes
- Delete unused schemes
4. For each scheme, set:
- Background color
- Text color
- Button/accent color
- Secondary colors
- Gradient options (if supported)
[SCREENSHOT PLACEHOLDER: Theme settings color scheme editor]
### Best Practices for Color Schemes
**Accessibility:**
- Ensure sufficient contrast between background and text
- Test readability at different screen sizes
- Consider color blindness (don't rely only on color)
**Consistency:**
- Use 2-4 color schemes maximum
- Apply consistently across your store
- Match your brand colors
**Usage Tips:**
- Light schemes for main content
- Dark schemes for headers/footers or accent sections
- Accent schemes for call-to-action sections
---
## Using the Media Library
### What is the Media Library?
The Media Library is your central hub for managing all images and files used in your store. It integrates directly with the Theme Customizer.
### Accessing the Media Library
The Media Library opens automatically when you:
- Click "Choose" on an image picker
- Select "Add Image" anywhere in the customizer
[SCREENSHOT PLACEHOLDER: Media Library modal overlay]
### Media Library Interface
| Area | Description |
|------|-------------|
| Search Bar | Find images by filename |
| Upload Button | Add new images |
| Image Grid | View all uploaded images |
| Pagination | Navigate through pages of images |
| Selection | Click to select images |
### Uploading New Images
**Method 1: Upload Button**
1. Click the **Upload** button
2. Select file(s) from your computer
3. Wait for upload to complete
4. New images appear in the library
**Method 2: Drag and Drop**
1. Drag image files from your computer
2. Drop them onto the Media Library
3. Files upload automatically
**Supported formats:**
- JPG/JPEG
- PNG
- WebP
- GIF
- SVG
**Recommendations:**
- Image size: 1000x1000 px minimum for products
- File size: Under 2MB for fast loading
- Format: WebP or JPG for photos, PNG for graphics
[SCREENSHOT PLACEHOLDER: Upload process in Media Library]
### Selecting Images
**Single selection:**
1. Click on an image
2. It becomes highlighted
3. Click "Select" or "Use" button
**Multiple selection (when supported):**
1. Click multiple images
2. Each selected image is highlighted
3. Click "Select All" to confirm
### Searching for Images
1. Type in the search bar
2. Results filter as you type
3. Search by filename
4. Clear search to see all images
[SCREENSHOT PLACEHOLDER: Search results in Media Library]
### Image Information
When you hover over or select an image, you can see:
- Filename
- Dimensions
- File size
- Upload date
### Using External Image URLs
If your images are hosted elsewhere:
1. In the image picker, click **URL** tab
2. Paste the full image URL
3. Click the check button to validate
4. Image loads from external source
**Note:** External images should be:
- Publicly accessible
- On HTTPS (secure) URLs
- From reliable hosting
[SCREENSHOT PLACEHOLDER: URL input tab in image picker]
### Best Practices for Images
| Aspect | Recommendation |
|--------|----------------|
| Product Images | 1000x1000 px, square, white background |
| Banner Images | 1920x600 px for desktop |
| Mobile Banners | 800x400 px |
| Logos | PNG with transparent background |
| File Size | Under 500KB for fast loading |
| Format | WebP for best compression, JPG for photos |
---
## Theme Settings
### What are Theme Settings?
Theme Settings are global settings that affect your entire store, not just individual sections. They define the foundational design elements.
### Accessing Theme Settings
1. In the left sidebar, look for **Theme Settings**
2. OR click the paintbrush/gear icon at the top
3. The sidebar shows all theme setting categories
[SCREENSHOT PLACEHOLDER: Theme Settings access button and panel]
### Theme Settings Categories
Different themes may have different categories, but common ones include:
#### Colors
Global color definitions:
- Color schemes (create and edit)
- Default colors
- Brand colors
[SCREENSHOT PLACEHOLDER: Colors section in theme settings]
#### Typography
Font settings for your entire store:
| Setting | Description |
|---------|-------------|
| Heading Font | Font for all headings |
| Body Font | Font for paragraph text |
| Font Scale | Base size multiplier |
| Line Height | Space between lines |
[SCREENSHOT PLACEHOLDER: Typography settings]
#### Layout
Structural settings:
| Setting | Description |
|---------|-------------|
| Page Width | Maximum content width |
| Spacing | Default section spacing |
| Border Radius | Rounded corners on elements |
#### Buttons
Button appearance:
| Setting | Description |
|---------|-------------|
| Button Style | Primary button appearance |
| Border Width | Button border thickness |
| Border Radius | Button corner rounding |
#### Social Media
Connect your social profiles:
- Facebook URL
- Instagram URL
- Twitter/X URL
- YouTube URL
- TikTok URL
- Pinterest URL
These are used by social icons throughout your theme.
[SCREENSHOT PLACEHOLDER: Social media settings]
#### Favicon
Your store's browser icon:
1. Upload a square image (32x32 px recommended)
2. This appears in browser tabs
3. Used when customers bookmark your store
#### Cart
Shopping cart behavior:
| Setting | Description |
|---------|-------------|
| Cart Type | Page cart vs drawer cart |
| Show Vendor | Display brand names |
| Show Quantity Selector | Allow quantity changes |
#### Search
Search functionality:
| Setting | Description |
|---------|-------------|
| Enable Search | Show search in header |
| Show Search Suggestions | Live search results |
| Search Behavior | Products, pages, or both |
### Applying Theme Settings
Theme settings apply globally:
1. Change a setting (e.g., heading font)
2. Preview updates to show the change
3. All pages using that setting are affected
4. Save to apply to your live store
---
## Resource Pickers - Complete Guide
### What are Resource Pickers?
Resource pickers are powerful selection tools that let you link to specific content in your store without typing URLs. When you see a setting that requires linking to a product, collection, blog, page, or menu, a resource picker provides an easy visual interface to find and select that content.
### Overview of All Resource Picker Types
| Picker Type | Icon | What It Selects | Where You'll Find It |
|-------------|------|-----------------|---------------------|
| Product Picker | Box/Package | Individual products | Featured product sections, product recommendations |
| Product List Picker | Multiple Boxes | Multiple products | Product grids, featured product sections |
| Collection Picker | Folder/Grid | Single category/collection | Featured collection, collection banner |
| Collection List Picker | Multiple Folders | Multiple collections | Collection list sections, navigation |
| Blog Picker | Newspaper | Blog pages | Blog sections, footer links |
| Article Picker | Document | Individual blog posts | Featured article, related posts |
| Page Picker | Page | Static pages (About, Contact) | Navigation links, footer |
| Menu Picker | Hamburger Lines | Navigation menus | Header navigation, footer menus |
---
### Product Picker - Detailed Guide
**What it does:** Allows you to select a single product from your store to display or link to.
**Where you'll see it:**
- Featured Product sections
- Product recommendation blocks
- "Shop the Look" sections
- Banner buttons linking to products
- Any setting labeled "Product" or "Select product"
**The Product Picker Interface:**
When you click "Select product", a modal opens with:
| Element | Description |
|---------|-------------|
| Search Bar | Type to find products by name |
| Product Grid | Visual grid of all products with images |
| Product Image | Thumbnail of the product |
| Product Title | Name of the product |
| Pagination | Navigate through pages if you have many products |
| Select Button | Confirm your selection |
**Step-by-Step Usage:**
1. Find the "Product" setting in the sidebar
2. Click **"Select product"** button
3. The product picker modal opens
4. **To search:** Type the product name in the search bar
5. **To browse:** Scroll through the product grid
6. **To select:** Click on the product you want
7. The product becomes highlighted
8. Click **"Select"** or **"Done"** to confirm
9. The modal closes and your product is linked
[SCREENSHOT PLACEHOLDER: Product picker modal showing search bar, product grid with images, and select button]
**After Selection:**
- The setting shows the selected product name
- A small preview/thumbnail may appear
- Click the X or "Remove" to clear the selection
- Click "Change" to select a different product
**Tips:**
- Products must be published to appear in the picker
- The search looks at product titles
- Recently added products appear after a refresh
---
### Product List Picker - Selecting Multiple Products
**What it does:** Allows you to select multiple products at once.
**Where you'll see it:**
- Featured Products sections (selecting which products to show)
- "Hand-picked products" blocks
- Product carousel sections
- Custom product grids
**Difference from Single Product Picker:**
- Shows checkboxes next to each product
- You can select multiple items
- Shows count of selected products
- Has "Select All" option
**Step-by-Step Usage:**
1. Click **"Select products"** button
2. The product list picker modal opens
3. **Check the boxes** next to products you want
4. Selected products show a checkmark
5. A counter shows "X products selected"
6. Click **"Add"** or **"Done"** to confirm
7. All selected products are added
[SCREENSHOT PLACEHOLDER: Product list picker with multiple products checked and selection counter]
**Managing Selected Products:**
- Selected products appear as a list in the setting
- Drag to reorder products (changes display order)
- Click X next to a product to remove it
- Click "Add more" to select additional products
---
### Collection Picker - Selecting Categories
**What it does:** Allows you to select a single collection (category) from your store.
**Where you'll see it:**
- Featured Collection sections
- Collection banner settings
- "Shop by Category" blocks
- Navigation links to categories
- Any setting labeled "Collection" or "Select collection"
**The Collection Picker Interface:**
| Element | Description |
|---------|-------------|
| Search Bar | Find collections by name |
| Collection List | All your collections with images |
| Collection Image | Category thumbnail/featured image |
| Collection Title | Name of the collection |
| Product Count | Number of products in collection |
**Step-by-Step Usage:**
1. Find the "Collection" setting in the sidebar
2. Click **"Select collection"** button
3. The collection picker modal opens
4. Browse or search for your collection
5. Click on the collection to select it
6. Click **"Select"** to confirm
7. Collection is now linked
[SCREENSHOT PLACEHOLDER: Collection picker showing collection list with images, titles, and product counts]
**What Gets Linked:**
- Collection title
- Collection handle (URL)
- Collection image (if available)
- Products within the collection (for display)
**Use Cases:**
| Use Case | Example |
|----------|---------|
| Featured Collection | Highlight "New Arrivals" on homepage |
| Category Navigation | Link menu item to "Women's Clothing" |
| Collection Banner | Show banner for "Summer Sale" collection |
| Shop by Category | Display "Electronics" in category grid |
---
### Collection List Picker - Multiple Collections
**What it does:** Select multiple collections to display together.
**Where you'll see it:**
- "Shop by Category" sections with multiple categories
- Collection grid/carousel sections
- Footer collection links
- Navigation mega menus
**Step-by-Step Usage:**
1. Click **"Select collections"** button
2. Check multiple collections
3. See selection count update
4. Click **"Add"** to confirm
5. Collections appear in a list
**Managing Collections:**
- Drag to reorder
- Remove individual collections
- Add more collections anytime
[SCREENSHOT PLACEHOLDER: Collection list picker with multiple selections]
---
### Blog Picker - Selecting Blog Pages
**What it does:** Select a blog page (not individual posts) to link or display.
**Where you'll see it:**
- Blog section settings
- Footer blog links
- Navigation menu items
- "From Our Blog" sections
**Understanding Blogs vs Articles:**
- **Blog** = The container page (e.g., "News", "Tutorials")
- **Article** = Individual blog post within a blog
**The Blog Picker Interface:**
| Element | Description |
|---------|-------------|
| Blog List | All your blog pages |
| Blog Title | Name of the blog |
| Article Count | Number of posts in the blog |
| SEO Image | Blog's featured image (if set) |
**Step-by-Step Usage:**
1. Click **"Select blog"** button
2. See list of all your blog pages
3. Click on the blog you want
4. Click **"Select"** to confirm
[SCREENSHOT PLACEHOLDER: Blog picker showing list of blog pages with article counts]
**After Selection:**
- Blog title displays in the setting
- Clicking the linked blog shows all its articles
- Use for sections that display "latest posts from [Blog]"
---
### Article Picker - Selecting Blog Posts
**What it does:** Select a specific blog post (article) to feature or link.
**Where you'll see it:**
- Featured Article sections
- "Editor's Pick" blocks
- Related posts settings
- Banner links to specific articles
**The Article Picker Interface:**
| Element | Description |
|---------|-------------|
| Search Bar | Find articles by title |
| Article List | All blog posts across all blogs |
| Article Image | Featured image of the post |
| Article Title | Title of the blog post |
| Author | Who wrote the article |
| Blog Name | Which blog it belongs to |
**Step-by-Step Usage:**
1. Click **"Select article"** button
2. Browse or search for the article
3. Articles show with their featured images
4. Click on the article to select
5. Click **"Select"** to confirm
[SCREENSHOT PLACEHOLDER: Article picker showing blog posts with images, titles, and authors]
**What Gets Linked:**
- Article title
- Article URL
- Featured image
- Author information
- Blog it belongs to
---
### Page Picker - Selecting Static Pages
**What it does:** Select a static page from your store (About Us, Contact, FAQ, etc.)
**Where you'll see it:**
- Navigation menu links
- Footer page links
- Button links in sections
- "Learn More" buttons
**The Page Picker Interface:**
| Element | Description |
|---------|-------------|
| Page List | All your static pages |
| Page Title | Name of the page |
| Page Handle | URL slug of the page |
**Step-by-Step Usage:**
1. Click **"Select page"** button
2. See list of all your pages
3. Click on the page you want
4. Click **"Select"** to confirm
[SCREENSHOT PLACEHOLDER: Page picker showing list of static pages]
**Common Pages to Link:**
- About Us
- Contact Us
- FAQ / Help
- Shipping Information
- Return Policy
- Privacy Policy
- Terms of Service
---
### Menu Picker (Link List Picker) - Selecting Navigation Menus
**What it does:** Select a navigation menu to display in a section.
**Where you'll see it:**
- Header navigation settings
- Footer menu columns
- Mobile menu settings
- Sidebar navigation
**The Menu Picker Interface:**
| Element | Description |
|---------|-------------|
| Menu List | All your created menus |
| Menu Type | Header, Footer, or Custom |
| Menu Handle | Internal identifier |
**Step-by-Step Usage:**
1. Click **"Select menu"** button
2. See list of all your menus
3. Menu type is highlighted (Header, Footer)
4. Click on the menu to select
5. Click **"Select"** to confirm
[SCREENSHOT PLACEHOLDER: Menu picker showing menu types and handles]
**What Happens After Selection:**
- The selected menu's links display in the section
- If menu has submenus, dropdowns appear
- Changes to the menu (in Menu Management) reflect automatically
**Common Menu Selections:**
| Section | Menu to Select |
|---------|----------------|
| Header Navigation | Main Menu / Header Menu |
| Footer Column 1 | Quick Links |
| Footer Column 2 | Customer Service |
| Mobile Menu | Main Menu |
---
### Resource Picker Tips and Best Practices
**General Tips:**
1. **Content must exist first** - Create products, collections, blogs, pages, and menus before trying to select them in the customizer
2. **Search is your friend** - Use the search bar to quickly find items in large lists
3. **Check your selection** - After selecting, verify the correct item appears in the setting
4. **Clear before changing** - If selection seems stuck, clear it first then reselect
**Troubleshooting:**
| Problem | Solution |
|---------|----------|
| Product not appearing | Check if product is published |
| Collection empty | Add products to the collection |
| Blog not showing | Create the blog page first |
| Menu missing | Create menu in Appearance > Menu |
| Page not found | Publish the page first |
---
## Device Preview
### Why Device Preview Matters
Over 60% of e-commerce traffic comes from mobile devices. Device preview ensures your store looks great everywhere.
### Preview Modes
| Mode | Icon | Width | Use For |
|------|------|-------|---------|
| Desktop | Computer | Full width | Desktop/laptop users |
| Tablet | Tablet | ~768px | iPad and tablets |
| Mobile | Phone | ~375px | Smartphones |
### Switching Preview Modes
1. Look at the top toolbar
2. Find the device icons (desktop, tablet, phone)
3. Click any icon to switch
4. Preview adjusts to that device size
[SCREENSHOT PLACEHOLDER: Device preview toggle buttons]
### What to Check on Each Device
**Desktop:**
- Full-width layouts look balanced
- Large images display properly
- Multi-column layouts work
**Tablet:**
- Columns stack appropriately
- Images resize correctly
- Navigation is accessible
**Mobile:**
- Text is readable without zooming
- Buttons are large enough to tap
- Navigation works on touch
- Forms are easy to fill out
- No horizontal scrolling
### Responsive Behavior
Your theme automatically adjusts for different devices:
- Columns may reduce (4 → 2 → 1)
- Images resize proportionally
- Text size adjusts
- Navigation becomes mobile menu
---
## Template Pages - Complete Customization Guide
### What are Templates?
Templates define the layout, structure, and content for different page types on your store. Each template can be customized independently, allowing you to create unique experiences for different parts of your store.
**Key Concept:** When you switch templates in the customizer, you're editing a different type of page. Changes to the Homepage template won't affect your Product pages, and vice versa.
### The Template Selector
Located in the top toolbar, the template selector lets you switch between page types:
[SCREENSHOT PLACEHOLDER: Template selector dropdown in top toolbar]
**How to use:**
1. Click the template dropdown in the top toolbar
2. See list of all available templates
3. Click on a template to switch to it
4. Preview updates to show that page type
5. Sidebar updates with sections for that template
---
### All Available Templates
| Template | File Name | What It Controls |
|----------|-----------|------------------|
| **Homepage** | index.json | Your store's main landing page |
| **Product Page** | product.json | Individual product detail pages |
| **Collection Page** | collection.json | Category/collection listing pages |
| **Blog Page** | blog.json | Blog listing showing all posts |
| **Article Page** | article.json | Individual blog post pages |
| **Static Page** | page.json | Custom pages (About, Contact, FAQ) |
| **Cart Page** | cart.json | Shopping cart page |
| **Search Results** | search.json | Search results page |
| **404 Page** | 404.json | Page not found error page |
---
### Homepage Template (index.json)
**What it is:** Your store's main landing page - the first thing most visitors see.
**URL:** `yourstore.com/` or `yourstore.com`
**Purpose:** Make a strong first impression, showcase featured products and collections, highlight promotions.
#### Typical Homepage Sections
| Section Type | Purpose | Common Settings |
|--------------|---------|-----------------|
| **Slideshow/Hero** | Large banner images | Images, headings, buttons, autoplay |
| **Featured Collection** | Showcase a category | Collection picker, products per row |
| **Featured Products** | Highlight specific products | Product picker, layout style |
| **Image with Text** | Brand story/info | Image, text content, button |
| **Collection List** | Show multiple categories | Collection pickers, grid layout |
| **Testimonials** | Customer reviews | Review content, author, rating |
| **Newsletter** | Email signup | Heading, description, button text |
| **Video** | Brand/product video | Video URL, autoplay, cover image |
| **Rich Text** | Custom content | Text editor, alignment |
| **Image Banner** | Promotional banner | Image, overlay text, link |
#### Customizing Your Homepage
**Step 1: Plan Your Layout**
Decide what sections you want and in what order:
1. Hero/Banner (grab attention)
2. Featured Products/Collection (show what you sell)
3. About/Story (build trust)
4. Testimonials (social proof)
5. Newsletter (capture leads)
**Step 2: Add and Arrange Sections**
1. Switch to Homepage template
2. Add sections using the + button
3. Drag to reorder sections
4. Delete sections you don't need
**Step 3: Customize Each Section**
1. Click on a section to edit
2. Set content (text, images)
3. Choose color scheme
4. Adjust layout options
5. Configure visibility
[SCREENSHOT PLACEHOLDER: Homepage template with multiple sections in sidebar]
#### Homepage Best Practices
| Do | Don't |
|----|-------|
| Lead with your best products | Overwhelm with too many sections |
| Use high-quality hero images | Use slow-loading images |
| Include clear call-to-actions | Hide navigation |
| Show social proof (reviews) | Make it too long to scroll |
| Optimize for mobile | Ignore mobile preview |
---
### Product Page Template (product.json)
**What it is:** The detail page for individual products where customers make purchase decisions.
**URL:** `yourstore.com/products/[product-handle]`
**Purpose:** Showcase product details, images, variants, and convince visitors to buy.
#### Product Page Sections
| Section Type | Purpose | Common Settings |
|--------------|---------|-----------------|
| **Product Information** | Main product display | Layout, image position, variant style |
| **Product Image Gallery** | Product photos | Thumbnails, zoom, video support |
| **Product Description** | Detailed info | Tab layout, expandable sections |
| **Variant Picker** | Size/color selection | Swatch style, dropdown vs buttons |
| **Add to Cart** | Purchase button | Button text, sticky cart |
| **Product Reviews** | Customer reviews | Review display, rating |
| **Related Products** | Cross-sell | Number of products, source |
| **Recently Viewed** | Products viewed | Number to show |
| **Product Recommendations** | AI suggestions | Recommendation type |
| **Trust Badges** | Security/shipping icons | Badge images, text |
#### Key Product Page Settings
**Product Information Section:**
| Setting | Options | What It Does |
|---------|---------|--------------|
| Layout | Stacked, Two columns | Image/info arrangement |
| Image Position | Left, Right | Where images appear |
| Enable Video | On/Off | Show product videos |
| Show Vendor | On/Off | Display brand name |
| Show SKU | On/Off | Display product SKU |
| Show Quantity Selector | On/Off | Allow quantity changes |
| Enable Sticky Add to Cart | On/Off | Fixed purchase button |
**Variant Picker Settings:**
| Setting | Options | What It Does |
|---------|---------|--------------|
| Variant Style | Dropdown, Buttons, Swatches | How options appear |
| Color Swatches | On/Off | Show color as circles |
| Show Unavailable Variants | On/Off | Show sold out options |
[SCREENSHOT PLACEHOLDER: Product page template showing product sections]
#### Customizing Product Pages
1. Switch to **Product Page** template
2. The preview shows a sample product
3. Edit sections that control product display
4. Changes apply to ALL product pages
**Important:** You're editing the template, not a specific product. All products use this template.
---
### Collection Page Template (collection.json)
**What it is:** Pages that display products within a category/collection.
**URL:** `yourstore.com/collections/[collection-handle]`
**Purpose:** Help customers browse products by category, filter and sort, discover products.
#### Collection Page Sections
| Section Type | Purpose | Common Settings |
|--------------|---------|-----------------|
| **Collection Banner** | Header image/text | Banner image, title overlay |
| **Collection Description** | Category info | Show/hide description |
| **Product Grid** | Product listing | Products per row, pagination |
| **Filters** | Refine products | Filter types, position |
| **Sort Options** | Order products | Sort options available |
| **Subcollections** | Child categories | Show subcategories |
#### Key Collection Page Settings
**Product Grid Settings:**
| Setting | Options | What It Does |
|---------|---------|--------------|
| Products Per Row | 2, 3, 4, 5 | Columns of products |
| Products Per Page | 12, 24, 36, 48 | Products before pagination |
| Image Ratio | Square, Portrait, Landscape | Product image shape |
| Show Second Image | On/Off | Show alternate on hover |
| Show Vendor | On/Off | Display brand name |
| Show Quick Add | On/Off | Add to cart button |
| Show Price | On/Off | Display pricing |
**Filter Settings:**
| Setting | Options | What It Does |
|---------|---------|--------------|
| Enable Filtering | On/Off | Show filter options |
| Filter Position | Sidebar, Top, Drawer | Where filters appear |
| Filter Types | Price, Size, Color, etc. | What can be filtered |
| Collapsible Filters | On/Off | Expandable filter groups |
[SCREENSHOT PLACEHOLDER: Collection page template with filter sidebar and product grid]
#### Customizing Collection Pages
1. Switch to **Collection Page** template
2. Preview shows a sample collection
3. Edit product grid settings
4. Configure filter options
5. Set up collection banner
---
### Blog Page Template (blog.json)
**What it is:** The main blog listing page showing all articles.
**URL:** `yourstore.com/blogs/[blog-handle]`
**Purpose:** Display all blog posts, allow browsing by date/tag, showcase your content.
#### Blog Page Sections
| Section Type | Purpose | Common Settings |
|--------------|---------|-----------------|
| **Blog Header** | Page title/description | Title, description, image |
| **Article Grid** | Post listing | Posts per row, layout |
| **Featured Article** | Highlight top post | Article picker |
| **Categories/Tags** | Filter by topic | Show/hide tags |
| **Newsletter** | Capture subscribers | Heading, form |
#### Key Blog Page Settings
**Article Grid Settings:**
| Setting | Options | What It Does |
|---------|---------|--------------|
| Articles Per Row | 1, 2, 3 | Column layout |
| Articles Per Page | 6, 12, 18 | Before pagination |
| Show Featured Image | On/Off | Article thumbnails |
| Show Date | On/Off | Publication date |
| Show Author | On/Off | Writer name |
| Show Excerpt | On/Off | Article preview text |
| Excerpt Length | Characters | How much preview text |
[SCREENSHOT PLACEHOLDER: Blog page template with article grid]
---
### Article Page Template (article.json)
**What it is:** Individual blog post pages.
**URL:** `yourstore.com/blogs/[blog-handle]/[article-handle]`
**Purpose:** Display full blog post content, encourage engagement, link to related content.
#### Article Page Sections
| Section Type | Purpose | Common Settings |
|--------------|---------|-----------------|
| **Article Header** | Title, image, meta | Featured image display |
| **Article Content** | Post body | Typography, width |
| **Author Bio** | Writer info | Photo, bio text |
| **Social Share** | Share buttons | Platforms to show |
| **Related Articles** | More to read | Number of posts |
| **Comments** | Discussion | Enable/disable |
| **Newsletter** | Subscribe CTA | After article |
#### Key Article Page Settings
| Setting | Options | What It Does |
|---------|---------|--------------|
| Show Featured Image | On/Off | Hero image at top |
| Show Author | On/Off | Writer attribution |
| Show Date | On/Off | Publication date |
| Show Tags | On/Off | Article tags |
| Show Share Buttons | On/Off | Social sharing |
| Content Width | Narrow, Medium, Wide | Reading width |
[SCREENSHOT PLACEHOLDER: Article page template with content sections]
---
### Static Page Template (page.json)
**What it is:** Custom pages like About Us, Contact, FAQ, Policies.
**URL:** `yourstore.com/pages/[page-handle]`
**Purpose:** Provide store information, policies, and custom content.
#### Static Page Sections
| Section Type | Purpose | Common Settings |
|--------------|---------|-----------------|
| **Page Header** | Title area | Title style, banner |
| **Rich Text** | Page content | Text editor |
| **Contact Form** | Contact page | Form fields |
| **FAQ** | Questions/Answers | Accordion style |
| **Image with Text** | Visual content | Layout options |
| **Map** | Store location | Address, map embed |
| **Team** | Staff members | Photos, bios |
#### Alternate Page Templates
Some themes offer specialized page templates:
| Template | Use For |
|----------|---------|
| page.contact.json | Contact pages with forms |
| page.about.json | About Us pages |
| page.faq.json | FAQ pages with accordions |
[SCREENSHOT PLACEHOLDER: Static page template options]
---
### Cart Page Template (cart.json)
**What it is:** The shopping cart page where customers review items before checkout.
**URL:** `yourstore.com/cart`
**Purpose:** Show cart contents, allow quantity changes, encourage checkout.
#### Cart Page Sections
| Section Type | Purpose | Common Settings |
|--------------|---------|-----------------|
| **Cart Items** | Product list | Image size, remove option |
| **Cart Summary** | Totals, checkout | Subtotal, taxes, button |
| **Cart Notes** | Special instructions | Enable/disable |
| **Shipping Calculator** | Estimate shipping | Show/hide |
| **Recommended Products** | Upsell items | Products to show |
| **Trust Badges** | Security assurance | Badge images |
#### Key Cart Page Settings
| Setting | Options | What It Does |
|---------|---------|--------------|
| Show Product Images | On/Off | Item thumbnails |
| Enable Quantity Selector | On/Off | Change quantities |
| Show Vendor | On/Off | Brand names |
| Enable Cart Notes | On/Off | Special instructions |
| Show Recommended Products | On/Off | Cross-sell section |
[SCREENSHOT PLACEHOLDER: Cart page template with items and summary]
---
### Search Results Template (search.json)
**What it is:** Page displaying search results.
**URL:** `yourstore.com/search?q=[query]`
**Purpose:** Help customers find products, show relevant results.
#### Search Results Sections
| Section Type | Purpose | Common Settings |
|--------------|---------|-----------------|
| **Search Header** | Search bar, query | Show search bar |
| **Search Results** | Product listing | Grid layout |
| **Filters** | Refine results | Filter options |
| **No Results** | Empty state | Message, suggestions |
#### Key Search Settings
| Setting | Options | What It Does |
|---------|---------|--------------|
| Products Per Row | 2, 3, 4 | Column layout |
| Enable Filters | On/Off | Filter results |
| Show Product Type | On/Off | Product categories |
| Search Types | Products, Pages, Articles | What to search |
---
### 404 Page Template (404.json)
**What it is:** Error page shown when a URL doesn't exist.
**URL:** Any non-existent page
**Purpose:** Help lost visitors find their way, maintain branding.
#### 404 Page Sections
| Section Type | Purpose | Common Settings |
|--------------|---------|-----------------|
| **404 Message** | Error notification | Heading, message |
| **Search Bar** | Help find content | Enable search |
| **Featured Products** | Keep shopping | Products to show |
| **Navigation Links** | Helpful links | Links to add |
#### Key 404 Settings
| Setting | Options | What It Does |
|---------|---------|--------------|
| Heading | Text | Error message title |
| Message | Text | Helpful description |
| Show Search | On/Off | Include search bar |
| Show Products | On/Off | Feature products |
| Button Text | Text | Return home button |
---
### Template Areas: Header, Footer, and Content
Each template has three main areas:
```
+---------------------------+
| HEADER | <- Header Group (shared)
| (Logo, Navigation, Search)|
+---------------------------+
| |
| TEMPLATE CONTENT | <- Template-specific sections
| |
| (Unique to each template)|
| |
+---------------------------+
| FOOTER | <- Footer Group (shared)
| (Links, Social, Copyright)|
+---------------------------+
```
**Header Group (sections/header-group.json):**
- Shared across ALL templates
- Edit once, applies everywhere
- Contains: Announcement bar, Navigation, Logo
**Footer Group (sections/footer-group.json):**
- Shared across ALL templates
- Edit once, applies everywhere
- Contains: Footer links, Newsletter, Social icons
**Template Content:**
- Unique to each template
- Edit separately for each page type
### Editing Header and Footer
1. Select any template
2. Header and Footer sections appear at top/bottom of sidebar
3. Click to edit them
4. Changes apply to ALL pages
[SCREENSHOT PLACEHOLDER: Sidebar showing Header Group, Content Sections, and Footer Group]
---
### Template Customization Best Practices
**Consistency Across Templates:**
| Element | Keep Consistent |
|---------|-----------------|
| Color Schemes | Use same schemes across templates |
| Typography | Same fonts everywhere |
| Button Styles | Consistent button design |
| Spacing | Similar padding/margins |
| Header/Footer | Shared across all pages |
**Template-Specific Tips:**
| Template | Focus On |
|----------|----------|
| Homepage | First impression, featured content |
| Product | Clear images, easy purchase |
| Collection | Easy browsing, filtering |
| Blog | Readability, engagement |
| Cart | Clear totals, easy checkout |
**Testing All Templates:**
1. Customize each template
2. Preview on all device sizes
3. Test navigation between pages
4. Verify consistency
5. Save all changes
---
## Inspector Mode
### What is Inspector Mode?
Inspector Mode lets you click directly on elements in the preview to select and edit them. It's the fastest way to navigate to what you want to change.
### Enabling Inspector Mode
1. Look for the Inspector toggle in the top toolbar
2. It looks like a cursor/pointer icon
3. Click to enable (highlighted) or disable
When enabled:
- Hovering highlights sections/blocks
- Clicking selects the element
- Sidebar jumps to that element's settings
[SCREENSHOT PLACEHOLDER: Inspector mode toggle and highlighted section in preview]
### Using Inspector Mode
1. Make sure Inspector is enabled
2. Hover over elements in the preview
3. See the blue highlight appear
4. Click to select
5. Sidebar shows settings for that element
### When to Disable Inspector
Disable Inspector when you want to:
- Test clicking links in preview
- Check button hover states
- Navigate through the preview normally
- Test interactive elements
---
## Saving and Publishing
### Understanding Save States
| State | Indicator | Meaning |
|-------|-----------|---------|
| Saved | No indicator | All changes are saved |
| Unsaved | Dot on Save button | You have pending changes |
| Saving | Loading spinner | Save in progress |
### How to Save
1. Make your changes
2. Click the **Save** button in the top toolbar
3. Wait for confirmation
4. Changes are now live on your store
### Auto-Save (if enabled)
Some versions support auto-save:
- Changes save automatically after a pause
- Look for "Auto-saved" indicator
- Manual save still available
### What Gets Saved
When you save:
- All section changes
- All block changes
- Theme settings changes
- Template structure changes
### Unsaved Changes Warning
If you try to leave with unsaved changes:
- A warning dialog appears
- Choose to save or discard
- Don't lose your work!
[SCREENSHOT PLACEHOLDER: Unsaved changes warning dialog]
---
## Keyboard Shortcuts
Speed up your workflow with these shortcuts:
| Shortcut | Action |
|----------|--------|
| Ctrl/Cmd + S | Save changes |
| Ctrl/Cmd + Z | Undo last change |
| Ctrl/Cmd + Shift + Z | Redo |
| Escape | Close modal/go back |
---
## Troubleshooting
### Preview Not Loading
**Symptoms:** Blank preview area, loading spinner never stops
**Solutions:**
1. Refresh the page (F5)
2. Clear browser cache
3. Check internet connection
4. Try a different browser
5. Disable browser extensions
### Changes Not Appearing
**Symptoms:** You make changes but preview doesn't update
**Solutions:**
1. Wait a moment for hot reload
2. Scroll the preview to trigger refresh
3. Click Save and check live site
4. Check if element is hidden
### Save Failed
**Symptoms:** Error message when saving
**Solutions:**
1. Check internet connection
2. Try saving again
3. Refresh page (save first!)
4. Contact support if persistent
### Section Not Available
**Symptoms:** Can't find a section type
**Solutions:**
1. Ensure you're on the right template
2. Some sections are template-specific
3. Check theme documentation
4. Theme may not include that section
### Images Not Loading
**Symptoms:** Broken image icons or blank spaces
**Solutions:**
1. Re-upload images via Media Library
2. Check image URLs are correct
3. Ensure images are publicly accessible
4. Try a different image format
### Color Scheme Not Applying
**Symptoms:** Selected scheme doesn't change colors
**Solutions:**
1. Section may have custom colors override
2. Clear custom color settings
3. Check if scheme is properly defined
4. Save and refresh preview
### Blocks Won't Reorder
**Symptoms:** Can't drag blocks to new positions
**Solutions:**
1. Some blocks are static (can't move)
2. Try selecting then dragging handle
3. Refresh the customizer
4. Check if block type supports reordering
---
## Summary
The LaunchMyStore 2.0 Theme Customizer gives you complete control over your store's design:
**Key Concepts:**
- **Sections** are the major building blocks
- **Blocks** are smaller elements within sections
- **Color Schemes** provide consistent coloring
- **Theme Settings** control global design
- **Resource Pickers** link to your content
- **Device Preview** ensures responsive design
**Workflow Tips:**
1. Start with Theme Settings (global design)
2. Customize templates one at a time
3. Use Color Schemes for consistency
4. Test on all device sizes
5. Save frequently
**Remember:**
- Inspector mode speeds up navigation
- Media Library manages all your images
- Save before leaving the customizer
- Preview doesn't affect your live store until you save
---
**Previous:** [Getting Started](./00-getting-started.md) | **Next:** [Blogs Guide](./02-blogs.md)