Parts of a Website: Essential Elements, Explained

Every part of your website affects how customers perceive your brand and whether you make a sale. Landing pages, homepages, product pages, and blogs may be what customers actively notice. But less obvious aspects like footers, checkout, and navigation bars determine how intuitive and easy to navigate your website is.

Designing each of these elements well matters. According to PwC’s 2025 Customer Experience survey, about 29% of consumers stopped using or buying from a brand after a bad online or in-person experience. 

This article breaks down the different parts of a website, with tips from business owners and marketing professionals on how to get the most out of each element. 

Parts of a website 

• Hero image
• Header
• Announcement bar
• Logo
• Navigation menu
• Website content
• Sidebar
• Footer
• Landing pages
• Forms
• Blog
• Testimonials
• Checkout

Websites can be an essential marketing tool for businesses. In a 2026 HubSpot survey, websites (including SEO blogs) were the most-used channel among marketers, beating organic social media and email marketing. A well-tailored site can enhance your marketing efforts and the customer experience, which can help drive traffic to your page. 

Each individual element of a website contributes to customer engagement in different ways.

Hero image

The hero image is a banner image placed above the fold, which is what a user sees before they begin scrolling. Its mission is to immediately capture a user’s attention.

A hero image can take many forms. It can be a single static image, a carousel series that website visitors can scroll through, a video, or a background with animated features.

Jaz Fenton, cofounder and head of web design at agency Otherhalf Studio, is a fan of using video in the hero section. 

“Showing the product in action, really trying to focus on more media-rich video content versus just static assets, is really important,” Jaz says.

When Otherhalf redesigned the website for Cherrypick, makers of a multifunctional magnetic wall decal for kids, they replaced the static hero images with videos showing kids playing with the products.

Cherrypick’s hero section also includes a value proposition (“Designed for the magic of childhood”), a Shop Now CTA button, and social proof in the form of thousands of five-star reviews.

Header

The header is a strip at the top of a webpage with clickable elements like the navigation bar, search bar, a shopping bag, and login. 

Gut health brand Good Bacteria sells only one product, so their navigation bar doesn’t include a menu with product categories. Instead, it includes a quick navigation button to their shop, a page to learn about the science behind the probiotics, and a journal covering personal stories, recipes, and more. You’ll also find easy tabs to an account login and shopping cart. 

You can add a lot of elements in a website header designed for desktops. Mobile headers are more minimal, with essential information and hamburger menus (☰).

Perfume brand Dossier uses this type of menu on mobile. When you click on the hamburger menu, the page is replaced by a drop-down list of product categories and recommendations.

Announcement bar

An announcement bar is a thin horizontal bar at the very top of the screen that communicates a message to visitors. The text on the bar can be static or scroll from one side to another. Businesses use announcement bars to share company updates, sales, and other relevant information. 

Jaz recommends using the announcement bar to highlight promotions and incentivize customers, rather than putting those in the hero section above the fold, which she says should be used to demonstrate the problem you’re solving for your customers. 

You can also maximize the space by offering more than one offer. Just make sure it’s not cluttered. 

Otherhalf Studio worked on prebiotic iced tea brand Halfday’s website. Before Otherhalf redesigned the website, the announcement bar only mentioned that visitors could get free shipping on Amazon. Now, the announcement bar encourages customers to sign up for their newsletter for 15% off and informs them about the free shipping on Amazon. 

Some Shopify Themes, like Sense and Taste, come with announcement bars. You can check if your theme has an announcement bar feature in the theme editor. If it does, you’ll see Announcement bar listed in the available sections under the Header settings.

If your theme doesn’t come with this feature, you can download a banner app from the Shopify App Store. 

Logo

Your logo is a key branding element that represents your business. Some sites make their logo clickable, sending visitors back to the homepage.

Your logo can be a wordmark (a stylized version of your brand name), an icon (usually an image), or both. Brands might place a logo in different locations on their header. For example, makeup brand Saie placed their logo in the center of their header. 

Meanwhile, olive oil brand Graza’s logo is on the left-hand side. 

You can also place your logo within the footer. Saie has a small, clickable logo at the bottom left of their footer. 

Graza has a full-width, non-clickable logo in their footer. Both sites use sticky headers, so users can access the homepage or menu no matter where they are on the page.

If you don’t have a logo, you can use Shopify’s logo maker to create logos in multiple formats. Then, save your logo and other brand assets to the Brand page in your Shopify admin so you can quickly add it anywhere on your site.

Navigation menu

A navigation menu is a list of links, typically internal links, that guides visitors to important pages. Navigation menus help visitors move through your website, so how the information is arranged matters. 

In a 2025 report by SMS and email platform Attentive, 45% of customers said that being able to find products more easily is the number one factor that would improve their shopping experience. 

There are several menu styles you can use: 

• Horizontal navigation bar: A static menu that lays out broad menu categories at the top of the page. 

• Vertical sidebar: Placed either on the left or right, the vertical menu can be longer than horizontal ones and contain a few categories.

• Dropdown menu: Dropdown menus nest additional links under main categories in the horizontal or vertical bars.

• Mega menu: Mega menus drop down and flood the display area. Since they take up more space than other menus, they can fit more links and even images.

• Hamburger menu: The stacked-lines hamburger menu icon expands when tapped or clicked on. It’s a space-saving design, particularly useful for mobile versions of websites.

When creating your menu, consider which categories would make sense to a shopper. This is a lesson Bird & Blend Tea Co. learned while designing their site. 

In their retail store, Bird & Blend organizes their tea by color because it makes for a visually interesting display. However, this didn’t translate well to their website. 

“[Customers] don’t care that we use the color pink to say that’s herbal tea,” Founder Krisi Smith says on Shopify Masters. “They don’t really even care that the name is Enchanted Narnia or whatever. That tells them nothing online.” 

“So we started thinking about the journeys of, ‘When people are looking for herbal tea, what are they looking for?’” Their solution was to add a category for different benefits, such as wellness and relaxation. 

Bird & Blend uses the Be Yours Shopify Theme, which allows them to create a mega menu with space for three different categories (Explore teas, Shop by type, and Shop by benefit) as well as a featured product. 

Your navigation menu can also play a role in ecommerce category page SEO. A link to a category page in your menu signals to Google and other search engines that a page is important. 

Website content

Website content is the substance of what site visitors see and interact with on the site. This can include written text (like blogs and product descriptions), images, videos, animations, and audio. 

For ecommerce sites, it also includes product pages.

Diaspora Co. Founder Sana Javeri Kadri recalls how a new employee helped them make better use of the image section of their product pages. “She was like, ‘Excuse me, your product pages need five to six images—all the dynamic stuff that you have on Instagram,” Sana says on an episode of Shopify Masters. 

“We saw our conversion rate go up immediately,” Sana says. “We now have reviews, size guides, recipe inspiration, all that just in the flick of the images. We had that information buried elsewhere on the product page.” 

Diaspora Co. uses the Elixira Shopify theme, which supports advanced product image settings like image rollover and image zoom.

Sidebar

A sidebar is a narrow vertical column along the left or right side of the main content area. It provides extra options like: 

• Links

• Secondary menus 

• CTAs 

• Social feeds

• Recent blog posts (native or linked)

• Email opt-ins

• Author bios

• Shopping widgets

• Customer testimonials

• A Contact page

• Ads

Sidebars can be fixed or slide into view when you take a specific action. 

Magnolia Bakery uses a sidebar to upsell. It appears when a user adds banana pudding to their cart. 

“We uncovered [that] a banana pudding purchaser is more likely to add a cupcake to their cart,” says Adam Davis, former senior marketing manager at Magnolia, on Shopify Masters. “So why don’t we show that customer a cupcake on the sidebar once they have banana pudding already in their cart?”

Footer

The footer sits at the bottom of a website page. Like the header, it remains consistent across every page on the site. 

The footer can act as a secondary menu. Some links repeat what’s at the top of the page for viewers who have scrolled all the way to the bottom. Other links lead to information fewer visitors will look for, like careers, wholesale policies, warranties, and returns. It’s also a common place to add social media links. 

For example, jewelry brand Mejuri’s footer includes contact information, an About category, an FAQ section, resources like how-to guides, and terms and conditions. 

A terms and conditions page is a contract between a website owner and their audience, and is a standard part of a footer. To create your own, you can use Shopify’s terms of use generator to create a policy in plain language. 

Landing pages

Landing pages are special-purpose pages with a specific marketing goal, like purchasing a promoted product or subscribing to a newsletter. Visitors come to a landing page after clicking a link from an email, advertisement, or social media account. 

Cookware brand HexClad uses a landing page that gives customers an overview of their products and who they are in a digestible way. 

“It’s kind of like a mini-site because you’ll see in the top nav, they do have some other places you can jump off to,” Jaz of Otherhalf Studio says. “[But it’s] a very condensed version from their full site.”

On Shopify Masters, Nik Sharma, founder of DTC marketing agency Sharma Brands, says creating landing pages that tie back to advertising copy or images can help reduce friction for buyers. According to Nik, generative AI has made it easier than ever to create purpose-built landing pages.

Shopify store owners can use Sidekick, a built-in AI assistant, to generate entire landing pages complete with copy and images from plain-language prompts.

Forms

Forms turn your website into a two-way communication channel by allowing users to share contact information or feedback. If you have a Shopify store, you can use Shopify Forms to create up to 25 in-line and pop-up forms for your store. 

Fresh-picked vegetable brand Begres Farms uses Shopify Forms to get users to sign up for their newsletter using either their email address or their Shop account. 

Blog

A blog is a section featuring engaging and informative posts, resembling journal entries or magazine stories. 

Blog posts can improve your website’s ranking for specific keywords, signal your authority and expertise on topics in your field, and guide readers to your products and services. They can also entertain your target audience with articles and stories that are likely to be of interest. 

On Shopify Masters, Canyon Coffee Cofounder Ally Walsh says the brand’s blog covers topics ranging from “selling coffee products to interviews with artists, musicians, and chefs. Content that’s not related to coffee that people have found inspiring over the years.”

Testimonials

Testimonials are reviews from customers who have purchased and used your products and services. Adding testimonials to your website can provide customers with useful information, and signal that your brand is legitimate and trustworthy. 

Turmeric shot brand The Turmeric Co. uses both written and video testimonials on their homepage and product pages for social proof. 

First, they added the review app Yotpo to their Shopify store. “That allowed us to begin to capture those reviews,” Founder Thomas Hal Robson-Kanu says on Shopify Masters. 

“Then, we implemented a manual process where we would reach back out to that customer, engage with that customer, [and] ask them if they would be willing to do a video piece.” 

To add reviews to your own website, you can download a review app on the Shopify App Store. 

Checkout

Not all websites have checkout, but it’s an essential ecommerce website feature. Checkout functionality includes buy buttons, cart icons, accelerated checkout, and one-page or multipage checkout. 

Shopify store owners on all plans have access to Shopify Checkout, including one-tap checkout with Shop Pay.

On an episode of Shopify Masters, Gyve Safavi, cofounder and CEO of toothbrush company Suri, says one-click checkout helps reduce friction for customers. 

“The simplicity of that and the constant optimization makes it a very simple path to ‘Just give me my product. Let me use Shop Pay and not have to log in.’ People love that feature,” Gyve says.