Setting up your homepage with Pacific

When you first install Pacific, you’ll notice that several default homepage sections are already visible: the  Header, Footer and Promotions,as well as Slideshow, Gallery, Featured collection, Image with text, and News. 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.

pacific-placeholder-content

Clicking on any of these "section" blocks will bring up a set of unique configuration settings, 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 Pacific, there are three fixed homepage sections: the  Header, Footer, and the Promotions section. Here’s what they do and how to set them up in your store:

Header

pacific-header

The header is the rectangular area that runs across the top of your store containing your logo, navigation, search, currency converter, and cart. It appears on every page and is intended to be used to promote your company's brand and make it instantly recognizable to your visitors. This is a static section and cannot be repositioned.

LOGO

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

By default, Pacific 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 450 x 200px .png image file. Larger images will be automatically resized to fit this constraint.

You can also set a custom  Logo width in the field below the image upload. 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 600px wide, but then setting the width to 300px (for example), you’ll ensure your logo looks sharp on both retina and non-retina devices. To learn more, click here.

TOP BAR

The top bar is the contrasting bar that spans the top of your store. You can add  Promotional text to it to communicate a special offer like free shipping or a discount code.

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. For more on how to configure menus, see Shopify’s instructions. Below is an example of how the menus are set up in our Pacific-Warm demo:

pacific-demo-menu-setup

Back in the theme editor under  Header>Navigation, you'll "connect" the Main menu you want to serve as your store's primary navigation. The obvious choice is the default "Main menu," but you can dare to be different!

MEGA NAVIGATION

Pacific has an optional mega-navigation setting, which essentially extends your store's pre-existing navigation system by an additional two menu tiers and up to four columns. Using this feature can improve user experience, helping your customers find products faster.

To set up mega navigation in your store, start by adding a link to your  Main menu titled "Mega Nav." (You'll do this in the Online store>Navigation section of your Shopify admin pictured above). Then, in the theme editor, under Header>Mega navigation, you'll enter a Navigation name that you want to replace "Mega Nav." This could be something like "Collections" or "Products" or "Shop."

Next, you'll go back to the  Online store>Navigation section of your Shopify admin and create the sub-menus that you want to display here. In our example below, we've created three separate menus: Coffee gear, Subscriptions, and Beans. Each of these lists is populated with Menu items, which can be added by clicking the Edit menu link in the right corner of each menu block.

pacific-mega-nav

The final step to setting up your mega navigation is to "connect" the menus you've just created to your store. You'll do this in the  Content section at the bottom of the header settings.

Click one of the existing  Mega navigation tiers or click Add mega navigation tier to add your content. Select the Menu you want to include from the dropdown, then add an image if you would like to display one above your menu (we recommend a 900 x 900 px .jpg). You can also add an optional Link to the menu title. In our example, the "Beans" menu links to a "Fresh Roasted Beans" collection page, but you can forgo linking the menu titles if you wish.

That should do it! You've set up mega nav in your store. Way to go!

Footer

pacific-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. Pacific provides the space to display all of these and more.

PAYMENT ICONS

You can accept a variety of payment methods in your Shopify store, including credit cards, PayPal, and digital currencies. You’ll enable and manage these from your Shopify admin under  Settings>Payments. For more information on configuring your payment settings, click here.

payment-settings

Once you’ve selected the payment methods you want to accept, you can switch their icons on or off in the  Footer>Settings section of the theme editor. These will display at the very bottom of your store's footer.screen-shot-2016-12-13-at-10-12-05-am

There are a number of other items you can display in your footer if you wish. These include: menus, featured content, your Twitter feed, your Instagram feed, and your Newsletter and/or social links. You'll add these by clicking  Add content and selecting the item you want to add. You can include up to three of these optional items in your store's footer.

MENUS

Pacific allows you to display up to two menus in the footer section of your store. First, set them up under  Online store>Navigation (more information here), then use the dropdown menus for Menu 1 and Menu 2 to configure them in your theme editor.

rich text

Rich text allows you to add a customized message (heading + text) to your footer. Simply complete the  Heading and Text fields and you're good to go.

TWITTER FEED

The Twitter option displays your store's most recent tweet in your footer. Simply enter a Heading, 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.

INSTAGRAM feed

To integrate your Instagram account, you'll 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.

You can also customize the  Heading and for your feed, and set the Number of images that you want to display (3 or 6).

NEWSLETTER/SOCIAL LINKS

To help you build your mailing list, Pacific comes with a newsletter subscription field that (if enabled) appears in the footer of your store. Check  Enable newsletterto activate it. 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.

If you'd like to display your store's social links in your footer, you can also do that here. Just check  Enable social links. You'll connect your social accounts in the Social media section of the General settings.

You can also customize the heading that appears above the section. Something like "Keep in touch!" or "Connect with us" should do the trick.

Promotions

promotion-sectionIn addition to the items outlined above, Pacific also lets you set up to three promotional images in the area directly above your footer. You can use this area to highlight new products, limited-run collections, and special sales or discounts. Like the header and footer, the promotions section is fixed and cannot be repositioned.

SETTINGS

Give your promotions a  Section title by completing the first field. You can also opt to Show (a) borderabove the section by selecting that option.

CONTENT

You can add up to three promotional images to this section. Click Promotion or Add promotion, then upload your Image (1280 x 1280px .jpgs are recommended) and Link. As you cannot add text overlays to these images, you may want to consider dressing up your images in a photo editing program, or follow our lead and get creative with the images themselves!

Dynamic homepage sections

Most of Pacific’s homepage sections are dynamic, meaning you can add as many of them as you want and rearrange them in the sidebar 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.

Slideshow

pacific-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 (note that while "above-the-fold" slideshows are the norm, with Pacific, you can position your slideshow anywhere!).

To display a slideshow on your homepage, simply click the Enable checkbox under the Slideshow section. You'll be able to prepare up to five slides, each with unique messaging and images.

SETTINGS

Start by giving your slideshow an optional  Heading. If you want to Show (a) borderabove your section, check that option.

Next, you'll choose a layout for your slideshow from the  Width dropdown. Pacific offers two layout options: Content width (which is as wide as whatever content you upload)and Full-width (which spans your entire screen). You'll see the differences in your preview, in case they aren't clear.

You can also choose between having your slides Slide horizontally or Fade in and out under Slide transition, and select how long you want each to display for by selecting a time period under Auto-rotate after. If you select None, users will still be able to scroll through them manually using left and right 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  Slideto expand the settings.

Now, you'll upload an image. We recommend a 1440 x 640px .jpg file. You can cut it down to size in a photo editing program, otherwise the theme editor will automatically constrain your images.

In the boxes below, you can input and format the slide's  Text alignment, Heading, Subheading (which actually displays above the heading), Caption (which displays below the heading), Link (note the entire slide will become linked if this field is completed) and Text color. You don't need to fill every field if you don't want to—you may not want to include any text at all!

Pacific supports up to five slides at a time. If you run out, you will have to delete some before you can add more.

Collection list

pacific-collections-list

Collection list sections are designed to help you showcase new or seasonal collections on your homepage. With Pacific, you can feature up to three collections in this section.

SETTINGS

Start by assigning a heading to the section in the  Heading field. You can also choose whether or not to Show (a) borderby checking that option.

CONTENT

Here, you'll select the collection(s) you want to display by clickingAdd Collection. You can set up collections in the Products>Collection>Add collection section of your Shopify admin. For instructions on how to set up collections see our article, Getting Started: Shopify Basics.

Select the collections you want to feature from the  Collection dropdown. If you want to Show text shadow (to ensure the text displays clearly against your images) select that option. Note that this will appear only when the Text shade is set to Light (which you'll set in the dropdown below).

Featured collection

featured-collection

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 six products from the same collection in this dedicated space.

SETTINGS

Start by assigning a heading to the section in the  Heading field. You can call it "Featured collection," the name of the collection (as we've done), or anything else you want!

If you want to  Show (a) borderabove the section, make sure to check that option.

From the  Collection dropdown, select the name of the collection you want to feature. Then select the Number of products per row and Number of rows from the corresponding dropdowns, and you're done!

Gallery

image-gallery

Gallery sections are great for building your brand. Use them to show off editorial photography, give your customers a glimpse into your production process, or introduce a new product. Pacific lets you add up to three images to this section.

SETTINGS

Start by giving your slideshow an optional  Heading. If you want to Show (a) borderabove your section, check that option. You can also select Show text shadow if you want to make your text "pop" away from your images. Note that this will only appear when the Text shade is set to Light (you'll find this setting in the Content blocks below).

CONTENT

Start by uploading the first image you want to feature. We recommend a 1440 x 640px .jpg, but you can use whatever you think looks best!

In the boxes below, you can input and format the image's Heading, Subheading (which actually displays above the heading), Caption (which displays below the heading), and Link (note the entire image will become linked if this field is completed). This is also where you'll set the Text shade and Text alignment. Remember, you don't need to fill every field if you don't want to—you may not want to include any text at all!

Image with text

image-with-text

Image with text sections are super versatile, allowing you to spotlight all kinds of content, be it about a product, special promotion, or something else entirely.

SETTINGS

Begin by assigning a  Heading to your image gallery section. If you'd like to Show (a) borderabove your section, make sure that option is checked.

You'll add the  Heading and Description first. Then, add your Image (we recommend a 1280 x 640px .jpg file) and choose the Image alignment. That's it!

Featured video

featured-video

You can feature a video on your homepage accompanied by a text overlay and call-to-action if you wish.

SETTINGS

To add a video, start by giving your section an optional  Heading at the top.

Next, copy the  Video URL from YouTube or Vimeo and paste it into the theme editor. Choose a Video screenshot (1080 x 640px .jpgs are recommended!) to display when the video isn't playing, then specify your Text shade, Heading, Button text, and Link.

Blog posts

featured-posts

The Blog posts section allows you to display images and text from your two 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 giving your section a  Heading(like "Blog posts" or "Latest news"). If you want to Show (a) borderabove your blog posts, check that option.

Next, 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. Pacific will pull the three most recent posts to this section.