Contact me
Contact me

Scandi-shopify

README

By Tapio Kauranen Sep 11, 2025

Scandi v.1 – Shopify Theme Documentation

Table of Contents

Installation

Prerequisites

  • A Shopify store (Online Store 2.0 compatible)
  • Admin access to your Shopify store
  • Basic knowledge of HTML/CSS (for advanced customization)

Step 1: Upload the Theme

  1. Log in to your Shopify admin dashboard
  2. Navigate to Online Store > Themes
  3. Click Add theme > Upload zip file
  4. Select the scandi-v1.zip file from this theme package
  5. Click Upload

Step 2: Activate the Theme

  1. Once uploaded, locate “Scandi v.1” in your themes list
  2. Click Actions > Publish to make it your live theme
  3. Or click Customize to preview and configure before publishing

Step 3: Initial Setup

  1. Go to Online Store > Themes > Customize
  2. Configure your store settings in the theme customizer
  3. Set up your navigation menus
  4. Configure your color scheme and typography

Theme Features

Core Features

  • Responsive Design: Mobile-first approach with desktop optimization
  • Modern UI: Clean, minimalist design with Scandinavian aesthetics
  • Product Gallery: Advanced image gallery with Fancybox lightbox
  • Page Templates: Multiple page layouts including sidebar options
  • Custom Sections: Flexible content blocks for easy customization
  • SEO Optimized: Built-in SEO features and structured data
  • Performance: Optimized for speed and Core Web Vitals

Page Templates

  • Default Page: Standard page layout
  • Left Sidebar: Page with left sidebar for additional content
  • Contact Page: Dedicated contact page template
  • Demo Page: Showcase template for demonstrations

Product Features

  • Image Zoom: Hover or lightbox zoom options
  • Product Variants: Color, size, and other variant support
  • Add to Cart: Quick add functionality
  • Product Recommendations: Related products display
  • Product Reviews: Built-in review system support

Customization Guide

Theme Settings

Access theme settings via Online Store > Themes > Customize > Theme settings

Color Scheme

  • Primary colors
  • Secondary colors
  • Background colors
  • Text colors
  • Button colors

Typography

  • Font families
  • Font sizes
  • Line heights
  • Font weights

Layout

  • Container widths
  • Spacing settings
  • Grid configurations

Custom CSS

For advanced styling, add custom CSS in: Online Store > Themes > Customize > Theme settings > Custom CSS

Custom JavaScript

Add custom JavaScript in the theme files or use Shopify’s script tag feature.

Page Templates

Default Page Template

  • Full-width content area
  • Standard typography
  • Image support
  • RTE (Rich Text Editor) content
  • Main content area with left sidebar
  • Sidebar blocks: headings, text, images, links, menus
  • Responsive design
  • Sticky sidebar on desktop

Contact Page Template

  • Contact form integration
  • Map support
  • Business information display

Sections

Available Sections

  • Header: Navigation and branding
  • Footer: Links and company information
  • Hero Sections: Image banners and text overlays
  • Product Sections: Featured products, product grids
  • Content Sections: Text, images, videos
  • Collection Sections: Collection listings and filters
  • Blog Sections: Blog posts and articles
  • Newsletter: Email signup forms

Section Settings

Each section includes customizable settings:

  • Layout options
  • Content settings
  • Styling options
  • Responsive settings

Styling

CSS Architecture

The theme uses a modular CSS approach:

  • base.css: Global styles and resets
  • component-*.css: Individual component styles
  • section-*.css: Section-specific styles
  • template-*.css: Template-specific styles

Customization Best Practices

  1. Use CSS variables for consistent theming
  2. Override specific selectors rather than global styles
  3. Test on multiple devices after making changes
  4. Use browser developer tools for debugging
  5. Backup your theme before major changes

Color Variables

Troubleshooting

Common Issues

Theme Not Loading

  • Check file upload integrity
  • Verify Shopify store compatibility
  • Clear browser cache

Styling Issues

  • Check for CSS conflicts
  • Verify custom CSS syntax
  • Test in different browsers

Performance Issues

  • Optimize images
  • Minimize custom CSS/JS
  • Check for conflicting apps

Mobile Issues

  • Test responsive breakpoints
  • Check viewport settings
  • Verify touch interactions

Debug Mode

Enable debug mode in theme settings to see detailed error messages.

Support

Documentation Resources

Getting Help

  1. Check this documentation first
  2. Review Shopify’s official documentation
  3. Contact theme developer for custom modifications
  4. Use Shopify’s community forums

Version History

  • v1.0: Initial release with core features
  • v1.1: Added left sidebar template
  • v1.2: Enhanced product gallery with Fancybox
  • v1.3: Improved responsive design and performance

Note: This theme is designed for Shopify Online Store 2.0 and may not be compatible with older Shopify versions. Always test changes in a development environment before applying to your live store.

Tapio Kauranen
Sep 11, 2025
WordPress & Google specialist - Partner at Kansleri.fi

More Articles