Design your homepage and brand | Keepsake documentation

Build the homepage around the questions a shopper needs answered: what you sell, who it suits, what can be personalized and what happens after ordering. Each section should help with one of those decisions.

Set the visual foundation

Open the unpublished theme's editor, then Theme settings.

Under Typography, choose Heading font and Body font, including the available weight and style. Start with the supplied Heading size and Body size. Check your longest real heading before making the type larger. Decorative italic emphasis stays italic.
Under Colors, edit the color schemes together. Background, Text, Secondary text, Subtle background, Button and Button text should remain readable in combination. Choose Default scheme, then select a Color scheme for each section that needs a different treatment.
Under Layout and shape, set Page width, Space between sections and the button, input and image corner radii. Keep a consistent shape rather than changing every element independently.
Under Brand and social links, set Text logo if needed, Favicon, Default sharing image and your actual social destinations. An uploaded Header → Logo takes priority over the text wordmark.
Save and look at the hero, product cards, product page and bag together. Global settings affect more than the homepage.

Result: type, colors and controls share a consistent visual foundation. Recheck contrast after changing a color scheme; a previously readable combination may no longer work with your custom colors.

Change fixed interface wording

Some words belong to the theme interface rather than an individual section. To change a phrase such as Continue shopping:

In Shopify admin, open Online Store → Themes and find the Keepsake theme you are editing.
Open that theme's three-dot menu and choose Edit default theme content.
Use Filter items to search for the existing phrase. Check each matching row's context; the product page, quick shop and bag can use separate messages.
Edit the appropriate wording, save, then open the same theme's storefront preview and check the affected control.

Result: the selected interface wording changes for that theme in the store's default language. The control's behaviour stays the same. Keep button labels clear and preserve placeholders such as {{ count }}, {{ price }} or {{ title }} exactly when they appear in a message; these insert changing values. Check singular and plural versions where both are available.

Content you want to change	Where to edit it
Fixed buttons, status messages and empty-state wording	Edit default theme content for the correct theme.
Your hero headline, section copy or field label	The corresponding section or block in the theme editor.
Product titles, product descriptions or Page content	That resource in Shopify admin.
Text or messages owned by an app	The app's settings or translation tools.

If a phrase is not found, check the other locations in this table before editing theme code. If a saved change is not visible, confirm you are previewing the theme you edited and the default language. Shopify explains this editor in Changing theme wording.

Understand languages and markets

Keepsake includes English storefront interface text. It does not include a ready-made set of additional language translations. Changing its English wording is separate from publishing another store language or translating your own content.

Use Shopify's language and translation tools for additional languages, and configure your markets in Shopify admin. Translate product and Page content, section text and app-owned content as needed; changing the interface language does not translate all of these automatically. See Shopify's language guidance.

The footer's Show language selector and Show country / region selector display the options made available by your store configuration. They do not add languages, translations or currencies. Follow Footer setup, then check the actual public storefront in each language or market you intend to offer. Do not assume that an app's translation or a right-to-left layout has been verified simply because a selector is visible.

Choose the order of your sections

Start with the supplied Keepsake layout recipe. In the homepage's section list, move a section to change its order, use its visibility control to hide it, or choose Add section to introduce another module. Save when you finish.

A useful sequence is:

One opening hero with a clear product image, short promise and useful shopping link.
A way to shop: collection cards, a product grid or a configured Gift finder.
A short explanation of personalization or what makes the product worth choosing.
A closer look at materials, use, packaging or the making process.
Answers to important buying questions, followed by the footer.

Alternate a useful image or product section with short text instead of stacking several large slogans. Avoid repeating the same catalogue in several modules unless each selection has a clear purpose.

The section's name in the sidebar can differ from the preset name in Add section. For example, Curated product tabs adds Product collection tabs, and Materials and little details adds Editorial image grid. The section library lists what each module does.

Make the opening fit your content

For Editorial hero, use Heading and Italic line for a short opening statement. Set Heading level → Main page heading for the page's main opening; use Section heading when adding another editorial panel lower down. Avoid several main headings on one page.

Choose Presentation → Open editorial for a photograph beside quieter text with space between them. Framed editorial keeps both panels inside one frame; Edge to edge fills the section width. Select Text panel color scheme to suit your image, and leave Show decorative mark, Small caption and Image caption off or empty when they do not add useful information. You do not need every optional element in one opening.

For Simple gift hero, keep the heading concise and choose Desktop image position and Mobile order after viewing your real image. It supplies the main page heading, so use one as the opening rather than repeating it down the page.

Both heroes support a separate Mobile image. Choose Image fit → Fill frame for a deliberate crop or Show full image to preserve the whole photograph. Set Mobile image shape and check the result on the phone preview. If only a mobile image is selected, it is also used as the desktop fallback.

Give each visible button a label and a working destination. The supplied #how-it-works link needs its matching explanation section. Use #gift-finder only after configuring and keeping that finder visible.

Use your own product photography

Under Product cards, choose a consistent Image ratio, Card style and Text alignment. Under Shopping experience, set Product photo fit:

Show the whole product suits white-background photographs, framed artwork and products whose edges must stay visible.
Fill the card suits consistent lifestyle photographs with room around the subject for cropping.

Use Product title length → Show full title when all the words matter. Two lines makes a denser grid, but inspect your longest actual titles and make sure shoppers can still reach the complete product information.

Under Product cards, Show native color swatches displays up to five configured color or image choices, with a link for any remaining choices. Assign native swatches to the product's option values in Shopify first; a row appears only when an option has several choices and every value has a swatch. The theme does not guess colors from arbitrary names. Hovering or focusing a swatch can temporarily show its real variant image; choosing it opens the corresponding product configuration. Personalized items still need their required details. Turn this setting off for a simpler grid.

Merchant-selected images take priority over samples. When the store is ready, turn off Sample photography → Show sample photos in empty image sections and remove or finish sections that still need media. Turning off samples does not add replacement photographs to your catalogue.

See Product details and media for image shapes, focal points and video.

Add motion with a purpose

In Layout and shape, use Enable motion and image hover effects and Scroll reveal style to set the general treatment. Reduced-motion preferences take priority. You do not need motion in every section to make the store feel finished.

Use one calm Statement marquee for a meaningful brand line, or a static Service text strip for helpful links. Keep important delivery or product information readable without waiting for an animated message. Follow Scrolling text and motion for the individual controls and pause behaviour.

Common mistakes

The store has too much empty space. Check both Top spacing and Bottom spacing on the adjacent sections as well as the global spacing. Remove empty content modules instead of filling them with repeated slogans.

A product is cut off. Change image fitting or supply a better crop before shrinking every image. A hero, product card and product gallery have separate fit settings.

A global font seems different in one phrase. An intentionally italic line remains italic. Other text follows the selected heading or body font; inspect the actual weight/style selection as well as the family name.

New colors look attractive in the hero but weak in the bag. Review every scheme on small text, form fields and buttons. Keep secondary text readable against both the main and subtle backgrounds.