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 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 four fixed sections: the Announcement Bar, Header, Footer, and the Promotions section. Here’s what they do and how to set them up in your store:
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.
First up, you easily turn the Announcement bar off and on, using 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.
You'll notice that the Announcement bar has two text fields. The first is a standard Text field that you'll use to input the copy for your Announcement bar. The second field, called the Text (mobile), is optional and allows you to enter alternate copy that will only appear to customers visiting your store on mobile devices. We recommend using this field to craft shorter copy, more suitable to the smaller screens of mobile devices.
Lastly, you can add a Link and customize both the Background and Text color of the Announcement bar to standout or match the branding of 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 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 in the top left hand corner (you actually need to click twice — once out of the Header settings and again on the Themes link to get back to the admin). 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 purple Add menu button. Below is an example of how the menus are set up in our Pacific-Warm demo:
For more on how to configure menus (including dropdown menus), check out our instructions here.
Back in the theme editor, under Header>Navigation, you'll "connect" your menu to your header. By default, it will display the Main menu, but you can connect any menu you create from the Menu dropdown.
If you want to convert a dropdown menu to a mega menu (again, here's the instructions for creating dropdown menus in the Shopify admin) you can do that under Content. Each block allows you to convert a Menu to a mega menu. Simply select one, add the name of the menu, and check the Mega menu images checkbox if you'd like to show those.
Here's what it looks like when you've got it all tricked out:
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 newsletter to 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.
The Featured product is designed to - you guessed it - draw attention to a single product on your homepage!
Super duper easy - just click Select product and choose which 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 link will also display, linking customers to the product page.
You've also got a few other settings to play with to customize the display of the Featured product on your homepage:
- Show border (enables a top & bottom border around the section)
- Show description (hides/show the product's full description)
- Enable zoom (zooming on product (change the layout of your product's images - Slideshow, List or Masonry)
- Enable cart quantity box (hides/shows the product's quantity controls)
- Enable cart redirection (this automatically sends customers to the cart page after clicking the add-to-cart button)
Lastly, you can adjust the Layout to be either Single column (product info/ images will display stacked) or Double column (product's images on the left and info/description on the right).
To help you build your mailing list, Empire comes with a dynamic Newsletter section.
You can give the section an optional Heading and Subheading. Something like "Keep in touch!" and/or "Subscribe to our newsletter" should do the trick.
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.
Pacific comes with an eye-catching Map section that businesses with brick-and-mortar locations can use to display contact information and give directions to their store
Start by setting the Section height from the top dropdown. Then, add a Heading (something like "Come say hi" or "Our workshop" should work) and Hours & Location (or anything else you think is relevant).
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.
In the end, what you're looking for is this long string of characters to paste into the API field:
You can also customize the display colors of the map using the Map foreground color and Map background color pickers.
Note: that these do not control particular components of the map (streets, water, etc.) but rather the swatches are linked to, and will affect, the entire map.
Next, you can upload an Image that will be used in the event that the map can not 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.
The Rich Text section is a flexible feature to help add valuable content to your homepage. You can use up to two blocks within each Section.
You can choose between Regular, Wide and Full Width for the Section width to suit what you're looking for.
There are two types of content block in the Rich Text section: Text and Page
Choosing the Text block will allow you to enter text directly into a text editor. Then you the text formatting buttons to customize your text. You can make your text Bold, Italics or add a Link . You can also give your section a Heading and adjust it's height, as well, adjust the Text alignment of the content.
If you have more complex content to show in the Rich Text section, you can go with a Page block. The Page block allows you to pull in the content from one of your static Pages within the Shopify admin. Just click the Select page button to show a list of the pages you've created and select the one you'd like to display. This block works great if you'd like to utilize the power of a full WYSIWYG editor to customize your text content. Toggle on/off the Show Heading setting to display or hide your page's title and use the Heading size setting to adjust it's size.
Note: the Page block is designed to display only the WYSIWYG content of your static page. This means that if you have a static page that's utilizing the Contact page template, it will still only display the WYSIWYG content.
A word of caution! If a table is added to a Page that you've choose to show on the Homepage, be sure to preview on mobile. Tables are tricky to scale and tend to break the width on smaller screens.
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 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.