Prominent theme documentation

Everything you need to set up, customise and get the most out of Prominent. If something here doesn't match what you see in your theme editor, you may be on an older version — check Online Store → Themes for an update.

Installing the theme

In your Shopify admin go to Online Store → Themes.
Find Prominent under Theme library and click Add. It installs as a draft — your live store is untouched.
Click Customize to open the theme editor.
When you're happy, click Publish.

Before you publish. The theme arrives with placeholder content so you can see how each section is meant to look. Work through the home page section by section and swap in your own images, headings and collections. Anything you leave empty simply doesn't render — the theme never shows a broken block.

Updating later

Theme updates install as a new draft alongside your current one. Your content lives in your Shopify admin — products, collections, pages, menus — and is picked up automatically, but section settings are not carried across. Set the new version up, preview it, then publish. Never edit your live theme directly; duplicate it first.

How the theme is organised

Three layers, and knowing which is which saves a lot of hunting.

Layer	Where	What it controls
Theme settings	Gear icon, bottom left of the editor	Store-wide: fonts, colours, corner radius, product card style, cart behaviour. Change once, applies everywhere.
Sections	The list in the left panel	A band of content on a page. Add, remove and reorder by dragging.
Blocks	Nested inside a section	The repeating items within a section — a slide, a tile, a review, a product page module.

Almost every section shares the same three settings at the bottom: Color scheme, Top padding and Bottom padding. Alternating colour schemes down a page is the quickest way to make it feel considered rather than flat.

Colour schemes

The theme ships six schemes. Each defines a background, text colour, button colour, button label, outline and shadow. Because every section picks a scheme rather than individual colours, you can restyle the whole store from one place and nothing goes out of step. Edit them in Theme settings → Colors.

Image sizes at a glance

Every image setting in the theme states its recommended size in the help text underneath. The most-used ones:

Where	Size	Notes
Slideshow — desktop	2400 × 1000 px	12:5. Keep every slide identical.
Slideshow — mobile	828 × 1104 px	3:4 portrait.
Product images	2048 × 2048 or 1600 × 2000 px	Same ratio for every image, or the grid jumps.
Collection images	900 × 900 or 900 × 1200 px
Collage — large tile	1200 × 1000 px	Small 700 × 500, tall 700 × 1000.
Shoppable video	1080 × 1920 px	9:16, MP4, 10–30 s, under 20 MB.
Logo	450 × 150 px	Transparent PNG or SVG.
Favicon	96 × 96 px	Square PNG.

Keep files small. Most image settings suggest a maximum file size. Staying under it is the single biggest thing you can do for your store's speed score. Export as WebP where you can, JPG otherwise, and avoid PNG for photographs.

Theme settings

Logo

Setting	What it does
Logo	Used in the header, footer and Shopify emails. Transparent PNG or SVG, 450 × 150 px.
Light logo (for dark backgrounds)	Optional. Shown on dark colour schemes and over a transparent header.
Desktop logo width / Mobile logo width	Display width in pixels.
Favicon	96 × 96 px square PNG, scaled down to 32 × 32.
Show in header	Logo only, Store name only, or Logo and store name stacked as one lockup. With no logo uploaded, the store name shows regardless.

Whether the brand sits centred or to the left is a separate setting — Header → Desktop layout.

Colors

Two parts. The six colour schemes define the backgrounds and text used across sections. Below them sit the accent colours, which are semantic — they mean something rather than just looking a certain way: sale price and savings text, sale badge background and text, sold-out badge, 'New' badge, star ratings, success/in stock, and error/urgency. These stay consistent whichever scheme a section uses, so a sale price always reads as a sale price.

Typography

Setting	What it does
Heading font	Serif faces such as Cormorant or EB Garamond give an editorial, luxury feel. Grotesques such as Work Sans or Archivo read modern-premium.
Heading size scale	Scales every heading proportionally. 100 is the design default.
Uppercase headings
Heading letter spacing	In hundredths of an em. A little positive tracking suits uppercase headings; leave at 0 for serifs.
Body font / Body size scale

Layout, buttons and cards

Layout — Maximum page width caps how wide content grows on large monitors, Default space between sections sets the page's rhythm, and Grid gap controls the space between cards.

Buttons & inputs — Button corner radius is the fastest way to change the theme's personality: 0 reads architectural, 40 reads soft and contemporary. Also here: uppercase button labels, outline border thickness, input corner radius.

Cards — the shared look: corner radius, borders, hover shadow.

Product cards

Controls what every product card shows, everywhere in the store.

Setting	Notes
Image aspect ratio	Adapt to image, square, portrait 3:4 or landscape 4:3. Upload everything at one ratio or the grid looks uneven.
Show second image on hover	Uses the product's second image.
Show product rating	Reads the `reviews.rating` metafield, which review apps like Judge.me, Loox and Okendo fill in.
Show placeholder stars when no rating data	Five empty stars with no count, until a review app supplies real data.
Quick add to cart	None, a button below the card, or an icon on the image.
Show color swatches	Reads variant options named Color or Colour and renders clickable dots.
Sale badge style	Percentage, amount saved, or plain text.
Show 'New' badge for products published within	In days. Set 0 to disable. You can also force it on any product with the tag `new`.

Cart

Cart type is a drawer (recommended) or a full page. Show free shipping progress bar adds a bar showing how far the shopper is from free shipping, and Free shipping threshold sets the number.

Important: the threshold is display only. It does not create a shipping rate. Set a matching free-shipping rate with a minimum order value in Settings → Shipping and delivery, or the cart will promise something checkout doesn't deliver. A useful starting point is your average order value multiplied by about 1.3 — high enough that shoppers add an item to reach it, low enough that they believe they can. Set it below your cheapest product and it does nothing at all.

Search, animations and motion

Search — enable predictive search, and choose whether suggestions show price and vendor.

Animations — Reveal sections on scroll and Subtle hover animations. Both respect a visitor's reduced-motion preference automatically.

Header & showcase motion — Menu style switches between Simple (flat) and Elevated (3D glass), which adds translucency, layered shadow and raised pill links. Three showcase rows can each scroll horizontally with their own autoscroll interval, and 0 turns an autoscroll off. Reviews slide over each other stacks review cards so the focused one sits in front. All of it pauses on hover, on touch, when scrolled off screen, and for reduced-motion visitors.

Social media and back to top

Social media takes full URLs for Instagram, Facebook, YouTube, TikTok, X, Pinterest, LinkedIn, Snapchat, Telegram and Vimeo. Only the ones you fill in appear, and the Instagram URL becomes the default link for the Instagram gallery section.

Back to top sits bottom-left or bottom-right, automatically clearing the mobile dock. If your chat bubble is on the right, put this on the left.

Header

Setting	Notes
Menu	Which navigation menu to use. Build menus in Admin → Content → Menus.
Desktop layout	Logo center, menu left or Logo left, menu inline.
Sticky header	Always sticky, show on scroll up, or not sticky.
Transparent over first section on home page	Looks best over a full-width image or video banner. Pair with the light logo for dark imagery.
Show dark mode toggle	A moon/sun button switching the whole store between light and dark. On phones it moves into the menu drawer. The visitor's choice is remembered; everyone starts on light.
Show search / account / wishlist	Header icons. The wishlist needs a page — see below.
Search placeholder / Popular searches	Popular searches is a comma-separated list shown in the empty search drawer.
Support link text / Support link	Shown at the bottom of the mobile menu drawer.

Mega menu

A mega menu is a block inside the Header section. It turns one top-level menu item into a full-width panel with columns and featured content.

Build the navigation first, in Admin → Content → Menus. The item you want to expand needs sub-items, and each of those can have its own sub-items. Those three levels become the trigger, the column headings, and the links inside each column.
In the theme editor, open Header and add a Mega menu block.
Set Menu item title to the exact title of the top-level item. If the menu says "Shop", type Shop. This is the most common thing to get wrong — a mismatch means the panel silently doesn't appear.
Optionally add featured content on the right: two promo images with labels and links at 600 × 750 px, or set Or feature products from collection to show the first two products from a collection instead.

Add one block per menu item that needs a panel. Items with sub-links but no matching block fall back to a simple dropdown.

Announcement bar

Three styles: Static shows only the first message, Auto-rotate cycles them, Continuous scrolling runs them as a marquee with its own speed, direction and gap. Each message block has text, an optional link and an icon. Show close button lets a visitor hide the bar for the rest of their visit. The utility links group adds small desktop links — order tracking on the left, up to two on the right — in the static and rotate styles only.

Mobile bottom menu

An app-style bar fixed to the bottom of the screen on phones. Up to five items, each with an action: open a link, open the menu drawer, open search, open cart, account, or wishlist. Hide when scrolling down gets it out of the way while browsing.

Footer

Built from blocks on a twelve-column grid — each block has a Width (columns of 12) setting, so three blocks of 4, or 4 + 2 + 2 + 4, both fill a row.

Block	Contains
Brand / text	Logo toggle, heading, text
Menu	Heading plus a menu. Use a different menu for each column, or both columns show the same links.
Newsletter	Heading, text, input placeholder
Social icons	Reads the URLs from Theme settings → Social media
Contact info	Address, phone, email, hours
Image / badge	Certificates, press badges, app store buttons. 440 × 220 px PNG.

Section-level settings cover payment icons, policy links, country and language selectors, the Follow on Shop button, a copyright suffix, and a company/compliance line for registration or VAT numbers.

Don't duplicate your policies. Turn Show policy links on and let Shopify supply them — it links the real /policies/… URLs that checkout also uses. Creating separate policy pages and linking those instead leaves you maintaining two copies that drift apart.

Home page sections

Slideshow

The full-width hero. Two styles: Editorial gives progress bars, a pause control and a ring arrow, and always cross-fades. Classic uses simple arrows and lets you pick Fade or Slide. Accent colour drives the progress ring and the hero's primary button.

Each slide takes a desktop image (2400 × 1000 px) and an optional mobile image (828 × 1104 px), an eyebrow, heading, text and up to two buttons, with a nine-position content grid, light or dark text, and an overlay so words stay readable over a busy photo.

Two things worth knowing. Keep every slide the same image size or the hero height jumps between slides. And upload a mobile image — a landscape hero cropped to a phone screen loses whatever the shot was about, and the mobile image is what a phone visitor downloads, so it's also the fastest path to a good speed score.

Image banner

A single-image band, built from blocks: eyebrow, heading, text, buttons and a countdown that takes an end date as YYYY-MM-DD HH:MM in the visitor's local time and hides itself once passed. Show content below image on mobile is useful when text won't sit legibly over a photo on a narrow screen. Set Image loading to Eager only if this is the first section on the page.

Video banner

Sources are tried in order: Shopify-hosted video, then YouTube/Vimeo, then a direct .mp4 URL. Shopify-hosted is best — no third-party branding and the most reliable autoplay. Supply a poster image so there's something on screen while it loads, and a separate vertical mobile video if you have one. Videos play muted, so don't rely on audio to carry the message.

Product spotlight 3D

A scroll-driven hero for one product. The stage pins in place while the page scrolls, and each feature step swings the product through a different arc and switches to that step's photograph — the effect is walking around the object.

Choose the product.
Add three to five Feature step blocks. Each takes an Angle image — that step's view of the product, from the front, side, a detail, the back — at 1000 × 1250 px, plus a heading and a short paragraph.
Set Scroll length per step. Longer feels slower and more cinematic.

The photography is the whole section. Shoot on the same background, at the same distance, with the same lighting, and rotate the product between frames. If the shots don't line up, the turnaround reads as a slideshow. Leave the angle images empty and it falls back to the product's own photos in order, which works but rarely as well.

Collage

An editorial mosaic mixing images, video, products and collections. The classic arrangement is one Large tile plus two to four small ones. Four block types — image, video, product and collection — each with a tile size of Large (2×2), Wide (2×1), Tall (1×2) or Small (1×1). Phone layout decides what happens below 750 px: a swipe row with the centred tile raised, or the stacked mosaic.

Promo tiles

A grid of linked promotional cards. Each tile has an image, ratio, a Tile emphasis (normal, tall across two rows, wide across two columns), an optional corner badge like "New" or "-30%", heading, text and a link.

Collection list

Your categories as cards, in a grid or carousel. Card style offers title below image, title over image, or round category bubbles — round always uses square images. Each block can override the collection's own image and title, useful when your merchandising names differ from your customer-facing ones.

Featured collection

A row or grid of products from one collection. Maximum products caps how many appear — in carousel layout the rest are reachable by scrolling, in grid layout they simply aren't shown. Peek next card on mobile leaves part of the following card visible, which is the clearest possible signal that a row scrolls.

Shop the look

A lifestyle photograph with a pin on each product; clicking a pin swaps the card alongside.

Upload the lifestyle image at 1800 × 1500 px. Leave breathing room around each product so pins don't land on a busy edge.
Add a Pinned product block per item, then set Pin — across and Pin — down as percentages to place it.
A block works without a product too — fill in card image, title and price manually for something you don't sell directly.

Active pin colour should contrast with your photograph, not your brand palette.

Image hotspots

Similar idea, different use: pin products or notes onto an image. Each hotspot takes a position and then either a product, or a note title and text — good for annotating materials, ingredients or construction details rather than selling.

Shoppable videos

Reels-style vertical videos, each tagged with a product. Tapping a tile opens a fullscreen story player with swipe, sound and add-to-cart. Shoot at 1080 × 1920, 10–30 seconds, under 20 MB — vertical phone footage is exactly right. Autoplay tiles silently only plays videos while they're on screen, to protect performance.

Always add a cover image. Shopify-hosted videos generate one automatically; external videos don't, and without a cover the tile shows a blank frame until the video downloads.

Reviews and social proof

Testimonials — written quotes, carousel or grid. The Spotlight carousel effect enlarges the centre card and fades its neighbours, and pairs well with autoplay. An aggregate rating can sit above the heading.

Photo reviews — a wall of customer photographs with ratings and captions, tap to zoom, each optionally linking to a product.

Video testimonials — UGC-style customer videos with quotes and star ratings, in the same fullscreen story player.

Logo list / press — press logos as a centred row or scrolling marquee. Grayscale until hover keeps a row of mismatched logos tidy.

Instagram / UGC gallery — a grid or marquee of social images. Tagging a product turns a post into a shoppable card with price and add-to-cart.

Content sections

Image with text — image, video or YouTube on one side, blocks on the other: eyebrow, heading, text, a checklist, buttons, and a stats row for three number-and-label pairs.

Multicolumn — two to six columns with an image or icon, heading, text and link. Show step numbers turns the section into a "How it works" sequence, which is the quickest way to explain a process without building anything custom.

Rich text — eyebrow, heading, text and button on a plain colour scheme, with a narrow width option for readability.

Scrolling text and scrolling images — marquees of phrases or pictures, with size, speed, direction and separator control. Both pause on hover.

Blog posts — grid or scrollable carousel from a chosen blog, with date, author and excerpt toggles.

Divider / spacer — vertical space with an optional line. Useful between two sections sharing a colour scheme.

Conversion sections

Before / after — a drag-to-compare slider. Both images must share exactly the same size and framing, or the comparison reads as a mistake.

Comparison table — the "us versus them" table. Keep the claims specific and honest; vague superiority reads as marketing, verifiable facts read as confidence.

FAQ — accordion questions, optionally two columns, with category headings. Add FAQ SEO markup outputs structured data so answers can appear directly in search results — worth enabling.

Countdown banner — a fixed deadline, or an evergreen timer that restarts per visitor. If you use evergreen, make the offer genuinely available for that window; it's the easiest way to lose a customer's trust permanently.

Newsletter — centred or split with an image, with an optional discount code revealed after signup. Create the code in Admin → Discounts first.

Bought together — a cross-sell bundle with a combined price and one add-to-cart. The first block can follow whichever product page it appears on.

Recently viewed hides itself until there's something to show. Product recommendations uses Shopify's own engine — Related for similar products, Complementary for pairs-well-with, configured in Search & Discovery.

Quick order list — a bulk order table for wholesale buyers, with quantities respecting B2B rules.

Product, collection and cart

Product page

Section settings control the frame; everything in the buy column is a block.

Setting	Notes
Desktop gallery layout	Thumbnails below, thumbnails left, or a 2-column grid.
Media aspect ratio	Upload at 2048 × 2048 or 1600 × 2000 and keep every image the same ratio.
Sticky gallery on desktop	Images stay put while the buy column scrolls. Good for long pages.
Variant picker style	Pills with colour swatches, or dropdowns. Pills read better up to about six options; beyond that use dropdowns.
Sticky add-to-cart bar	A slim bar appearing once the main button scrolls out of view.

There are a lot of blocks available. You won't want all of them — a page with every block enabled is exhausting to read. Start with title, price, variant picker, buy buttons and description, then add only what answers a question a customer actually asks.

Block	What it adds
Price	Optional % OFF badge (`[percent]` is substituted into your badge text), tax-included note, and an installments teaser. The teaser is informative only — real providers appear at checkout.
Star rating	Reads the `reviews.rating` metafield. Fallback text shows something like "Rated 4.9 by 2,000+ customers" when no app is installed; leave it empty to hide the block instead.
Stock status / scarcity	Real inventory. "Only X left" appears when stock reaches your threshold, with an optional meter. It reflects actual stock — it can't be faked, which is the point.
Delivery estimator	Calculates a window from min/max days, an order-by cutoff hour and whether to skip weekends. `[from]` and `[to]` in the result text are replaced with dates.
Shipping & returns	Three icon-and-line rows plus a link to your full policy page.
Product highlights	One per line. Can be overridden per product by a `custom.<key>` metafield.
Collapsible tab / Product tabs	Repeatable accordions, or a true four-tab panel. Tab 1 can show the product description.
Ingredients	Text plus an optional table — one row per line as `Name \| Value`. Built for nutrition panels and material breakdowns.
How to use	Numbered steps, one per line.
Size chart	Links a page containing your size table, opened in a side drawer.
Offers & coupons	Up to three offers with tap-to-copy codes.
Back-in-stock alert	Appears only when the variant is sold out. Requests arrive in Admin under Customers as a contact submission.
Volume pricing	B2B quantity breaks. Invisible unless the customer is in a company location with volume pricing set.
Custom Liquid	For app snippets — review widgets, bundles, wishlist apps.

Collection page

A hero banner using the collection's own image, with a fallback for collections that don't have one. A sub-category pill menu adds a scrollable row of related collections. Filters can sit in a sidebar or a drawer on desktop — which filters exist is configured in Admin → Search & Discovery, not in the theme. Pagination can be numbered pages, a "Load more" button, or infinite scroll.

The Promo card in grid block injects a merchandising card between products at a position you choose. Match its image to your product card ratio so the grid keeps its rhythm.

Cart drawer

The slide-out cart. Note the free shipping bar itself is configured in Theme settings → Cart, not here.

Group	What it does
Announcement inside cart	One line, e.g. "Orders placed before 2pm ship same day."
Upsells	Products from a chosen collection. Anything already in the cart is hidden automatically.
Steal deals	A flash-offer strip of discounted add-ons. Only the chosen collection is promoted — sitewide prices stay untouched. Create a matching code in Admin → Discounts, limited to that collection.
Tools	Discount field, order note, gift message, gift wrap. For gift wrap, create a product (e.g. $5) and select it — a checkbox then adds or removes it.
Summary	Total savings line, and an optional terms agreement with a linked page.
Empty state	Text, a button and a quick links menu, so an empty cart still offers somewhere to go.

Wishlist

Products a visitor hearts are stored privately in their browser. No app and no customer account needed.

Create a page in Admin → Content → Pages called Wishlist.
In the theme editor set that page's template to wishlist.
In Header, turn on Show wishlist and select the page.

Contact form

A form builder. Add, rename and reorder field blocks: name, email, phone, text, number, date, link, dropdown, checkbox, message and paragraph. Each field's Label is also the field name in the email you receive, so name them for your own inbox, not just the visitor. The optional info column holds an address, phone, email, hours and a Google Maps embed.

Popups, apps and dark mode

Popup — newsletter or promo. Triggers after a delay, after scrolling, or on exit intent; whichever fires first wins. Six to ten seconds converts better than firing immediately. On mobile it stays compact to comply with Google's interstitial guidelines. A teaser tab can remain after dismissal so the offer isn't lost.

Age verifier — blocks the storefront until the visitor confirms their age, remembered on their device. Preview inside the editor is off by default so it doesn't block your own work; remember to test it on the live preview.

Chat button — WhatsApp, Messenger, or a custom link to any live chat or email, with a greeting bubble and delay.

Working with apps — three routes. The Apps section hosts an app block anywhere on a page, which is cleanest when supported. The Custom Liquid section takes an app's HTML or Liquid snippet as its own band. The Custom Liquid block on the product page is for widgets that belong inside the buy column. Product card and product page ratings read the standard reviews.rating metafield, so most review apps light those up with no extra work.

Dark mode — turn on Show dark mode toggle in the Header section. Dark mode remaps every colour scheme rather than inverting the page, so your accent colours, badges and imagery stay intentional. Preview your home page in both.

FAQ

I published the theme and my home page looks empty

Section settings don't transfer between theme versions or installs. Open the theme editor and build the home page — the theme ships with a default arrangement you can start from.

My mega menu isn't showing

Three things to check, in order. The menu item must have sub-items in Admin → Content → Menus. The Header must have a Mega menu block. And Menu item title must match the menu item's title exactly, including capitalisation. A mismatch fails silently.

The free shipping bar says one thing and checkout charges another

Theme settings → Cart → Free shipping threshold is display only. It doesn't create a shipping rate. Set a matching free-shipping rate with a minimum order value in Settings → Shipping and delivery.

Product images look inconsistent in the grid

Set one Image aspect ratio in Theme settings → Product cards, then upload every product image at that ratio. Mixed ratios with "Adapt to image" produces a ragged grid.

My star ratings are empty

Ratings come from the reviews.rating metafield, which a review app fills in. Without one, turn on Show placeholder stars when no rating data, or turn ratings off until you have reviews.

Videos aren't autoplaying

They play muted — browsers block autoplay with sound, and no theme can override that. Also check the file is under the recommended size; a large file may not have loaded yet.

A section scrolls sideways on my phone but not on desktop

That's the Phone layout setting, which several sections have. Swipe row turns the grid into a horizontal strip below 750 px; Stacked keeps the original layout.

How do I make a section full width?

Sections that support it have a Full width or Narrow width toggle. Overall page width is capped in Theme settings → Layout → Maximum page width.

Can I edit the theme code?

You can, but duplicate your theme first and edit the copy. Code changes aren't covered by theme support, and they don't survive a theme update — you'd need to reapply them each time. For anything substantial, consider hiring a Shopify Partner.

My store feels slow

In order of impact: compress your images and respect the recommended file sizes; remove apps you're not using; don't set every image to eager loading; keep video files under 20 MB. Image weight is almost always the cause.

Support

We fix bugs in the theme and answer questions about how it works. Get in touch through the support form and we'll reply within two business days.

What's covered: anything the theme itself does — a section not behaving as documented, a layout problem, a broken link, help finding the right setting.

What isn't: custom code written for your store, third-party app behaviour, and general Shopify account questions, which Shopify's own support handles better than we can. If you need custom work, a Shopify Partner is the right call, and we're happy to point you in a sensible direction.