Setting up your homepage with Atlantic

Fixed homepage sections

Dynamic homepage sections


Customize

When you first install Atlantic, you'll notice that several default homepage sections are already visible, namely the  Header and Footer, as well as some optional pre-loaded sections. Notice how each of these sections associates to "empty state" placeholder content in the preview. These 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. 

Sections in theme editor sidebar

Fixed homepage sections

Fixed sections are components fixed to the top and bottom of your site and cannot be moved. In Atlantic, there are three fixed homepage sections: the  Announcement Bar, Header and the Footer

Announcement bar

Announcement bar with example sale

The Announcement bar is a great place fill your customers in on new promotions, offers, and changes to your store. This bar will appear above the Header section making in the first thing customers will see at the top of the page when they visit your store.

Settings

The  Announcement bar settings control whether the Announcement bar is enabled or disabled through the Show announcement setting. You can also limit the bar to only display on your homepage by turning on the Show on homepage only setting. 

Content

Notice that the  Announcement bar has two text fields. The first is a standard Text field that you use the input the text content you'd like to appear in your Announcement bar. The second field, called the Text (mobile), is an optional alternate copy that will only appear to customers visiting your store on mobile devices. We recommend using this field to craft shorter copy that is suited to the smaller screens of mobile devices. 

Lastly, you can add a  Link and customize both the Background and Text colors of the Announcement bar to either stand out from or match the branding of your store. 

Atlantic header with navigation menu and logo

The header is the rectangular area that runs across the top of your store containing your logo, navigation, and more. 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.

Logo settings in theme editor sidebar

By default, Atlantic will display your store name as your logo. To replace it, click the Select image button and select the file you'd like to use. We recommend a 400px by 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 can 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 selector in theme editor

Atlantic comes with three header layouts:  Normal, Expanded, and Minimal. The Expanded layout 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 icon selector in theme editor

When it comes to your store's cart, there are two icon display options:  Cart or Bag. You can toggle between the two to preview before saving.

In another tab or window, return to the your Shopify Dashboard, then 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 on the titles to edit them, or create additional menus by clicking the indigo Add menu button.

Below is an example of how the main menu is set up in our  Atlantic-Chic demo:

Example menu in navigation settings

Return to the theme editor, Customize > Header > Navigation, connect your menu to your header. By default, it will display the Main menu, but you can connect any menu you create from the Main menu dropdown. If you want to edit the links that appear in your chosen menu, use the Edit menu shortcut.

Navigation settings in Atlantic theme editor

If you want to add dropdowns to your top-level navigation, check out our instructions  here. If you're looking to add a mega-navigation menu (also known as a multi-column menu, mega-menu, etc.) Atlantic will automatically convert dropdown menus to mega-navs if each 2nd tier item has at least one 3rd tier item. 

Mega-navigation menu in Atlantic chic demo

For more information about navigation setup in general, as well as mega-nav menus in particular, check out this article:  What nested navigation means for your store

You can also choose whether you want the links to display in one column or two using the Sub-columns layout dropdown.

Atlantic Chic demo's footer with social links and menu

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, or privacy policies.

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 form. All email addresses collected by this form will be added to your customer list (just click Customers in the Shopify admin). 

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) within the footer blocks with footer menu outside, whereas the alternate layout places your footer menu inside 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.

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? Feel free to delete it by clicking on it, then selecting  Delete section at the bottom. 

Want to include another section that isn't already there? Click  Add section and find it on the list.

Slideshow

Slideshow with text and CTA button

Often referred to as above-the-fold content, 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 (CTA) button.

SETTINGS

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

If you want your slides to auto-rotate (instead of requiring users to click through them) you can check Auto-rotate slides. You can set the Rotation interval using the ranger picker below.

CONTENT

Here you can 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.

The Invert color controls determine the color of the next (>) and previous (<) arrows. By default the buttons are translucent white. If this doesn’t work well with one of your images, simply check Invert color controls, and this will provide translucent black buttons for that particular slide.

Next, you’ll upload an image. We recommend using images with a width between 2000px and 4000px in order to maintain quality across all window and device sizes. While these dimensions do sound substantial, the responsive images update implemented in current releases will ensure that image quality and page speed are both optimized for the customer.

In the boxes below, you can input and format the slide’s  HeadingCaption, Button text, and Link URL (look at the live preview to see the formatting for each). 

Atlantic provides custom placement control for 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 up to five slides at a time.

Featured product with ATC and product info

The  Featured product section is designed to draw attention to a single product on your homepage.

CONTENT

To configure this section, click   Select product and choose the product you'd like to feature. The product images, options, and an Add-to-cart button are automatically pulled in, allowing customers to view and purchase the product right from the homepage. A View product page link will also display, directing customers to the product page with full description. 

SETTINGS

Next, Atlantic has a bunch of settings that let you customize your Featured product section: General and Images settings

GENERAL

  • Show variant SKU
  • Show breadcrumbs
  • Show quantity selector
  • Show email link
  • Show dynamic checkout button
  • Enable cart redirection
  • Show social sharing buttons

IMAGES

  • Enable image zoom 
  • Enable image lightbox link
  • Product thumbnail position
    Product thumbnail position selector in theme editor

Using the Fitting guide settings, you can add a link to any static page. Just click Select page and choose from your pages. Then use the options under the Fitting guide icon dropdown to provide the link with an icon. 

Newsletter

Newsletter home page section

To help you build your mailing list, Atlantic comes with a dynamic Newsletter section. 

SETTINGS

You can give the section an optional  Heading and Subheading. This text content can provide more context for what your Newsletter–exclusive deals, events, you name it. 

If you have a privacy policy in place as a static page, you can direct subscribers from these text settings. To do so, select the chain-link icon beside the bold and italic formatting controls. 

Don't have a privacy policy in place?  Use this generator to make one for your store.

Upload an Image and use the  Desktop image alignment (left/right) and Mobile image alignment (top/bottom) settings to customize it's position in relation to the signup field.

Collection list

Collection list home page section

The Collection list section is 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, or if left blank, it will display the section's title.

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 collections you want to display by clicking a Collection block and selecting the one you want from the Collection dropdown. You can create and edit collections in the Products > Collections > 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 homepage section

The Featured collection section is designed to draw attention to products from a specific collection on your homepage. With this section you can display up to four products from one collection.

SETTINGS

Start by assigning a heading to your section the  Heading field. By default, or if left blank, it populates as the section's title.

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

Select the Rows quantity and Number of products per row using their respective sliders.

Blog posts

4 most recent blog posts in homepage section

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 ( Online store > Blog posts > Blog post > Add excerpt).

SETTINGS

Start by assigning a heading to your section in the  Heading field

This section can display an optional border above your featured blog posts. This can be enabled by checking  Show border.

Last, but certainly not least, assign the blog you want to feature through Select blog. While many stores maintain only one blog (probably called "News") some create multiple to better categorize information–including customer stories, tips, tutorials, and more. 

Logo list

A great way to build social proof is by displaying the logos of trusted sources who have promoted about your products. If you’ve been featured in a notable newspaper or magazine, for instance, or if you’ve worked with well-known bloggers. 

SETTINGS

Start by assigning a heading to your section the  Heading field. 

You can also use this section to display other sorts of recognizable logos–security badges, logos of suppliers, payment providers, etc.

If you would like to show a border above your Logo list by checking Show border.

You can select how many logos you display using the Logos per row range picker.

CONTENT

To add a logo, click  Add logo. Select the Image you want to use (we recommend a 480px by 480px JPG image fie) and add the Link.

You can display up to 12 logos in this section.

Image with text

Image with text homepage section

The  Image with text section is versatile, as it highlights content of all sorts. 

CONTENT

Click the  Image with text content 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 720px by 500px JPG image.

Rich text

Rich text homepage section

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.

Use the Show border and Show border between features to customize the look of your section, then add the content using the Heading and Caption fields below.

Note that you can either add content manually or import it from a page by selecting Page after Add content.

Featured video homepage section

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 link and paste it into the theme editor. Then you can upload an optional  Video screenshot to display when the video is not playing. You can also configure this section to Show border.

Instagram feed

Instagram feed showing 6 most recent posts

Use the Instagram feed section to feature your Instagram posts on your home page. 

First, 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.

Twitter feed

Twitter feed showing latest tweet

The  Twitter feed 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.

Map

Map with company location pin

SETTINGS

Start by setting the Section height. Then add a Heading.

We've also included  Text alignment, as well as Desktop and Mobile layout settings to get the display of your map's text information just right.  

The  Map address will be the point Google uses to drop its pin. It's the red marker in the image above. 

To pull a map into your homepage, you'll need to generate  Google maps API key and paste it into the Google Maps API key field . If you need help, just follow this  link to open Shopify's step by step instructions for getting your key setup.  

You can also customize the display colors of the map using the Map foreground color and Map background color pickers.

Next, you can upload an  Image that will be used in case the map cannot be loaded. This can be a screenshot of a map, or anything else you want to display if you map isn't working for some reason. Use the Image position settings to adjust the focal point for the image.

Last, if used any of the Overlay options for the Desktop layout setting, you can use the overlay Color picker to add a colored overlay on the map and use the Opacity slider to adjust it's opacity (note: set opacity slider to 0% to disable overlay).


Back to top ↑

Next article:

Atlantic's products and collections