Getting started
Setup guide
The steps in the right order, from first opening the editor to going live.
On this page
This guide follows the order that saves the most time: global settings first, because every section depends on them, then the frame (header and footer), then the pages. Allow one to two hours for a complete first setup.
1. Prepare your content in the admin
The theme displays your Shopify data, so it's best to have it in place before you build your pages.
- Products with their photographs, variants, and descriptions. For color swatches, fill in your color options with their swatches.
- Collections, with an image for any that will appear in lists or in the mega menu.
- Menus in ContentMenus: the main menu (
main-menu), the footer menu (footer) and, if needed, a legal menu. See Menus and mega menu. - Pages (About, Contact…) in Online StorePages, and a blog if you plan to use the Journal section.
- Policies (refund, privacy, terms) in SettingsPolicies.
- Filters in the Search & Discovery app if your collections should be filterable. See Collection filters.
2. Settle your voice
Faubourg starts from its one theme style, which sets fonts, letter case, control shape, and the other axes in one go. Open the editor, then Theme settings (the gear icon), and decide now whether to keep that voice or change it: the heading font and letter case affect every page. See Theme style.
3. Adjust the theme settings
In Theme settings, in this order:
Colors
Adjust the three bundled color schemes or create more. Each section then picks a scheme. See Colors.
Typography
Heading font, body font, letter case, and reading size. See Typography.
Layout
Page width and margin, density, grid gutter. See Layout.
Buttons and fields
Control size and shape, field style, and product option style. See Buttons and fields.
Product
What every buy box offers: the tax and shipping note, the quantity selector, the dynamic checkout buttons, and the buy bar on phones. See Product.
Search and cart
Social media and favicon
Add links to your accounts and the browser tab icon. See Social media and favicon.
4. Build the header and footer
They appear on every page, so you only set them up once.
- Announcement bar: replace the sample messages, or remove the section if you don't need it.
- Header: logo, logo position, menu, sticky or transparent header.
- Footer: link columns, an about text with social links, newsletter signup, legal menu.
5. Build the home page
The home page you start from depends on how you installed the theme:
- From the Theme Store: ten sample sections, those of the demo store: hero, featured collection, image with text, collection list, a second image with text set as a campaign banner, featured product, statement, journal, services, and newsletter.
- From a .zip file: nine sample sections: hero, featured collection, featured product, statement, image with text, collection list, journal, services, and newsletter.
For each one:
- choose the resource (collection, product, blog) and add your images;
- replace the sample text;
- remove or hide the ones you don't need.
6. Set up the page templates
In the page selector at the top of the editor, open each template:
- Products: the block order and the three collapsible rows, which ship with a heading and no text: a row only shows once you write its text, and that text then appears on all your products.
- Collections: collection header, columns, filters, pagination, and product cards.
- Collections list, Search, Cart, Blog, Pages, Contact, 404, and Password.
7. Check the theme text
Some text isn't a setting but part of the theme's translations, such as the tax note under the price. See Edit the theme text.
The cart page's service promises are Service blocks in the Cart template. The theme ships with one, "Secure payment"; "Complimentary delivery", "Free exchanges and returns", and "Collect in store" are promises you can add, or choose Custom to write your own. Only add the ones you actually offer. See Cart.
Before you go live
- Your logo and favicon are in place.
- No placeholder illustrations or sample text remain on the home page.
- The collapsible rows on the product page have your text (a row without text doesn't show), or are removed.
- The cart's service promises are accurate, or removed.
- Header and footer menus link to the right pages.
- A filtered collection, a search, and an add to cart all work.
- You've checked the store on a phone.
- Important images have alt text (ContentFiles or the product page in your admin).
- Sharing on social media shows an image: Online StorePreferencesSocial sharing image.
Faubourg 1.1.0