Wren Theme

Documentation

Wren Theme

Everything you need to set up, customize, and launch your store with the Wren Shopify theme.

Version 1.0.0

Getting Started

Wren is a premium Shopify theme designed for fashion and lifestyle brands. Follow these steps to get your store up and running.

Installation

  1. In your Shopify admin, go to Online Store > Themes.
  2. Click Add theme, then select Upload zip file.
  3. Upload the wren-theme.zip file you downloaded.
  4. Once uploaded, click Customize to open the theme editor.
  5. The theme loads with the default Wren preset — ready to customize with your content.
Tip Preview your theme before publishing by clicking the Preview button. This lets you see how everything looks without affecting your live store.

Store Setup

After installing Wren, follow this checklist to configure your store:

1. Navigation menus

Go to Online Store > Navigation and set up your menus:

  • Main menu — appears in the header. Include links to your collections, about page, and contact page.
  • Footer menu — appears in the footer. Add links to policies, FAQ, shipping info, etc.

2. Products & collections

Add your products under Products in the admin. Organize them into collections for the homepage sections to display.

3. Pages

Create these recommended pages under Online Store > Pages:

  • About — tell your brand story
  • Contact — use the page.contact template for the built-in contact form
  • FAQ — answer common customer questions
Contact page When creating your contact page, select page.contact from the template dropdown. This activates the styled contact form with name, email, subject, and message fields.

4. Blog

Wren includes a blog section on the homepage. Create a blog under Online Store > Blog posts and add at least 3 articles for the best visual result.

5. Policies

Go to Settings > Policies and fill in your shipping, return, and privacy policies. These automatically appear in the footer.

Theme Preset

Wren comes with one carefully designed preset that configures colors, fonts, and layout out of the box.

Preset Font Background Best for
Wren Work Sans + Playfair Display #FDFCFA (warm white) Fashion, lifestyle, and boutique brands

To apply the preset: open the theme editor, click the theme name at the top, then select Change preset.

Note Applying a preset resets your global theme settings (colors, fonts, layout). Your section content and images are not affected.

Sections Overview

Wren includes 35 fully styled sections. Add, remove, and reorder them from the theme editor.

Homepage sections

Slideshow

Full-width hero slider with video support, overlay controls, and auto-play.

Marquee

Scrolling text banner for announcements, USPs, or promotions.

Collections Grid

Showcase collection cards with emoji icons and colored backgrounds.

Featured Products

Display trending or hand-picked products with quick-add buttons.

Image with Text

Split layout with image on one side, text and CTA on the other.

Multicolumn

2-4 column layout with icons, perfect for USPs and features.

Rich Text

Full-width centered text block for brand statements.

Video

YouTube, Vimeo, or self-hosted video with poster image.

Testimonials

Customer review cards with star ratings and author info.

Logo List

"As seen in" press logos and partner brands.

Blog Posts

Recent articles from your blog with images and excerpts.

Newsletter

Email signup with background image and success states.

Countdown Timer

Sale urgency timer with customizable end date and messaging.

Before / After Slider

Draggable comparison slider for transformation showcases.

Trust Badges

Guarantee and trust icons with customizable text.

Header

Sticky header with mega menu, logo, account and cart icons.

Announcement Bar

Dismissible top bar for promotions and announcements.

Cart Drawer

Slide-out cart with upsell, quantity controls, and free shipping bar.

Footer

Multi-column footer with menus, newsletter, social icons, and payment badges.

Product & Collection

Product Page

Gallery, variant picker, quantity, add-to-cart, trust badges, and tabs.

Product Recommendations

Algorithmic cross-sell products below the main product.

Collection Page

Product grid with filters, sorting, grid selector, and quick-add.

Collections List

Grid of all collection cards for the /collections page.

Theme Settings

Access all theme settings from the theme editor sidebar under Theme settings (gear icon).

Colors & Fonts

Setting Description Default
Primary font Used for all body text and buttons Work Sans
Heading font Used for section headings and titles Playfair Display
Background color Global page background #FDFCFA
Foreground color Global text color #2C2C2C
Page width Maximum content width 90rem
Page margin Minimum side padding 20px
Input corner radius Border radius on form inputs (0-10px) 6px

Section-level settings

Each section has its own settings accessible when you click on it in the theme editor. Common options include:

  • Background color — override the section background
  • Eyebrow text — small label above the section title
  • Title — supports <em> tags for italic emphasis
  • Button label & URL — configurable CTAs
Italic emphasis To add italic styling to a word in section titles, wrap it in <em> tags. For example: Find their <em>perfect</em> look renders as "Find their perfect look".

Slideshow settings

The slideshow section supports up to 5 slides. Each slide can have:

  • Background image or video (mp4 URL)
  • Overlay darkness (0-80%)
  • Eyebrow label, heading, and subheading
  • Primary and secondary CTA buttons
  • Auto-rotate with configurable speed (3-10 seconds)

Cart drawer settings

  • Free shipping threshold — set the dollar amount for the progress bar (0 to disable)
  • Upsell product — pick a product to suggest inside the cart

Translations

Wren supports Shopify's built-in translation system. All customer-facing text can be translated from the admin.

How to translate

  1. Go to Online Store > Themes.
  2. Click the ... menu on your theme, then select Edit default theme content.
  3. Use the search bar to find specific text strings.
  4. Edit the text and click Save.

Adding a new language

To add a new language, go to Settings > Languages in your Shopify admin. Shopify will use the translation keys defined in the theme to map text to the new language.

Translation categories

Category Examples
General Skip to content, Continue shopping, Next, Previous
Product Add to cart, Sold out, Quantity
Cart Your cart, Checkout, Subtotal, Order summary
Collection Collection, Browse all products
Search Search, No results found
Contact Name, Email, Message, Send message

Frequently Asked Questions

How do I add a logo?

Open the theme editor, click on the Header section, and upload your logo image. For best results, use a transparent PNG at 2x resolution (e.g., 400x100px for a 200x50px display).

How do I change the homepage layout?

In the theme editor, click Add section to add new sections, drag to reorder, or click the eye icon to hide sections without deleting them.

Can I use Wren for any type of store?

Absolutely. Wren was designed with fashion and lifestyle brands in mind, but the sections and styling work for any product type. Simply update the content, images, and colors to match your brand.

How do I set up the contact form?

Create a new page, set the template to page.contact from the dropdown, and add it to your navigation. The form includes name, email, phone, subject dropdown, and message fields.

Why is a section showing as empty?

Some sections require content to display. For example, the Blog Posts section needs at least one published blog article. The Video section needs a video URL. Check the section settings in the theme editor.

How do I add social media links?

Social links are configured in the Footer section settings. Add your Instagram, Facebook, TikTok, Pinterest, X/Twitter, and YouTube URLs there.

Can I use a custom font?

Yes. Go to Theme settings > Typography and use Shopify's font picker to choose from 1,000+ fonts. You can also upload custom fonts as assets and reference them in your CSS.

Troubleshooting

Slideshow images look stretched

The slideshow uses object-fit: cover to fill the viewport. For best results, use landscape images at least 1800x900px. The image will be cropped to fit — keep important content centered.

Cart drawer doesn't open

Make sure the Cart Drawer section is added to the Header group in the theme editor. Go to the header section group and verify "Cart Drawer" is listed.

Products not showing on homepage

The Featured Products section needs products in your store. If you've just installed the theme, add products under Products in the admin, or enable Demo mode in the section settings to show placeholder cards.

Blog section is empty

Create a blog and add at least one published article under Online Store > Blog posts. The section will automatically display your most recent posts.

Theme is slow

Check these common causes:

  • Large unoptimized images — use Shopify's image editor to compress
  • Too many sections on one page — consider removing unused sections
  • Third-party apps injecting scripts — audit your installed apps

Contact Support

Need help with something not covered in this documentation?

  • Email: support@lumina-theme.co
  • Response time: Within 24-48 business hours
  • Support includes: Bug fixes, setup help, and theme-related questions
  • Not included: Custom development, third-party app conflicts, or design modifications
Before contacting support Please include your store URL, a description of the issue, and any screenshots. This helps us resolve your issue faster.