Customize
Sections
A reference of every section you can add with the Loco theme, with its settings, blocks, recommended image sizes and what it shows when empty.
This page lists every section you can add to a page in the theme editor. To add one, open the page in the theme editor, select Add section in the sidebar and choose it from the list. Sections that belong to one page, such as the product page or the cart, are covered in Product page, Collections, search and filters and Cart. The header and footer have their own page: Header and footer.
Most sections can go on any page. Exceptions:
- Product recommendations can be added only to product templates.
- Rich text, Trust badges and Email signup can also go in the footer group.
- Custom Liquid can go anywhere, including the header and footer groups.
Settings most sections share
Many sections have the same settings. They work the same way everywhere, so the entries below list them without repeating the explanation.
| Setting | What it does |
|---|---|
| Heading | The section's heading. Leave it empty to show none. |
| Text | A short text under the heading. |
| Link label and Link | A text link under the heading and text, such as "View all". It shows when both are filled in. |
| Heading position | Margin column: on screens 990px and wider, the heading, text and link stand in a narrow column beside the content. Above content: they stand above the content. On smaller screens they always stand above. In both cases the section starts under a thin line across its width. |
| Color scheme | The section's colors. See Color schemes. |
| Section spacing | Space above and below the section: Small, Medium (default) or Large. |
Sections that crop an image keep its focal point in view. To choose what stays in view, set the image's focal point in Shopify when you select the image.
Most empty sections are not shown in your store. In the theme editor they show a short hint in their place, so you can see what to fill in. The entries below say when a section shows example content instead.
Promotions
Slideshow
Large slides, each with an image and a heading, text and button on their own panel, never on top of the photo. When Design style in theme settings is Soft panels, the Loco default, the image stands as a cutout on the panel, with your Background text behind it.
| Setting | What it does | Default |
|---|---|---|
| Auto-rotate slides | Moves to the next slide on its own. Customers can always pause it. | Off |
| Change every | Time on each slide, 5 to 10 seconds. Shows when auto-rotate is on. | 7 s |
| Background text | The large word behind the image. Shown when Design style is Soft panels, the Loco default. Leave it empty to show none. | Empty |
Also: Color scheme, Section spacing.
Slide block, up to 10:
- Image: 2000 x 1200px recommended. With the Soft panels design style, use a .png with a transparent background.
- Mobile image: shown on phones, below 750px wide, in place of Image. 1200 x 900px recommended. If you add only a mobile image, it shows on every screen.
- Heading (default "Name this slide"), Text, Button label (default "Shop all"), Link (default all products). Link shows once the button label is filled in.
When empty: a slide without an image shows a placeholder image. A slideshow without slides is not shown.
Image banner
One wide image with a heading, text and up to two buttons above it. The image is cropped to 16:9.
| Setting | Notes | Default |
|---|---|---|
| Image | 16:9 aspect ratio recommended. | Empty |
| Heading | "Name this image" | |
| Text | A short prompt | |
| First button label, First button link | The link shows once the label is filled in. | "Shop all", all products |
| Second button label, Second button link | A second, quieter button. | Empty |
Also: Color scheme, Section spacing.
When empty: without an image, the banner shows a placeholder image.
Promo banner
A text banner for one promotion, with a large background word, an optional countdown and a button. It has no image.
| Setting | What it does | Default |
|---|---|---|
| Background text | The large word behind the banner. Leave it empty to show your store name. | Empty |
| Heading | "Name your promotion" | |
| Highlighted words | Words of the heading to set apart. Use words from the heading, written exactly as they are there. | "promotion" |
| Text | A short prompt | |
| Button label, Link | "Shop all", all products | |
| End date | Shows a countdown to this date, in the format 2026-11-30 23:59. Uses your store's time zone. Leave it empty to hide the countdown. | Empty |
| After the end date | Show "This sale has ended." or Hide section. Shows once you add an end date. | Hide section |
Also: Color scheme, Section spacing.
When empty: a banner without heading, text, button and a running countdown is not shown. In the theme editor it shows "Add a heading, text or button to show this section." See Honest promotions for how the countdown works.
Promo banners
Up to three banners, each with an image, heading, text and button. Two or three banners stand side by side; a single banner takes the full width.
| Setting | What it does | Default |
|---|---|---|
| Layout | Large first or Equal. Applies when the section has two banners. | Large first |
| Heading | A heading above the banners. | Empty |
Also: Color scheme, Section spacing.
Banner block, up to 3:
- Image: with the Soft panels design style, the Loco default, use a .png with a transparent background.
- Background text: one short word, 7 letters max, that leads into the heading. Shows only on wide banners, so not with three banners in a row.
- Heading (default "Name this banner"), Text (shows up to two lines), Button label (default "Shop all"), Link (default all products).
When empty: a banner without an image shows a placeholder image. A section without banners is not shown.
Countdown
A countdown to a date you set, with a label, an optional button and an optional bar that shows how much of the sale has passed.
| Setting | What it does | Default |
|---|---|---|
| End date | The date the countdown runs to, in the format 2026-11-30 23:59. Uses your store's time zone. The countdown shows only with an end date. | Empty |
| Label | Text before the countdown. | "Sale ends in" |
| Background text | The large word behind the countdown. | Empty |
| Button label, Link | The link shows once the label is filled in. | Empty |
| After the end date | Show "This sale has ended." or Hide section. | Hide section |
| Show sale period | Shows a bar from the start date to the end date. | Off |
| Start date | Shows when Show sale period is on. Same format as the end date. | Empty |
Also: Color scheme, Section spacing.
When empty: without an end date the section is not shown in your store. In the theme editor it shows "Add an end date to show the countdown." See Honest promotions.
Products and collections
Featured product
One product with its gallery and buy buttons, so customers can buy it from any page.
| Setting | What it does | Default |
|---|---|---|
| Product | The product to show. | Empty |
| Background text | The large word behind the product. Leave it empty to use the vendor or store name. Shown when Design style is Soft panels, the Loco default. | Empty |
Also: Color scheme, Section spacing.
Blocks work as on the product page. See Product page for each one.
| Block | Settings |
|---|---|
| Text | Show (Custom text, Vendor, SKU, SKU and vendor), Text, Text style (Small label, Body, Caption) |
| Title | None. To show a badge above the title, add a product tag such as badge:Organic. 14 characters max. |
| Rating | None. Shows the rating from a product reviews app. |
| Price | Show tax line, Show installments |
| Description | Collapse long descriptions |
| Variant picker | Picker type: Swatches and buttons or Dropdown |
| Inventory | None. Shows the real stock of tracked variants. |
| Quantity selector | None. Placed right above Buy buttons, it shares their row. |
| Buy buttons | Show dynamic checkout buttons, Show gift card recipient form |
| Pickup availability | None |
| Complementary products | Heading, Products to show (1 to 4) |
| Size chart | Label, Page |
| Collapsible tab | Heading, Icon, Content, Page, Position |
| Back in stock request | None |
| Share | Label |
| Custom Liquid | Custom Liquid |
New sections start with Title, Price, Variant picker, Quantity selector and Buy buttons. App blocks can be added too.
When empty: without a product, the section shows example content.
Featured collection
A row of product cards from one collection.
| Setting | What it does | Default |
|---|---|---|
| Collection | The collection to show. | Empty |
| Products to show | 2 to 12. | 4 |
| Products per row on desktop | 2 to 5. With the heading in the margin column, a row holds up to 3 products. | 4 |
| Heading, Text | "Featured collection", empty | |
| Link label | Links to the collection. | "View all" |
| Heading position | Above content |
Also: Color scheme, Section spacing.
When empty: without a collection, the section shows example product cards on the home page, and products from your whole catalog on other pages. A collection with no products is not shown; in the theme editor it shows "This collection has no products yet. Add products to it or choose another collection."
Collection list
Cards for the collections you choose, as a grid or a scrolling row. Each card uses the collection image, or the first product's image when the collection has none.
| Setting | What it does | Default |
|---|---|---|
| Collections | The collections to show. | Empty |
| Layout | Grid or Scrolling row. | Grid |
| Show product count | Shows how many products each collection has. Grid only. | Off |
| Heading | "Shop by collection" | |
| Text, Link label, Link, Heading position | Grid only. | Above content |
Also: Color scheme, Section spacing.
When empty: without collections, the section shows example collection cards.
Collection tiles
One row of large tiles, one per collection, each with the collection image and title.
| Setting | What it does | Default |
|---|---|---|
| Collections | The collections to show. | Empty |
| Tiles per row | 3 or 4. The section shows one row, so extra collections stay hidden. | 3 |
| Heading | "Shop by category" | |
| Text | Shows with 3 tiles per row. | Empty |
| Link label, Link | The link shows once the label is filled in. | Empty |
Also: Color scheme, Section spacing.
When empty: without collections, the section shows example tiles.
Product recommendations
Related products from Shopify's product recommendations. Product templates only.
| Setting | What it does | Default |
|---|---|---|
| Heading, Text, Link label, Link | "You may also like" | |
| Products to show | 2 to 6. | 4 |
| Products per row on desktop | 3 or 4. With the heading in the margin column, a row holds 3 products. | 4 |
| Heading position | Above content |
Also: Color scheme, Section spacing.
When empty: recommendations appear once Shopify has enough order data for the product. Until then the section is not shown.
Recently viewed
The products a customer looked at most recently, remembered in their browser, with a button to clear the list.
| Setting | What it does | Default |
|---|---|---|
| Heading, Text | "Recently viewed" | |
| Products to show | 4 to 12. | 12 |
| Heading position | Margin column |
Also: Color scheme, Section spacing.
When empty: the section appears after a customer views two or more products. In the theme editor it stays empty and shows a hint, because the editor does not record what you view.
Quick order list
Every variant of one product in a list with quantity fields, so customers can add many variants to the cart at once. Useful for wholesale buyers and products with many sizes.
| Setting | What it does | Default |
|---|---|---|
| Product | Works best for products with many variants. | Empty |
| Heading, Text | "Quick order", a short instruction | |
| Heading position | Above content |
Also: Color scheme, Section spacing.
When empty: without a product, the section is not shown. In the theme editor it shows "Choose a product to list its variants here."
Brands A–Z
An alphabetical index of your vendors or collections, with a letter bar to jump through it.
| Setting | What it does | Default |
|---|---|---|
| Show | Vendors or Collections. | Vendors |
| Collections | Used when Show is set to Collections. Leave it empty to list up to 250 collections that have products. | Empty |
| Heading | "Brands A–Z" |
Also: Color scheme, Section spacing.
When empty: vendors appear once your products have a vendor, and collections once they have products.
Story and content
Rich text
A heading, text and button on their own, for a short statement or story.
| Setting | What it does | Default |
|---|---|---|
| Content alignment | Start or Center. | Start |
Also: Color scheme, Section spacing.
Blocks: Heading (Heading), Text (Text), Button (Button label, Link), Custom Liquid. New sections start with a heading and text.
When empty: a section without blocks is not shown.
Image with text
An image beside a heading, text and button.
| Setting | What it does | Default |
|---|---|---|
| Image | 1500 x 1000px .jpg recommended. | Empty |
| Image position | Image first or Image second. | Image first |
| Image ratio | Adapt to image keeps the whole image. Square (1:1), Portrait (4:5), Landscape (3:2) and Wide (16:9) crop it. | Landscape |
Also: Color scheme, Section spacing.
Blocks: Heading, Text, Button (Button label, Link), Custom Liquid. New sections start with a heading, text and button.
When empty: with blocks but no image, the section shows a placeholder image. Without an image and without blocks, it is not shown.
Multicolumn
Columns with an icon or image, a heading and a short text, such as your store's benefits.
| Setting | What it does | Default |
|---|---|---|
| Columns per row | 2 to 4. | 3 |
| Heading, Text, Link label, Link | "What sets you apart" | |
| Heading position | Margin column |
Also: Color scheme, Section spacing.
Column block. The section holds up to 12 blocks, Column and Custom Liquid together:
- Icon: None, Image placeholder, Box, Calendar, Chat, Clock, Gift, Globe, Lock, Mail, Phone, Pin, Question mark, Returns, Ruler, Shield, Sparkle, Store, Tag or Truck. Shows while Image is empty.
- Image: replaces the icon. 3:2 aspect ratio recommended.
- Heading (default "Name a benefit"), Text, Link label, Link.
A Custom Liquid block is also available.
When empty: a section without columns is not shown.
Video
A video from your store files, YouTube or Vimeo, with a cover image.
| Setting | What it does | Default |
|---|---|---|
| Video | A video you upload to Shopify. | Empty |
| Video URL | YouTube or Vimeo. Shows while Video is empty. | An example YouTube video |
| Cover image | Shown before the video plays. 1600 x 900px .jpg recommended. | Empty |
| Captions URL | Link to a WebVTT (.vtt) file. Upload it in Content, then Files. For uploaded videos that do not play in the background. | Empty |
| Play in background without sound | Loops silently. Customers can always pause it. For uploaded videos. | Off |
| Heading, Text, Link label, Link | "See how it works" | |
| Heading position | Margin column |
Also: Color scheme, Section spacing.
When empty: without a video and a video URL, the section is not shown.
Blog posts
Cards for the latest posts of one blog.
| Setting | What it does | Default |
|---|---|---|
| Blog | The blog to show. | Empty |
| Posts to show | 2 to 6. | 3 |
| Show the first post large | Gives the newest post a larger card. | Off |
| Show date | On | |
| Show author | Off | |
| Heading, Text | "From the blog" | |
| Link label | Links to the blog. | "View all" |
| Heading position | Margin column |
Also: Color scheme, Section spacing.
When empty: without a blog, the section shows example post cards. On a blog post page, it shows the other posts of that post's blog instead. A blog with no posts is not shown.
FAQ
Questions with answers that open one at a time on request.
| Setting | What it does | Default |
|---|---|---|
| Heading, Text | "Frequently asked questions" | |
| Link label, Link | For example a link to your contact page. | "Contact us" |
| Heading position | Margin column | |
| Allow only one open answer | Opening an answer closes the one that was open. | Off |
Also: Color scheme, Section spacing.
Question block, up to 50: Question, Answer (links and lists allowed), Topic. With more than 12 questions and two or more topics, topics appear as filters above the list.
When empty: a section without a filled question is not shown.
Contact form
A contact form with name, email, an optional phone field and a message. Messages arrive at your store's email, like any Shopify contact form.
| Setting | What it does | Default |
|---|---|---|
| Heading | On the contact page, leave it empty to use the page title. | "Contact us" |
| Text | On the contact page, leave it empty to use the page content. | A short prompt |
| Show phone field | On | |
| Show store contact details | Shows the store email and phone from Settings, then Store details. | On |
| Opening hours | Leave it empty to hide the opening hours. Shows when contact details are on. | Empty |
| Heading position | Margin column |
Also: Color scheme, Section spacing.
Specification sheet
A table of terms and values, such as dimensions or materials. On product templates, each value can come from a product metafield.
| Setting | What it does | Default |
|---|---|---|
| Heading, Text, Link label, Link | "Specifications" | |
| Heading position | Margin column |
Also: Color scheme, Section spacing.
Row block, up to 50:
- Term: the name of the property.
- Value: connect a product metafield with the dynamic source button to fill this from each product. Rows with no value are hidden.
- Use accent font for value: for model numbers and standards. Shown when Design style is Crisp sheets, the Roster default.
When empty: a section without filled rows is not shown.
Merchandising
Lookbook
A photo with markers on the products in it. Customers select a marker to see the product and add it to the cart.
| Setting | What it does | Default |
|---|---|---|
| Image | The photo. | Empty |
| Heading, Text | "Shop the look" | |
| Layout | Image and list shows the products in a list beside the image. Image only shows them from the markers. | Image and list |
| Heading position | Shows with Image only. | Margin column |
| Image ratio | Match image, 3:2 or 4:5. Marker positions follow the cropped image. Check them after changing the ratio or the focal point. | Match image |
Also: Color scheme, Section spacing.
Product block, up to 6: Product, Horizontal position and Vertical position (0 to 100%, default 50%) of its marker on the image.
When empty: without an image, the section shows a placeholder image. Product blocks without a product show example products until you choose one. Without an image and without Product blocks, the section is not shown.
Before and after
Two images of the same thing, compared with a handle customers drag.
| Setting | What it does | Default |
|---|---|---|
| Before image | Use two images with the same aspect ratio. | Empty |
| After image | Empty | |
| Before label, After label | "Before", "After" | |
| Starting position | Where the handle starts, 10 to 90%. | 50% |
| Image ratio | Match image, 3:2, 4:3, 1:1, 4:5 or 16:9. | 3:2 |
| Heading, Text, Link label, Link | "Before and after" | |
| Heading position | Margin column |
Also: Color scheme, Section spacing.
When empty: a missing image shows a placeholder image.
Trust badges
Up to four short promises with an icon, such as shipping, returns or secure payment.
| Setting | What it does | Default |
|---|---|---|
| Heading | Read by screen readers. Turn on Show heading to display it. | "Why shop with us" |
| Show heading | Off | |
| Show panel | Sets the badges on a panel. Shown when Design style is Soft panels, the Loco default. | Off |
Also: Color scheme, Section spacing.
Badge block, up to 4: Icon (Truck, Return arrow, Shield, Lock, Chat bubble, Store, Box, Clock or Gift), Heading, Text. Write only what your store actually offers.
When empty: a badge without heading and text is not shown, and neither is a section without badges.
Press coverage
Quotes from publications that wrote about your products.
| Setting | What it does | Default |
|---|---|---|
| Heading | Read by screen readers. Turn on Show heading to display it. | "In the press" |
| Show heading | Off |
Also: Color scheme, Section spacing.
Quote block, up to 5:
- Quote: a short quote from a review you have permission to use.
- Publication: required. A quote without a publication is not shown.
- Logo: upload only logos you have permission to use. Transparent .png or .svg required.
- Link: the article this quote comes from. Used as the source of the quote, not shown as a button.
When empty: a section without a complete quote is not shown.
Signup
Email signup
A signup form for your email list. Subscribers appear in Customers with the tag newsletter.
| Setting | What it does | Default |
|---|---|---|
| Heading | "Subscribe to our emails" | |
| Text | A short prompt | |
| Heading position | Shows when a heading or text is filled in. | Margin column |
Also: Color scheme, Section spacing.
After you install Loco, an Email signup section already sits in the footer group. If you use the Email signup block in the footer instead, remove the section so the form appears once.
Custom Liquid
Custom Liquid lets you, or a developer you hire, add your own Liquid, HTML or CSS. Loco does not check this code. Code that breaks the layout is not covered by theme support. Before you add code, duplicate your theme. See Code customizations.
Custom Liquid section
A section with one setting, Custom Liquid, plus Color scheme and Section spacing. You can add it to any page and to the header and footer groups. When empty, it is not shown in your store; in the theme editor it shows "Add your Liquid code to show this section."
Custom Liquid block
A block with one setting, Custom Liquid, that you can place among other blocks. It is available in:
- Rich text, Image with text, Multicolumn and Featured product,
- the footer, as a column,
- the product page, the blog post page and the cart page.
App blocks
Apps from the Shopify App Store can add their own blocks to Loco. App blocks can be added to:
- Featured product,
- the product page,
- the blog post page,
- the cart page.
To add one:
- Install the app and follow its setup steps.
- In the theme editor, open the page and select the section.
- Select Add block and choose the app's block under Apps.
- Drag the block to where you want it.
Some apps also offer their own sections, listed under Apps when you select Add section. Apps that work in the background, such as chat widgets, are turned on in the theme editor under App embeds.