Sections for Supply

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.

Static sections are 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 are 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 Supply's unique selection of sections and how to customize them to suit your business.

Static sections

Supply includes the following static sections:

Dynamic sections

Supply includes the following dynamic sections:

Your theme's header is the section that appears at the top of every page in your store.

You can customize the following items in your header:

  • Logo
  • Announcement bar
  • Menu

You can add a custom logo image to your store's header. The best format is a .png file with a transparent background. Supply looks best with a logo that is 400px wide. You can resize the logo image by increasing or decreasing the width. Don't increase the value beyond the original width of the logo image. If you do, then you can cause distortion and loss of image quality.

  1. Click Header.
  2. In the Logo image area, click Select image, and then do one of the following:
    • To select an image that you have already uploaded to your Shopify admin, click the Library tab.
    • To select an image from your local computer, click Library > Upload.

6.Enter the logo's width in the Custom logo width field.

  1. Click Save.

Add an announcement bar

You can add an announcement bar in the header that you can use to show a message to your customers. Your message is customizable and might include contact information, information about store events or sales, or a store slogan. The message can be up to 55 characters in length.

  1. Click Header.

  2. In the Announcement bar area, check Show announcement.

  3. Enter the text for your announcement.

  4. Optional: Enter a URL to add a link to your announcement.

  5. To change the color of the announcement bar background, click the Bar color swatch and choose a color.

  6. To change the color of the announcement text, click the Text color swatch and choose a color.

  7. Click Save.

Add a menu

You can add a menu to your header. This displays all the menu's links in your header, which you can use to highlight common pages that your customers want to access. For example, you could add a menu that contains links to your collections.

  1. Click Header.

  2. To select a menu, click Change. Select a menu from the list or click Create menu to create a new one.

  3. To edit the menu, click Edit menu.

  4. Click Save.

Your theme's footer is the section that appears at the bottom of every page in your store. You can add the following features to your footer:

  • social media icons
  • payment icons
  • a horizontal menu
  • a newsletter signup
  • custom text
  • quick links

Add social media icons

You can enable an option to display social media icons in your online store's footer. The social media icons that appear in the footer are controlled by your theme settings.

  1. Click Footer.
  2. Check Show social media icons.
  3. Click Save.

Add payment icons

You can display icons for the payment methods that you accept in your footer. This area displays the icons that are associated with the payment provider that you have enabled in the payment settings section of your admin.

  1. Click Footer.

  2. Check Show payment icons.

  3. Click Save.

Add a horizontal menu

You can add a menu to your footer. This displays all the menu's links in a horizontal bar at the bottom of your footer. You can use this menu to link to common pages that your customers want to access. For example, you could add a menu that contains links to your shipping and return policies.

  1. Click Footer.
  2. Edit the Legal menu setting. To select a menu, click Change. Select a menu from the list or click Create menu to create a new one.
  3. To edit the menu, click Edit menu.
  4. Click Save.

Add a menu, a newsletter signup, or text

You can add up to nine content blocks to your footer.

  1. Click Footer.

  2. To add a content block, in the Content area, click Add content. Select the type of block from the following choices:

    - Menu

    - Newsletter

    - Text

    To remove a content block, click on the block and then click Remove content.

    To customize a content block, click on the block and edit the settings.

  3. Click Save.

Product

The Product section is the main customizable section for product pages. You can customize this section using the following options:

  • Enable image zoom - Let customers zoom in by mousing over the product image.
  • Show quantity selector - Let users specify a quantity to add to their cart.
  • Show remaining quantity message - Show your remaining stock when inventory runs low. The remaining quantity message appears when there are 9 or fewer of the selected variant in stock. For this message to show, you need to enable inventory tracking for the product.
  • Show incoming stock transfer message when sold out - Show a message that indicates when a sold-out product will be back in stock. The message that shows is "Will be in stock after [date]." For this message to show, you need to create a transfer for the product to record incoming inventory.
  • Show vendor - Show the product brand or vendor. For a brand or vendor to show, you need to add a vendor to the product.
  • Show saved amount - Show the amount that the customer is saving. The saved amount is the difference between the regular price and the compare at price of the product. For the saved amount to show, you need to set a compare at price for the product.
  • Show compare at price - Show the compare at price for the product.
  • Show related products - Show a selection of related products at the bottom of the page. The collection that the product belongs to determines the related products that appear in this section. For related products to appear, you need to add a product to a collection. If the product is not a part of a collection, or the product is the only item in the collection, then no related products is shown.
  • Show dynamic checkout button - Let customers skip the cart and go directly to the checkout from the featured product section.
  • Enable product sharing - Show buttons that customers can use to share products on social media. The sharing options that appear are controlled by your theme settings.
  • Enable product reviews - Add a product reviews section to the page. For reviews to show, you need to install the free Shopify Product Reviews app and receive reviews for your product.
  • Variant picker and button size - Choose a size from this drop-down menu to set the size of the variant picker, the Add to cart button, and the dynamic checkout button.

Edit Product settings

  1. Select Product pages.
  2. Click the Product section.
  3. Use the settings to customize your product section.
  4. Click Save.

Collection

The Collection section is the main customizable section for collection pages.

The Collection section includes the following settings:

  • Products per row - Choose the number of products to display in each row on the collection page.
  • Rows per page (grid only) - Choose the number of rows of products to display on the collection page.
  • Sidebar product filters - Choose whether to sort collections by product tags or by filter groups in the sidebar.
  • Show compare at price - Show the compare at price for the product.
  • Show saved amount - Show the amount that the customer is saving. The saved amount is the difference between the regular price and the compare at price of the product. For the saved amount to show, you need to set a compare at price for the product.
  • Enable product reviews - Display review score badges on the page. For review score badges to show, you need to install the free Shopify Product Reviews app and receive reviews for your products.
  • Enable sidebar - Display a sidebar to let customers filter your products using the selected filter type.

Edit Collection settings

  1. Select Collection pages.
  2. Click the Collection section.
  3. Use the settings to customize your collection section.
  4. Click Save.

Collection list

Use the Collection list section to feature up to 6 product collections on your home page.

Add a collection list to your home page

  1. Click Add section.
  2. Click Collection list, and then click Select.
  3. To add collections to the section, customize each Collection block:
    • Click a collection block and then click Select a collection.
    • From the Collection drop-down list, select a collection to display or click Create collection to make a new one.
    • Click Select.
  4. To add additional Collection blocks, click Add Collection.
  5. Click Save.

You can feature a collection on your home page. Featuring collections can help you promote sales and new collections.

The Featured collection section includes the following settings:

  • Heading - Add a heading for the featured collection section.
  • Collection - Choose the collection that appears in the section.
  • Products per row - Choose the number of products to display in each row in the section.
  • Rows - Choose the number of rows of products to display in the section.
  • Show saved amount - Show the amount that the customer is saving. The saved amount is the difference between the regular price and the compare at price of the product. For the saved amount to show, you need to set a compare at price for the product.
  • Show compare at price - Show the compare at price for the product.
  1. Click Add section.
  2. Click Featured collection, and then click Select.
  3. Click Select collection, select a collection to display, and then click Select.
  4. Use the settings to customize your featured collection section.
  5. Click Save.

Slideshow

The Slideshow section lets you upload images to use for a slideshow on your home page.

You can select up to 6 slide images for your home page. You can add link to each slide that your customers can click to open a page in your store.

Each slide image should be 1000px wide by 500px tall. If you use slideshow images with different heights, then the images can appear to jump or be disjointed between slide transitions.

The slideshow section includes the following settings:

Content

  • Image - Add an image to display on the slide in your slideshow.
  • Link URL - Link your slide to another part of your online store.

Settings

  • Auto-rotate slides - Set the slideshow to play automatically.
  • Transition time - Choose how often to change slides.

Customize your slideshow

  1. Click Add section.
  2. Click Slideshow, and then click Select.
  3. To add images to the slideshow, click an Image block to customize it:
    1. Click Select image, and then do one of the following:
      • To select an image that you have already uploaded to your Shopify admin, click the Library tab.
      • To select a stock image from Burst, click the Free images tab. From here you can enter a search term, or browse the image categories.
      • To select an image from your local computer, click the Library tab, and then click Upload.
    2. If you want to add a link to the slide, do one of the following:
      • If you want to link the text on your slide to a page in your store, then click in the Link URL field and select a page.
      • If you want to link the text on your slide to a website, then paste the website's URL in the Link URL field.
  4. Use the settings to customize your slideshow.
  5. 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.

Add a newsletter signup to your home page

  1. Click Add section.

  2. Click Newsletter, and then click Select.

  3. Enter a heading for your newsletter signup.

  4. Enter a subheading for your newsletter signup.

  5. Click Save.

Map

You can add a Google map to your home page to show customers where your business is located.

The map section includes the following settings:

  • Heading - Add a heading to your map section.
  • Address and hours - Add your store's address and hours to your map section.
  • Map address - Set the map to show your store's location.
  • Map link label - Add a button that links to your location on Google Maps.
  • Show pin - Add a pin that shows your store's specific location on the map.
  • Google Maps API key - Add your map's API key to the map section.
  • Image - Add an image that's displayed if the map doesn't load.
  • Image position - Set the placement of the image.

Add a map to your home page

  1. Click Add section.
  2. Click Map, and then click Select.
  3. Use the settings to customize your map section.
  4. Click Save.

Rich text

Use the Rich text section to provide any written content that you want to display on your home page, or to embed any page created in your Shopify admin. For example, you can feature upcoming events by embedding your blog page, or display a page with any of the following:

The rich text section includes the following settings:

  • Heading - Add a heading to your rich text section.
  • Text - Add and format your custom text. If you want to feature a page from your store, then click Add content and then click Page. Select a page to feature as your home page from the drop-down menu.
  • Size - Set the size of your text.

Add rich text to your home page

  1. Click Add section.

  2. Click Rich text, and then click Select.

  3. Use the settings to customize your rich text section.

  4. Click Save.

Video

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

To add a video, you need to find the video's sharing link:

  • YouTube - A Youtube sharing link looks like this: https://youtu.be/Oc5v_ToKP7c. You can learn how to copy the sharing link for a YouTube video in this YouTube Help article.
  • Vimeo - A Vimeo sharing link looks like this: https://vimeo.com/123456789. You can learn how to copy the sharing link for a Vimeo video in this Vimeo Help Center article.

The video section includes the following settings:

  • Heading - Add a heading to your video section.
  • Video link - Add the sharing link for your video.

Add a video to your home page

  1. Click Add section.
  2. Click Video, and then click Select.
  3. Use the settings to customize the video section.
  4. Click Save.

Custom content

In the Custom content section, you can group several content blocks together. The width and alignment of each block can be adjusted to build a custom layout.

You can use HTML to format text blocks, create tables, or embed content from another website. You can add up to nine Custom HTML block in a custom content section.

Each Custom HTML block includes the following settings:

  • HTML - Add the HTML code that you want to be displayed on your home page.
  • Container width - Set the width of your custom HTML block.
  • Vertical alignment - Set the vertical position of the content in the block.

Add custom content to your home page

  1. Click Add section.

  2. Click Custom content, and then click Select.

  3. Select and configure the content blocks that you want to include in the section.

  4. Click Save.

Ready to start selling with Shopify?

Try it free