Getting Started Tutorial

📦 Step 1: Installation (2 minutes)

1. Click "Add app" in the Shopify App Store
2. Authenticate with your Shopify store
3. Grant permissions when prompted
4. You'll be redirected to the app dashboard

🎨 Step 2: Add to Your Theme (3 minutes)

1. Go to Online Store → Themes
2. Click "Customize" on your active theme
3. Navigate to a product page
4. Click "Add block" in the product template
5. Under "Apps", select "Full Description Pro"
6. Drag the block to your desired position (usually below product title/price)
7. Click "Save"

⚙️ Step 3: Configure Settings (5 minutes)

Choose Your Display Mode:

1. Select the app block in the theme editor
2. Under "Product & Display", choose:
   • Normal: Standard description display
   • Tabs: Sections as clickable tabs (requires H2 headings)
   • Accordion: Collapsible sections (requires H2 headings)
   • Read More: Compact with "Read More" button

For Tabs Mode:

1. Your product descriptions must contain H2 headings
2. Example description structure:

   ## Features
   Your features text here...
   
   ## Specifications
   Your specs text here...
   
   ## Shipping Info
   Your shipping text here...

3. Each H2 becomes a tab automatically!
4. Choose tab style: Horizontal, Pills, or Underline
5. Customize colors for tabs, active state, and borders

For Accordion Mode:

1. Same H2 structure as tabs (see above)
2. Each H2 becomes a collapsible section
3. Toggle "Open First" to expand first section by default
4. Customize header and content backgrounds

For Read More Mode:

1. No H2 headings required
2. Set "Height" (default: 300px)
3. Customize "Read More" and "Show Less" button text
4. Change button colors

🎨 Step 4: Customize Design (10 minutes)

Container & Layout:

• Container Width: Standard (centered) or Full Width (edge-to-edge)
• Max Width: 50-100% (for standard mode)
• Padding: Top, Right, Bottom, Left (0-100px each)
• Margin: Top and Bottom spacing (0-80px)

Colors & Backgrounds:

• Background: Main background color
• Gradient: Second color for gradient effect
• Gradient Angle: 0-360° rotation
• Title BG: Header background color

Borders & Shadows:

• Border Width: 0-10px
• Border Style: Solid, Dashed, or Dotted
• Border Radius: 0-50px (rounded corners)
• Shadow X/Y/Blur/Spread: Custom shadow control

Typography:

• Title: Font size (16-56px), weight, transform, spacing
• Content: Font size (12-32px), style, alignment, line height

Mobile Optimization:

• Padding Scale: 0.5-1.5x (default: 0.8x for mobile)
• Title Scale: 0.6-1.2x (default: 0.8x)
• Content Scale: 0.6-1.2x (default: 0.9x)

✅ Step 5: Test & Publish

1. Click "Preview" to see changes in real-time
2. Test on mobile using theme editor's mobile preview
3. When satisfied, click "Save"
4. Your changes are live immediately!

💡 Pro Tips

• Use H2 headings consistently across products for tabs/accordion
• Keep tab names short (10-20 characters) for better mobile display
• Test with your longest product description to ensure proper scaling
• Use Container Width: Full Width for edge-to-edge modern look
• Enable "Open First" in accordion mode to show key info immediately

📞 Need Help?

Email: fh.dennis.wittmann@gmail.com
WhatsApp: +49 174 6871694 (Monday-Friday, 9-18 CET)
We respond within 24 hours!