Follow these steps after you add Barrette to your store (Online Store > Themes > Add theme).
1. Create the pages
In Shopify admin go to Online Store > Pages and create four pages. Set each page's theme template:
| Page title | Theme template |
|---|---|
| About | page.about |
| Services | page.services |
| Gift Cards | page.gift-cards |
| Contact | page.contact |
The theme also includes a book-online template: a service menu, appointment request form and FAQ. See Booking links.
2. Add the gift card product
- Go to Products > Add product, then set the product type to gift card, or edit the Gift Card product that Shopify created.
- Add the amounts you want to sell (for example $50, $100, $150, $200) as denominations.
- Use the handle
gift-card, or choose the product in the Gift cards page: Customize > Gift Cards page > Gift card form > Gift card product.
The gift card page shows Shopify's official "Add to Apple Wallet" badge when a gift card has a wallet pass. Nothing to set up.
3. Set up menus
Go to Content > Menus.
- Main menu: Home, Services, Shop, About, Contact. Add child items under a link to create drop-down menus (up to three levels).
- Footer menu: the same links work well.
4. Write your store policies
Go to Settings > Policies. Privacy, Terms, Shipping and Return policies show as links in the footer once they have content. Review and edit any template text for your business. Shopify's templates are not legal advice.
5. Customize the theme
Open Online Store > Themes > Customize.
Header and footer
- Header: logo, tagline, menu, booking button. Shopify's account component shows when customer accounts are enabled (Settings > Customer accounts).
- Footer: social links (add one Social link block per network, choose the network and paste your profile URL), email signup heading and text (clear either to hide it), country and language selectors, payment icons, Follow on Shop (shown by Shopify only for eligible stores).
- Footer colours and artwork: Background, Text and Accent colours. "Show botanical corner decoration" switches the branch artwork on or off. "Botanical artwork" accepts your own transparent PNG (upright or slightly diagonal branch, about 600 px wide or more); leave it empty to use the included branch. "Artwork opacity" runs from 5% to 100%.
Theme settings
- Colors, fonts, phone number, booking link.
- Favicon and sharing: choose a favicon (at least 32 by 32 px) and a social sharing image (1200 by 628 px recommended). The theme includes image metadata for social sharing.
- Social media: add your own profile URLs. Also check the Footer section's Social link blocks. Empty links hide their icons.
- Layout: Maximum page width (1000 to 1920, default 1440). Side gutters scale automatically between 32 and 80 px.
- Blog: "Show author on blog posts" adds the author next to the date on blog posts. It is off by default, so posts show only the date. The blog index never shows an author.
- Decorative pattern: turn it on or off, pick a style (Leafy branch, Fern, Eucalyptus sprig, your own image or SVG, none), and set the colour and opacity (default 8%). The Hero and Service menu sections each have a "Show pattern" checkbox. It is decorative only and hidden from screen readers.
Home page sections
- Hero: the photo fills the full height on desktop and fades into the text panel on the left. Change the photo, headline and feature row in the Hero section.
- Services: each category (Hair, Beauty, Wellness) is a pill tab. Every service is a card with a thumbnail, name, "price | duration" and an arrow button. Edit categories, services, prices and durations in the Service menu section. Each service has a Thumbnail picker. Packages and FAQ are separate sections.
- Before and after: a comparison slider. Drag the handle, or focus it and use the arrow keys. On phones and tablets only the round handle drags, so the rest of the card still scrolls the page.
- Meet the team: tick "Enable team member popup" to open a profile when a card is clicked or Enter is pressed (a modal on desktop, a bottom sheet on mobile; swipe down on the handle, press the X, or press Esc to close). In each Team member block set the photo, bio, specialty tags (comma-separated), years of experience, Instagram / TikTok / Pinterest links, and the booking link for the "Book with [Name]" button. Empty fields are hidden. Untick the setting and cards behave as plain cards. The "Mobile layout" setting offers Vertical list (default), Swipe sideways, or Compact grid.
- Featured product: select one product, reorder its title, price, description and buy blocks, add app blocks or Custom Liquid. Images, video and 3D media are supported.
- Featured collection: pick the collection to show.
- Reviews, stats and call-to-action banner are edited in their own sections.
"View all services" and "View our services" buttons go to your Services page (Theme settings > Booking > Services page link). Leave it empty to use the page with the handle services. On the Services and Book Online pages the button expands every category in place.
6. Contact form
Visit us phone: in Customize > Contact page > Contact and enquiry, set Phone label and Visit us phone number. The number appears beside the address and opening hours as a call link. Leave the number empty to hide the row. This is separate from the customer Phone field block in the enquiry form and the global phone setting.
The Contact page form sends enquiries to your store email address (Settings > Notifications > Sender email). Send yourself a test message after setup.
In the theme editor, open the Contact and enquiry section. Under "Required fields", set Required for each standard field: Name, Service, Email, Postcode, Preferred time and Message. Use Add block for Text, Email, Phone, Dropdown (one option per line), Text area or Checkbox fields. Each block has a label, placeholder and Required toggle. Drag blocks to reorder them. You can add up to 20 fields; they appear after Message and before Send. Standard fields keep their fixed order.
7. Before you launch
- Change the placeholder phone number, address, opening hours and social URLs.
- Check the site on a phone and a laptop. Test your contact form, extra field types, blog comments, cart quantity updates and booking links.
- Set your favicon and social sharing image.
- Remove the storefront password in Online Store > Preferences when you are ready.
Booking links
Barrette has no built-in booking system (that needs an app). Every Book button (header, hero, packages, services list, call-to-action banner, team popup) links to the URL you set. Add your booking app or page once in Theme settings > Booking > Booking link. You can override it per button or per team member.
The demo points every Book button at a sample Book Online page (Online Store > Pages > Book Online, template book-online). For your own store, replace the Booking link with your booking app link (for example Calendly, Fresha, Square Appointments or a Shopify booking app), or keep the page and embed your booking widget in it with an Apps section.
Product features
- Swatches: colour swatches show on product pages and collection cards when the product's category has the standard Color attribute and the product has a Color option.
- Recommendations: product pages include related and complementary sections. Set complementary products with Shopify Search & Discovery. Empty recommendations stay hidden.
- Unit prices: set unit price measurements on products where Shopify supports them. They appear on product pages, cards, search and cart lines.
- Subscriptions: selling plans need a subscription app. The cart shows the selected plan. Test a real plan and variant before launch.
- Gallery: products support images, video and 3D media.
Pickup in store
Add your real business location in Settings > Locations, then enable Pickup in store under Shipping and delivery. The product page shows pickup availability for the selected variant. Replace all demo addresses and phone numbers. The contact form uses US formats (date MM/DD/YYYY, 12-hour time, ZIP code) and the map and Visit us show the demo address 350 5th Ave, New York, NY 10018; type your real address in the Contact and enquiry section. The Contact page map is a separate section setting: update that too.
Blog comments
Go to Content > Blog posts > Manage blogs, choose your blog and set Comments to Disabled, Allowed pending moderation or Allowed. Article pages show comments and the comment form when comments are enabled. Test a comment submission and, if you choose moderation, check the approval process before launch.
Frequently asked questions
Does Barrette include a booking system?
No. Barrette has no built-in booking system. Every Book button opens the Booking link you set in Theme settings > Booking, or a booking app block you add to the Book Online page. See Booking links.
Which booking apps can I use?
Any booking service that gives you a link or a page, or that installs as a Shopify app block. The documentation names Calendly, Fresha, Square Appointments and Acuity as examples. Barrette is not tied to one of them.
Do I need to install any apps to use the theme?
No apps are required for the theme itself. A booking app is only needed if you want customers to book online, and a subscription app is only needed if you sell subscriptions.
Why don't colour swatches show on my products?
Swatches show when the product's category has the standard Color attribute and the product has a Color option. See Product features.
Are the demo photos mine to use?
No. Replace every demo photo with your own using the image pickers. The demo before and after photos are illustrative, not real client results.
Where do contact form messages go?
Enquiries from the Contact page form go to your store email address (Settings > Notifications > Sender email). Send yourself a test message after setup. See Contact form.
How do I show the author on blog posts?
Turn on Theme settings > Blog > "Show author on blog posts". It is off by default, and the blog index never shows an author.
How do I change the placeholder phone number, address and map?
Edit them in the Contact and enquiry section and in Theme settings. The demo address and phone number are placeholders. See Pickup in store and Before you launch.
Support
Questions, bugs or setup problems? Send a message with your store URL and theme version using the support form.
Support policy
What support covers:
- Bugs in the Barrette theme.
- Questions about setting up and using Barrette's pages, sections and theme settings, as described in this documentation.
What support does not cover:
- Custom development or changes to the theme code for your store.
- Third-party apps, including booking apps, and issues inside those apps.
- Your store content, such as products, photos, policies and pricing.
- Shopify platform, checkout, payment or account issues.
How to get help: use the support form above and include your store URL, the theme version and a description of the problem. We reply within two business days.