We've recently relaunched all three of our themes. Watch the launch video here.

Templates

Spark includes templates for each page type that Shopify supports.

Home page
Home page
Collection page on mobile
Collection page on mobile
Collections list
Collections list
Product pages
Product pages

Spark's templates:

  • Addresses
  • Orders
  • About page
  • Article
  • Password
  • Blog
  • List collections
  • Contact page
  • Page
  • Search
  • Activate account
  • Register
  • Reset password
  • Login
  • 404
  • Cart
  • Account
  • Collection
  • Product

Home page

Spark's home page is incredibly customizable. It's one of Spark's core features. You can completely customize the page using over twenty home page sections.

We recommend that you visit our three store demos for Spark to see how these sections can be used and get a sense of how flexible the home page can be: Chic, Ecstatic, and Minimal.

Home page
Home page
Home page
Home page
Home page
Home page
Home page
Home page

For more information about customizing the home page, see the following articles for each section, displayed in the same order as in your Customize theme editor.

Blogs

Collection

Image

Product

Promotional

Store Information

Text

Video

Collection pages

Spark's Collection pages template is used for all of your collections. Similar to home page and product page, the Collections pages template is flexible and comes with over fifteen sections that you can add.

Collection page on desktop
Collection page on desktop

And here it is on a mobile device:

Collection page on mobile
Collection page on mobile

See our article about the Collection pages section for more information about collection page-specific settings.

In addition to changing the look and feel how the collection items are displayed, you can add the following sections to your collection pages:

Note that these settings and sections are shared between all of your store's collections.

Product pages

Spark's Product pages template is used for all of your products. Similar to the home page and collection pages, you can add feature sections, as well as customize the look and the feel of the page.

Product page on desktop
Product page on desktop

And here it is on a mobile device:

Product page on mobile
Product page on mobile

See our article about the Product page section for more information about product page-specific settings.

In addition to changing the look and feel of your product pages you can add the following sections to your product pages:

Note that these settings and sections are shared between all of your store's product pages.

Blogs

You can customize how your Blogs page looks. The blogs page is where you can find a list of all your blog posts.

Blogs page
Blogs page

In addition to changing the look of the page, you can add the following section to your blog posts pages:

For more information about Shopify's blogs features, see their Blogs documentation.

Customize your blogs page

To customize your blogs page:

  1. From your Customize theme editor, choose Blogs from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Select Blog pages from the list of sections.

  3. Choose how many Articles per row should be displayed. (Two, Three, or Four.)

  4. Choose whether to Show RSS icon.

    RSS is a way for customers to subscribe to your blog. Only some people use it, but the people who do love it. Learn more about it from RSS.com's article How Do RSS Feeds Work?. The RSS icon looks like this:

    RSS icon on blog pages template
    RSS icon on blog pages template
  5. Choose whether to Show published date.

  6. Choose whether this page should Show article excerpts.

    You can add excerpts when you add or edit the blog post. See Shopify's Display an excerpt from a blog post documentation for instructions. If you don't do this, Spark automatically adds a preview of the first few sentences and then trails off with a "...".

    Blog posts in Spark with excerpts
    Blog posts in Spark with excerpts
  7. Use the Save button in the top-right corner when you are finished editing.

Blog pages template settings

The Blog pages template has the following settings:

Configuration Settings

Articles per row

Choose how many articles to show per row of blog posts. Choose Two, Three, or Four.

Show RSS icon

Check this checkbox to show an RSS icon that links to the current blog's RSS feed.

Show article excerpts

Check this checkbox to show article excerpts on the blogs page.

If you leave this unchecked, only the title and featured image are displayed.

Images aspect ratio

Choose to display your images as Square, Landscape, or Portrait. The default Natural setting will display the original orientation of your images.

Blog posts

You can customize how your blog posts look and feel.

This is a brief overview of the page template. For more in-depth information on the settings and content of blog posts, see our Articles page.

  1. Add social share buttons so customers can quickly share posts to their social media accounts:

    A blog post with share buttons turned on
    A blog post with share buttons turned on
  2. Add a featured collection section:

    Featured collection section
    Featured collection section

You can also add the following section type to your blog posts pages:

Cart

Spark's cart page is simple and shows customers exactly what they need to see.

Cart page on desktop
Cart page on desktop

Here it is on a mobile device:

Cart page on mobile
Cart page on mobile

Set up the cart page

To customize the Cart page:

  1. From your Customize theme editor, choose Cart from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Select Cart page from the list of sections.

  3. Choose whether to Enable automatic cart updates.

    Turning this off means that customers may need to refresh the page to see the latest changes to their cart.

  4. Go to the Theme settings link and press Cart for additional cart settings.

    You can Enable cart notes and Show notification when item is added to cart.

  5. Use the Save button in the top-right corner when you are finished editing.

Cart settings

The following Cart settings are available:

Configuration Settings

Show notification when item is added to cart

Check this checkbox to open the cart drawer when the customer adds an item to their cart to let them edit their order or go to their cart or directly to checkout.

Enable cart notes

Check this checkbox to let customers add special shipping instructions for their order.

To learn how to edit your order notes label, see Shopify's [Enable order notes on your cart page][cart-notes] article

Collection list page

You can change the look and feel of your /collections/all page, which is where a customer can view a list of all of your product collections.

Collections list on desktop
Collections list on desktop

And here it is on a mobile device:

Collections list on desktop
Collections list on desktop

By default all of your collections are shown. But Spark can help you override this behavior, and let you instead show a list of collections you want to feature.

For more information about collections, see Shopify's Collections

Set up your Collection list page

  1. From your Customize theme editor, choose Collections list from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Select the Collections list page from the list of sections.

  3. Select whether you want to show All collections or just Selected collections using the provided radio buttons.

    To learn how to add Select collections, see the Add selected collections section below.

  4. Check the Show collection description checkbox to display the description add in your Shopify Admin settings.

  5. Choose the Image aspect ratio to control the shape of your the collection images.

  6. Choose how many Collections per row using the slider. Choose between 2 and 6 collections.

    On small mobile devices, only 1 collection is shown per row.

  7. Use the Save button in the top-right corner when you are finished editing.

Add selected collections

  1. If you chose to show only Selected collections, go to the top-level settings to find your the Collection list page section.

  2. Click on the Add Collection button.

  3. Select a Collection from your Shopify product collections.

  4. Repeat this process until you've added all the collections

    You can also use the Remove block button to remove a collection from this section entirely.

  5. You can change the order of the blocks by using the drag handles:

    Shopify content blocks drag handles
    Shopify content blocks drag handles
  6. Use the Save button in the top-right corner when you are finished editing.

Collection list template settings

The following settings are available for the collections list template:

Configuration Settings

Select collections to show

Choose what collections are displayed. By default, the Collection list page will display all visible collections.

If you choose Selected, make sure to scroll to the top of these settings and Add collections.

Show collection description

Choose whether to Show collection description.

Collection descriptions are add in the Collections area in your Shopify dashboard.

Collections per row

Use the slider to display between 2 and 6 collections per row.

Images aspect ratio

Choose to display your images as Square, Landscape, or Portrait.

The default Natural setting will display the original orientation of your images.

Page

Pages are a Shopify feature. You can learn more about creating pages from Shopify's Pages documentation. Spark styles all pages to match your theme and theme settings.

About page

You may be interested in Spark's special page templates:

Or you may be interested in adding image grids to pages

About page

Pages are a Shopify feature. You can learn more about creating pages from Shopify's Pages documentation. Spark styles all pages to match your theme and theme settings.

You can change the page template to page.about, which allows you to prepend your page with up to 5 images and a description.

About page
About page

How to set up an about page

To make any page into an about page:

  1. Add or edit the page you want to turn into an about page

    You can do this from the Pages area in your Shopify dashboard.

  2. From the Templates sidebar, choose page.about from the list of templates.

    Templates list
    Templates list
  3. Press the Save button.

How to customize the About page

  1. From your Customize theme editor, choose Pages from the drop-down menu at the top of the screen and select the about template.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Click on the About page section.

    This opens the About page settings.

  3. (Optional.) Add some Intro text.

  4. Return to the top-level About page settings to find the About page section with the content blocks nested below.

    Use the drag handles to rearrange the order of the blocks:

    Shopify content blocks nested in a section
    Shopify content blocks nested in a section
  5. Click the Add Media button to select an Image or add a Video link.

    The Image is used as a fallback for the video, if you've added a video link.

    To learn about adding a .mp4 link to this section, see our article about how to add a video.

  6. Use the Save button in the top-right corner when you are finished editing.

Bonus: You can also add special content layouts to your about pages.

About page template settings

The following settings are available for each image you add to the About page:

Configuration Settings

Image

Add or upload an image for the current collage block.

Video link

Paste a link to an MP4 file that should be auto-played in the collage block, taking the place of the image.

For more information, see our article about how to add a video.

About pages have the following settings:

Configuration Settings

Intro

Add some introduction text to the about page. We recommend keeping this to a short paragraph or two.

Contact page

Pages are a Shopify feature. You can learn more about creating pages from Shopify's Pages documentation. Spark styles all pages to match your theme and theme settings.

You can change the page template to page.contact, which allows you to prepend your page with a special image and display a contact form.

Contact page
Contact page

How to set up a contact page

To make any page into an contact page:

  1. Add or edit the page you want to turn into a contact page

    You can do this from the Pages area in your Shopify dashboard.

  2. From the Templates sidebar, choose page.contact from the list of templates.

    Templates list
    Templates list
  3. Press the Save button.

How to customize the Contact page

  1. From your Customize theme editor, choose Pages from the drop-down menu at the top of the screen and select the contact template.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Click on the Contact page section.

    This opens the Contact page settings.

  3. Select an Image to display to left of your contact form.

  4. Use the Save button in the top-right corner when you are finished editing.

Contact page template settings

Contact pages have the following settings.

Configuration Settings

Image

Add or upload an image for the current collage block.

Password page

Before you launch your store, you can use Shopify's password page feature to stop customers from looking at your store. Only the people you give a password to can view your store.

Password page
Password page

Set up your password page

To set up Spark's password page template:

  1. From your Customize theme editor, choose Others from the drop-down menu at the top of the screen and select the Password template.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Click on the Password page section.

    This opens the Password page settings.

  3. Select or upload a Logo image.

  4. Change the Heading text and add more information to the Text field.

  5. Enable Show share buttons to show social sharing buttons.

    These buttons can be clicked by customers to generate social media-friendly links on their social media profiles for Facebook, Twitter, or Pinterest.

  6. Use the Save button in the top-right corner when you are finished editing.

  7. Check out Shopify's Add password protection to your online store documentation to learn how to password protect your store.

Password page settings

The password page has the following settings:

Configuration Settings

Heading

Add heading text.

We recommend keeping this short. Just a few words long.

Text

Add the main page body text.

We recommend keeping this to a paragraph or two. You can use rich text features here. Make some of your text bold or italic. You can also add links.

Show share buttons

Check this checkbox to show sharing buttons that redirect customers to social media websites, prompting them to share your store.

The buttons include Pinterest, Twitter, and Facebook.

404 page

Spark has a 404 page template. "404" is a code used on the web that means "The page cannot be found." A customer might end up on a 404 page if they typed in a URL wrong, or if the page they are visiting no longer exists because you have hidden or deleted it.

You can change your 404 page's text content in the theme's Language editor. Read Shopify's language documentation to learn more about how to change the wording in your theme.

404 page template
404 page template

Add special layouts to pages with "shortcodes"

You can customize the look of each of your pages by adding image grids and accordions. This is a great way to break up the text content in your pages and make them beautiful.

Image grid on about page
Accordion on about page
Accordion on about page

We'll cover two special layouts you can achieve with shortcodes:

Pages are a Shopify feature. You can learn more about creating pages from Shopify's Pages documentation.

You can add these grids to the following types of pages:

Before you start, you should know a couple of things:

You will need to edit raw HTML. If you aren't comfortable doing this already, make sure to save backup versions of your pages in case something goes wrong and you lose your work.

Ensure the images you want to display in a grid are the same height.

We recommend adding all the images you want to style before editing the HTML.

How to add a grid

To add a grid to your page content, you can follow these instructions:

  1. Add or edit the page you want to add a grid to.

    You can do this from the Pages area in your Shopify dashboard.

  2. Add or upload any images that you want to place in a grid.

    You can do this the same way you would while adding any page content.

  3. Switch to the HTML view using the page editor toolbar.

    See Shopify's Rich text editor documentation for more information about this.

    When you do this, the page should be displayed as HTML markup, like a more-complicated version of this:

    <p>This is the first paragraph of the page.</p>
    <p>After this paragraph, there will be an image.</p>
    <img
    src="https://shopify.com/link-to-image1.png"
    alt="Description of first image"
    />
    <p>After this paragraph, there will be another image.</p>
    <img
    src="https://shopify.com/link-to-image2.png"
    alt="Description of second image"
    />
  4. Locate the <img> tags you want to display in a grid.

    You may need to move these tags around in the next step.

  5. Wrap the <img>s in a grid element.

    Take the <img> tags and wrap them in a <div class="grid"></div> tag. Like this:

    <div class="grid">
    <img src="link/to/image-1.jpg" />
    <img src="link/to/image-2.jpg" />
    <img src="link/to/image-3.jpg" />
    </div>

    Note that the indentations don't really matter. They just make these blocks of text easier to read.

  6. Wrap each image in its own <div>``</div>.

    Like this:

    <div class="grid">
    <div>
    <img src="link/to/image-1.jpg" />
    </div>
    <div>
    <img src="link/to/image-2.jpg" />
    </div>
    <div>
    <img src="link/to/image-3.jpg" />
    </div>
    </div>

    Again, the indentation doesn't really matter.

  7. Assign a "small" class to images that should should be half-width.

    So, to the <div>``</div> around any of the images:

    <div class="small">
    <img src="link/to/image-3.jpg" />
    </div>

    For example, if you wanted two half-width images and one full width image, you would do this:

    <div class="grid">
    <div class="small">
    <img src="link/to/image-1.jpg" />
    </div>
    <div class="small">
    <img src="link/to/image-2.jpg" />
    </div>
    <div>
    <img src="link/to/image-3.jpg" />
    </div>
    </div>

    Images without the "small" class are displayed at the full width of the page.

  8. After you Save the page, you can go see what your grid looks like using the View page button.

    The view button above the page editor
    The view button above the page editor

Play around with other HTML elements

If you're feeling confident, you can also use the "small" class to display text or leave empty space in your layout.

For example:

<div class="grid">
<div class="small">
<img src="link/to/image-1.jpg" />
</div>
<div class="small"></div>
<div class="small">
<img src="link/to/image-2.jpg" />
</div>
<div class="small"></div>
</div>

Would be displayed as:

Example image grid
Example image grid

Example grid

Here's a fully fleshed out example, including placeholder images, for you to play around with:

<p>
This is some example text being used to show off how Spark's about page
image grids work.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div class="grid">
<div class="small">
<img src="https://via.placeholder.com/700x400" />
</div>
<div class="small">
<img src="https://via.placeholder.com/700x400" />
</div>
<div>
<img src="https://via.placeholder.com/1500x700" />
</div>
</div>
<p>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>

How to add an accordion

Similar to an image grid, you can add text accordions that open up to reveal more text.

Accordion on about page
Accordion on about page

To add one, follow these instructions:

  1. Add or edit the page you want to add an accordion to.

    You can do this from the Pages page in your Shopify dashboard.

  2. Switch to the HTML view using the page editor toolbar.

    See Shopify's Rich text editor documentation for more information about this.

  3. Paste in the required <div> containers used for accordions.

    We recommend that you copy in the following code snippet, in its entirety, to get started:

    <div class="accordion">
    <div class="accordion__heading">Add an according heading here</div>
    <div class="accordion__group">
    <a class="accordion__label" href="#">
    Insert the first accordion group label here
    </a>
    <div class="accordion__text">
    Insert the first accordion group contents here.
    </div>
    </div>
    <div class="accordion__group">
    <a class="accordion__label" href="#">
    Insert the second accordion group label here
    </a>
    <div class="accordion__text">
    Insert the second accordion group contents here.
    </div>
    </div>
    </div>

    Note that the indentations don't really matter. They just make these blocks of text easier to read.

  4. Replace the example text from the code snippet to your custom text.

  5. Add additional <div class="accordion__group">s if required.

    Note that each accordion group should have inside of it:

    One <a class="accordion__label" href="#">

    One <div class="accordion__text">

  6. Make sure you close each <div> and <a> with a corresponding </div> and </a>, just like in the example.

  7. After you Save the page, you can go see what your grid looks like using the View page button.

    The view button above the page editor
    The view button above the page editor

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.