Shopify Theme Customization: Header, Footer & Homepage for Beginners

You have picked a theme and now want to design your header, footer and homepage? This guide shows you how to customize your Shopify theme without knowing how to code, and solves the problems beginners get stuck on most often. It is part of our overview Shopify design & tech.

Before you start: prepare three things

1. Duplicate your theme

Shopify recommends making a backup copy before you customize. Duplicate your theme via the actions menu with the three dots. If you don’t like the result, simply publish the copy again. There is no “reset” button.

2. Products first, then design

Add a few real products first and sort them into collections. Many homepage sections show products from a collection. As long as there are none, you only see gray placeholders or sample products and can hardly judge the layout. How to build a sensible structure is shown in Collections and menus in Shopify.

3. Set your admin language

Is your admin showing a language you don’t want? You change it in your profile: store name in the top right, then Profile, section “Preferred language”. According to Shopify, this only changes the display in your admin, not the language of your store. You set the store language separately.

Shopify theme customization: how the theme editor works

You open the editor in your Shopify admin under Online Store. On the theme you want, click “Edit theme”. Older tutorials still show the button “Customize” here. It means the same thing.

The editor has three areas:

• Page selector at the top: This is where you switch between the homepage, product page, collection page, cart and other templates. If you only edit the homepage, you will otherwise wonder why the product page doesn’t change.
• Sidebar on the left: It shows the sections of the current page. Icons also take you to the theme settings and the app embeds.
• Preview: This is where you see your changes right away. You can switch between desktop and mobile view.

Sections and blocks: the building-block principle

According to the Shopify Help Center, a template consists of sections, which in turn consist of blocks. A section is, for example, “Image with text”. The blocks inside it are a heading, text and a button. You can add sections, move them by drag and drop, hide them or delete them. The same applies to blocks.

According to Shopify, up to 25 sections are possible per template. With themes from the Horizon family, you can also nest blocks inside each other. That allows freer layouts without code. You can read more about choosing a theme in Choosing a Shopify theme: free or premium.

Customize the header: logo, menu, announcement bar

The header appears on every page. So changes here take effect everywhere.

Add a logo instead of “My Store”

If your store name still appears as text at the top, no logo has been added yet. Click the header in the editor and upload your logo, depending on the theme directly in the header or in the theme settings under “Logo”. Shopify recommends PNG or JPEG for the default logo, at least 512 pixels wide and without borders or white space. Otherwise the logo looks smaller in the header than it should. You set the logo width with a slider. If the whole header grows when you do this, your logo is too tall or has white space at the top and bottom. Crop it tightly.

The logo in the checkout, by the way, is a separate setting. According to Shopify Help, you set it in the checkout editor under the checkout settings, not in the theme. How to create a logo and which formats you need is covered in Finding a store name and logo.

Link the menu

You don’t decide which items appear in the main menu in the theme editor, but in your admin under Content > Menus. In the header, you only choose which menu is displayed. Keep the main menu short: five to seven items are enough for most stores.

Announcement bar

The narrow bar above the header is suited to a single important message, such as “Free shipping from €50” or “Shipping in 1–2 business days”. Several rotating messages tend to distract.

Transparent or sticky header

Whether the menu sits directly over the hero image (transparent header) or scrolls along with the page (sticky header) depends on the theme. Many current themes offer both as a setting in the header section. If the option is missing, it only works with code. In that case, check out a different theme rather than reprogramming the header.

Build the homepage: sections in a sensible order

The homepage has to answer three questions within a few seconds: What is on offer here? Why buy here? Where do I click next? A proven order:

1. Hero image or slideshow: A clear image of your product in use, a heading with your value proposition, a button to your most important collection.
2. Bestsellers or main collection: The “Featured collection” section shows products directly on the homepage.
3. Benefits: Three to four short points such as shipping time, returns, origin, material.
4. Image with text: Briefly, who is behind the store and why it exists.
5. Reviews: Real customer testimonials build trust. More on this in Reviews and trust in your store.
6. Newsletter signup: Optional, but useful if you plan to do email marketing.

Products don’t show up on the homepage?

This is one of the most common beginner questions. Check in this order:

• Have you actually selected a collection in the “Featured collection” section (or similarly named)? Without a selection, the theme shows sample products.
• Is the product in that collection?
• Is the product active and published to the Online Store sales channel?
• Is the number of products shown in the section set high enough?

If you’re already stuck creating or publishing products, read Adding, importing and publishing products in Shopify.

If the homepage shows a lower price than the product page, that is usually normal: for products with variants, the collection shows the price of the cheapest variant.

Banner, slideshow and video

For a hero image, use the “Image banner” section; for several rotating images, the “Slideshow”. Most current themes also have a video section. There you can embed an uploaded video or a YouTube/Vimeo video.

Shopify doesn’t prescribe fixed pixel dimensions for banners; they depend on the theme. According to Shopify Help on theme images, an image can be at most 20 MB and 20 megapixels. Choose an aspect ratio that fits the section’s image area and set a focal point so the subject stays visible when the image is cropped.

Footer: legal pages, contact, newsletter

In Germany, the footer is more than decoration. This is where the links to your legal texts belong, so they can be reached from every page:

• Imprint (Impressum)
• Privacy policy (Datenschutzerklärung)
• Terms and conditions (AGB) and cancellation policy (Widerrufsbelehrung)
• Shipping and payment information
• Since 19.06.2026, also the electronic withdrawal function, meaning a clearly visible button for withdrawing during the withdrawal period

You create the texts themselves as pages or policies and link them via a separate footer menu. Which texts you need and where the warning-letter traps (Abmahnung) are is explained in Protecting your Shopify store against warning letters.

Other things that fit in the footer: contact details, social media links and a newsletter signup. How to make good use of signups is shown in Email marketing in Shopify.

With many themes, you hide the “Powered by Shopify” notice via Online Store > three-dot menu on the theme > “Edit default theme content”: filter for “Powered” and replace the text with a space. Some themes also have an option for this directly in the footer.

Theme settings: colors, fonts, cart

You control design across all pages in the theme settings, which you open via an icon in the editor’s sidebar. Typical areas:

• Colors: Define two to three brand colors and use color schemes for sections. Make sure there is enough contrast between text and background. Easily readable text also matters for accessibility.
• Typography: One font for headings, one for body text. More looks restless. A custom, downloaded font only works via file upload and CSS, not via the font picker.
• Cart: Whether a slide-out cart (drawer), a pop-up or a separate cart page appears is set here, depending on the theme. If the option is missing, your theme doesn’t support it.
• Favicon and social media links: The small icon in the browser tab and your profiles.
• Custom CSS: For small visual corrections, such as a button color the theme doesn’t offer. According to Shopify, this field exists in the theme settings (up to 1,500 characters) and per section (up to 500 characters). It has no effect in the checkout.

Pages, templates and forms

You create pages such as “About us”, FAQ or Contact in your admin under Online Store > Pages, not in the theme editor. So visitors can find them, you then link them in the main or footer menu.

A change appears on all pages?

According to Shopify, changes to a template affect all pages that use it. So a new section on “About us” also shows up on the FAQ page if both use the default template. The solution: in the theme editor, choose the template type in the page selector at the top, click “Create template”, and then assign it to the page in your admin under “Theme template”. It works the same way for products. The header and footer, on the other hand, apply to all pages. A different header per page is only possible with code.

Contact form and custom forms

The contact form is tied to the “contact” page template. If you deleted it, create a new page with this template. Additional required fields or custom forms need some code or a form app. For newsletter signups and pop-ups, there is the free Shopify Forms app. It appears in the editor as an app block or app embed, not in the normal section list.

Customizing the checkout: what works and what doesn’t

The checkout is not part of the theme, which is why it’s missing from the theme settings, unlike in older videos. According to Shopify Help on checkout design, you open it under Settings > Checkout, section “Configurations”, via “Customize”. On every plan, you can set:

• Logo with width and alignment, colors and fonts
• One-page or three-page checkout
• Address autocomplete, discount code field on mobile, app blocks

Deeper changes to the information, shipping and payment steps are reserved for Shopify Plus; multiple checkouts or custom code aren’t available on the regular plans. Which payment methods appear is set under Settings > Payments, see Setting up payment methods in Shopify. With many themes, you turn on express buttons such as PayPal or Apple Pay on the product page in the product information section as “dynamic checkout buttons”.

Customer accounts and login in the header

Whether customers can log in is set under Settings > Customer accounts. In the current customer accounts, customers sign in without a password using a six-digit code sent by email, or alternatively via Shop (with Shop Pay), Google or Facebook. In their account, they see their orders and their status. Shopify calls the old customer accounts legacy. If the login links are active, most themes show an account icon in the header. Requiring an account before purchase rarely makes sense: every extra hurdle costs orders.

When you do need code

For most beginner requests, you don’t need code. If you do:

• Check “Custom Liquid” first: Many themes have a section or block where you can insert small code snippets without changing theme files. What goes beyond that is shown in Customizing Shopify code: Liquid, custom code and when you need a developer.
• Only change theme files on the copy: According to Shopify, direct code changes are only carried over in theme updates if they don’t conflict with the update. Document every change.
• Apps instead of code snippets: Modern apps work via app blocks and app embeds. According to Shopify’s guide, you activate them in the editor via the “App embeds” icon and don’t have to copy anything into the code.

If you let a developer or app support into your store, use a staff or collaborator account with only the permissions that are really needed, for example only “Themes”. Never share your own password.

Before your store goes live, check the result on mobile and with real test orders. You’ll find the complete list in Launching your Shopify store. And the most important page of all deserves its own look: optimizing your product page.

FAQ

How do I add a product to the Shopify homepage?

In the theme editor, add the “Featured collection” or “Featured product” section to the homepage and select the collection or product there. The product must be active and published to the Online Store sales channel. If the section only shows sample products, you haven’t selected a collection yet. Also check how many products the section is set to display.

How do I get several images into a rotating banner?

Use the “Slideshow” section instead of “Image banner”. In it, you add a separate slide as a block for each image and can set a heading, text and button per slide. Whether the slides rotate automatically is set in the section settings. Less is often more here: many visitors only see the first slide, so the most important message should come first.

Can I show a video as a banner on the homepage?

Yes, most current Shopify themes have a video section. Depending on the theme, you upload the video directly or embed it from YouTube or Vimeo. Keep the file size small and make sure the video works without sound. External video platforms can set cookies and then belong in your cookie banner and your privacy policy.

Why does my store look different in the editor than in the live store?

Common reasons: you’re not editing the published theme but a draft. Or you haven’t saved the changes. Or your browser is showing a cached version. Check in the Online Store area which theme is live, save in the editor and reload the store in a private window. If elements look too large, check the mobile and desktop settings separately.

Can I design the mobile and desktop views differently?

Only to a limited extent. The editor shows both views, but most settings apply to both. Some sections offer their own mobile options, such as a separate image or a different text position. If they’re missing, create two sections and hide one each on mobile or desktop using custom CSS with a media query. Check every change in the mobile view.

Should I upload products first or do the design first?

Create a few products and collections first, then do the design. Many homepage sections show content from collections. With real products and photos, you see right away whether image formats, colors and fonts work together. With placeholders, every layout looks good and the surprise comes later.

Is it safe to give an app developer staff access?

Yes, if you limit the permissions. Shopify lets you choose individual permissions when granting access. Only grant what is needed for the specific problem; often “Themes” or “Apps” is enough. Theme support normally doesn’t need access to finances, payouts or customer data. Remove the access again once the work is done.

Last updated: October 2026. Labels in the theme editor differ depending on the theme and version. You’ll find current instructions in the Shopify Help Center on the theme editor.