Pop

A minimalist theme, designed to keep your content accessible. Pop is ideal for stores with small- to medium-sized inventories, Pop is designed around a large sidebar navigation that keeps your content readily accessible.

Example online store using Pop

Theme editor

Use the theme editor to customize your theme. Using the theme editor, you can edit the content that appears in your store by adding and editing theme sections. You can also change the store look, feel, and functionality using the theme settings.

Theme content is built using sections. Sections are customizable blocks of content that determine the layout and appearance of different pages on your online store. You can add, remove, edit, and customize sections using the updated theme editor.

Shopify's themes have the following types of sections:

  • Static sections: Sections that appear in predetermined locations in your online store. These sections can't be removed or rearranged. Static sections might include headers, footers, navigation sections, or content sections on pages like product pages and collection pages. For example, the Product section determines the appearance of each product page on your online store.
  • Dynamic sections: Optional sections that you can use to customize the layout of your home page. On your store's home page, you can add, rearrange, and remove dynamic sections to create the page layout. You can have up to 25 dynamic sections on your home page.

You can learn about Pop's unique selection of sections and how to customize them to suit your business.

Pop includes the following static sections:

  • Logo and menu
  • Announcement bar
  • Footer
  • Product pages
  • Collection pages
  • Collections list page
  • Article

Dynamic sections

You can add, rearrange, and remove dynamic sections to customize the layout of your home page. Each theme has a unique set of dynamic sections to choose from.

Pop includes the following dynamic sections:

  • Blog posts
  • Collection list
  • Featured collection
  • Image with text
  • Slideshow
  • Featured product
  • Newsletter
  • Map
  • Rich text
  • Video
  • Custom HTML

Product pages

In the Product page section, you can add or remove the following elements:

  • The product brand or vendor
  • Image zoom
  • Related products
  • A quantity selector
  • A dynamic checkout button
  • Social sharing icons

To edit the settings for product pages:

  1. From the top-bar drop-down menu, select Product pages.

  2. Click Sections.

  3. Click Product page.

  4. To show the product brand or vendor, check Show product vendor. For a brand or vendor to show, you need to add a vendor to the product.

  5. To let customers zoom in by mousing over a product image, check Enable image zoom.

  6. To show a selection of related products at the bottom of the page, check Show related products. The collection that the product belongs to determines the related products that show. For related products to show, you need to create a collection for the product, or add it to an existing collection. If the product is not a part of a collection, then no related products will show.

  7. To show a quantity selector, check Show quantity selector.

  8. To show a dynamic checkout button, check Show dynamic checkout button.

  9. To show social sharing icons, check Enable product sharing.

  10. Click Save.

Newsletter

You can add a newsletter signup to your home page. This lets you collect customer email addresses for email marketing campaigns. You can learn more about email marketing on the Shopify blog.

To add a newsletter signup to your home page:

  1. Click Sections.

  2. Click Add section > Newsletter.

  3. Enter a heading for your newsletter signup in the Heading field. The default heading is "Subscribe to our newsletter".

  4. Enter a subheading for your newsletter signup in the Subtext field. The default text is "Promotions, new products and sales. Directly to your inbox."

  5. Set the background color for the newsletter signup section by clicking the Background color swatch and choosing a color.

  6. Click Save.

Video

You can add a video hosted on YouTube or Vimeo to your home page. Videos can engage customers and generate interest in your business.

To add a video to your home page:

  1. Click Sections.

  2. Click Add section > Video.

  3. Enter a heading for your video in the Heading field.

  4. Enter the share link for your video in the Video link field.

    A YouTube share link looks like this: https://youtu.be/OTJXAUZY9t0. You can learn how to copy the share link for a YouTube video in this YouTube Help article.

    A Vimeo share link looks like this: https://vimeo.com/281332510. You can learn how to copy the share link for a Vimeo video in this Vimeo Help Center article.

  5. Click Save.

Custom HTML

In the Custom HTML section, you can use HTML code to create custom content for your home page. For example, you can use HTML to format text blocks, create tables, or embed content from a third-party website.

Add a custom HTML section to your home page

  1. Click Add section.

  2. Click Custom HTML, and then click Select.

  3. Click Custom HTML, and enter the HTML code that you want to add to your home page.

  4. Click Save.

You can use theme settings to customize the colors and typography on your online store. You can also set up links to your social media accounts, edit your cart settings, and add a favicon.

Pop includes the following theme settings:

Colors

You can choose the colors for the different parts of your online store.

Customize your color settings

  1. Click Theme settings.
  2. Click Colors.
  3. To open the color picker, click the color swatch for the content type color you want to change. The Recently selected area shows colors that you have recently selected for your theme. The Currently used area shows colors that you are currently using in other parts of your theme.

    To set a specific hex color code, click on the text field to enter the color.

    To set the color to transparent, delete the hex code value from the text field.

  4. Click Save.

Typography

You can set the font style and size for the text on your online store. You can choose a system font or a custom font.

It's recommended that you use system fonts in your store. Using system fonts avoids downloading new fonts to your customer's computer, which can negatively impact your store load speed. The font that displays on your customer's computer depends on their operating system. Learn more about system fonts.

Customize your typography settings

  1. Click Theme settings.

  2. Click Typography.

  3. For each type of text, click Change to use the font picker.

  4. Explore fonts by using the search field, or by clicking Load more.

    To see all of the available fonts, see Shopify's font library.

  5. Click the name of the font that you want to use.

  6. To change the font to a different style, click the name of the current font style, and then select a new font style from the drop-down menu.

  7. Click Select.

  8. Click Save.

Social media

You can add social sharing buttons for your products and blog posts, and links to your social media accounts.

To customize the social media settings:

  1. Click Theme settings.

  2. Click Social media.

  3. To upload a social sharing image, in the Social sharing image area, click Select image or Explore free images.

  4. To add links to your social media accounts, in the Social accounts area, enter the links to your accounts in the fields provided. Enter full links, such as https://instagram.com/shopify, or https://twitter.com/shopify.

    Links to your social media accounts show in the footer of your online store.

  5. To add social sharing buttons to your products and blog posts, in the Social sharing options area, check any or all of the checkboxes.

    You can add the following sharing buttons:

    • Share on Facebook
    • Tweet on Twitter
    • Pin on Pinterest (not available for blog post sharing)
  6. Click Save.

Add sub-menus to the sidebar

To add pull-down menus to your Main Menu, you will need to create menus on your Navigation page. This article will walk you through that process.

Optimal store logo size

A proportionally compact logo will look best in the Pop theme since it displays your logo in a sidebar. Banner-like logos, with a large width and relatively small height won't look good in that theme.

The maximum width for your logo is 450 pixels, and the maximum height is 200 pixels. Your uploaded logo file will be resized to fit within those constraints.

The ideal format is PNG.

Before you remove any padding added by the Pop theme above and below your logo, it's extremely important to trim any padding that might come from the image itself. You need to trim the negative space or transparent pixels that surround your logo graphic before you upload its file to Shopify.

Here's a logo with plenty of negative space around it:

Here is the same logo when trimmed — the negative space has been cropped from it:

The logo that is untrimmed is shown below when used in the Pop theme:

The trimmed logo is shown below when used in the Pop theme:

Once you have uploaded a trimmed logo to your theme assets, you can adjust the width of your sidebar by going to the theme editor. In the Header & Navigation section, edit the "Sizing > Desktop Menu Width" value to your taste.

As a final, unsupported measure, if you wish to reduce the padding above and below your logo, follow these steps:

  1. Under Assets, click timber.scss.liquid to open your theme stylesheet in the online code editor, or go to this URL.

  2. At the bottom of the file, add this:

   {% comment %}
     The following media query function produces this:
     @media screen and (min-width: 1025px) { ... }
     Sidebar is only shown when width > 1025 pixels.
   {% endcomment %}

   @include at-query ($min, $large) {
     .header-logo {
       margin-bottom: 30px /* original is 60px */;
     }

     .site-header {
       padding-top: 30px /* original is 90px */;

       .hr--small {
         margin: 0 auto 10px /* original is 15px auto 30px */;
       }
     }
   }
  1. Save your file.

Edit the settings for the product page

In the Product page section, you can add or remove the following elements:

  • The product brand or vendor
  • Image zoom
  • Related products
  • A quantity selector
  • A dynamic checkout button
  • Social sharing icons

To edit the settings for product pages:

  1. From the top-bar drop-down menu, select Product pages.

  2. Click Sections.

  3. Click Product page.

  4. To show the product brand or vendor, check Show product vendor. For a brand or vendor to show, you need to add a vendor to the product.

  5. To let customers zoom in by mousing over a product image, check Enable image zoom.

  6. To show a selection of related products at the bottom of the page, check Show related products. The collection that the product belongs to determines the related products that show. For related products to show, you need to create a collection for the product, or add it to an existing collection. If the product is not a part of a collection, then no related products will show.

  7. To show a quantity selector, check Show quantity selector.

  8. To show a dynamic checkout button, check Show dynamic checkout button.

  9. To show social sharing icons, check Enable product sharing.

  10. Click Save.

Best types of product images for Pop

Higher resolution photos will look more polished and professional in the Pop theme, and so you should aim for images that are at least 1024 wide by 1024 pixels high. Images will be automatically scaled down where necessary, so the higher quality the better.

Higher resolution photos will be particularly important if you use the Image Zoom function, which you can enable in the theme editor in the Product Pages section.

Ideally, the featured images of your products will all share the same width to height ratio to look best on collection pages.

Ready to start selling with Shopify?

Try it free