Atelier Theme Manual

See Atelier’s Release Notes

Table of Contents

Basic theme setup

This section covers some essentials to get your theme up and running.
Customization settings can be found in the sections below.

Select a theme variation

Atelier comes packaged with four theme variations that curate the fonts, colors, and general style of your store. Check out our store demos to see the Minimal, Bright, Classic, and Modern variations in action.

To select your desired variation, go the Variations section of your theme editor. Click on one of the four theme variations. Then click Save Changes. Please note that switching to a new variation will overwrite your previous style settings.

To return the variation to its default state, you can click Reset Theme Variant at the bottom of your theme editor, which will revert any customizations you’ve made on a theme variant.

Add your first product

To add a product to your store, navigate to Products > Add from your dashboard.

At minimum, you’ll want to add a product Name, Price, and Category, and then upload a product Image.

See BigCommerce’s support article on Adding a Product for a full overview of product settings, including brands, product options, and tips on how to take better product photos.

Upload a store logo

Your store’s logo provides branding for your site and a clickable link to return to the homepage. The logo will appear in the header and footer of your site.

If you want to replace your store title with a logo image, go to Storefront Design > Design Options and then click the Logo tab.

Select the option to upload an image from your computer. Then choose the image file you want to upload under the Logo Upload section.

The logo dimensions are directly correlated to the ‘Header Size’ setting in the theme editor, and are based off height (any width is allowed).

  • Small: minimum 50px tall
  • Medium: minimum 70px tall
  • Large: minimum 100px tall
  • Extra Large: minimum 140px tall

To support retina screens (which display a higher pixel density), we recommend uploading a logo image at twice the height of the suggested size above. The theme will resize it accordingly. Don’t check off the “automatically resize” checkbox.

Once your image is selected, click Upload Logo Image.

If you are unsure whether your image is the right size, enable the Resize Logo option, which will resize your logo automatically, if required.

Set up a Hero Area

The hero area has two layouts: Layout A displays the background image at full width and overlays the collections menu overtop on the right-hand side; Layout B splits the hero area with the image on the right and the collections menu on the left with a solid color background. Both the text and background color are customizable by clicking on the square color swatches or by entering in a specific hex code.

The hero images are pulled from your featured collection images. To upload an image go to Products > Product Categories, then click on a collection. Under Category details, you’ll find an option to upload a feature image.

Hero image attachment

Fixed will scale the image to fit the whole browser window, and ignore scrolling. Note: Recommended mainly for layout A.

Scroll scales the image to fit the hero container and will scroll the image when the page scrolls, like a normal image does.

Hero Fade Timing

This feature controls the length of the fade between images as a user hovers over category/blog links in the hero area.

Add a contact page

Our themes have a built-in Contact Page that provides customers an easy way to send a message or question to store merchants without leaving the storefront.

From your sidebar control panel, go to Content > Web Pages and then click Create a Web Page at the top of your Pages list.

Under Web Site Link, enable the Allow people to send questions/comments via a contact form option. Then, under Web Page Details, enter a name for the Contact page. The Page URL will auto-fill based on the page name.

You can also insert content (such as text and images) in the Page Content area that will appear above the Contact Form.

Set up a navigation menu

Your navigation menu will be automatically generated from your create pages, categories, or brands. This menu will appear both in your header and footer.

NOTE: Keep any navigation titles (Categories, Pages) short and concise, ideally one word long, to avoid overlap in your nav menu.

To control which pages are displayed in your menu, go to Content > Web pages. Here, you can deselect the check mark under Visible to hide any pages. Click Save and Exit.

You can hide or show categories by going to Products > Product Categories. Under the Visible in menu? column, select or deselect your categories by clicking on the check marks or ‘x’ marks.

Product management

This section covers how to manage and customize your products, categories, and brands.

Product page

In your theme editor, if you’re using Layout A, you can set the product page background image to the product image set as “Use as thumbnail”  or the product’s first image.

You can set the Related Products section to have up to three rows or you can disable the section.  The Customers also viewed section can be enable and also can have up to three rows.

Product images and layout

Your product images  can be any size but try to keep all products in your shop the same size, or at least the same aspect ratio. This will make for a more attractive product grid.

Show product details & description in overlay

This option will move a product’s description and extended details (weight, height, etc) to a popup overlay instead of in the main product column

Disable extended product details

Select this option if you don’t want to display extended product details, this includes product dimensions, condition, SKU, and custom fields.

Categories, Brands, and Home page

Featured image

For your category featured image, we recommend using an image both wide and short. The minimum recommended size is 960 by 960px.

Product Listings

Collection pages have two layouts for the Product grid ratioFluid, which works well with product images of varying sizesand Square for a uniform grid.

Product grid hovering

You can also enable a hover interaction that displays a color overlay on product images. Set the hover background color and the hover background opacity.

Show a category’s subcategories on category pages

Display a list of links under the category title and description.

Show filters

Toggle a filter dropdown that contains product sorting and shop-by-price features. If you choose to display filters, we recommend using the Square product grid ratio.

Customize your store

This section covers how set up theme features and customize the styles and layout of your store.

Typography and colors

In your theme editor, you can customize the fonts and colors of your store front. Under the Typography section, use the drop downs for BodyHeading, Meta, and Button  fonts and weights.

Under the Colors section, you’ll find color options for virtually every element of your store. You can see the changes in real-time within your theme editor’s preview.

Favicon

A favicon is the small graphic that appears to the left of the page title at the top of your browser window.

To upload a custom favicon for your store, first create an image 16 x 16px or 32 x 32px in dimension. The image must be saved in ICO, JPG, GIF, or PNG format.

Go to Store Design > Design Options, then click More > Favicon. Click Choose File to select the favicon from your computer. Click Upload Favicon.

Header

In the theme editor, you can control the header’s size, color, and opacity.

Use the Header Size dropdown to set the header to small, medium, large, or extra large.

You can set the Text Color and Background color by clicking on the square color swatches or entering in a specific hex code. Further, you can set the Background opacity to ensure the optimal visibility of your header elements.

Note: We recommend setting the header background to ‘Opaque’ when using hero layout B.

Banners

Banners allow you to add promotional links and images throughout your store to advertise special deals and discounts to your shoppers.

Go to Marketing > Banners to begin. Banners can be added to the Homepage, a specific category or brand, and the results page. Use the rich text editor to add text and links. You can enable your banner or choose to display it between specific dates.

Featured and New Products

Atelier displays two separate sections for your featured and new products. Under the Homepage section of the theme editor, you can set how many products you would like to show at one time (from 2 to 12). You can also disable each section by setting the dropdown to None.

Pages Menu

Atelier generates a pages menu at the bottom of your homepage. You can disable the menu under the Homepage section of the theme editor.

Newsletter

The Newsletter will appear in different places depending on your theme, but its functionality will be the same. To set this up, go to your Marketing > Settings > Email Marketing.

Under General Settings, find the Email Integration Settings, and enable the email campaign monitor that you want to use for your Newsletter. Big Commerce supports Constant Contact, iContact, Interspire Email Marketer, and MailChimp. You can still enable Newsletter Subscriptions if your chosen Integration Provider is not on this list.

To do this, click the Export Only tab at the top, enter in the number of emails you’d like to export in the Subscriber Count field, and click the Download to CSV file link. This will export all of the subscribers’ emails to a CSV file, which you can then upload to your chosen email campaign platform.

You can also click the Delete all subscribers to remove everyone on your newsletter subscription list to start fresh.

Make sure that the Allow Newsletter Subscriptions? box is enabled, and click Save.

Built-in Blog

Post updates on products, upcoming events, and other news in your shop’s built-in blog. Navigate to the Blog settings by clicking on Content > Blog.

Set up a blog

To name your blog, click on the gear icon under the Published tab. Name your blog in the Blog Title field, and set the URL in the Blog URL field. You can also enable or disable Disqus Comments on this page. Click Save Settings to save the Blog name and URL.

Create a blog post

To add a post, navigate back to the main Blog Settings page by going to Content > Blog and click the + icon under the Published tab. Give your post a title in the Title field, write the content and add images in the Body Text Editor, and enter the Author of the blog in the Author field. You can also add tags for each post in the Tags section. To add a tag, type a tag in the Tags field, and hit Enter on the keyboard to separate the tags.

To upload an image that will appear as the post’s Thumbnail,  choose a file and clicking Upload in the Summary thumbnail image section.

You can also customize each post’s URL in the Post URL field, and add a Meta Description to help improve your blog’s SEO. Click Save Draft to save the post without publishing to work on it later, or click Publish to publish the post immediately. Make sure your Blog Visibility is set to On.

For your blog featured image, we recommend using an image both wide and short. The minimum width is 1020px and is ideally within the 1020 x 420px range

Thumbnail images

We recommend that all blog posts have thumbnail images with the minimum size of 960 x 960px.

Posts per page

Use the dropdown provided to set how many posts you would like to appear per page on your blog index.

Blog Expert

Set your blog posts’ excerpt length from 50, 100, or 200 words. You may also choose No Excerpt.

Social media links

Link your social media profiles to icons on your homepage so customers can keep up to date with your other social platforms.

Go to Store Design > Design Options and click the Carousel & Social Media tab. Scroll down to the Social Media section, and input the your social media profile links to the corresponding icon beside Available Networks. Make sure you include http:// before the link.

You can also re-order your social media links to display in a particular order by clicking on the dotted grid to the left of the icon and dragging it to rearrange the order. Click Save.

Pages

RSS

The RSS (Really Simple Syndication) page allows your visitor to subscribe to any new content, including new products and blog posts.

Site Map

The site map page is pre-published and provides a list of all pages of your store.

Shipping and returns

Keep your customers up to date with your Shipping and Returns policy by including a Page dedicated to this information. Big Commerce automatically populates this page with a Shipping and Returns policy.

To change it, head to your Content > Web Pages tab, and click on the Shipping and Returns page in the Pages list.

Edit the policy already written, or start new by deleting everything in the Page Content area and write your own. You can rename your Page, create a new URL, add or remove it from your Menu by toggling the Navigation Menu on or off, and optimize your Shipping and Returns SEO under the Advanced Options. Click Save.

World-class customer support

Our support staff is committed to helping you solve any problems you encounter along the way. Exceptional, human support matters to us a great deal. Contact us or check our help centre if you need any help at all.