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. The theme editor toolbar is divided into Sections and Theme settings.

The theme editor toolbar showing Sections and Theme settings

You can use sections to modify the content and layout of the different pages on your store. You can use theme settings to customize your store's fonts and colors, and make changes to your social media links and checkout settings.

Sections

Sections are customizable blocks of content that determine the layout of your online store. Each theme includes static sections and dynamic sections.

Static sections

Static sections are always in specific locations on your online store. You can edit static sections, but you can't rearrange or remove them. Each type of page on your online store includes different static sections.

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.

The newsletter section on a website. There is a field for customers to enter an email address and a button that says 'Subscribe'.

To add a newsletter signup to your home page:

  1. Find Pop and click Customize.

  2. Click Sections.

  3. Click Add section > Newsletter.

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

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

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

  7. 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. Find Pop and click Customize.

  2. Click Sections.

  3. Click Add section > Video.

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

  5. 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.

  6. 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.

To add custom HTML to your home page:

  1. Find Pop and click Customize.

  2. Click Sections.

  3. Click Add section.

  4. In the Advanced layout area, click Custom HTML > Add.

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

  6. Click Save.

Theme settings

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.

To customize the colors:

  1. Find Pop and click Customize.

  2. Click Theme settings.

  3. Click Colors.

  4. For each type of content, click the color swatch to use the color picker:

    The color picker in the theme editor

    • 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 the color to transparent, click None.

  5. Click Save.

Typography

You can choose the typography for the text on your online store.

Steps:

  1. Next to **, click **Customize.

  2. Click Theme settings.

  3. Click Typography.

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

    The 'Change' button on the font picker

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

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

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

  7. To change the font to a different style, such as bold or italic, click Regular. Next, click the style that you want to use, and then click Select:

    A selection of font weights available on the font picker

  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. Find Pop and click Customize.

  2. Click Theme settings.

  3. Click Social media.

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

  5. 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.

  6. 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)
  7. 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.

Make your logo bigger on mobile devices

First off, to make your logo bigger in any layout, it's extremely important to trim all 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 — when all negative space have 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 know that your logo is not made any smaller because of the negative space it contains, you can adjust the height of your mobile header to give your logo room to expand. As a result, your logo will become larger.

Head over to the theme editor and, in the Header & Navigation section, increase the "Sizing > Mobile Menu Height" value.

Make your logo bigger in the sidebar

First off, to make your logo bigger in any layout, it's extremely important to trim all 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 — when all negative space have been cropped from it:

The logo with the negative space is shown below when uploaded to the Pop theme:

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

Once you know that your logo is not made any smaller because of the negative space it contains, you can adjust the width of your sidebar to give your logo room to expand. As a result, your logo will become larger.

Head over to the theme editor and, in the Header & Navigation section, increase the "Sizing > Desktop Menu Width" value.

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. Find the theme you want to edit, and then click Actions > Edit code.

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

  3. 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