Add homepage sections

When you are viewing your shop’s homepage in Capital’s theme settings, you can use the Add section button to add additional blocks of content to your homepage. These blocks contain unique layouts and for special kinds of content, giving you more control over how your storefront looks. There are three types of sections you can choose from:

  1. Text
  2. Image gallery (Image with text overlay)
  3. Instagram

You can add as many of each of these sections as you want. For example, you could create two or three separate Departments sections. Just use the Add section button whenever you want to add a new section to your storefront.

You can play with the order that the sections appear in by reordering the list of sections using the handle on the right side of each listed item.

If you want more information about how sections work on Shopify, see their Theme sections article.

Text

Using the Text section, you can add a line or two of text to break up the other sections on the storefront.

Text homepage section

In Capital’s theme settings, use the Add section button and add the Text section type. This creates a new section in your Capital’s theme settings where you can configure the section.

If you want to change the featured text in the future, you can choose the Text section from Capital’s settings to edit the existing content.

When you add a Image gallery section, you can configure up to eight departments that it displays to customers. The section shows up to four departments at a time. Customers can use the provided navigational arrows (left or right) to see the other configured departments.

On mobile devices, the departments are displayed from top to bottom.

Image gallery on a mobile device

To add a new departments section, use the Add section button and add the Image with text overlay section type. This creates a new section in your Capital’s theme settings where you can configure the section.

Add, remove, and reorder images

You can add additional images to the section using the Add image with text overlay button. Up to eight images can exist per section. (If you need to display more than eight images, you can create multiple image gallery sections.)

You can remove an image from the list by expanding the image’s settings, scrolling to the bottom, and using the Delete link.

You can play with the order that the sections appear in by reordering the list of sections using the handle on the right side of each listed item.

When you add or edit images to your section, you need to configure each block so it is associated with one of your shop’s departments or another page on your store.

You can access each image’s settings by expanding its Image with text overlay item in your image gallery section.

Department page
Choose one of your configured departments from a list of pages. (When you configure a new department, you need to create a page associated with it – see Departments for more information.)
Enable portrait layout
Select this checkbox to make the department that you are configuring into a portrait-oriented layout that's double the height of other departments. See an example.
Image
Upload an image to use for the department or select an existing image from your library. For our recommended image dimensions, see Image dimensions.
Delete
Use this link to delete the department that you are configuring.

You can configure any image gallery to be double the size using the Enable portrait layout configuration setting. This highlights the department, taking up two of the four spots that are visible in your image gallery section.

This does not stop you from configuring eight departments in your section – it just adjusts the layout of the eight departments. Images with portrait layout disabled will be stacked, one on top of the other.

See our recommended image dimensions and layout information for image gallery sections (and every other image in Capital) on the Image dimensions page.

Instagram

You can add an Instagram feed to your storefront using the Instagram section. This section displays your Instagram account’s most recent posts. It generates a pleasing masonry layout based on the orientation of your images (whether they’re square-, portrait-, or landscape-oriented).

Instagram section

On mobile devices, the layout narrows down, but still displays the same amount of images.

Instagram section mobile

Access token
Insert the access token for your Instagram account. What's an access token?

Generate an access token for your Instagram account

An access token is a code that Instagram uses to identify your Instagram account. Think of it like a handshake between your store and Instagram. When your store has the right access code, Instagram accepts your store as a partner and allows your store to display content from the Instagram account associated with the token.

To get an access token for your Instagram account, you can use our token generator. Just follow the steps and you’ll be provided with a long string of letters and numbers that looks something like this:

266197586.1688df0.12f8c04c58094fhea5dhjfbbadb2a4a34e

Once you have copied your access token, you can paste it into the Access token field when you are adding or editing your shop’s Instagram section.