Getting started

My patterns is a Shopify Online Store 2.0 theme with a block-based product page and content that can come straight from your metafields and metaobjects. This guide covers setup, every section and setting, and how to get help.

Install the theme

1. In your Shopify admin, go to Online Store → Themes.
2. In the Theme Store listing, select Try theme or Buy theme. The theme is added to your theme library.
3. Select Customize to open the theme editor. Nothing changes on your live store until you select Publish.

Choose a style

The theme installs with the My patterns style. The same theme can take on very different looks through its settings alone: the table below lists fourteen of them, and the style setup guide shows how to build each one.

Want to see each style as a full industry layout, or copy one into the theme you already have? Browse the layout library: every style has its homepage outline, a downloadable layout pack and sample products.

To build a style by hand in the theme editor, open the style setup guide: every style is shown section by section, with a picture and the settings to enter, in the order they appear on the page.

First steps checklist

• Logo and colors: go to Theme settings → Logo and Theme settings → Colors (color schemes).
• Menus: create your main menu and footer menus in Content → Menus, then pick them in the Header and Footer sections.
• Home page: add, remove and reorder sections. Every section shows a short hint in the editor until it has content.
• Product page: open a product template and add blocks to Product information (price, variants, buy buttons, size chart, spec highlights and more).
• Cart: choose the cart type (drawer or page) and the free-shipping bar in Theme settings → Cart.
• Policies and contact: fill in Settings → Policies and add a Contact form section to your contact page.

Customizing

Sections and blocks

Sections are the building blocks of each page. Most content sections accept theme blocks (headings, text, buttons, images and more) that you can add, reorder and nest. Sections that list items (slides, rows, FAQ questions, testimonials) use their own item blocks. Most sections also accept app blocks, so blocks from your installed apps can sit inside it. Wherever an app block fits, a Custom Liquid block fits too, for an app snippet or a few lines of your own Liquid.

Common settings that most sections share:

• Color scheme, Section width (standard, wide or full) and top and bottom padding, with separate mobile values.
• Design: heading size, weight, letter spacing, color, and Hide on mobile / Hide on desktop.
• Section divider: an angled, curved or wave edge above or below the section.
• Custom CSS that applies to that section only.

Collection sections

Four sections show collections, each with its own styles:

Each section only shows the settings for the style you choose. Add a Collection tile block for each collection; a tile can override the collection's image, title and link.

Images and focal points

Cropped images (banners, slides, cards, collection tiles and galleries) follow the focal point you set on the image in Content → Files or in the image picker. Set the focal point on the important part of the photo, and it stays in view on every screen size.

Product page

The Product information section is built from theme blocks. Add only what you need, in any order, and use a Group block to place several blocks side by side or in a box. Highlights:

• Buy buttons holds the add to cart button, express checkout and a built-in Quantity selector. Select the quantity selector under Buy buttons to style it, place it beside the button, or hide it.

• Tabs holds Tab blocks. Each tab shows rich text, a page, the product description or a metafield; the Tabs block sets the style for the whole group.

• Variant picker with swatches from Shopify's native color and image swatches.

• Size chart: a pop-up or drawer that can show a different chart per product (see Data sources).
• Spec highlights and Content blocks: reusable specs and accordions (shipping, returns, care).
• Quantity breaks: shows volume pricing from the custom.quantity_breaks metafield, in four layouts -- Compact (two lines per tier, the smallest), List, Table or Cards. A theme can never change a line's price, so the ladder is a display: create a matching automatic discount for each tier in Discounts and shoppers pay the tier price at checkout. Show the ladder to keeps it for the people it is meant for -- everyone, signed-in customers, or only customers signed in to a B2B company account. On B2B, the ladder is left out of the page altogether for everyone else, not merely hidden.
• Delivery checker: the postcode check, in the buy column rather than at the foot of the page. It is the same checker as the Delivery checker section and shares its settings, including areas from a CSV file; see Rows from a CSV file.
• Complementary products: "Pairs well with" products from Shopify Search & Discovery.
• 3D models and AR: product models open in Shopify's viewer, with "View in your space" on supported phones.

Below the product information you can add Product reviews, Product specifications, Key ingredients, How to use, Bundle products, Products by metafield and Related products.

What belongs on a product page, and what does not. A product page answers questions about one product, and anything that answers a different question is better placed elsewhere:

Care instructions read better at the foot of the page than in the middle of the specification, and a long specification is easier in the Tabs or Accordion layout than as one table.

Product images

Set the gallery in Product information (under Media).

On phones every layout becomes a swipe gallery. Edge-to-edge images on mobile removes the side margin and rounded corners. You can also show the product rating, a Share button and a View similar button (it scrolls to Related products) on the image. Tapping an image opens a full-screen viewer you can swipe through and pinch to zoom.

Videos and 3D models appear in the order you set in Products → Media; drag one after any image.

Variant images. When a variant is selected decides what happens:

• Show all images, go to the variant's image: the default.
• Show the variant's images first, then the rest.
• Show only the variant's images.

A variant's images are the ones whose alt text contains the variant's option value, for example "Red - front" and "Red - back". Options that match images lists which options to use (Color, Colour and Style by default); values match whole words, so sizes like "M" never match by accident.

Product specifications

Shows your product's details as a specification sheet. Add a Group block to start a group (for example Materials or Dimensions), then Row blocks under it. Each row reads a metafield key such as custom.width, a built-in field (vendor, type, SKU, weight), or its own value. Rows without a value are skipped, and the section hides itself when a product has nothing to show.

Choose a Layout:

Number the groups adds a small numbered badge in your accent color, shaped like your product badges. Value style switches values between your body font and large heading-font text. Each style starts with its own layout; you can change it at any time. To compare this product with others, set Content from to Comparison.

Signature sections

Twenty-five sections and four blocks give each kind of store a feature built for how its customers shop. Add them from Add section in any style.

Presets worth knowing. Several sections carry ready-made versions for particular trades, so you rarely need a new section: Data table has Nutrition table, Supplement facts, Ingredients (INCI), Volume pricing, Lead times and Specifications; Finder has Fitment finder, Gift finder and Skin concern finder; Product set has Morning routine, Evening routine and Complete the look; Key figures has Clinical claims; Price list has Menu and Service price list. For fashion: Data table has Fabric and care, Key figures has Made responsibly, Process steps has Made to order and Product set has Complete the outfit. For courses and creators: Checklist has What you'll learn, Downloads has Course resources, Plans and pricing has Membership tiers, Team has Your instructor and Results chart has Student outcomes. Pick the preset when you add the section, then change the wording.

Mega menu

The menu type is set in Header → Desktop menu type. A mega menu opens as columns of links, as cards, or as tabs.

The "All …" link. When a column heading has a submenu under it, the theme writes an extra row at the top of that list -- All bedroom -- so the category itself stays reachable. The heading is a link too, but shoppers read the list, so the way in is spelled out in it. Turn it off in Header → Show an "All …" link in menus if your own menu already contains that link. One switch covers the mega menu, the tabs panel and the phone drawer.

Pictures and buttons. A Mega menu image block puts one to three pictures in the panel, with its own height and width, and a line of text under each. Set Text style to Button and the text becomes a button with its own height, width, text size, weight and shape -- a short height such as 36px reads better inside a menu than the full-size page button.

Theme settings

Theme settings apply to the whole store. The groups are listed alphabetically. Every new setting starts off, or at a value that matches the original look, so updating the theme never changes your store until you choose to.

A section's own heading settings always win over the theme-wide ones, so you can still style one heading differently.

Note: The delivery estimate is worked out in the shopper's browser, using their local time for the cut-off. It's a guide, not a promise; keep your shipping policy as the source of truth.

Note: The date-of-birth check can't verify identity; it asks, like every theme's age check. If you sell restricted products, follow your local rules for verification at delivery.

Note: A terms checkbox can't stop express checkout buttons (such as Shop Pay or Apple Pay). If terms must be accepted, turn off express checkout in the cart drawer.

Rows from a CSV file

The Delivery checker section can read its areas from a spreadsheet instead of the box in the theme editor. This suits long lists, where typing hundreds of postcodes into a text box is painful.

1. Build the list in Excel, Numbers or Google Sheets, with these column headings on the first row: code, message, cutoff.
2. Save or export it as CSV.
3. In Shopify admin go to Content -> Files, upload the file, then copy its link.
4. In the theme editor open the Delivery checker section, set Where the areas come from to A CSV file in Content -> Files, and paste the link into CSV file link.

A file looks like this:

code,message,cutoff 2000-2099,Same-day delivery if you order before 2pm,14:00 3000;3001;3002,Next-day delivery,18:00 40*,Delivery in 2-3 working days,

• code takes a range (2000-2099), a wildcard (SW1*) or an exact code, and several codes separated by semicolons.
• message is what the shopper sees. Wrap it in quotes if it contains a comma.
• cutoff is optional, written as 14:00, and drives the "order in the next 2 h" countdown.

To change your areas, edit the spreadsheet and upload it again with the same file name; the link stays the same.

Data table works the same way. Put the column headings on the first row, starting with the first column, then one row per line:

Size,Chest,Waist,Length S,92,76,68 M,96,80,70

Paste the file's link into the Data table section's CSV file link. Sorting, the highlighted column and the sticky first column all work on rows that come from a file. On a product page, a product's own metafield still wins over the file. The list is downloaded once per visit, not on every page.

If the file is missing, the link is wrong or the file has no usable rows, the section quietly uses whatever is in the box, so your store keeps working. Only files on your own store are read; a link to another website is ignored.

Data sources and metafields

Many sections can fill themselves from your store data, so you enter content once and reuse it.

How a data source works

Sections that list reusable entries have a Data source text setting, pre-filled with a sensible default. Type one of these:

Leave it blank to turn the source off. You don't need the connect button next to these fields; just type the value.

If your metaobject definition uses different field keys, map them in Field keys, for example question=title, answer=body.

To find an entry's handle, open Content → Metaobjects, select the type and open the entry. The handle is shown on the entry page.

Default types and fields

Per-product content

For product blocks, the product's own metafield always wins. Open a product in the admin, find the metafield (for example Size guide or Content blocks) and pick the entries there. The block's Default entries field (for example content_block: shipping, returns) is used only for products without their own entries.

Create the definitions

Create each metaobject definition above, and the product metafields that point to them, in Settings → Custom data. Use the type handles and field keys in the table, or give a type your own handle and type the same handle in the section's Data source. Turn on Storefront access for every definition, or the theme can't read it.

Apps

My patterns works on its own; no app is required. Where an app adds a feature, the theme gives it a place:

• App blocks can be added inside the product section and most content sections.
• App slots on product cards, next to the product title and in the header let apps such as wishlists place their buttons without editing code.
• Theme bridge: apps can supply data to the theme's own back-in-stock and reviews interface through window.MyPatterns.registerProvider(name, provider).

Review apps that write Shopify's standard reviews.rating metafields (such as Judge.me, Loox, Okendo or Shopify Product Reviews) show star ratings on product cards and the product page automatically.

Languages and translations

The theme includes storefront translations for English, French, German, Spanish and Italian. To change any text, or to add a language, use Online Store → Themes → … → Edit default theme content, or install Translate & Adapt.

Performance and accessibility

• Use images at least 1600 px wide for full-width banners, and let the theme handle resizing; it serves smaller files to smaller screens.
• Keep the number of sections with autoplaying video or sliders low on the home page.
• Every image picker has an alt text field in Content → Files; fill it in for accessibility and SEO.
• Menus, drawers, tabs and pop-ups work with a keyboard and respect the "reduce motion" system setting.

Frequently asked questions

The questions and answers now live on their own page: Frequently asked questions.

Support policy

What we help with. Questions about the theme's features and settings, setup guidance, and bugs in the theme's code, for stores using an unmodified copy of My patterns.

What is outside support. Custom code changes, problems caused by edits to the theme code or by third-party apps, and store design or content work. We'll still point you in the right direction where we can.

Response time. We reply to every request within two business days (Monday to Friday, excluding public holidays). Most requests are answered sooner.

Bugs. If you find a bug such as a broken layout, a dead link or a logic error, we fix it in the next theme update. Critical bugs that stop shoppers from buying are fixed immediately.

How to contact us. Use the support form and include your store URL, the style you use, and screenshots of the problem. Please don't share your store password or staff account details; if we need access, we'll ask for a collaborator request through Shopify.

Theme updates. Updates are free and appear in Online Store → Themes.