Setting up your homepage with Pacific

Fixed sections

Dynamic sections


When you first install Pacific, several default homepage sections are already visible. Fixed sections include the Announcement barHeaderFooter and Promotions, while some examples of optional dynamic sections are the SlideshowCollection list, Featured collection, Featured video, and Blog posts. Each of these sections comes with placeholder content in the right-side preview. These will give you an idea of the formatting of each section until they are replaced with your content (images, videos, copy, etc.).

Featured collection and other Sections being configured in theme editor

Clicking on any of these section blocks will bring up a set of unique configuration settings. To add more, you can click  Add section to view the options to add to your homepage. 

Fixed sections

Fixed sections 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 barHeaderFooter, and the Promotions section. 

Announcement bar

Announcement bar positioned at the top of the header

The  Announcement bar is a feature used to fill 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

To enable the Announcement bar, select the Show announcement setting. You can also limit the bar's display to the homepage by turning on the Show on homepage only setting. 

Content

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, Text (mobile), is optional and allows you to enter alternate text content that will only appear to customers visiting your store on mobile devices. Use this field to display shortened or different text content—whichever is better suited 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 contrast or match the branding of your store. These controls are distinct from the Colors portion of the Theme settings.

The Header is the rectangular area that runs across the top of your store containing the logo, Navigation, customer login, Search feature, Currency converter, and Cart icon. The same header will display on each page, serving as a central hub for storefront navigation and promotional tool for your brand identity.

Header with nav links, logo, and header tools

NAVIGATION

When Pacific is first added to your store, a menu will be automatically added to the Header settings. To replace this menu, select Change and choose from the menus displayed. You can also Remove the menu feature by selecting that option.

To edit, add, or remove menus, go to Online store > Navigation. By default, the Main menu and Footer menu are here, but these can be modified or removed. 

For more information on menus, check out How to set up your store's navigation.

To add a Mega-nav menu, jump to the Mega-nav setup.

Layout

There are three header navigation layout options for the menu items in Pacific: Traditional, Inline, and Minimal.

The Traditional layout will arrange the menu items below the logo. These will be centred unless the Justify navigation links option is enabled. This option also movess the Search icon on the left side, separating it from the other header tools (Currency converter, Account login, and Cart icon).

Traditional header placing nav menu below logo

The Inline layout aligns the menu items to the left side. Reflecting the arrangement of the header tools, this settings offers a balanced and symmetrical layout, while minimizing the header height.

Inline layout places nav menu to the left side of header

The Minimal layout further reduces the header height by concealing the menu items from view. These can be accessed by selecting the left-side icon. When selected, the menu items display in the Traditional layout until a link is selected or the menu is closed by selected the X icon.

By selecting the Enable sticky header option, the header will remain fixed at the top of the desktop browser window while the customer scrolls down the page. If Traditional is selected alongside this setting, the header will compress to a Minimal layout while scrolling. Both Inline and Minimal will remain the same as the customer scrolls down the page.

To modify how the menu items display in relation to one another, you can enable Justify navigation links. This option will distribute the menu items equally to fit the space provided. The example image below shows this setting enabled for the Traditional layout:

Justify links distributing menu items across header width

Enable Show border to add a narrow line between the header and homepage content.

The store's logo provides branding for your storefront, as well as a consistent link back to the homepage.

By default, Pacific 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. The recommended dimensions for logo images are 450 x 200px, formatted as a PNG or JPG. Larger images will be automatically resized to fit this constraint. 

The logo position can be configured by enabling Center desktop logo. If this is disabled, the logo will align to the left of the header.

You can also set a custom  Logo width in the field below the image upload. 

For retina screens, which have a pixel density double that of non-retina screens, try uploading a logo that is 600px wide, then setting the width to 300px. This will keep your logo sharp on both retina and non-retina devices. The values '600px' and '300px' can be adjusted, but the main key here is the doubled pixel width.

Use the  Mobile logo feature to upload a separate logo image for mobile devices. This logo's width can be configured separately from the desktop logo by using the slider. Likewise, the mobile logo can be centered by selecting Center mobile logo.

Mobile logo upload option with center mobile logo enabled

To change the Icon, select either Bag or Shopping cart from the dropdown menu.
There are also two options for how quantity is represented in the icon. Under Quantity style, select either Number or Dot.

Pacific includes an expanded search feature, allowing your customers to not only search keywords, but also access  Quick links and receive suggestions from Live search the moment they start typing.

To get started, Enable live search. Disabling this option will return the search feature to its basic function.

With Live search, suggested results will be displayed while the customer types. The appearance of these items can be configured through the Results layout dropdown, with three options: Comfortable, Cozy, and Compact

Suggested search items provided by live search as customer types

Display setting dropdown showing the four optionsThrough the Display setting, you can control which categories of results are included in the search feature. 

Display options include:

  • Products only
  • Products and pages
  • Products and posts
  • Products, posts, and pages

The Quick links portion of the Search feature allows you to add a list of commonly searched items as links. These links can be compiled as a new menu in the Navigation admin, which you can then select in the Quick links settings.

Quick links appear below search bar as customer enters text

Mega-nav

Another recent enhancement for the Pacific theme can be found in the Mega-nav feature. If you're unfamiliar with this term, Mega-navs (also known as mega-menus) are expanded menus that provide an array of navigational and promotional features, all stemming from a single menu item in the Header. 

Mega-nav menu showing columns of menus and promo

Before enabling and configuring the Mega-nav in the theme editor, the frame of this menu type must be constructed in the Navigation admin. 

This structure requires that each 2nd-tier item nested in the menu be paired with at least one 3rd-tier item. For more information on this setup, take a look at the mega-nav portion of this article: What nested navigation means for your Shopify store

With this menu structure in place, navigate back to the theme editor and open the Header section settings. Scroll down to the Mega-nav portion of these settings and select Add mega-nav.

Mega-nav image width controlled in theme editor

To identify which menu item the mega-nav will stem from, enter the item name in the Mega navigation trigger field. In the above example, the 'Shop' menu item is selected. 

If collections are included among these menu items, you can enable Show images for top level collections. Illustrated in the above screenshot, this setting draws in the Collection image (assigned in the Collection admin) to display in the mega-nav.

The appearance of these images can be fine-tuned through the Image aspect ratio selector. This select this dropdown to view the following options:

Uncropped:

  • Natural (original image proportions)
  • Short (4:3)
  • Square (1:1)
  • Tall (2:3)

Cropped:

  • Short (4:3)
  • Square (1:1)
  • Tall (2:3)

Using an Uncropped setting will generate white space around the image to create a uniform grid without cropping your image. The background in the editor indicates the applied white space, but will not appear on your storefront. You can see how it will appear by selecting the Theme actions button on the bottom left corner, then clicking “Preview theme”. 

Notice that the width of the images included here reflect the length of the menu items below. If you need the images to be uniform in width, use the Minimum menu item width to increase the text space and image width together.

Minimum menu item width being adjusted in theme editor

Promotional blocks

Mega-nav menus occupy a substantial area of the browser window when activated, so consider adding a Promotional block to highlight something special.

There are two options for PositionLast column or First column. You can configure the promotion block to appear to the right side of the menu (Last column) or the left side (First column).

By default, the promo block will be limited to a single column, but this can be expanded using the Promo block columns selector. Use this to feature up to 3 columns of promotional content.

There will be placeholder content here by default, but you can scroll down to the Promo blocks to add your own image(s) and text before configuring these settings.

Just as the width of the menu items can be customized, the width of the promotional block column(s) can be controlled using the Promo area minimum width selector. 

Just like the collection images, the appearance of the promotional block images can be fine-tuned through the Image aspect ratio selector. This select this dropdown to view the following options:

Uncropped:

  • Natural (original image proportions)
  • Short (4:3)
  • Square (1:1)
  • Tall (2:3)

Cropped:

  • Short (4:3)
  • Square (1:1)
  • Tall (2:3)

Using an Uncropped setting will generate white space around the image to create a uniform grid without cropping your image. The background in the editor indicates the applied white space, but will not appear on your storefront.

How the text content and image are positioned can be customized using the  Promo text layout to select one of the following options:

  • Above left
  • Above center
  • Above right
  • Below left
  • Below center
  • Below right

The Overlay feature offers an alternative approach for displaying text with your image. When enabled, this combines the image and text and adds a semi-transparent color overlay to contrast.

Select Show overlay to enable, then choose how the text is positioned and aligned by using the Overlay text layout selector.

You can also customize the Color by clicking on the black rectangle, then the Opacity by selecting the slider below. The Text color can be customized here, too.

Overlay settings for promo image in mega-nav

Promo blocks

Upload an image or select one from your library to feature in the promo block. Then add copy for the Heading and Text fields, and add a Link for the block to direct customers to the relevant page.

Repeat for up to three promo blocks.

Similar to a footer on a document or report, Pacific offers a fixed footer section that displays at the bottom of each 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 quick links and contact information. 

Three footer blocks in theme editor

Divided into a maximum of 3 blocks, Pacific's footer can feature Menus, Rich text, Social feeds, and Newsletter sign-up.

These can be removed by opening the block and selecting Remove content or rearranged like any other section (click and hold the right side of the block, then drag to the desired position).

PAYMENT ICONS

Display which payment forms your store accepts through enabling Show payment icons. Which icons appear depend the payment types are enabled and managed in your Shopify admin ( Settings > Payments). 

MENUS

To feature a pair of menu columns in your footer, use the Menus block. Select the desired menus for Menu 1, then Menu 2. If you need to create new menus for this feature, go to your Navigation admin.

Rich text

Rich text allows you to add a customized message to your footer. Add your copy to the Heading and Text fields. There are controls for Bold, Italic, and Links included at the top of the Text field.

Twitter feed

The Twitter option displays your store's most recent tweet. Provide a  Heading, then your Username (excluding the '@' symbol) in the corresponding fields. If you also want to include retweets, enable the Show retweets option.

Example tweet from Pixel Union

Instagram feed

To integrate your Instagram account, generate your Instagram Access Token, then copy and paste it to the Access token field.

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

Newsletter and Social links

Check Enable newsletter to activate the newsletter sign-up 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.

Enable social links to display the connected accounts from the Social media portion of the Theme settings.

Promotions

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.

Three images for static promotions section

SETTINGS

Give your Promotions a Heading by completing the first field. Select Show border to include a line above the section.

CONTENT

You can add up to three promotional images to this section. Click Add promotion, then upload your Image and Link


Dynamic homepage sections

Apart from the fixed sections outlined above, Pacific’s remaining 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.

Animation demonstrating sections being rearranged

When first added to your Online store, Pacific has several dynamic sections already enabled. These are merely  suggestions for how you might structure your homepage. Delete a section by clicking on it, then Remove section at the bottom. To add a new section, click Add section to open the list of available sections. 

Add section button

Blog posts

The  Blog posts section displays images and text from your three most recent posts. Click Select blog to identify which blog to display on the homepage. To specify the text that appears for each post, use Shopify’s excerpt function (found in the post editor under Online store > Blog posts).

Need to set up a blog first? Check out this Shopify help article: Adding a blog

SETTINGS

Start by giving your section a Heading. Enable Show border to feature a horizontal line above your blog posts.

Next, click  Select blog to choose which blog to feature in this section. Pacific will pull the three most recent posts for this section.

Three example blog articles appearing on homepage

Collection list

Collection list sections showcase select collections on your homepage. With Pacific, you can feature up to three collections in this section.

Three example collections included in collections list section

SETTINGS

Start by assigning a heading to the section in the Heading field. This will appear at the top of the section. To add a horizontal line above this heading, enable Show border.

CONTENT

Select the collection(s) to display by clicking Add collection. If you haven't set up collections yet, return to the admin (Products > Collection > Add collection) and follow this guide: Collections.

The Show text shadow option offers more contrast for text and images of similar tones. Note that this will appear only when the Text color is set to Light.

The Featured collection section draws attention to products from a specified collection on your homepage. Display up to six products from the same collection in this dedicated space.

Four products displayed by Featured collection

SETTINGS

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

To show a horizontal line above the section, enable Show border.

Click on Select collection to assign the desired collection. Then configure the Products per row and choose the number of Rows with the corresponding sliders. 

If you haven't set up a collection yet, return to the admin (Products > Collection > Add collection) and follow this guide: Collections.

Enable product image flip on hover displays each product's secondary image when the cursor passes over the image. The image used here would be the second image associated with the product in the Products admin.

Gallery sections are visual tools for building your brand. 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 with their respective overlay text content.

SETTINGS

Start by giving your Gallery an optional Heading. Select Show border to feature a horizontal line above this section. Select Show text shadow to enhance the contrast between the text and image. This will only appear when the Text shade is set to Light in the Content portion.

CONTENT

Start by uploading the first image you want to feature. Use images that are substantial in width (for more information about image sizes, check out Responsive Images in Shopify themes).

In the boxes below, you can input and format the image's  HeadingSubheading (displays above the heading), Caption (below the heading), and Link (entire image will become link). The Text shade and Text alignment is also configured here.

Slideshow

To display a slideshow on your homepage, select the  Enable checkbox under the Slideshow section. Feature up to five slides, each with its own text and image content.

Slideshow with man pouring coffee and overlay text

SETTINGS

Start by giving your slideshow an optional Heading. To add a horizontal line above this section, select Show border 

Next, 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). Preview these differences by selecting Theme actions > Preview.

You can also choose between having your slides  Slide or Fade under Slide transition. Enable Auto-rotate slides to automate the transitions, otherwise customers can scroll through the available slides by selecting the arrows or dots.

CONTENT

Upload the image(s) and customize the accompanying text by selecting the individual Slide to expand the settings.

Provide and configure the slide's Text alignmentHeadingSubheading (actually displays above the heading), Caption (which displays below the heading), Link (entire slide will become linked) and Text color. Enable Show text shadow to enhance the contrast between slide image and text.

Pacific supports up to five slides at a time. 

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

Settings

Select product to choose the product 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 image zoom
  • 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)
  • Enable dynamic checkout 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, info/description on the right).

Newsletter

To help you build your mailing list, Pacific comes with a dynamic Newsletter section. All emails submitted to this feature are carried over to the Customers admin, which can be linked to email marketing apps and other tools.  All email addresses collected by the theme's newsletter/email collection form will be added to the Accepts marketing tab on the Customers page in the admin. Check out Shopify's guide on how to use this feature.

SETTINGS

You can give the section an optional Heading and Subheading

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

Map

Pacific comes with an attractive Map section that businesses with brick-and-mortar locations can use to display contact information and give directions to their store.

Map of Victoria with address written beside

SETTINGS

Start by setting the Section height from the top dropdown, then add a Heading.

In these settings, set the Text alignment, as well as Desktop and Mobile layout settings for each device type.

The  Map address will be the point Google uses to drop its pin (red marker in the above screenshot).

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 the event that 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.

Rich text

The  Rich text section is a flexible feature used to add text-based content to your homepage. Use up to two blocks within each Rich text section. 

SETTINGS

Choose between  RegularWide, and Full Width for the Section width.

CONTENT

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. Use the text formatting buttons to customize your text. Add an optional Heading, adjust its Height, and 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 a static page built in the Shopify admin. Click Select page to show a list of the pages already created and select one to display. (This feature is limited in what it can carry over to the homepage, so avoid using pages with complex structures, functions, etc.)

Enable  Show Heading setting to display your page's title and use the Heading size setting to adjust its size. 

Note: If a table is added to a Page that you've chose 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.

Image with text

The Image with text section offers an engaging and eye-catching image display paired with text content. 

SETTINGS

Begin by assigning a Heading to this section. Enable Show border for a horizontal bar to display at the top of the section.

Add the Heading and Description, then choose Select image (1280 x 640px .JPG file). Then select the Image alignment that best suits the image and text.

Featured video

Feature a video on your homepage that can be accompanied by a text overlay and call-to-action button.

SETTINGS

Provide the section with an optional Heading for the top.

Next, copy the Video URL from YouTube or Vimeo, then paste it into the field provided.Make sure that the URLs are not mobile URLs, that they don’t contain any additional information in the links. They should be in the following format: 

Vimeo: https://vimeo.com/42059246

Choose a  Video screenshot (1080 x 640px .JPG images are recommended) to display before the video plays. 

Finally, specify your  Text shadeHeadingButton text, and Link.



Back to top ↑

Next article: Pacific's products and collections