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.
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:
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.
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.
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.
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:
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!
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.
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!
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.
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.
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.
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.
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 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.
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.
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).
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.
In 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.
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.
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.
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.
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.
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 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.
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.
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).
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.
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 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.
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).
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 sections are super versatile, allowing you to spotlight all kinds of content, be it about a product, special promotion, or something else entirely.
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!
You can feature a video on your homepage accompanied by a text overlay and call-to-action if you wish.
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.
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.
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.