Pop

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:

Pop logo with negative space

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

Pop logo trimmed

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

Pop logo with negative space result

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

Pop logo trimmed result

Tip

Adding padding around a logo is always possible by editing a theme stylesheet, something the Shopify Theme Support team can assist you with, but eliminating padding that comes from the logo file itself isn't something that can be done in the 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 your Customize theme page 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:

Pop logo with negative space

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

Pop logo trimmed

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

Pop logo with negative space result

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

Pop logo trimmed result

Tip

Adding padding around a logo is always possible by editing a theme stylesheet, something the Shopify Theme Support team can assist you with, but eliminating padding that comes from the logo file itself isn't something that can be done in the 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 your Customize theme page 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:

Pop logo with negative space

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

Pop logo trimmed

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

Pop logo with negative space result

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

Pop logo trimmed result

Tip

Adding padding around a logo is always possible by editing a theme stylesheet, something the Shopify Theme Support team can assist you with, but eliminating padding that comes from the logo file itself isn't something that can be done in the theme.

Once you have uploaded a trimmed logo to your theme assets, you can adjust the width of your sidebar by going to your Customize theme page. 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. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

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

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

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 from your Customize theme page in the Product Pages section:

Pop enable zoom

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

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Click the ... button for the theme you want to customize, then click Edit language.

  3. On the Languages page, select your active language.

  4. In the search box at the top of the active language screen, start typing "connected" to bring up the "Get Connected" translation. That translation is under "Layout > Footer > Social title".

  5. Edit your translation and click Save.

Tip

You can change any text in your theme, that isn't coming from your store content, using the Language editor.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free