Getting Started with Vision
Vision is a versatile, modern Shopify theme built for fashion, lifestyle, and multi-category stores. It stands out with a dual-menu header, Product Compare, and a rich set of interactive sections — giving stores a premium, editorial feel with broad customisation options.
Step 1 — Choose your preset
Vision ships with five style presets. Pick one before you start customising — switching presets later will reset your colour and font choices.
To choose a preset, go to Online Store → Themes → Customize, then open the Theme settings panel and select Presets at the top.
| Preset | Best for |
|---|---|
| Vision | Minimal with clean sans-serif typography and dark footer — modern, versatile brands |
| Onyx | Cream background with forest green and tan accents — luxury, traditional, warm brands |
| Poochy | White background with purple and orange accents — playful, colourful, youthful brands |
| Velocite | Dark mode with purple accents and light text — tech-forward and sleek brands |
| Solstice | White background with navy and red — professional, clean, and balanced brands |
Step 2 — Install and publish
- From your Shopify admin, go to Online Store → Themes.
- Find Vision in your theme library and click Customize to preview it, or click Actions → Publish to make it your live theme.
- If you’re switching from another theme, Shopify will ask you to confirm — your products, collections, and pages are not affected.
Step 3 — First-time setup checklist
Work through these settings before building out your pages. They apply globally across your entire store.
Go to Online Store → Themes → Customize → Theme settings (bottom-left panel) to find each one.
- Favicon — Upload your brand icon (recommended size: 32 × 32 px). This appears in browser tabs.
- Typography — Choose your heading and body fonts.
- Colors — Set your primary, secondary, and background colours. These feed into buttons, links, and section backgrounds throughout the theme.
- Design — Control global spacing, border radius, and layout density.
- Animations — Vision includes scroll-triggered animations. You can adjust or disable them here if you prefer a static layout.
- Product compare — Enable or disable the Product Compare feature and configure how the compare drawer behaves.
- Currency format — Choose how prices display (e.g. with or without decimals).
- Social media — Add your social profile URLs. These appear in the footer and share buttons.
Getting help
If something isn’t working as expected, open a support ticket at fuelthemes.net/contact. For refund and licensing information, see Refunds.