Atlantic Theme Manual

Our documentation is for the latest version of the theme. If you need help with an older version of the theme, please send us a support request (found to the right). Below, you’ll find instructions for all theme settings and features, roughly in the same order as the sections in your theme editor panel.

atlantic-chic-homepage

Table of Contents

Getting started

New to Shopify?

If you’re setting up a Shopify store for the first time, we recommend taking a gander at the Shopify help center for a full overview of the platform.

In our article Getting Started: Shopify Basics, we cover the essentials for getting your store up and running, including adding products, setting up collections, and creating a blog. Once you’ve got these things set up, you’ll be in a good position to start customizing your theme.

Upload your new theme

If you purchased the theme directly from Shopify, your theme will be automatically installed when you log into your Shopify admin.

If you purchased your theme from pixelunion.net, you’ll receive your theme as a .zip file named something like atlantic.v10.0.0.zip.

Once you’ve downloaded the theme file, go to your Shopify admin dashboard and navigate to Online Store > Themes. Then click Upload theme in the top-right corner. Select your theme file from your computer and click Upload.

theme-upload-screen

Your new theme will show up below your current theme. At this point, it is installed, but not published. When you’re ready to unveil your new look to the world, click Publish theme.

The theme editor

Once you’ve uploaded your theme, it’s time to make it your own. While all of your products, collections, pages, and navigation will be configured in the Shopify admin, any changes you make to the look and feel of your store will happen in the theme editor. You’ll access it by navigating to Online Store>Themes and then clicking the blue Customize theme button in the top right of your screen.

theme-upload-screen

You’ll see that the theme editor is divided into two tabs: Sections and General settings. We’ll cover each in detail below, but here’s the Coles Notes to help you get your bearings.

Sections tab

The Sections tab contains all of the sections that are available to you in Atlantic. Essentially, sections are the building blocks of your store, allowing you to assemble pages from customizable, re-orderable components. You can add, remove, and reorder sections, as well as access the customization features for each from the Sections tab.

General settings tab

The General settings tab lets you make global changes to the look of your store, including typography, text and background color, as well as links to your social media accounts.

a

Pro tips

Most of the time you spend in the theme editor will be on either the Sections or General settings pages. There are, however, a few lesser-known areas and shortcuts that can be super helpful as you’re building your store. Here’s what you need to know:

theme-dropdown

The dropdown menu attached to your theme name contains a bunch of handy links. First up, Documentation. That’s what you’re looking at now, and it’s only ever a click away if you need a little bit of guidance setting up your menus or slideshow.

Next, Support. If you can’t find a fix in the documentation, you can always email our world-class support team. They’ll get back to you by the next business day.

If you’re fluent in Liquid (Shopify’s templating language) you can kick your customizations up a notch by digging into the theme’s code under Edit code. If not, our support team will be more than happy to put you in touch with someone who is.

Finally, Edit languages lets you both change the language of your theme and checkout as well as customize the wording that is used throughout your store.

At the opposite end of the theme editor, you’ll find a little button with a screen and an arrow on it. It lets you toggle between previewing what your site will look like on desktop (Fit to screen) and on mobile (Small screen). It looks like this:

desktop-mobile-icon

Finally, if you want to collapse the theme editor controls and preview your store in full-screen, all you need to do is click the tiny left-pointing arrow in the middle of the panel. Easy!

Theme styles

Atlantic comes packaged with four different theme styles that curate your store’s colors, fonts, and styles for you. Check out our store demos to see the Light, Modern, Organic, and Chic styles in action.

To select the theme style you would like to use in your store, click  over to the General settings tab, then scroll all the way to the bottom to the Change theme style button. Here, you can preview the theme styles and select the one that’s right for your store.

atlantic-theme-styles

Note that applying and saving a new theme style will overwrite your current style settings, however you will not lose any content from your store. It’s always a good idea to make a backup copy of your theme before you start making customizations. Use the duplicate copy as your working version until you’re ready to publish it.

Sections, explained

Sections is a Shopify feature that effectively allows merchants to assemble pages from customizable components (or sections!). This means tons of flexibility, especially on the homepage, where you can add, remove and reorder sections with just a few clicks. Examples of sections include featured products, slideshows, collection listings, or videos. You’ll access the customization options for all of them from the Sections tab in the theme editor.

The content on your homepage is made up of dynamic sections, meaning you can add and arrange as many as you want. Two notable exceptions in Atlantic are the Header and Footer, which are fixed to the top and bottom of your site and cannot be repositioned—these are called fixed sections. (You can, however, still customize their content.)

Some other page types also make use of fixed sections. To see if the page you’re building has sections, open the theme editor and then navigate to the page you’re working on within it. (For example, if you click through to your product catalog in the theme editor, you’ll see that a section pops up for Collection pages, giving you access to settings specific to that section.)

Setting up your homepage

When you first install Atlantic, you’ll notice that several default homepage sections are already visible: the Header and Footer as well as SlideshowCollections listFeatured collectionBlog postsImage with text, and Instagram feed. Notice how each of these sections associates to “empty state” placeholder content in the preview. This will give you an idea of the formatting of each section.

Clicking on any of these three boxes will bring up a set of unique configuration settings for that section, or you can click Add section, which will reveal an array of other optional sections that you can add to your homepage. We’ll cover each of them in detail—more or less in the order they appear—below.

atlantic-sections

Fixed homepage sections

Fixed sections are exactly what you’d guess they are—components that are fixed to the top and bottom of your site and cannot be moved. In Atlantic, there are two fixed homepage sections: the Header and the Footer. Here’s what they do and how to set them up in your store:

Header

atlantic-header

The header is the rectangular area that runs across the top of your store containing your logo, navigation, and more (depending which header style you choose). It appears on every page and is intended to promote your brand and root your customers, no matter where they are in your store. The header is a static section that cannot be repositioned.

LOGO

Your store’s logo provides branding for your site and a clickable link to return to the homepage.

logo-uploader

By default, Atlantic will display your store name as your logo. To replace it, click the Upload image button and select the file you’d like to use. We recommend an a 400 x 200px .jpg image file. Larger images will be automatically resized to fit this constraint.

If you would like to set a custom Logo width, you can do so in the corresponding field. You may want to do this to accommodate retina screens (which have a pixel density double that of non-retina screens). By uploading a logo that is 400px wide, but then setting the width to 200px (for example), you’ll ensure your logo looks sharp on both retina and non-retina devices. To learn more, click here.

To center your logo or site title, check the Center logo (or site title) option.

LAYOUT

header-layout

Atlantic comes with three header formats: Normal, Expanded, and Minimal. The Expanded format displays your social media icons at the top of the header, while the Minimal format displays a condensed navigation below. The Minimal header is also sticky, meaning it will remain visible as visitors scroll down the page. Use the Header Format dropdown to select the option you’d like to use.

CART PREVIEW

cart-preview

When it comes to your store’s cart, there are two display options: Cart or Bag. You can toggle between the two to preview the icons for each.

NAVIGATION

To add links to your menus, you must leave the theme editor by clicking the back button, and then the Back to Shopify link in the top left corner. Go to Online store > Navigation. Here, you’ll find two pre-populated menus: Main menu and Footer menu. You can edit the links in these menus by clicking Edit menu or create additional menus by clicking Add menu. Below is an example of how the menus are set up in our Atlantic-Chic demo:

navigation-page

Back in the theme editor, under Header>Navigation, you’ll select which menus display, and how you want to display them.

atlantic-navigationBy default, your products will appear beneath the Catalog label in your navigation. You can change this label by inputting another word in the Override “catalog” label field. Some common alternatives include “Shop” or “Collections,” but it’s completely up to you!

BASIC NAVIGATION

To set up a basic dropdown menu for your store, you’ll navigate to Online store>Navigation in the Shopify admin and create a Catalog menu item under Main menu (if you’ve decided to override the “catalog” label in the theme editor, use whatever label you have used there). Link this menu item to the homepage, like so:

menu-links

Next, you’ll navigate back to the main Navigation page in the Shopify admin and click Add menu. Name this menu Catalog (or whatever the menu item in the main menu is labelled). This tells Shopify that the two menus are correlated, and effectively makes the new menu a sub-menu of the main one. This is exactly what you’re going for!

You can add as many menu items to this new menu as you’d like. Many stores use this catalog dropdown to organize their collections, which can be set up as separate menus comprised of products (created exactly the same way you just created this sub menu, linked by common labels).

In your store, you’ll see a dropdown menu that looks something like this. Nice!

basic-nav

MEGA NAVIGATION

Atlantic has an optional mega-navigation setting, which you can switch on by checking Enable mega nav in the theme editor. Mega navigation essentially extends your pre-existing navigation system by an additional two menu tiers and up to three columns. Using this feature can improve user experience, helping your customers find products faster.

As with basic navigation, your menu will stem from the Catalog item in your main menu. Unlike basic navigation, however, this menu item must be titled Catalog on the Online store>Navigation page of your Shopify admin, and not whatever label you may have used to override it in the theme editor (the label in the back end does not have to match the label in the front end).

Again, you will add menu items to this new Catalog menu by clicking Edit menu. These items can each connect to separate menus linked by common labels (e.g. if you wanted to include your cookware, tableware, and linens collections as top-tier items on your mega nav, you would create separate menus for each, linked to the corresponding collections).

In the theme editor, you will “connect” each of these second-tier menus using the Column 12, and dropdowns. You can also opt to Truncate list after a certain number of items, which you can set in the corresponding dropdown.

Here’s a look at how a store with three columns of mega nav would look, truncated at four items.

mega-nav-menus

The image above is an example of a one-column layout, but there is also an option to have two. You can change it by using the Sub-columns layout dropdown and selecting Two columns. Here’s the difference:

two-column layout

Footer

atlantic-footer

Like a footer on a document or report, a website footer contains information listed at the bottom of a page. Typically, the footer is the area that visitors expect to find the “fine print”—legal information such as terms and conditions and privacy policies, but also FAQs, size guides, and contact information. Atlantic provides the space to display all of these and more.

GENERAL

To add an optional message to the footer of your site, simply complete the Footer message field. It will display on the left side of the footer.

If you want to show a newsletter sign-up form in your footer, check Show newsletter formAll email addresses collected by this form will be added to your customer list (just click Customers in the Shopify admin). If you want to filter this list (purchasers versus newsletter opt-ins, for example) you can sort them by tag under the Custom search tab. Newsletter opt-ins will be findable with the “newsletter” tag.

To show payment icons, check Show payment icons. You’ll set and manage these from your Shopify admin under Settings>Payments. You can find more information about that here.

ALTERNATE FOOTER

Atlantic comes with an alternate footer layout that you can enable if you wish by checking Use alternate footer layout. The default footer layout places your social icons and footer message (if provided) “inside” the footer blocks with footer menu “outside,” whereas the alternate layout places your footer menu “in” and the social icons “out.”

Atlantic also gives you the option of displaying a Secondary footer menu (the primary one can be edited in Online store>Navigation). Simply select the menu you want to use from the dropdown menu. Note that the secondary menu will only display if you have enabled the Alternate footer layout.

Here’s what the alternate footer looks like with a secondary footer menu:

alternate-footer-secondary-menu

Dynamic homepage sections

Most of Atlantic’s homepage sections are dynamic, meaning you can add as many of them as you want and rearrange them to create a completely unique layout.

Out of the box, your theme has several dynamic sections enabled already. These are merely suggestions for how you might structure your homepage. Don’t want to include a section? Delete it! (By clicking on it and clicking Delete section at the bottom.) Want to include something that isn’t already there? Click Add section and find it on the list.

We’ll walk you through the settings for each section type below, beginning with one of the most popular sections: the Slideshow.

Slideshow

atlantic-slideshow

The top section of your home page is your store’s most valuable real estate. To make the most of it, merchants often use a slideshow to showcase their most recent deals and top-selling products. Atlantic comes with a sophisticated responsive slideshow that can hold up to five slides. Each slide allows for a unique image, title, tagline, and call-to-action link.

SETTINGS

Atlantic’s slideshow comes with two display widths: full and constrained. Checking Full width will make your slides full-bleed (i.e. they will extend right to the edges of your screen). Leaving it unchecked will pad your slideshow with whitespace on all sides.

You can set how long you want each slide to display for by selecting a time period under Auto-rotation speed. If you select “None,” users will still be able to scroll through them manually using the arrows at the edge of the slideshow.

CONTENT

This is where you’ll upload the images you want to use and customize the text overlays. Begin by clicking on one of the Slide blocks to expand the settings.

Off the top, you’ll notice an Invert color controls option. By default the “next/previous” buttons are translucent white. If this doesn’t work well with one of your images, simply check Invert color controls, which will provide translucent black buttons for that particular slide.

Next, you’ll upload an image. We recommend a 1440 x 640px .jpg file, but the most important thing is to be consistent with the size of your images.

In the boxes below, you can input and format the slide’s HeadingCaptionButton text, and Link URL (look at the live preview to see the formatting for each). You don’t need to fill every field if you don’t want to—you may not want to include any text at all!

Atlantic allows you choose the placement of your text content (top left, top right, bottom left, bottom right, top center, bottom center) on a slide per slide basis using the Text position dropdown. This way, the content of each slide can complement the composition of each image you choose.

Atlantic supports a maximum of five slides at a time.

Collections list

atlantic-featured-collections

Collections list sections are designed to help you showcase new or seasonal collections on your homepage. With Atlantic, you can feature up to three collections at a time.

SETTINGS

Start by giving the heading you want your collection to have in the Heading field. By default, it populates as “Collections list” but you can change it to whatever you want. (We’ve called ours Featured collections in the above screenshot, pardon the confusion with the Featured collection section below!)

You can also choose whether or not to display a border above your collections list(s) by checking Show border.

CONTENT

Here, you’ll select the collection(s) you want to display by clicking Add Collection and selecting the one you want from the Collection dropdown. You can create and edit collections in the Products>Collection>Add collection section of your Shopify admin (or click the Edit collection shortcut in the theme editor). For instructions on how to set up collections see our article, Getting Started: Shopify Basics.

You can feature up to three collections at a time in this section. If you want to add more, you can always add another collections list section, or feature them another way (in a featured image with text, for example).

Featured collection

atlantic-featured-products

The featured collection section is designed to—you guessed it—draw attention to products from a specific collection on your homepage. You can display up to four products, from the same collection, in this dedicated space.

SETTINGS

Start by assigning a heading to your section the Heading field. By default, it populates as “Featured collection” but you can change it to whatever you want. (Ours is called “Featured products” because we like to keep you on your toes.)

You can also choose whether or not to display a border above your featured collection(s) by checking Show border.

Select the Number of products per row and Number of rows per section from the corresponding dropdowns.

Blog posts

atlantic-blog-posts

The Blog posts section allows you to display images and text from your four most recent posts. To specify the “preview” text that appears for each post, we suggest using Shopify’s excerpt function, which you’ll find in the post editor under Online store>Blog posts.

SETTINGS

Start by assigning a heading to your section in the Heading field. By default, it populates as “Blog posts” but you can call it whatever you want.

You can also choose whether or not to display a border above your featured blog posts by checking Show border.

Finally, you’ll select the blog you want to feature from the Blog posts dropdown. While many stores maintain only one blog (probably called “News”) some create multiple to better categorize information including customer stories, tips, tutorials, FAQs and more. Something to consider if you plan on revisiting these topics regularly!

Logo list

atlantic-featured-press

A great way of building social proof is by displaying the logos of trusted sources that have written about your products. If you’ve been lucky enough to be featured in a reputed newspaper or magazine, use that. If you’ve worked with well-known bloggers, use that. Visitors to your store will associate your brand with the others shown.

SETTINGS

Start by assigning a heading to your section the Heading field. We’ve called ours “Featured press” but you can call yours whatever you want. You could also use this section to display other recognizable logos, including security badges, or logos of suppliers and payment providers.

If you would like to show a border above your featured collection(s) by checking Show border.

You can select how many logos you display by clicking on the Logos per row dropdown and selecting 3 or 4.

CONTENT

To add a logo, click Add logo. Select the Image you want to use (we recommend a 480 x 480px .jpg) and add the Link.

You can display up to 12 logos in this section.

Image with text

atlantic-image-and-text

Image with text sections are incredibly versatile, allowing you to highlight all sorts of content, be it new products, special promotions, or something else entirely!

CONTENT

Click the Image with text box or Add image to begin.

Now, set the Image position of your image (Right or Left), and input the Heading and Content you want to accompany your image.

Finally, upload the Image you’d like to use, or select it from your image library. We recommend using a 720 x 500px .jpg image.

Rich text

atlantic-featured-text

Have something you want customers to know that doesn’t fit nicely into another section type? Use Rich text to display a heading and content (including links and text styles) on your home page.

There are actually two ways of adding content to a rich text section in Atlantic: inputting it manually in the Rich text Heading and Caption fields, or importing it from a Page. Both are so incredibly simple that we’re going to breeze past them here and move onto video. Drop us a line if you have questions.

Featured video

atlantic-videoYou can feature a video on your homepage that plays in a full-screen modal when activated. To add a video, simply copy the Video URL and paste it into the theme editor. Then upload a Video screenshot (we recommend using a 1080×600px .jpg) to display when the video is not playing (optional).

Instagram feed

atlantic-instagram

To integrate your Instagram account, you will need to locate and input your Instagram Access Token. Follow the help link (or click here) to learn how to generate a token. Copy and paste your token back into the Access token field in the theme editor.

On this page, you can also customize the Heading and toggle Show border on or off.

Twitter

atlantic-twitter

The Twitter section displays your store’s most recent tweet.

Simply enter your Username (excluding the ‘@’ symbol) in the corresponding field and check the Show retweets option if you would like to include those in your feed. You can also choose whether or not to include a border above the section by checking Show border.

Products and collections

Your product and collection pages are the lifeblood of your ecommerce store. They’re where you display your products, convey their value, and, if you’re lucky, make the sale.

You’ll upload and configure your products and collections in the Shopify admin (you can read more about how to do that here), but when it comes to customizing how they display, you’ll do that within the theme editor. Just navigate to the page in the theme editor, and you’ll see a section pop up, giving you access to settings specific to that page. We’ll give you the rundown on the settings for each page below.

Product pages

product-page

Your product pages are where you highlight the features and benefits of your individual products. At minimum, it should contain the product title, images, a description, the price, and an add-to-cart button. In Atlantic, you can customize your product pages by navigating to a product page in the theme editor and clicking on Product pages under the Sections tab.

GENERAL

Off the top, you can select whether or not to Show breadcrumbs by checking the box or not. Breadcrumbs are a secondary navigation that show the current location of a visitor on your website, and how they got there (think Hansel and Gretel). It looks something like this:

breadcrumbs

Note that there are multiple places where breadcrumbs can appear on your site, but checking this setting will only affect your product pages.

Next, you can choose whether or not to Show quantity selector (it’s that box where people can opt to buy 1 or 100 of your products).

You can also elect to Show email link. If enabled, this will display beneath your product images. It will say “Email us about this product,” by default, but you can customize the text by clicking on the dropdown menu next to your theme name and navigating to Edit languages.

 IMAGES

Atlantic allows you to customize the images on your product pages in a few ways:

First, you can Enable image zoom by checking that option. This means that when a user hovers over a product image, a magnifying glass icon will appear and they will be able to click to get an up-close look at your product. Note that enabling this feature necessitates large, hi-res photography.

Second, you can Enable image lightbox link, which is a link that lets users view a full-size version of the image in a popup modal. Like so:

full-size-image

If enabled, this link will appear beneath your product image and will say, “View fullsize image.” You can customize the language by clicking on the dropdown menu next to your theme name and navigating to Edit languages.

Third, you can select the Product thumbnail position from the dropdown menu. This option refers to the alternate views of your product that appear adjacent to the main image. You can opt to show them to the Right of main imageBelow main image, or No thumbnails, display as list.

ADVANCED

Here, you can select whether or not to Enable quick add-to-cart. Enabling it means that when users add an item to their cart, they will stay on that page, as opposed to being directed to the cart page.

RELATED PRODUCTS

Checking Enable related products will allow customers to discover other items that are similar to the one they are currently looking at. Related products are automatically pulled from the same collection as the product in view.

related-products

FITTING GUIDE

Atlantic gives you the option of displaying a customized link to a fitting guide. First you’ll have to create a page under Online store>Pages in the Shopify admin, then you’ll link to it under the Page dropdown in the Product page>Fitting guide section of the theme editor.

You can also customize the icon from the Fitting guide icon dropdown. The choices are: ShirtRuler, and Info (a stylized letter “i”). The fitting guide will display beneath your product image, along with the email and full-size image links.

fitting-guide-link

Collection pages

collections-page

A collection page displays all of the products in a given collection. You can configure your collections from within your Shopify admin (more information here). In Atlantic, you can customize your collection pages by navigating to a collection in the theme editor and clicking on Collection pages under the Sections tab.

GENERAL

Select whether or not to Show breadcrumbs by checking the box at the top. Breadcrumbs are a secondary navigation that show the current location of a visitor on your website, and how they got there (think Hansel and Gretel). It looks something like this:

breadcrumbs

Note that there are multiple places where breadcrumbs can appear on your site, but checking this setting will affect only your product pages.

PRODUCTS

Here, you’ll select the Number of products per row (2, 3, or 4), as well as the Number of rows (1 to 11).

FILTERING

Checking Enable sorting allows customers to sort products in a different order than they appear by default (e.g. Featured, Price: Low to High, Price: High to Low, A-Z, Newest to Oldest, etc.).

The Enable tag filter option allows visitors to sort products by custom tags, which can be added to product pages in your Shopify admin. You’ll find them under Organization on the right side of each product editing screen.

SIDEBAR

You can choose to show a sidebar menu on collection pages. Simply check Enable sidebar, then choose a collection menu to display from the Collection sidebar menu dropdown. It will look something like this:

collection-page-sidebar

PAGINATION

Atlantic comes with two distinct pagination styles: Standard pagination and Jump-to-page pagination. The former allows users only to click through pages in sequence (displaying as “Page 1 of 5” with “Previous” and “Next” links), while the latter allows users to jump to the page they want (displaying links to all the pages in a collection). Note that while you can set the pagination for your store in many different places, this setting applies only to the pagination of your collection pages.

Collection listings page

collections-list-page

 

The collection listing page displays an index of your store’s collections. To access the settings for this page, navigate to your catalog or collections page in the theme editor and then click Collection listings under the Sections tab.

GENERAL

Select whether or not to Show breadcrumbs by checking the box at the top. Breadcrumbs are a secondary navigation that show the current location of a visitor on your website, and how they got there (think Hansel and Gretel). It looks something like this:

breadcrumbs

Note that there are multiple places where breadcrumbs can appear on your site, but checking this setting will affect only your collection listings page.

Blogs

Your Shopify store comes with a built-in blogging engine. Blogs are great for content that you’ll be updating regularly. While many stores maintain only one blog (probably called “News” or “Journal”) some create multiple to better categorize information including customer stories, tips, tutorials, FAQs and more.

You’ll do all your blogging in the Shopify admin (to get your Shopify blog up and running, see their instructions), but when it comes to customizing how your blog(s) display, you’ll do that within the theme editor. Just navigate to the blog or articles page in the theme editor, and you’ll see a section pop up, giving you access to settings specific to that page.

Blog pages

Your blog page(s) provides users with an index of your latest blog posts. Some stores choose to rename this page “News” or “Journal”—what you call it and how you use it is up to you!

Under the Blog pages section in the theme editor, you can customize how these pages look.

GENERAL

Select whether or not to Show breadcrumbs by checking the box at the top. Breadcrumbs are a secondary navigation that show the current location of a visitor on your website, and how they got there (think Hansel and Gretel). Note that there are multiple places where breadcrumbs can appear on your site, but checking this setting will affect only your blog pages.

SIDEBAR

Atlantic gives you the option of displaying a sidebar on your blog page(s). You can opt to Show recent posts or Show tags by checking the boxes (you can also show both!). The former will display a list of links to your four most recently published posts, while the latter will show the tags you’ve used to categorize posts—plus a tally of how many posts use each tag.

PAGINATION

Atlantic comes with two distinct pagination styles: Standard pagination and Jump-to-page pagination. The former allows users only to click through pages in sequence (displaying as “Page 1 of 5” with “Previous” and “Next” links), while the latter allows users to jump to the page they want (displaying links to all the pages in a collection). Note that while you can set the pagination for your store in a few different places, this setting applies only to the pagination of your blog pages.

Article pages

Every time you publish a new article (or post) to your store’s blog, Shopify will generate a new page and URL for it. To access the settings for these pages, navigate to a post—any post—in the theme editor and then click Article pages under the Sections tab.

Here, you’ll be able to choose whether or not to Show breadcrumbs (see explanation under Blog Pages) as well as which sidebar content (if any) you wish to display. You can find an explanation for that under Blog pages too!

Static pages

Shopify stores come with a page creation tool, which you can use to generate pages containing information that rarely changes, and that customers will use often, such as an About page or a Contact page. You can add as many pages as you like to your store under Online store>Pages, and configure where they appear under Online store>Menus.

There are also a few pages that are generated and populated automatically, but which you can customize by navigating to them in the theme editor and finding their section settings. These include the Cart pageSearch page404 page, and Password page. We’ll cover the settings for each below.

Create a new page

From your Shopify admin, navigate to Online store>Pages. Click the Add page button to open a new page template.

new-page-screen

From here, you can enter the Title and Content in the space provided, as well as set the Visibility and select a Page template. You’ll notice that Atlantic comes with two templates: a general page template (which you could use to create an FAQ  or return policy page), and a contact.page template (which creates a contact form designed specifically for your Contact page).

About page

atlantic-about-page

Online shoppers these days aren’t just interested in what they’re buying—they’re also interested in who they’re buying it from. That’s exactly what your about page is for: connecting with your customers, building trust, and establishing your brand.

You can create an about page the same way you would any other page: by going into your Shopify admin, navigating to Online store>Pages and creating a new page titled “About us” or “Our story” or anything else you want!

Contact page

contact-page

Adding a contact page to your store is a quick and easy way of engaging your customers. To create a contact page you will first need to create a new page. Scroll to the bottom right of the screen and select page.contact from the Template dropdown menu. This will create a simple form on the page that will look something like this:

contact-form

You can add a Title and Content above the form in the page editor screen. If you want to add a map to your contact page (as we have) you can grab the embed code from Google maps and paste it into your page editor. Just click the “Share” option in Google Maps and copy the code below “Embed map.”

Cart page

atlantic-cart-page

The Cart page is the first page customers see when they begin the checkout process. It shows a summary of the items and quantities they have added to their cart, and a total of how much it will cost them. In Atlantic, users can also add “special instructions” for the seller and estimate their shipping fees on this page. If you’re trying to customize the Checkout process, you’ll access those settings from the General settings tab (you can also scroll down to that section of the documentation below).

GENERAL

Select whether or not to Show breadcrumbs on your cart page by checking the box at the top. Breadcrumbs are a secondary navigation that show the current location of a visitor on your website, and how they got there (think Hansel and Gretel). Note that there are multiple places where breadcrumbs can appear on your site, but checking this setting will affect only your cart page.

SHIPPING CALCULATOR

Atlantic also gives you the option to Enable shipping calculator—a tool that automatically fetches shipping rates on the cart page of your store, letting customers calculate their fees before completing checkout.

shipping-rates-calculator

Click the Enable shipping calculator box, then use the text box to set your Default country selection. If you’re unsure of spelling, you can refer to the dropdown on the first page of the Shopify checkout process. Note that if a customer has logged in and configured their shipping address their country will automatically be used.
shipping-country-dropdown

Search result page

search-results-page

The search result page gets its name from the fact that it is, in fact, where search results appear. Atlantic has a search function in its header, and any time someone initiates a search query, the results will be presented on this page. You can customize the page by searching for something—anything!— in the theme editor and then opening up the Search result page section that appears.

GENERAL

Select whether or not to Show breadcrumbs on your search result page by checking the box at the top. Breadcrumbs are a secondary navigation that show the current location of a visitor on your website, and how they got there (think Hansel and Gretel). Note that there are multiple places where breadcrumbs can appear on your site, but checking this setting will affect only your search result page page.

PAGINATION

Atlantic comes with two distinct pagination styles: Standard pagination and Jump-to-page pagination. The former allows users only to click through pages in sequence (displaying as “Page 1 of 5” with “Previous” and “Next” links), while the latter allows users to jump to the page they want (displaying links to all the pages in a collection). Note that while you can set the pagination for your store in many different places, this setting applies only to the pagination of your search result pages.

404 page

404-page

The 404 error message is intended to communicate that the requested page could not be found. If a visitor lands on a page that doesn’t exit, a 404 message will show. You can customize these pages by opening a non-existent page in the theme editor. An easy way to do this is to navigate to a collections page, and then add some extra characters to it. Hit enter and you should see the 404 pages section appear under Sections in the sidebar.

GENERAL

Select whether or not to Show breadcrumbs on your cart page by checking the box at the top. Breadcrumbs are a secondary navigation that show the current location of a visitor on your website, and how they got there (think Hansel and Gretel). Note that there are multiple places where breadcrumbs can appear on your site, but checking this setting will affect only your 404 page.

If your visitor lands on a page that doesn’t exist, Atlantic gives you the option of showing them a collection of your choice so they can continue shopping. Just choose a Collection from the dropdown, and products from that collection will display.

Password page

atlantic-password-page

If you haven’t yet launched your store, but want to let you visitors know that you’ll be opening soon, you can customize your password protected page. To do this, go to the theme editor and open any page. Then locate the  /editor#/piece of the URL and add to it: password.

Your URL should look something like this:

https://your-store-name.myshopify.com/admin/themes/143125515/editor#/password 

When it does, you should see the Password pages section appear under Sections in the sidebar.

GENERAL

In the settings, you can upload a Background image and choose to Show social icons on your password page by checking the box.

General settings

The General settings tab (located to the right of the Sections tab) lets you make global changes to the look and feel of your store, including typography, text and background color, as well as links to your social media accounts. Here’s the nitty-gritty on everything you’ll find there.

Colors

Virtually every color in Atlantic is customizable, with clear self-explanatory names and descriptions in the theme settings. The colors are organized into three categories: GeneralHeader, and Navigation.

Click on the swatch to edit the colors. A popup with a color selector will appear, which allows you to adjust and experiment with custom colors.

shopify-color-picker

The box on the right displays the current color, the one in the middle the color you’re changing it to, and the checkered one on the right is transparent. You can also enter a specific color hex code in the bottom right corner if you wish.

Typography

Atlantic comes with dozens of hand-picked fonts for your store. Fonts can be set for your store’s Body fontHeading font (primary and secondary) and Accent text using the corresponding dropdown menu.

To add emphasis to the heading font, you can Capitalize it by checking the box.

Favicon

A favicon (also known as a  website icon, tab icon, or bookmark icon) is a small icon that represents your website and provides a shortcut to it wherever the icon appears. There are a whole bunch of sites that can help you generate a favicon for your store, or you can create your own.

Once you have an image you want to use, upload it under the Favicon setting of the theme editor. You can also select an image from your media library. We recommend a 16 x 16px .png file.

Product grid

The product grid section allows you to make global changes to the way users can view and interact with your products. This includes the details that are included in product listings (brands, links, etc.) as well as whether users can add products to their cart without leaving the page they are currently viewing (also known as “quick shop”).

GENERAL

Under General, there are three checkboxes: one for Show brand names/links, one for Show product image borders, and one for Enable product details overlay. They’re fairly self-explanatory, but if you need more explanation, the best thing to do is navigate to a product or collection page, toggle them on and off, and see what happens.

If you want to change the brand names, links, or any other product details, you can do so under Organization>Vendor on the product page of the Shopify admin.

QUICKSHOP

atlantic-quick-shop

By enabling quick shop on your theme (it’s actually enabled by default) you’ll allow customers to view and select products without leaving the page they’re browsing, creating a fast and seamless shopping experience.

Start by checking Enable quick shop if it isn’t already checked. Then select the Product thumbnail position you want to use from the dropdown menu. This option refers to the alternate views of your product that appear adjacent to the main image. You can opt to show them to the Right of main imageBelow main image, or No thumbnails, display as list.

Below that, there are four checkboxes that let you customize the information that displays in your quickshop popups. Choose whether or not to Show quantity selectorShow email link, and Enable quick-add to cart (meaning that when a user adds an item to their cart, they will stay on that page, as opposed to being directed to the cart page).

Social media

Atlantic supports social icons for Twitter, Facebook, Google+, Pinterest, Instagram, Tumblr, YouTube and Vimeo. Simply enter in your account URL in the relevant field and the social icons will automatically appear in your footer.

atlantic-social-icons

Currency

Shopify works in virtually every country and every currency. With Atlantic, you can cater to international customers with a currency converter that displays as a dropdown menu in the header of your store. This allows customers to dynamically update their prices throughout your shop.

atlantic-currency converter

After enabling the converter by checking Enable currency conversion, you can choose which currencies are supported and how they’re displayed.

Under Format, you can choose whether or not to display the currency acronym on product and collection pages (e.g. $10.00 CAD vs. $10.00).

Under Supported currencies, you can select which currencies you want to allow users to display when browsing your store. Be sure to use the country’s ISO currency code, and separate each with a space. Note that exchange rates used by Shopify are refreshed twice a day based on rates at XE.com.

You’ll also set the Default currency on this page. This is the currency that will display when a user first lands on your site, i.e. before they have had a chance to use the currency customizer. This is different from your store’s Operating currency, which is the currency you use to process orders. You can set your operating currency in the Shopify admin under Settings>General>Standards and formats.

Checkout

Under the Checkout section of the theme editor, you can add custom banner images, logos, and backgrounds, as well as customize the fonts and colors used throughout the checkout process.

BANNER

The banner is the top section of the checkout screen where your store name appears. By default, it is transparent (or whatever color your store’s background is) however you can customize it by uploading a Background image in the Banner section. We recommend uploading an 1000 x 400px image.

LOGO

If you want to add your store’s logo to the checkout page, simply upload an image to the Custom image box. You can use your standard storefront logo or you use a different one instead. You can also define the Position (left, center, right) and Size (small, medium, large) of your logo by making a selection from the bottom two menus.

MAIN CONTENT AREA

The main content area is the left side of the checkout screen where a user inputs their email and shipping address. If you’d like to use a custom background here, either upload a Background image or use the color picker to select a Background color. You also have two options for the color of the Form fields—white or transparent.

ORDER SUMMARY

The order summary is the right side of the checkout screen where customers can review the details of their order. Upload a Background image or or use the color picker to select a Background color.

TYPOGRAPHY

You can customize both the Headings and Body fonts used on the checkout screen by selecting fonts from the corresponding dropdown menu.

COLORS

You can customize the colors that appear on the checkout page under Colors. You can see which areas correspond to each section (AccentsButtons, and Errors) by watching how changes are processed in the preview screen.

You can customize more of the checkout settings from the Shopify admin.

Tabs

You can add tabs to any RTE (rich text editor) area in Grid. This includes:

  • Product descriptions
  • Collection descriptions
  • Custom pages
  • Blog posts

Find an RTE field in the admin area and press the “Show HTML” button. Paste in the following example and replace the text content (“Label X” and “Content for Label X”) with your own. The top set of elements are the tabs themselves, and the second set of elements are the content that corresponds to each tab.

Code Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<ul class="tabs-content">
<li class="active">
<p>Tab 1 content goes here.</p>
</li>
<li">
<p>Tab 2 content goes here.</p>
<li>
<p>Tab 3 content goes here.</p>
</li>
</li>
</ul>

World-class customer support

We’ve covered a lot of ground in these docs, but there will no doubt be questions they don’t answer. If you’ve got a burning question—or if you’re just stuck—don’t hesitate to get in touch with us. Our friendly and knowledgable support team will dig into the issue and get you back on track ASAP.