Setting up your homepage with Atlantic
When you first install Atlantic, you'll notice that several default homepage sections are already visible: the Header and Footer as well as Slideshow, Collections list, Featured collection, Blog posts, Image 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.
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:
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.
Your store's logo provides branding for your site and a clickable link to return to the homepage.
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 ana 400 x 200px .jpgimage 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.
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.
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.
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:
Back in the theme editor, under Header>Navigation, you'll select which menus display, and how you want to display them.
By 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!
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:
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!
Atlantic has an optional mega-navigation setting, which you can switch on by checking Enable mega nav in the Header section settings of 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 1, 2, and 3 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.
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:
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.
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 form. All 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.
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:
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.
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.
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.
This is where you’ll upload the images you want to use and customize the text overlays. Begin by clicking on one of the Slideblocks 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 Heading, Caption, Button 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 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.
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.
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).
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.
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.
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.
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 postsdropdown. 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!
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.
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.
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
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!
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.
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.
You 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).
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.
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.