Templates

Lorenza 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
Page
About page
Contact page
404 page
Password page

Home page

Lorenza’s home page is incredibly customizable. It’s one of Lorenza’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: Chic, Modern, and Natural.

Home page

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

Blogs

Blog posts

Collection

Image

Product

Promotional

Store information

Text

Video

Video

Collection pages

Lorenza’s Collection pages template is used for all of your collections. Next to the home page, it’s Lorenza’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

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 which Layout style should be used.

Here’s an example of the Latest blog post is featured layout:

And here’s an example of the 3 blog posts per row layout:
Choose whether to Show RSS link.

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 link looks like this:
Use the Save button in the top-right corner when you are finished editing.

Settings

The Blog pages template has the following settings:

Layout style: Choose from two layouts: either Latest post is featured or 3 blog posts per row.
Show RSS link: Check this checkbox to show an RSS link that goes to the current blog’s RSS feed.

Blog posts

With Lorenza, blog posts are formatted beautifully, just like the rest of the store. If you’ve added a featured image to you blog post, it’s displayed boldly before the body content:

Article with featured image

While adding a new blog post, just use the Featured image field:

Adding a featured image to a blog post

For more information, see Shopify’s Writing a blog post documentation.

Cart

Lorenza’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

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 Lorenza 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 Columns of collections using the slider. Choose between 2 and 4 columns.

On small mobile devices, only 1 collection is shown per row.
Choose the Image aspect ratio to be used for all collection images.

Use Natural to use the original images. Or, use Square (1:1), Landscape (3:2), or Portrait (2:3) to have the images cropped to match one another.
Choose the Collection title alignment, either Left or Center.
Choose whether to Show product count for each collection, under its title.
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:

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.

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.

Columns

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

Image aspect ratio

Choose the aspect ratio for all collection images displayed.

Use Square (1:1), Landscape (3:2), or Portrait (2:3) to have the images cropped to match one another

Use Natural if you do not want your images cropped at all.

Collection title alignment

Choose to align collection titles, either Left or Center.

Show product count

Select this checkbox to show the product count for each collection. The count is displayed below the collection title.

Product pages

Lorenza’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 selector checkbox if customers could 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.
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.

To learn more about Shopify’s available media types, see their Product media guide.
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 selector: 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.
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.

About page

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

Depending on the placement of an image, it’s maximum width and height varies. Here’s a diagram that describes how each of the five images will appear:
(Optional.) Add Small heading text to be displayed above the page title.
Add or upload an image to image block you added.
(Optional.) Add a Video link.

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

For more information about adding videos, see Upload a video.
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

About pages have the following settings.

Small heading: Add a mini heading to the about page. We recommend keeping this to a word or two.

For each image you add to the about page:

Image: Add or upload an image for the current about page collage block.
Video link: Paste a link to an MP4 file that should be auto-played in the about page collage block, taking the place of the image.

Upload a video

You can upload videos to your about page, instead of displaying images. Before you start setting this up, you should know a few things:

You’ll need your video as an MP4 video file.
For the best customer experience, we strongly recommend using a 20- to 30-second video that’s under 10MB in size.
You can’t use a service like YouTube or Vimeo to host this video.

Host the video file with Shopify

To use Shopify to host this video file:

Go to the Shopify Files uploader screen in your Shopify dashboard.
Use the Upload files button to add a video file from your computer.
Once it has been uploaded, copy the URL next to the file.

It should look something like this: https://cdn.shopify.com/s/files/1/0074/8165/5349/files/my-video-filename.mp4.
Paste the link into the Video link field in the section settings.

Contact page

Pages are a Shopify feature. You can learn more about creating pages from Shopify’s Pages documentation. Lorenza 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 “Contact” or “Get in Touch”) 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

Contact pages have the following settings.

Image: Add or upload an image for the contact page.

404 page

Lorenza 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

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

Set up your password page

To set up Lorenza’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.

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 blog posts and make them beautiful.

Image grid on about page Accordion on about page

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 blog post.</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.