Atlantic: Features

• Four handcrafted presets: Minimal, Modern, Chic, and Organic
• Fully responsive layout ensuring that your store looks great on desktops, tablets, and mobile devices.
• Complete control over colours and text with access to five handpicked fonts from Google Web Fonts.
• Quick shop: Add products to the cart without ever leaving the page.
• Mini-cart: Review the contents of your cart from anywhere in the store.
• A robust full-width slideshow allowing for thoughtful coordination between images and text.
• Support for multi-level navigation and highly organizable mega-navigation.
• Integrated social media sharing options: Facebook, Twitter, Pinterest, Google+, and Fancy.
• Modular and highly flexible storefront.
• Quick and easy integration of your {Mailchimp} mailing lists plus a built-in customer contact form.
• Custom fullscreen image viewer to showcase high-resolution product images.
• Easy-to-use tab system to organize your product descriptions, custom pages, and blog posts.
• Easily translate your store with built-in custom labels.
• Gravatar support for your blog.
• Over 30 more tweaks and customizable details both under the hood and on screen, making Atlantic the most polished and robust Shopify theme to date.

Atlantic: Documentation

Setup: Multi-level drop-down menus

Let's say you want create a main-menu drop-down called "Vendors". First, head over to the "navigation" section of your store's admin area and add a new link to "main-menu" called "Vendors".

Now, create a brand new link-list and give it the same name as the link you just created (in this case, "Vendors"). Any link that you add to this newly connected link-list will now appear in a "Vendors" drop-down.

Pro tip: You can repeat the process of matching a link label with a link-list label to get a second level of hierarchy in your drop-down menus.

Setup: Mega-navigation

Atlantic is also equipped with a highly organizable mega-navigation for stores with lots of links / collections / products.

The mega-navigation is controlled via the theme settings under the "General" category. You can select up to three link-lists which will populate the three main columns.

By default links appear in couples (two per row). If you find that your links are a bit squished you can have them appear in single file by selecting "one column" from the "Top level columns layout" option.

How do I change the "Catalog" label?

Simple! We've provided a theme option, "Override "Catalog" label", that lets you rename "Catalog" to anything you like.

I have a lot of links in my link-list but they're not all showing. What gives?

The mega-navigation in Atlantic helps manage really long lists by limiting how many links are displayed upon opening. Clicking the "More…" link will isolate that list and display all links to the customer. You can control this limit in the theme settings.

Can I use the link / link-list naming trick to create a second level of organization in the mega-naviation?

Yes!

Setup: Slideshow

Atlantic comes equipped with a sophisticated responsive slideshow that can hold up to five slides. Each slide allows for an image, a title, a tagline, and a call-to-action link.

Unlike other slideshows Atlantic allows you choose the placement of your text content (top left, top right, bottom left, bottom right, top centre, bottom centre) on a slide per slide basis. The content of each slide can complement the composition of any image you choose.

By default the "next / previous" buttons are translucent white. If this doesn't work well with one of your images simply select the "Invert next/prev colour?" option. This will provide translucent black buttons for that particular slide.

What are the ideal dimensions for slideshow images?

Atlantic doesn't require a specific slide image size. Instead, we simply recommend that your images are consistent in width and height, ideally all the same size.

What is the Quick-shop?

If you enable the quick-shop feature (enabled by default) product list items on the home page, collection page, product page, and 404 page will let users add items to the cart dynamically.

How is this different? Adding products to the cart dynamically means that users aren't sent to the "cart" page after adding an item to the cart. They're free to continue shopping without interruption.

Will they have to go to the cart to see what items they have already added?

They can, but they don't have to. In Atlantic we've developed a Mini-cart which sits in the header of every page. Users can immediately see the numbers of items they have added to the cart and then click on the cart icon to reveal a specific list of what's in the cart.

The customer can navigate to the cart screen if they want to remove an item or adjust quantities, or they can simply jump straight to checkout making purchases faster and easier.

Setup: Tabs

You can add tabs to any RTE (rich text editor) area in the theme:

• Product description
• Collection description
• 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 second set of elements are the content that corresponds to each tab.

<ul class="tabs">
  <li><a href="#">Label 1</a></li>
  <li><a href="#">Label 2</a></li>
  <li><a href="#">Label 3</a></li>
</ul>

<ul class="tabs-content">
  <li>Content for label 1</li>
  <li>Content for label 2</li>
  <li>Content for label 3</li>
</ul>

Typography, colours, and logos

We've marshalled our experience in design and development to put together four unique presets with curated fonts and colours.

That said we've made sure to included all the options you'll need to bring Atlantic inline with your existing branding. In addition to a palette of web-standard fonts to choose from we've bundled this theme with a selection of Google Web Fonts:

• PT Serif
• Open Sans
• Raleway
• Arvo
• Source Sans Pro

As always you have the option to replace the text based store title with a custom logo image. The maximum recommended size for logo images is 580px wide.

The "logo height" option in the theme settings is exclusively for spacing the logo on the checkout screen.

Setup: Mailchimp newsletter

All you need to connect this up is a "form action URL" for your desired Mailchimp list. To find the "form action URL" simply…

1. Sign into your Mailchimp account and select "Lists" from the top menu.
2. Choose or create a list and select "View -> Stats Overview".
3. From the list menu select "For your website -> Sign up form embed code".
4. Once you have found the "form action URL" simply paste it into the "Mailchimp action URL" theme setting.

Setup: Contact page

Atlantic comes with a built-in customer contact form that is available for use on any page. Once you've create a new page, edit that page and change it's template from "page" to "page.contact".

The contact form will appear in your newly created and edited page's sidebar.

How do I remove the Pixel Union and Shopify branding?

Pixel Union and Shopify branding can be easily removed in the footer.liquid file, found in your Snippets folder. Removing line 48 will remove the attribution.

Suggestions from the team:

• You can toggle on/off the borders on product images via the "Display image borders" option. This can be aesthetically pleasing if both your store and product images have white backgrounds.

• Play around with the option to enable/disable the home page section headers (found in the "Home page" theme settings). Disabling these headers can be aesthetically pleasing and can allow for a less fragmented storefront.

• Add an image as the first item in your blog excerpts. They'll look particularly nice on the home page "From the blog" section, especially if you maintain consistent heights and widths from post to post.

• For artistic flair you can enable the "Use small caps" option. This trendy typographic choice will change the style of "main titles" and is great for fashion and apparel stores.

• For the collection screen you have the choice of displaying products either 2 per row, 3 per row, or (by default) 4 per row.