Templates

Ira includes templates for each page type that Shopify supports.

Home page Collection page mobile Collections list Product pages

To learn more about the templates, and how to set them up, see the following articles:

Home page
Collection pages
Blogs
Blog posts
Cart
Collections list
Product pages
About page
Contact page
Page
Password
404 page

Home page template

Ira’s home page is incredibly customizable. It’s one of Ira’s core features. You can completely customize the pages content using over a dozen home page section layouts.

For a better idea of just how flexible this page is, we recommend that you visit all of our store demos: Active, Sport, and Modern.

Home page

For more information about customizing the home page, see the following articles.

Blogs

Blog posts

Collection

Image

Product

Promotional

Text

Video

Video

Collection pages

Ira’s Collection pages template is used for all of your collections. Next to the home page, it’s Ira’s most customizable template.

Collection page on desktop

And here it is on a mobile device:

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 collection.

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

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

Featured collection

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

Customize your blogs page

To customize your blogs page:

From your theme’s “Customize” screen, choose Blogs from the pages drop-down menu at the top of the screen.
Select Blog pages from the list of sections.
Choose how many Articles per row should be displayed. (Either Two or Three.)
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:
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, Ira automatically adds a preview of the first few sentences and then trails off with a ….
Use the Save button in the top-right corner when you are finished editing.

Settings

The Blog pages template has the following settings:

Articles per row: Choose how many articles to show per row of blog posts. Choose either Two or Three.
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.

Blog posts

You can customize how your blog posts look and feel.

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

A blog post with article settings turned on

Add a featured collection section:

Featured collection section

For more information, see the following articles:

Article

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

Featured collection

Cart

Ira’s cart page is simple and shows customers exactly what they need to see.

Cart page on desktop

Here it is on a mobile device:

Cart page on mobile

By default, the cart page is automatically updated whenever the customer makes changes to their cart contents. Even if they do it in another browser tab. We recommend leaving this setting alone. But it can be turned off.

Set up the cart page

To customize the cart page:

From your theme’s “Customize” screen, choose Cart from the pages drop-down menu at the top of the screen.
Select Cart page from the list of sections.
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.
Go to the Theme settings settings tab and press Cart for additional cart settings.

You can learn more about these settings from the theme settings Cart article.

Settings

The cart page has the following settings:

Enable automatic cart updates: Check this checkbox to automatically refresh the cart contents whenever it is changed.
This setting is enabled by default.

Collections list template

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

And here it is on a mobile device:

Collections list on desktop

By default all of your collections are shown. But Ira 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 collections list page

To set up your collections list page:

From your theme’s “Customize” screen, choose Collections list from the pages drop-down menu at the top of the screen.
Select the Collections list page from the list of sections.
Select whether you want to show All collections or just Featured collections using the provided radiobuttons.
Choose how many Collections per row using the slider. Choose between 2 and 4 collections.

On small mobile devices, only 1 collection is shown per row.
If you chose to show only Featured collection above, you can select which collections are shown by using the Add collection button to add collections one at a time.
- Press Add collection.
- Select a Collection from your Shopify product collections.
- You can use the Remove content button to remove a collection from the list.
Use the Save button in the top-right corner when you are finished editing.

Settings

The following settings are available for the collections list template:

Select collections to show: Choose either All or Featured.
If you choose featured, make sure to scroll to the top of these settings and Add collections.
Collections per row: Use the slider to display between 2 and 4 collections per row.
Add collection: If your Select collections to show settings is set to Featured you must add each collection you want to show manually using this button.

Product pages template

Ira’s product pages put your products front and center. But you can also use product pages to highlight other exciting parts of your store.

Product page on desktop

Product page on mobile

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

Change the look and feel of product information

From the Product pages settings, you can change the look and feel of the product info on your product pages:

From your theme’s “Customize” screen, choose Product pages from the pages drop-down menu at the top of the screen.
Scroll down the list of available settings until you see the Product pages button. Click on it.
Check the Show vendor checkbox to show the Vendor field as set up in your products. Usually this is a product’s brand name.
Check the Show swatches checkbox to let customers pick from product variants using swatch buttons.

In order to show swatches, you need to set up the product swatches feature. See the Swatches article for more information.
Check the Show quantity input checkbox if customers may be encouraged to buy more than one of your products at a time.
Check the Show dynamic checkout button to show let customers quickly check out using a saved payment method.

This button only shows up for customers who have previously orders something on a Shopify store and have a payment method saved. Check out Shopify’s Dynamic checkout buttons documentation for more details.
(Optional.) Choose whether to Enable full width.

Enabling this setting removes any borders around the section, letting it fill the entire width of the screen.
Choose a Layout: either Column and Grid.

These change the way your product’s media (like product images, videos, and 3D models) are displayed.

Here’s an example of the Column layout:

And here’s an example of the Grid layout:

To learn more about Shopify’s available media types, see their Product media guide.
Check the Enabled video looping checkbox if your products have video media and you want to loop the videos while the customer browses the product page.
Use the Save button in the top-right corner when you are finished editing.

Settings

The main Product pages section has the following settings:

Show vendor: Show the product’s Vendor as you entered it while adding or editing your products.
Show swatches: Show swatch buttons as a way to let customers pick from your product’s variants.
In order to show swatches, you need to set up the product swatches feature. See the Swatches article for more information.
Show quantity input: Show a quantity picker that let’s customers add more than one product to the cart.
Show dynamic checkout button: Show a “Checkout with <Payment Method>” button to customers who have ordered with Shopify previously.
Check out Shopify’s Dynamic checkout buttons documentation for more details.
Layout: Choose a layout: either Column or Grid.
Remember that this effects all of your product pages. You should double check all of your product pages to make sure you are happy with the layout.
Enable video looping: For your products that have product videos added as media, ensure that videos loop forever while customers are on the product page.
Enable full width: Check this checkbox to remove the outer margins from this section, making it span the entire width of the screen.

About page

Pages are a Shopify feature. You can learn more about creating pages from Shopify’s Pages documentation. Ira 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

How to set up an about page

To make any page into an about page:

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.
From the Templates sidebar, choose page.about from the list of templates.
Press the Save button.

How to customize my new about page

From your theme’s “Customize” screen, choose the name of your page (for example “About” or “About Us”) from the pages drop-down menu at the top of the screen.
Scroll down the list of available settings until you find About page. Click on it.
Add up to 5 images using the Add image button.
Add or upload an image to image block you added.

These blocks use the same block style that the Collage section uses. So, some blocks may appear larger than others. For more information about collage layouts see How collage layouts work.
(Optional.) Add a Video link.

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

About page videos work just like collage section videos. For more information about adding videos, see Add a video to a collage block.
(Optional.) Add some Intro text.
(Optional.) Choose whether to Enable full width.

Enabling this setting removes any borders around the section, letting it fill the entire width of the screen.
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.

Settings

For each image you add to the about page:

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 Add a video to a collage section.

About pages have the following settings:

Intro: Add some introduction text to the about page. We recommend keeping this to a short paragraph or two.
Enable full width: Check this checkbox to remove the outer margins from this section, making it span the entire width of the screen.

Contact page

Pages are a Shopify feature. You can learn more about creating pages from Shopify’s Pages documentation. Ira 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

How to set up a contact page

To make any page into an contact page:

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.
From the Templates sidebar, choose page.contact from the list of templates.
Press the Save button.

How to customize my new contact page

From your theme’s “Customize” screen, choose the name of your page (for example “About” or “About Us”) from the pages drop-down menu at the top of the screen.
Scroll down the list of available settings until you find Contact page. Click on it.
Add an image using the Select image file picker.
Use the Save button in the top-right corner when you are finished editing.

Settings

About pages have the following settings.

Image: Add or upload an image for the current collage block.

Password page template

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

Set up your password page

To set up Ira’s password page template:

From your theme’s “Customize” screen, choose Password page from the pages drop-down menu at the top of the screen.
Set some Heading text, and a Text body.
Check the Show share buttons checkbox to show social sharing buttons.

These buttons can be clicked by customers to generate social media-friendly links on their social media profiles.
Use the Save button in the top-right corner when you are finished editing.
Check out Shopify’s Add password protection to your online store documentation to learn how to password protect your store.

Settings

The password page has the following 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

Ira 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.

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

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

How to add a grid
How to add an accordion

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:

Pages
About pages
Contact 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:

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

You can do this from the Pages area in your Shopify dashboard.
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.

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"/>

Locate the <img> tags you want to display in a grid.

You may need to move these tags around in the next step.
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.

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.

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.

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

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 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
  Context'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

To add one, follow these instructions:

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

You can do this from the Pages page in your Shopify dashboard.
Switch to the HTML view (<>) using the page editor toolbar.

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

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.

Replace the example text from the code snippet to your custom text.
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”>
Make sure you close each <div> and <a> with a corresponding </div> and </a>, just like in the example.
After you Save the page, you can go see what your grid looks like using the View page button.