Fluorescent
Eclipse
Eclipse
  • Get started
    • Migrating to Eclipse
    • Theme license
  • FAQs
  • Changelog
    • Update your theme
  • General
    • Editing themes
      • Dynamic content with metafields
      • Edit default theme content
      • Multiple languages
      • Unique content for markets
      • Customizing your site
      • H1 heading tags
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • SEO for Shopify
    • Online store speed
    • Accessibility
  • Theme settings
    • Theme settings
      • Social media
    • Theme styles
    • Fonts
    • Colors
  • Corner rounding
  • Pages
    • Page templates
      • Using templates
      • Customize page styles
      • Create and assign templates
    • Demo layouts
    • About page
    • Home page
    • Blog page
    • Blog post
    • Contact page
    • Password page
    • Search page
  • Sections
    • Sections
      • Using sections
      • Content blocks
    • Blog posts
    • Collapsible content
    • Collection list
    • Contact form
    • Featured collection
    • Featured links
    • Feature product
    • Grid
    • Icon with text columns
    • Image hero
    • Image with text
    • Multi-column
    • Newsletter
    • Rich text
    • Scrolling content
    • Shop the look
    • Shoppable feed
    • Slideshow
    • Video
    • Video hero
    • Video with text
    • Custom Liquid
  • Header
    • Announcement bar
    • Header
      • Layout and style
      • Logo
      • Transparent header
      • Mega menu
      • Language and Currency
    • Impact logo
    • Search
  • Footer
    • Footer
      • Image Text and Socials
      • Links block
      • Newsletter and Socials
      • Language and Currency
      • Custom Liquid
  • Products
    • Product listings
      • Product card styles
      • Sale and sold out badges
      • Quick shopping
    • Prices and currencies
    • Swatches
      • Use default colors
      • Use custom colors
      • Use custom images
  • Product pages
    • Product page
      • Gift card product
    • Media gallery
      • Media grouping
    • Product overview blocks
      • Description
      • Price
      • Buy buttons
      • Collapsible row
      • Complementary products
      • Custom option
      • Featured icon with text
      • Icon with text
      • Inventory status
      • Image block
      • Popup block
      • Product rating
      • Text block
      • Share icons
      • Custom Liquid
    • Variant selector
      • Info popup
    • Sticky add-to-cart
    • Sibling products
    • Product recommendations
  • Collections
    • Collection page
      • Banner
      • Product grid
      • Promotion tiles
      • Filters and sorting
    • Collection list page
  • Cart
    • Cart
    • Free shipping bar
    • Cross sells
  • Popups
    • Popups
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • Advanced
    • Custom CSS
    • Custom fonts
Powered by GitBook
On this page
  • Design pages with templates
  • Customize page styles
  • Preview changes
  • Create unique page layouts

Was this helpful?

  1. Pages
  2. Page templates

Using templates

Last updated 6 months ago

Was this helpful?

Your online store consists of different types of pages, including: the home page, product pages, collection pages, blogs, and other pages.

Pages are designed using templates. In the theme editor, you change the look and layout of your pages by editing their assigned templates.

  • There are default templates for each type of page. Editing a default template will apply the same layout to all pages that use that template.

  • To use different layouts for specific pages, create new templates, then assign those templates to your pages in the Shopify admin.

Design pages with templates


Open your theme editor to find default templates for every type of page.

  • Add page content in Shopify admin

  • Customize layout with sections and blocks

  • Customize general page styles

Customize page styles


Preview changes


When you open a template, the theme editor selects a page (e.g. one product or collection) to preview the changes made to that template.

  • Click Change in the "PREVIEW" section to view a different page with that template.

  • To view a full preview of the live site, click more … > Preview. The preview will open in a new window, and you can click Share preview to copy the preview link to share with others.

Create unique page layouts


At first, every type of page uses a default template. For example, if you edit the Default blog post template, any changes you make will apply all blog post pages.

  • To design different layouts for pages, create and assign a new template for those pages.

  • To show unique page content in the same template, use dynamic content in sections.

Create and assign new templates

Add dynamic page content

Edit templates to design pages

Use sections to create the layout of your page.

Use different templates for pages

Create new templates for specific collections, products, or pages.

Assign templates to pages

To make your changes live, assign the template to your pages in the Shopify admin.

Animation

Cover

Color scheme

Cover

Content width

Cover

Content padding