Sections for Supply

Sections are customizable blocks of content that determine the layout of different pages on your online store.

  • Home sections include features such as a slideshow or a newsletter signup that you can add, re-arrange, or remove. You can have up to 25 sections on your home page.

  • Each type of page has its own sections. For example, the product page section determines the layout of each product page on your online store.

  • Page sections are always in specific places on your online store. You can customize them, but you can't re-arrange or remove them.

  • Each theme includes fixed sections, such as the header and footer, that show on every page of your online store.

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

Supply includes the following static sections:

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.

Supply includes the following dynamic sections:

Supply includes some unique settings for the header of your store. You can choose a menu to display in your header, upload a logo, and display a message to your customers.

To customize the header:

  1. Click the Sections tab.

  2. Click Header.

  3. Select a menu to display from the Menu list.

With Supply, you can have a logo in your store's header. If you are using a custom logo, then the best format is a .pngfile with a transparent background.

Supply looks best with a logo that is 400px wide. You can change the width of your image by using the Custom logo width field. 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.

Message

With Supply, you can enter a message in your store's header that is up to 55 characters in length. This message appears above the search bar.

For example, you can enter a greeting message, advertise a sale or new collection, or let your customers know about shipping delays.

To add a header message:

  1. In the Message area, enter your header message.

  2. Optionally, bold or italicize some of the text.

  3. Click Save.

In the footer section, you can edit the content 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

The footer section of a website that shows a quick links menu, contact information, a newsletter signup, a horizontal menu, copyright text, and payment icons.

To customize the footer section:

  1. Next to Supply, click Customize.

  2. Click Sections.

  3. Click Footer.

  4. Show social media icons in your footer by checking Show social media icons. Choose which accounts to link to from the Social media theme settings.

  5. Add payment icons, such as Mastercard or PayPal, to your footer by checking Show payment icons.

  6. Add a horizontal menu to the bottom of your footer from the Legal menu area. To edit the default menu, click Edit menu. To change to a different menu, click Change, and then select an existing menu or click Create menu.

  7. Add up to nine content blocks to your footer in the Content area:

    • Add a content block by clicking Add content. Select the type of block from the following choices:
      • Menu
      • Rich text
      • Newsletter signup
    • Move a content block by clicking the ⁞⁞ icon and dragging the block to a different place.
    • Remove a content block by clicking the block and then clicking Remove content.
    • Customize a content block by clicking the block and editing the settings.
  8. Click Save.

Product pages

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

  • Image zoom
  • A quantity selector
  • Stock information
  • The product brand or vendor
  • Savings information
  • Related products
  • A dynamic checkout button
  • Social sharing icons
  • Customer reviews

To edit the settings for product pages:

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

  2. Click Sections.

  3. Click Product.

  4. To let customers zoom in by mousing over the product image, check Enable image zoom.

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

  6. To show your remaining stock when inventory runs low, check Show stock when less than 10 products available. For this message to show, you need to enable inventory tracking for the product.

  7. To show a message that indicates when a sold-out product will be back in stock, check Show incoming stock transfer message when sold out. 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.

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

  9. To show the amount that the customer is saving, check Show saved amount. The saved amount is the difference between the regular price and the compare at price of the product. The saved amount is rounded down to the nearest dollar. For example, if the price difference is $25.51, then the saved amount is "$25". For the saved amount to show, you need to set a compare at price for the product.

  10. To show the compare at price, check Show compare at price.

  11. 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 is shown.

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

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

  14. To show customer reviews of the product, check Enable product reviews. For reviews to show, you need to install the free Shopify Product Reviews app and receive reviews for your product.

  15. To set the size of the variant picker, the Add to cart button, and the dynamic checkout button, select a size from the Variant picker and button size drop-down menu.

  16. Click Save.

Collection pages

With Supply, you can specify how collections are sorted in the collections page sidebar menu. You can choose to sort by product tags or by filter groups.

  1. In the theme editor preview of your store, open a collection page.

  2. Click the Sections tab.

  3. Click Collection.

  4. From the Products per row drop-down list, choose how many products to display in each row.

  5. From the Rows per page drop-down list, choose how many rows to display.

  6. Under Sidebar product filters, select whether to sort collections by product tag or by filter group.

  7. To show a comparison price when a product in the collection is marked down from its original price, or to compare with competitor prices, check Show compare at price.

  8. To show how much money customers are saving when a product is marked down, check Show saved amount.

  9. To allow product reviews on your collection pages, check Enable product reviews.

  1. Click Save.

Use the Featured collections section to select up to 6 product collections to feature on your home page. When a customer clicks on a featured collection in your home page, the collection's featured product is displayed. If you do not have a featured product, then the first product image in the collection is displayed.

To display featured collections on your home page:

  1. Click the Sections tab.

  2. Click Featured collections.

  3. In the Content area, click Collection.

  4. From the Collection drop-down list, select a collection to display.

  5. Continue adding collections until you have selected all the collections you want to display.

  6. Click Save.

Slideshow

The Slideshow section lets you upload images to use for your slideshow. You can choose whether the images in the slide show rotate automatically, and you can set the frequency, in seconds, at which the images rotate.

With Supply you can select up to 6 slide images for your home page. You can add a URL 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.

To customize your slideshow:

  1. Click the Sections tab.

  2. Click Slideshow.

  3. In the Settings area, check Auto-rotate slides if you want slide images to automatically rotate.

  4. From the Transition time drop-down list, select a rotation frequency, in seconds.

To add an image slide:

  1. In the Content area, click Image.

  2. In the Image area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Shopify's Burst stock image collection, 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 the plus button.
  3. 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 Slide link field.
  4. 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. Next to Supply, 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. 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. Next to Supply, 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 content

In the Custom content 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 content to your home page:

  1. Next to Supply, click Customize.

  2. Click Sections.

  3. Click Add section.

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

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

  6. Click Save.

Ready to start selling with Shopify?

Try it free