Theme Editor customization
How the Shopify theme editor works with ÉLAN, and every global setting for layout, product cards, the cart, social media and the favicon.
Theme version 1.0.0Updated
On this page
How the editor is organized
Open the editor from Online Store → Themes → Customize.
- The template menu at the top switches between page types: Home page, products, collections, cart, blog and so on.
- The sidebar lists the sections on the current template, plus the Header and Footer areas. Select a section to see its settings. Sections contain blocks, which you can add, reorder and remove the same way.
- Theme settings (the gear icon) apply to the whole store. Section settings override them where both exist, for example a section’s own Image ratio.
- The device toggle at the top switches the preview between desktop and mobile.
Changes show in the preview straight away. Nothing reaches your live store until you choose Save on a published theme, or Publish on one that isn’t published.
Working with sections and blocks
- Add section adds a section at that point on the template. Sections that can only live in the header or footer area appear there only.
- Drag the handle beside a section or block to reorder it.
- The eye icon hides a section or block without deleting its content.
- Select a block in the sidebar to jump to it in the preview. ÉLAN responds where it helps: selecting a look in Contact sheet shows that look, and selecting the Bag drawer section opens the drawer.
Every section is described in Sections and blocks.
Templates for different pages
Each template, for example Default product, applies to every page of that type. To give some products or collections a different layout:
- In the template menu, choose the page type, then Create template.
- Change the new template’s sections.
- In your admin, open the product or collection and choose the new template under Theme template.
Theme settings: layout
| Setting | Options |
|---|---|
| Page width | Standard caps content at a comfortable reading width. Full width uses the whole screen. |
| Image frame | None, Hairline, or Print border: a thin paper border, like a photographic print. Applies to editorial images. |
| Button corners | Square or Softened. |
Theme settings: product cards
| Setting | What it does |
|---|---|
| Default collection layout | Sheet (an even grid), Selects (a contact sheet with a marked lead) or Sequence (alternating large images and text). Each collection section can override it. |
| Image ratio | Portrait (2:3), Portrait (4:5), Square (1:1) or Image original. Cards crop to the ratio around each image’s focal point. |
| Image frame | None or Hairline around card images. |
| Product image style | Fill the frame crops photos to the ratio. Fit on a plate shows the whole product on a soft background. |
| Show sale and sold out labels | A small label on the image: “Sale” when a compare-at price is higher, “Sold out” when no variant is available. Both come from your Shopify data. |
| Show second image on hover | Shows the product’s second image when a pointer hovers over the card (desktop only). |
| Show quick add | Single-variant products add straight to the cart. Products with options link to the product page with “Choose”. |
| Show vendor | Shows the vendor above the product name. |
| Reference code metafield | Optional. A product metafield shown as a small code on cards, for example custom.reference. |
| Hide zero cents in prices | Shows $1,450 instead of $1,450.00. Prices with cents are always shown in full. |
Theme settings: cart
| Setting | What it does |
|---|---|
| Cart type | Drawer opens a panel beside the page after adding to cart. Page goes to the cart page. |
| Enable order notes | Adds a note field to the cart drawer and the cart page. |
| Cart message | Short text above the checkout button, for example delivery cut-off times. Keep it accurate. |
More in Cart and checkout.
Theme settings: social media and favicon
- Social media: add full profile URLs, for example
https://www.instagram.com/yourstore, for Instagram, TikTok, Pinterest, Facebook, YouTube and X. Icons appear in the footer only for the networks you fill in. - Favicon image: a square image shown in browser tabs. A 32 × 32px PNG works well.
Other theme settings
- Typography and Colors: see Color schemes and typography.
- Motion: see Animation settings.
Saving, undoing and versions
- Save keeps your changes. Leaving the editor without saving discards them.
- Undo a change with Cmd+Z (Mac) or Ctrl+Z (Windows) while the editor is open.
- For a safety net before big changes, duplicate the theme in Online Store → Themes.
Related guides
Didn’t find what you need? Contact ÉLAN support. We reply within two business days.