Home page and other sections
Sections are the building blocks of your pages. Add them with Add section in the theme editor, drag them into order, and hide or remove the ones you don't need. They work on the home page, and on any other template: product pages, collections, pages and so on.
Settings every section has:
- Color scheme: the section's colors. See Theme settings.
- Top padding and Bottom padding: the space above and below the section. Phones get two thirds of it.
- Eyebrow, Heading and Text, in most sections: a short line above the heading, the heading itself, and a sentence or two below it. Leave any of them blank to leave it out.
Slideshow
Large images with a heading, text and buttons, one at a time.
Each slide is a Slide block, with:
- an Image, and an optional Mobile image for phones, for example a taller crop
- a Color scheme for its text and buttons, and an Overlay opacity that darkens the image so text stays readable
- a Content position: nine positions, from top left to bottom right
- an Eyebrow, Heading, Text, a button and an optional second button. The Second button style can be an Outline button or a Text link.
For the whole slideshow:
- Width: Page width with rounded corners, or Full width.
- Height: Small, Medium, Large, or Adapt to image, which follows the first slide's shape.
- Show previous and next buttons and Show slide indicators: the controls at the bottom. Their colors come from Controls color scheme.
- Rotate slides automatically: off by default. When it's on, slides change every Time per slide seconds, pause while a shopper points at or uses them, and have a pause button. Shoppers who turn off animations on their device see slides only when they choose them.
On touch screens, shoppers swipe sideways to change slides.
Images at least 1920px wide look sharp on large screens. Set a focal point on each image (in the image picker or in Content > Files) to keep the important part in view when the image is cropped.
Product grid
Products from a collection, as product cards.
- Collection: the collection to show. Until you choose one, the grid shows placeholder cards.
- Products to show, Columns on desktop and Columns on mobile.
- Show as a carousel on mobile: a row that shoppers swipe through, instead of a grid.
- Show "View all" link: a link to the whole collection.
- Hide sold-out products: leaves out products that can't be bought.
- Products of one product type: shows at most this many products of one type, so one kind of product can't fill the grid. 0 means no limit.
The grid chooses from the first 50 products in the collection, in the collection's sort order.
Collection list
Collections as tiles, each with its image and title. Add a Collection block for each collection, with an optional Subtitle. A collection without an image shows its first product's image.
Show product count adds the number of products to each tile. Show link to all collections adds a link to your collection list page.
Logo list
A row of logos, such as the brands you stock. Each Logo block has an Image, a Name and an optional Link, for example to that brand's collection.
- Until you upload an image, a logo shows a logo icon and its name. The name is also the image's description for screen readers.
- Logo height: the height of every logo.
- Scroll slowly: moves the row sideways in a loop, with three or more logos. It pauses when a shopper points at it, has a pause button, and stays still for shoppers who turn off animations.
Use brand logos only with the brand owner's permission.
Multicolumn
Short items, each with an icon, a heading and text. Good for reasons to buy from you, or how your service works.
- Layout: Text on the left puts the section's heading beside the items; Text above puts it on top.
- Columns on desktop: how many items sit side by side.
- Each Item block has an Icon, a Heading and Text.
Call to action
A colored band with a heading, text and one button. By default it says "Looking for a specific part?".
Leave Button link blank to send shoppers to your request page (Theme settings > Stock source > Request page), with the part request type chosen. With neither a link nor a request page, the button is hidden.
Image with text
An image beside a heading, text and a button.
- Image position: Left or Right on desktop. On phones the image sits above the text.
- Image ratio: Adapt to image, Square or Landscape (4:3).
Rich text
A heading, text and a button, on their own. Add Panel blocks below them for short notes side by side, each with an optional link: offers, opening times, or anything else worth a box.
- Alignment: Left or Center.
- Content width: Normal or Narrow.
FAQ
Questions that open to show their answers. Each Question block has a Question and an Answer.
Add FAQ structured data gives search engines your questions and answers. Use it in one FAQ section per page. Search engines decide whether to show them in results.
Newsletter
An email signup with a heading and text. Signups are saved in Customers as customers who accept email marketing, tagged newsletter.
Blog posts
The latest posts from a blog, as cards. Choose the Blog and how many Posts to show. Each card can show the featured image, date, author and an excerpt; turn each on or off. Show "View all" link links to the blog.
Contact details
Cards for each way to reach you: phone, email, WhatsApp, opening hours and address. It's on the contact page to start with; see Contact page and part requests.
Featured product
One product with its images and buy buttons, so shoppers can buy it straight from the home page or any other page. See Product pages.
Product recommendations
Products related to the one a shopper is viewing. It works on product pages only; see Product pages.
Recently viewed products
The products this shopper looked at last, newest first, as product cards. It helps shoppers get back to a part they were comparing. The product on screen is left out.
- Products to show, Columns on desktop and Columns on mobile.
- The list is kept in the shopper's own browser. Nothing is sent to you or anyone else, and each shopper sees only their own products.
- Until a shopper has viewed another product, the section stays hidden. In the theme editor it shows a note instead; open a few products in the preview to see it filled.
It's on product pages to start with, and works on any page.
Custom Liquid
For your own Liquid or HTML code, for example a snippet an app asks you to add. Code that doesn't work can break the page, so check your store after adding it.
Apps
Holds blocks from apps you've installed, so you can place an app anywhere on a page. Add the Apps section, then add the app's block inside it. Keep page width keeps the app's content in line with the rest of the page.