Upscale

1. Collection list

2. Linkable variant

3. Collection page

4. Color swatches

5. Header and navigation

6. Collapsible content

7. Metafields

8. Cookie Acceptance Banner

9. Contact page

10. Complementary products

11. Image size and image cropping

12. Language selectors

13. Media collage

14. Collection image

15. Page templates

16. Blog posts section

17. Announcement bar

18. Hero (slideshow) on the Upscale theme

19. Removing the “Powered by Shopify” in the footer

20. Filters

21. Cart

22. Email popup

23. Gift Cards

24. Product page

25. Theme colors

26. Custom product badges

27. Video

28. Promotion

29. Blog post author image

To add a collection list section, click “Add section” in the main sidebar on the left. Then customize the layout and content using its setting sidebar. The section’s setting sidebar may be located on the right side of your screen if you're using a large display. You can delete the section by clicking “Remove section” at the bottom. 

To edit the information about the collections, such as their names and cover images, you must exit the Theme Editor and go to your collections in the Shopify admin, located under Products. Learn more. 

Styling pro tips

It’s not always easy to customize your store when images are repurposed in different contexts because image cropping can sometimes cause problems. The collection's cover image is a good example of that. It is leveraged for collection cards in the collection list section and template, where a square or vertical aspect ratio is often preferred. But it’s also supported in the collection page header, where the preferred aspect ratio might very well be horizontal. Especially if you set up the collection header to be a full-width image background. If this is a problem for you, the theme gives you the ability to override the collection cover image in the template header, by connecting a Collection metafield.

The linkable variant block is available in the product page. This advanced feature is applicable when color swatches are displayed. It will load a different product page when the user clicks on a color swatch from a product page. 

This feature is useful when:

• your store displays color swatches
• you have a big catalog with color variants that are set up as individual products.

1- Set up your color swatch 

Make sure you follow the steps for setting up the color swatches, as explained in this article.

2- Set up the 1st product metafield.

Click on Settings, on the bottom left corner of the screen in your admin, and open the Metafields tab. Create a product metafield that you can name, for example, "Color". Just make sure the namespace and key is  custom.color_value and that you set its content type to Single line text, One value. 

*Note: The namespace custom.color_value must be written exactly as is, otherwise the feature won't work. This text won't be visible to your customers, so there's no need to use translation if your store is in another language than english.

3- Set up your 2nd product metafield

Create a second product metafield that you can name, for example, "Color variant". Select Product as the content type, and List of products.

4- Edit your product information properly

Once your 2 product metafields are set up, you should see them at the bottom of your product pages in the Shopify admin:

1. In the color metafield, enter the name of the color swatch related to that specific product page.
2. In the color variant metafield, select all the products that qualify as a color variant of that product.
3. Repeat this operation for each product that is related to the group

Here's an example of the proper set up:

5- Customize your store's product page

Finally, go to the Theme Editor and edit the Product page. In the left sidebar, find the Product information. Click Add block, and select Linkable variant. In the block's settings, connect the products to a dynamic source and select the "Color variants" metafield that you previously created.

Important notes

• If the color variants of products from the same group are not selected in the same order, the color swatches displayed in a product page will shift position between pages as the user clicks on them. Improve the user experience by maintaining the same order.
• If your products have other variants than just colors, know that using this method resets the user's variant selection when they click on a color swatch because a new product page is loaded each time. For example, if the user selects a Size option first and a color next, the size will reset to the default. One way to improve the experience is to put the linkable variant block below the variant picker in the product page layout.

To customize the collection page in the Theme Editor, navigate to that template or use the dropdown in the middle of the top bar.

The collection page is composed of two elements in the sidebar: Collection header and Product grid. 

Pro tip

Remember that when you customize a product page, you are actually customizing a template. This means that the information that is not determined by the collection data from the Shopify admin (like when you add a section) will be the same across all collection pages. You can avoid that and make the content dynamic based on the collection featured on the page that uses that template. This is done by connecting the content to product metafields. It is also possible to create multiple templates with different sets of sections.

Customizing the collection header

A great feature on Loess themes is the many layout options for some page headers. This can give your store a stronger visual impact. To customize the collection header, select “Collection header” in the main sidebar on the left. Then customize the layout using its setting sidebar. The section’s setting sidebar may be located on the right side of your screen if you're using a large display. If the cover images associated to your collections have an aspect ratio that makes it difficult to achieve good results without unwanted image cropping, the theme provides a convenient image override feature. Learn more about collection cover images and overrides in this article.

Customizing the product grid

To customize the product grid, select “Product grid” in the main sidebar on the left. Then customize the layout using its setting sidebar. The section’s setting sidebar may be located on the right side of your screen if you're using a large display. 

If your filters include colors and you want those colors to be displayed as swatches instead of just labels and checkboxes, you need to go to the Theme Settings and open the Color swatches tab. In the Configuration input field, you need to type in the color hex code for each existing color filter (Hex codes are a 6 digits number, as per the screen shot below). There are plenty of online tool (such as this page) for you to find color hex codes you can copy and paste. The important thing to remember for this to work is to avoid typos and to follow the right syntax in the Theme Editor. For example:

Black:#000000
Night blue:#000080

Please note that the theme relies on a variant that is specifically the one from the Shopify options that is called Color. Because of that, it can't support multiple color swatch groups (for example: eyeglasses for which customers can choose a lens color and a frame color). This ensures that the swatches displayed in filters and product cards are accurate and consistent across the board. I your products are composed of different components that each come in multiple colors, you would have to choose 1 dominant color for leveraging the swatches, and then the other color options would be displayed either as buttons, or options in a dropdown menu.

Replacing color swatches with images

It can be useful to replace a color swatch by an image instead. This feature allows you to showcase patterns and textures instead of plain colors. Follow these steps:

1- Create a small image and give it a name (ex: blue-stripes.jpg)

2- Go to the Shopify admin, go to the Content tab (left side of the screen), and open the Files tab

3- Upload your image

4- Now open the Theme Editor and go to the Theme Settings. Open the Color swatches tab. In the Configuration input field, you need to type in the exact name of the filter, add a colon, and add the name of your image (without spaces). Make sure to include the image file extension. For example:

Blue stripes:blue-stripes.jpg

___

* Attention *

For color swatches to appear in product cards, each variant must be associated to a product image.

* Attention *

If your store is translated in multiple languages, make sure you don't translate the content where your color swatches are named and associated to a hex code. For example, if you're using the Translate and Adapt app provided by Shopify, you might translate this content by mistake if you hit the "Auto-translate" button. This would create a conflict and your color swatches won't be outputted properly. You can easily fix this by going to the General tab under Theme assets and remove the translation in the General: Color Swatch Configuration field:

To customize the header, select “Header” in the left sidebar of the Theme Editor. Then use the settings from the header sidebar, which may be located on the right side of your screen if you're using a large display.

To add an announcement bar, social icons, or language and currency selectors in the header, you must rather customize the announcement bar section.

Styling pro tip

Before trying out the various header layout options, it’s best to first have your navigation ready so you’ll have the most accurate preview. To create your navigation, you must exit the Theme Editor and use the drag-and-drop tool from the Shopify admin to organize menu items and submenus. This is located under Online store. Learn more. 

Understanding the navigation in the theme

Shopify supports up to three levels of menu items in the navigation (submenus). The structure of your navigation is determined by how you build it in the Shopify admin, but the layout is customized in the Theme Editor. Unless the “Layout on large screen” is set to an option that involves a collapsed menu (or “Hamburger”), the first level will be displayed by default in the header. The second and third levels will then be either laid out as cascading dropdowns, or as a “Mega menu”. The mega menu is a larger dropdown that allows to display all the links so that the user gets a bigger overview of the navigation in one click. This type of layout is especially useful for stores with a large number of menu items and/or menu categories. But one option is not better than the other. It all depends on the structure of your navigation and the shopping experience you want to provide to your customers.

Mega menu

By default, the navigation on large screen displays cascading submenus. You can enable the mega menu in the header settings. The mega menu is also required if you want to display images in the navigation. 

To enable mega menus, you must go to the main sidebar on the left of your screen and find the Enable mega menu input field. Type in the label of the 1st level menu item that will support the mega menu. You can type in multiple labels, separated by a comma. Make sure the spelling is an exact match otherwise it will not work.

To add images inside the navigation, add an “image” block under “Header”. In the image settings, you must also associate your image to a menu item from the 1st or 2nd level for it to be displayed. You must make sure the spelling is an exact match with the label of the menu item you want it to be associated with. You must also respect the following convention depending if the menu item is from the first or second level.

1st level: e.g.   Women
2nd level: e.g.  Women > New arrivals 

If the menu item is from the first level, the image will be displayed on the right side of the mega menu. This is useful to promote a product or a collection, or to give this category of links a cover image. If you associate the image to a menu item from the second level, the image will then be displayed inside your navigation. This is useful, for instance, when you want to give each collection a visual reference. More than one image block can be added to the header by clicking “Add image” multiple times, but only one image per second level menu item is supported.

Styling pro tip

Use images of the same aspect ratio for best results. You can crop your images to edit their aspect ratio before uploading them to Shopify, using Photoshop or any other image editing tool. There are also many free and simpler tools, such as I love IMG, which don’t require any software installation.

Optional sidebar menu

The sidebar menu appears on mobile, and when the “Layout on large screen” is set to a collapsed menu. It can be assigned a different navigation menu. This may be useful when you want to provide interactions for the mobile users that are otherwise accessible by mouse hover on large screen. For example when parent menu items are also links. A “parent” menu item is one that has another level below (the “children” menu items). On desktop, children can be accessed by hovering the parent. If the parent also has a link, it will be functional on click as well. On mobile though, those links are dismissed because tapping the parent is required to access the children. A workaround is to provide an explicit link “among the children”, such as “View all”. 

Logo

To add a logo, use the first image selector labeled as “logo”. If you enable a header style with transparency, the theme will override the default logo image with the alternate logo when applicable. This is useful because the color of the header foreground elements may change depending on the background on which it is laid out. For instance, a default header with dark links and icons may switch to white when displayed with transparency over a background image, or over a section with a dark background. This ensures good legibility so your navigation always remains usable. A good practice would be to upload a white version of the logo in the “Alternate logo” selector for it to be visible when overlaid over a dark background color or image.

Styling pro tip

Best results may be achieved with transparent PNG images for the logos. Especially when enabling a transparent header style.

Header style

You can select a header style that has transparency. This can give your store an interesting art direction with great visual impact if it’s the desired effect. 

How to display the email icon in the header?

The theme allows you to display a newsletter icon in the header of your store so that your users can easily access the sign up form popup at any time. To enable this icon, you must go to the popup settings and enable the corresponding check box. The popup settings are located near the footer, in the left sidebar of the Theme Editor. Find more informations about the popup in this article.

To add a Collapsible Content section, click “Add section” in the main sidebar on the left. Then customize the layout using its setting sidebar. The section’s setting sidebar may be located on the right side of your screen if you're using a large display. You can delete the section by clicking “Remove section” at the bottom. 

The general look and feel of your section is customizable from the section settings sidebar. The content of your section is created by adding blocks in the main sidebar on the left. Each of those blocks can be customized using their own setting sidebar, which may be located on the right side of your screen if you're using a large display. Remember that blocks can be reordered using drag and drop in the sidebar, and deleted by clicking “Remove block” at the bottom of each block’s setting sidebar.

The section supports two types of blocks, “Category” and “Tab”, which you can drag and drop to organize your content.

Why is this section useful?

You may need an FAQ page on your store. This section is especially useful to create multiple tabs separated by category headings. You may also find that section useful to simply display some information on a page in a compact way that optimizes the screen real estate. To create an FAQ page with tabs, go to the Theme Editor. Open the dropdown menu in the middle of the top bar, go to “Page”, and then “Create template”. This will open a blank page that you can customize by adding the Collapsible tabs section. You will have to exit the Theme Editor to create a menu item in your navigation to link to that page.

Loess themes are built to unlock the full potential of metafields. Below is a quick overview for you to have the basic understanding of that feature and to start exploring it in your online store. Metafields are a feature of the Shopify Platform. We recommend that you visit the Shopify support docs if you need complete and detailed information about metafields. Shopify also provides a great video if you are more of a visual type:

Understanding dynamic content

A metafield is what allows your content to be “dynamic”. This means that the content in a section or a block featured in a template can change per page. The most practical example is when you’re adding sections on the product page template, and you need the content in those sections to change based on the product featured on the page. To know if a content (a heading, an image, a product…) can be connected to a metafield, look for this icon from the settings sidebar.  

There are a few simple steps to follow in order for you to create dynamic content with metafields:

1- Create a metafield definition

In the Shopify Admin, select “Settings” at the bottom left of your screen. Then go to the “Metafields” tab (or "Custom data"). If, for example, you want a section on the product page to show dynamic content, you then need to create a “Product definition”. Select “Add definition” and create the metafield using the proper content type. You exit the settings page with the close button on the top right corner of your screen.

2- Add a value to the metafield

Once the product metafield definition is created, it will be visible in the Shopify Admin when you edit your products. Select a product and scroll down to the bottom of the page. Your metafield definition should be visible in the “Metafield” section. This is where you attribute the value specific to your products. (Ex: the dimensions of the box in which the product is shipped).

3- Connect the content to the metafield so it references that value

Now go to the theme editor and open the product page template. Go to the section or block where you want the dynamic content to be featured. For example the “Collapsible tab” block. You can add a heading that will be the same for all product pages, like “Box dimensions”, but don’t type in the dimensions in the “Tab content” field. This would actually make the content identical for every product using that template because it is data that is sourced by the Theme editor instead of being sourced by the product data from the Shopify Admin. What you do is connect that text field to the value of the metafield, by clicking on the metafield icon.

Pro tips

Note that a product using that template for which no value has been attributed to the metafield will display an empty tab. Remember that you can create multiple product templates if you need different sets of sections and blocks per product type.

Using the same 3 steps, you can customize the header of a collection page, for example, with more flexibility by overriding the collection cover image. You would then have to create a metafield that has a “Collection definition”. 

Custom product badges

Metafields are also used to create custom product badges like “New”, “Trendy now”, “Staff pick”, etc…. Learn more about it in the section named Custom product badges section.

To customize the cookie acceptance banner, select “cookie acceptance banner” in the left sidebar of the Theme Editor (located below footer). Then use the settings from the cookie acceptance banner sidebar, which may be located on the right side of your screen if you're using a large display.

Why is this section useful?

The Cookie Law is a piece of privacy legislation that requires websites to get consent from visitors to store or retrieve any information on a computer, smartphone or tablet. It was designed to protect online privacy, by making consumers aware of how information about them is collected and used online, and give them a choice to allow it or not. The banner ensures customers are made aware that the store is using cookies. Laws may vary depending on the country where you do business. It is your responsibility to make the proper verifications. 

The theme provides a built-in contact page template, which features a customizable contact form. At the minimum, the form is composed of an email and text input fields. By default, it also has a “Name” input field that can be customized or removed. 

To customize the Contact page in the Theme Editor, navigate to that template or use the dropdown in the middle of the top bar, under “Pages”. Customize the main layout of the form using the “Contact form” setting sidebar. That setting sidebar may be located on the right side of your screen if you're using a large display. The content of your contact form is created by adding “Text fields” or “Dropdown” blocks in the main sidebar on the left. Each of those blocks can be customized using their own setting sidebar, which may be located on the right side of your screen if you're using a large display. Remember that blocks can be reordered using drag and drop in the sidebar, and deleted by clicking “Remove block” at the bottom of each block’s setting sidebar.

If it's not done already, install the Search & Discovery free app (featured in the App Store here). Once in the app, go to the Customize recommended products tab. Select products, and assign them Complementary products. Then, in the Theme Editor, add the Complementary products block to your product page, under the Product information section. 

You must click on Add recommendation, and then select a product. Go the the Add complementary product section to associate it with complementary products. The theme will output up to 4 products per page.

For more context on the Complementary products feature, visit the Shopify help docs.

Image cropping

Image cropping is a common struggle, especially with full-width sections. As of today, the Shopify platform does not provide a native feature to do some basic image editing like manual cropping. But they recently introduced a way to set the focal point on an image, which should solve cropping issues in a lot of cases. Still, it is sometimes difficult to make sure the important part of your image remains visible at different screen sizes. In the theme, you will often come across image settings that help you control how your images will be displayed. Those settings are often similar from one section to another and may help resolve most problems you may encounter with image cropping. If you still need to manually crop an image to get the layout you want, there are plenty of free online tools like iloveimg that can help. Just edit your image and upload it to the theme.

Styling pro tip

First off, it's important when you customize your theme to make sure it looks good on both large and small screen sizes. You can easily preview the layout at different screen sizes by toggling the “Computer screen” icon on the top right corner of the Theme Editor. Luckily, the theme often provides separate image settings for large and small screen sizes which will give you additional control on your layout. Note that the the images always fill their container, and the focal point is in the center by default. This also explains why cropping may occur.

Image ratio is the key

When you add an image to your store, its aspect ratio is what determines how it will be cropped. Because images are centered in their container, cropping will occur on either the left and right sides, or top and bottom. As explained in the Collection image article, that is why it is recommended for collection cards to use images that have an aspect ratio that is close to a square (or with a portrait ratio). But for other images in the layout, like horizontal background images in the collection headers, a landscape type of ratio is preferred. This can make it difficult when the same resource (ex: the collection cover image from the admin) is leveraged by the theme for the 2 different purposes. For that reason, in this particular case, it is recommended to use images that have a square or portrait ratio. And then the cropping challenge in the collection header section can be overcome with the image override option. This ensures that you have the optimized image for both purposes. Note that making this image dynamic based on each collection requires using metafields. Learn more about that in the Collection page article. 

Section width matters

In most sections, you will not only find a Section height setting, but also a Layout setting that allows you to choose Full width. For sections like the Hero that support a background image, this means that the image will be displayed edge-to-edge of the screen. This also means that when viewed on very large screens, you may be surprised by the end result and how the image gets cropped. Make sure to use images that are optimized for that use case. When the layout is set to a fixed width, it is easier to control how your image will be displayed.

*Bellow is a demonstration of how the section width impacts the image cropping when viewed on a large browser window:

Section height

When a section or image is set to a Small, Medium, or Large height, the height of the image featured in that section will be impacted. It is likely that there will be some cropping because the image fills its container. In some cases, an additional section height setting named Adapt to image is available. This will help reduce unwanted image cropping depending on the aspect ratio of the images you upload on your theme.

Styling pro tip

Remember that the image height may vary depending on how long is the text featured in the same section. This is because the theme will adapt the layout to prevent awkward results and colliding elements.

Loess themes allow you to enable a language selector at the top and/or bottom of your store. There are some simple steps to follow first:

1- Publish the language

In the Shopify Admin, select Settings at the bottom left of your screen. Go to the Languages tab. From there, you should find a button to Add language. Select a language and hit Publish.

2- Set up the market(s)

You now need to ensure your language is enabled for the proper market(s). Still from the Settings page in the Shopify Admin, select the Markets tab. From there, you should see your primary market. You can add more markets if that's what you need for your business, or leave it to one primary market only, but you do need to enable the languages you want to make visible for each market. You do so by clicking Manage next to the market, and from there you click again on Manage next to Domains and languages. Under Market languages, make sure each checkboxe is ticked. Hit save and close the page (the X at the top right corner).

3- Enable the language selector in the theme

You can now go to the Theme Editor and check if the language selectors are visible in your store. The theme allows you to show language selectors above the header and in the footer. You can open the settings for the Announcement bar and footer and check for the Enable language selector checkbox. When you switch languages in your store, some content will be translated by the theme (ex: The View more label of the link below the featured blog post in the footer). But all the content you create in the pages and sections must be translated from an app, like the Shopify Translate & Adapt free app.

4- Translate your content

To translate your content, you can use apps, such as the Translate & Adapt app from Shopify. You can either go to the Shopify app store directly, or go back to the Languages tab in the settings. From there, you should see a banner with a button to install the Translate & Adapt app. Once installed, using the app is quite straightforward. It will crawl the content on your store and provide form fields for you to type in the translations. 

*Please note that the Translate & Adapt app from Shopify doesn't yet support translation for the product filters. This is not a theme bug, but an issue with the app itself. We have reported the problem to Shopify and are hoping this is something they will fix soon...

Hiding the language and/or currency selectors on your store

If you don't want to display one or both of those selectors on your store, you will have to make sure the settings are disabled in the Announcement bar and Footer sections, from the Theme Editor. But for the mobile version of your store, you will ALSO need to go to your Shopify admin and make sure you have only one active language, and one active market. The Languages and Markets tabs are located in the Settings, at the bottom left corner of your screen in the admin.

To add a Media Collage section, click “Add section” in the main sidebar on the left. Then customize the layout using its setting sidebar. The section’s setting sidebar may be located on the right side of your screen if you're using a large display. You can delete the section by clicking “Remove section” at the bottom. 

The general look and feel of your section is customizable from the section settings sidebar. The content of your section is created by adding blocks in the main sidebar on the left. Adding more than one block will automatically generate the collage layout. Each of those blocks can be customized using their own setting sidebar, which may be located on the right side of your screen if you're using a large display. Remember that blocks can be reordered using drag and drop in the sidebar, and deleted by clicking “Remove block” at the bottom of each block’s setting sidebar.

Video media

The section supports both images and videos. Note that the videos here will auto play with no sound. They should be understood as a cosmetic background element more than an informative video, just to give more dynamism to your design. A “moving image” in a way. If you do have a video that you want to showcase, and which you’d like to be viewed in a player with sounds, you should then use the Video section instead.

Styling pro tips

That section gives you great control over how you want your text content to be laid out. You do so by customizing the “Text position on large screen” and “Text position on small screen” section settings. The section can be used with one, two, or three media by adding or deleting blocks. The layout will automatically adapt to form a “collage” grid.  

How to best use that section

It is a very versatile section. Good use cases are when the section is displayed at full width on top of a page for a big visual impact. Especially when the transparent header is enabled. It can also be particularly useful as a smaller promotional banner featuring rich imagery and colors.

To add a collection cover image, you must go to your Shopify Admin, and then from the left sidebar go to Products > Collections.

From there, you can assign each collection a Collection image. The theme will be able to leverage this image in the following instances:

1. Collection list section (as individual cards)
2. Collections list page (as individual cards)
3. Collection page (as a collection header)

One common issue though is that an image that is perfect when used as an individual card (for instance with a portrait aspect ratio) may not provide the desired result when used as a collection header. In the example below, the head of the model is cut off and the cropping is awkward:

To overcome this issue, from the Theme Editor, you can go into each collection and connect its header image to a dynamic source using metafields. But first, your Collection metafields must be created following these steps:

1. Open the Shopify admin, and click on Settings located at the bottom left corner of the screen.
2. Open the Metafields tab, and click on Collection. Then select Add a definition.
3. Name it "Cover image", and select the File content type (one file, images & videos). Hit Save and close the page (the X at the top right corner of the screen).
4.  Now go to your collections from the Shopify Admin. If you scroll down, you should see a section titled Metafields with an image picker labeled Cover image.
5. You guessed it. This is where you can assign a different image for each collection that you will then be able to select using the dynamic source button from the Theme Editor. Like in the example above, you could either use the same image with a different cropping more suited for your desired layout, or just use a completely different image.

*More info about how to customize the collection header in this article.

Page templates can be useful when the sections you want to use on a page are not relevant for every instance of that page. For example, you might want to add a section about technical specifications of a product, but you don’t want the same specifications for all products. But unless you use different templates, the same sections and blocks will be displayed regardless of the product.

To create a template:

1- Go to the top bar in the Theme Editor, and select Create template for the relevant page (Product, Collection, Page, Blog, or Blog post). You can then add sections and blocks to that template. 

2- Once this is done, you can go to the Shopify Admin and assign the proper template to the resource of your choice. For example, you can go to a product, and assign it a template that contains the right sections and blocks relevant for that specific product.

*Note that the templates you create must be from a PUBLISHED theme in order to be visible in the Shopify Admin when you want to assign them to a resource.

Because this is a more advanced topic, we recommend you read the Shopify help docs that explain all there is to know about templates. 

To add a blog posts section, click “Add section” in the main sidebar on the left. Then customize the layout and content using its setting sidebar. The section’s setting sidebar may be located on the right side of your screen if you're using a large display. You can delete the section by clicking “Remove section” at the bottom. 

To create blog posts, or edit blog posts and cover images, you must exit the Theme Editor and go to your Blog posts in the Shopify admin, located under Online Store. Learn more. 

Author image

For an author image to be displayed when “Show author image” is enabled, you must ensure their profile is properly set up in the Shopify admin. To do so, go to Settings (located at the bottom left of the Shopify admin), and then go to the Users and permissions tab. 

Styling pro tips

It’s not always easy to customize your store when images are repurposed in different contexts because image cropping can sometimes cause problems. The blog post cover image is a good example of that. It is leveraged for article cards in the Blog posts section and template, where a square aspect ratio is often preferred. But it’s also supported in the Blog post template header, where the preferred aspect ratio might very well be more horizontal. Especially if you set up the collection header to be a full-width image background. If this is a problem for you, the theme provides a few "Article header" layouts that help achieve successful results with all types of image ratios.

To customize the announcement bar, select “Announcement bar” in the left sidebar of the Theme Editor. Then use the settings from the announcement bar sidebar, which may be located on the right side of your screen if you're using a large display. You can also make the bar expandable by adding an announcement block from the main sidebar, and customizing it using its own sidebar settings.

Why is this section useful?

For some brands, it is important to display social icons on the top of their pages, utility links (language and currency), or special announcements. The announcement bar is designed to do so while optimizing real estate on the screen.

How to best use that section?

That section is visible on every page of your store, so it’s a great way to make important information visible for the customers. Because on Loess themes the announcement can be expandable, it allows to complete the message with more details while remaining compact by default. It can also simply be a link to another page of your store. A best practice is to keep the default announcement text short, and to preview the result on small screen before publishing.

Social icons

In the announcement bar settings, you can enable the social icons. But your social accounts must also be properly set up. You do so by clicking on the “Theme settings” shortcut, and then going to the “Social media” tab).

Announcement

Customize the announcement by selecting the “text block” in the main left sidebar. What you type in in the “Text” field will be displayed in the section. If you add a link, the bar will display an arrow to communicate to the user that the section is clickable. If you enable expandable content, this will override the link and display a dropdown button instead. 

To add a Hero section (or slideshow), click “Add section” in the main sidebar on the left. Then customize the layout using its setting sidebar. The section’s setting sidebar may be located on the right side of your screen if you're using a large display. You can delete the section by clicking “Remove section” at the bottom. 

The general look and feel of your section is customizable from the section settings sidebar. The content of your section is created by adding blocks in the main sidebar on the left. Adding more than one block will automatically generate slides. By default the section has two blocks. Delete blocks and keep only one if you want to use the section without slides. Each of those blocks can be customized using their own setting sidebar, which may be located on the right side of your screen if you're using a large display. Remember that blocks can be reordered using drag and drop in the sidebar, and deleted by clicking “Remove block” at the bottom of each block’s setting sidebar.

Styling pro tips

• Enabling the image offset will make your layout more dynamic, and will give the image more emphasis and create visual impact. Interesting results can be obtained with transparent PNG images.
• Image cropping can sometimes create unwanted results. Especially in a slideshow because every slide must keep the same height to prevent layout “jumps”. If cropping is a problem with your assets, one option that can be useful is the “Adapt to first image” slide height option.

Remember that slides with lots of text have the opposite effect on your customers: they tend to ignore them altogether. Maintaining the same text across slides and applying the slide animation to the image only can be a good way to create visual impact without impoverishing the user experience. You can find an example of that on the demo store here.

Shopify does not support a setting in the Theme Editor to disable the “Powered by Shopify” text. If you do want to remove it anyways, these are the steps to follow:

• In the Admin, go to Sales channel > Online store
• Open the dropdown menu from the button labeled with the three dots (located near the published theme)
• Select Edit default theme content

Once there, use the search field and type in "Powered". This should bring you to the Checkout & system settings. In the Links field, add a space to remove the default label, and hit Save.

Loess themes are built with an optimized filtering user experience. Below is a quick overview for you to have the basic understanding of that feature and to start exploring it in your online store. Filters are a feature of the Shopify Platform. We recommend that you visit the Shopify support docs if you need complete and detailed information about filters.

Customizing filters

1- Create your filters in the Admin

From the Shopify Admin, open the Navigation tab under Online store. From there, you will be able to use the Shopify Search & Discovery app to manage your filters:

2- Enable the filters in your store

Once you created your filters, you need to open the Theme Editor and enable the filters on your online store. To do so, go to the collection page, and edit the Collection grid settings. From there, you will be able to toggle on the Enable filtering setting. 

Quick tips

You may have specific needs regarding your filters. For example, you may need your customers to use filters that do not correspond to product variants (product options), and need to have them organized into different categories. If this is the case, you can use product metafields instead (more info in the metafield article). Once you edit your filters with the Search & Discovery app to include the product metafields, each product metafield will output a filter category in the sidebar of your store. And then each value that has been created for those metafields will become a selectable filter within the categories. Please remember that filters within a category can be combined as an "or" (example: red OR green), but filters across categories as combined as an "and" (example "red" AND shirt). If you wish to make a category of filters that allow only one check box to be selected, the Shopify platform doesn't work that way, and this is not a feature themes can provide. Depending on your needs, a workaround may be to use separate collections for those, instead of relying on filters.

Color swatches

If your filters include colors and you want those colors to be displayed as swatches instead of just labels and checkboxes, you need to go to the Theme Settings and open the Color swatches tab. In the Configuration input field, you need to type in the color hex code for each existing color filter (Hex codes are a 6 digits number, as per the screen shot below). There are plenty of online tool (such as this page) for you to find color hex codes you can copy and paste. The important thing to remember for this to work is to avoid typos and to follow the right syntax in the Theme Editor. For example:

Black:#000000
Night blue:#000080

Replacing color swatches with images

It can be useful to replace a color swatch by an image instead. This feature allows you to showcase patterns and textures instead of plain colors. Follow these steps:

1- Create a small image and give it a name (ex: blue-stripes.jpg)

2- Go to the Shopify admin, go to the Content tab (left side of the screen), and open the Files tab.

3- Upload your image

4- Now open the Theme Editor and go to the Theme Settings. Open the Color swatches tab. In the Configuration input field, you need to type in the exact name of the filter, add a colon, and add the name of your image (without spaces). Make sure to include the image file extension. For example:

Blue stripes:blue-stripes.jpg

___

* Attention *

If your store is translated in multiple languages, make sure you don't translate the content where your color swatches are named and associated to a hex code. For example, if you're using the Translate and Adapt app provided by Shopify, you might translate this content by mistake if you hit the "Auto-translate" button. This would create a conflict and your color swatches won't be outputted properly. You can easily fix this by going to the General tab under Theme assets and remove the translation in the General: Color Swatch Configuration field:

Color swatches in the product variant selector

You can also showcase the color swatches as variant selectors instead of color names in a product page. In order to do that, click the Variant picker block in the product section. Inside the block, select Swatch from the "Color" option type setting. 

Keep in mind that you’ll need to update this setting for any product section that is added to the page, like for the Featured product section or Quick View popup.

Filter sidebar

On a large screen, the filters in collection and search result pages are displayed in a sidebar. To provide the best user experience to your customers, that sidebar has many functionality options. For example, if your store has a lot of categories that each contain a large number of filters, collapsing tabs may prevent long scrolling. This would also improve discoverability because the categories at the bottom of the sidebar could otherwise be hidden outside the viewport by default. On the other hand, a store with fewer filters and categories might benefit from having all the filters exposed by default. With the theme, this is a decision you are free to make, using the ‘Sidebar functionality on large screen’ setting located both in the Collection template and the Search template. To customize those templates in the Theme Editor, navigate to them or use the dropdown in the middle of the top bar (Search is located under “Others”).

*Note that if a category has more than 15 filters, it will truncate after the 10th filter to shorten the scroll length. A ‘+ More’ link below the 10th filter will allow the customers to view them all.

Automatic formatting

The ‘Auto formatting’ option is a great feature. When enabled, the theme will optimize the sidebar dynamically based on the number of filters and tabs. The layout will adapt according to the following algorithm:

1. If the number of filter categories is greater than 5, the first tab is expanded by default and the other tabs are collapsed. 
2. If the number of filter categories is 5 or less, the tabs are expanded and non collapsible.

Enabling the color swatches in your store

Color swatches are supported in the following components of the theme:

• Collection filters
• Featured collection section
• Featured product
• Product page
• Product recommendations
• Quick view popup

For each of those sections and pages, you must enable the color swatches by going into their corresponding settings. Note that the Quick View popup is customizable by using the dropdown in the middle of the top bar in the Theme Editor. Go to Products > quick-view

The theme provides different options for your cart: Popup notification, Page redirect, or Cart drawer. To customize your cart, you must go to the Theme Settings, and find the Cart tab:

When the type of cart flow is set to Popup or Page redirect, your customers will eventually be presented the Cart page before checking out. To customize this template, you can use the dropdown menu at the top of the Theme Editor and leverage the setting sidebar:

To customize the email popup, select “popup” in the left sidebar of the Theme Editor (located below footer). Then use the settings from the popup sidebar, which may be located on the right side of your screen if you're using a large display.

Why is this section useful?

Showing a popup when customers enter your online store can be an efficient way to increase your newsletter subscription base. But the popup can be used without the email subscription form if you need to show a promotion, or to ensure customers are seeing an important message. Note that customers may sometimes find popups annoying, especially if they show up on every recurring visit to your store. Use best judgment with that particular feature.

To use the popup for collecting email addresses, add the “Email form” block in the main sidebar. To use that section for displaying text without an email form, add the “Text” block instead. Only one block can be added. To change the block type, you must first delete the one that’s been added. Remember that blocks can be deleted by clicking “Remove block” at the bottom of each block’s setting sidebar.

Some popup examples

How to display the email icon in the header?

The theme allows you to display a newsletter icon in the header of your store so that your users can easily access the sign up form popup at any time. To enable this icon, you must go to the popup settings and enable the corresponding check box:

The theme provides a built-in Gift Card page template. To customize the Gift Card page in the Theme Editor, navigate to that template or use the dropdown in the middle of the top bar, under “Others”. Customize the main layout using the “Gift card” setting sidebar. That setting sidebar may be located on the right side of your screen if you're using a large display. 

Selling gift cards

In order for you to sell gift cards using the page provided for this purpose, you must set up gift cards in your inventory using the Shopify Admin. You do so by selecting “Gift Card” under “Product”. Learn more.

To customize the product page in the Theme Editor, navigate to that template or use the dropdown in the middle of the top bar.

The Product page comes with a lot of features and blocks. You can access the blocks from the sidebar under “Product information”. They’re designed to serve specific purposes, and can be reordered from the left sidebar, or customized using their block settings. Note that the “Product information” element in the sidebar also has its own settings to customize the main layout of the page.

Pro tip

Remember that when you customize a product page, you are actually customizing a template. This means that the information that is not determined by the product data from the Shopify admin (like when you add a section) will be the same across all product pages. You can avoid that and make the content dynamic based on the product featured on the page that uses that template. This is done by connecting the content to product metafields. It is also possible to create multiple templates with different sets of sections.

Blocks overview

Title, Price, Description, and Variant picker

The information in those blocks is determined by the product data in the Shopify Admin. It’s in the “Variant picker” settings that you can define whether you want variants to be laid out as buttons, or as a dropdown. It is also from there that you can enable color swatches. 

Text

This is probably the most useful block. You can, for example, connect it to a metafield to dynamically display the vendor for each product. Remember that the product description comes rather from the “Description block”, and its content is determined by the product data in the Shopify Admin.

Image

This block can be useful to include one or more images as blocks near the product description. Trust badges are a common use case. No need for an app!

Related products / Complementary products

If you are using a version of Upscale that is older than 2.0.0, follow those guidelines to showcase one or more products in the product details:

In the theme editor, add the Related product block. To connect the featured product(s) to a dynamic source using metafields, you must create a Product metafield, set up with a Product content type. Make sure to choose List of products (instead of One product), otherwise it will not work. Once this is done, at the bottom of every product page in the Shopify admin, you should find the metafield form field that you create where you can connect the desired featured products. Learn more about metafields in this article. 

If you are using Champion or a version of Upscale that is 2.0.0 or newer, follow those guidelines to showcase one or more products in the product details:

Install the Search & Discovery free app, and go to the Recommendations tab. Select products, and assign them Complementary products. Then, in the Theme Editor, add the Complementary products block to your product page.

Collapsible tab

This block is a great way to display more information about your products without bloating the page. Especially useful for the mobile experience. You can stack this block multiple times to create an accordion menu. 

Labels and icons

That block leverages the icon library that’s built-in in the theme. It’s a great way to draw attention on product specifications customers are usually looking for. For example, you could include the truck icon and connect the label to a product metafield so that each product can show its own shipping information. Another great example is the ruler icon that could have the label “size chart”. The settings allow you to then add a link to a page that features the proper size chart, which can be opened as a popup.

Stock availability

Yes, the theme does have this built-in widget! It’s easy to use. Define the low inventory threshold and customize the messages and icons. The three icons are the following: In stock (green check mark), Low inventory (yellow question mark), Back order (red question mark). 

Line item property

This block allows you to get some extra information from the customer when they purchase their product. For instance, you could display a check box for the customer to specify whether they want their product to be gift wrapped before they add to cart.

Share

This block displays a “Share” button so your customers can share the product page on their preferred social media.

Custom liquid

That section is there to give more freedom to advanced users with the Shopify platform, and to position the content as a reorderable block on the page.

Product rating & reviews

Star ratings and product reviews are not default features in themes. But the good news is that it’s easy to install the feature as an app… and Shopify provides one for free! All you need to do is go to the Shopify app store and install the Product Reviews app. Once done, you can go to the Theme Editor and customize the product page. In the settings sidebar on the left, select “Add section”. You should see the “Reviews” app block at the bottom. You may also want to display the star rating near the product title or price. Add the “Star rating” block, under “Product information”, and drag it to change its position on the page. Customize the layout and features of the reviews from the settings attached to each block, and from your Shopify Admin, under the “App” tab. Learn more. 

To customize the theme colors, click on Theme settings in the Theme Editor. Then, open the Color tab from the theme settings sidebar. That setting sidebar may be located on the right side of your screen if you're using a large display.

Our themes are built for color customization to be both simple AND very flexible. You first have to create your main color palette in the theme settings, which will automatically generate color schemes that are leveraged in the sections and blocks. Everything is taken care of so your store maintains good contrast and legibility. To ensure you don’t feel limited by the color schemes, those can also be manually overridden in each section when applicable. Color schemes are explained at the bottom of this page.

Styling pro tip

Start by deciding whether you want the main background to be white (or a light color), and the main text to be dark. This is the most common design on the web. The other option is what we refer to as “dark mode” (when the main background is dark and main text is light). Based on that decision, you can already customize the 2 first color swatches that are labeled as Default colors. Obviously, you will want those two colors to have sufficient contrast for the text on your store to be legible. 

Next, all you need to do is choose 3 accent colors following the contrast guidelines. Once this is done and you customize the sections, you will often be provided with a setting to choose a color scheme that is based on those five main colors. Note that the Accent 1 color is used for the buttons by default.

*If it’s important for you to ensure your colors meet the AA WCAG standard for accessibility, the theme will provide accessible color schemes as long as the customized colors have accessible contrast according to the guidelines. Take into account a bigger contrast buffer if you set up your Soft background with a high opacity purcentage.

Gradients

At the bottom of the color settings are optional gradients you can create. Each gradient has a label that matches its solid color above. Those are the colors that will be overridden by the corresponding gradient. To avoid unwanted visual effects and color glitches, the theme determines which elements support gradients and which don’t. For instance, bigger surfaces like the background of the footer support gradients, and smaller elements like icons and buttons don’t. For legibility and a professional aesthetic, it is highly recommended that the gradients and their solid color pairing match the same tone and darkness.

For example, here’s what you do if you want your footer to be a gradient based on colors that are close to your Accent 3: Create an Accent 3 gradient, and then go in the footer section to set the color scheme to Accent 3. Note that every other section using the Accent 3 color scheme might render the gradient as well.

Other color settings

Some small elements of the themes are exceptionally  using a color that is not customizable with the main color settings. For instance, the custom product badges are customizable in the Product cards tab of the theme

Color schemes explained

Below is an example of how the main color palette translates into the various color schemes:

Loess themes allow you to create custom product badges like “New”, “Trendy now”, “Staff pick”, etc…. You do so by using metafields.

1- Create a metafield definition

In the Shopify Admin, select Settings at the bottom left of your screen. Go to the Custom data tab, and then create a Product definition. Select “Add definition” at the top right of the page and create the metafield using the “Single line text” content type. The name of that metafield must be “Custom badge”. Make sure to select One value, and Single line text. the Namespace and key is custom.custom_badge. Close the page (the X at the top right).

2- Add a value to the metafield

Once the product metafield definition is created, it will be visible in the Shopify Admin when you edit your products. Select a product and scroll down to “Metafields” at the bottom of the page. Your metafield definition should be visible in the “Metafield” section. This is where you attribute the value specific to your product or variant. (Ex: Staff pick). It’s recommended to keep the label short.

3- Customize the design of the badge

The theme will detect when custom badges are created and will display them on the store when applicable. As long as the metafield name is “Custom badge” and the Namespace and key is unchanged. To customize the color and style of the badge, open the Theme Editor, and go to the “Theme Settings” tab on the left. Open the “Product” tab and change the relevant settings under “Product badges”. These settings may be located on the right side of your screen if you're using a large display.

To add a video section, click “Add section” in the main sidebar on the left. Then customize the layout using its setting sidebar. The section’s setting sidebar may be located on the right side of your screen if you're using a large display. You can delete the section by clicking “Remove section” at the bottom. 

The video and general look and feel of your section is customizable from the section settings sidebar. The content overlaid on the foreground (text and buttons) is created by adding blocks in the main sidebar on the left. Each of those blocks can be customized using their own setting sidebar, which may be located on the right side of your screen if you're using a large display. Remember that blocks can be reordered using drag and drop in the sidebar, and deleted by clicking “Remove block” at the bottom of each block’s setting sidebar.

Why is this section useful

This section is useful to display background videos that auto-play, as an aesthetic element of your store. You can also make the video player accessible by adding the button block and adding the video link. Users will then hear the sound from your video if applicable, and will be free to use the Youtube or Vimeo player controls.

You can also leave the “Background video link” blank and only have a background image by default. Adding a button block with a video link will display a “play” button that opens the video in a popup.

Why is there no sound on my video by default?

The majority of browsers support autoplaying video, but most of them have disabled starting videos if they have sound. This is a limitation of browsers to maintain good user experience which we cannot bypass, nor suggest attempting to bypass. Autoplaying background videos must be used mostly as an aesthetic element of your design.

Styling pro tips

This can make a good hero section (first section at the top of the Home page) when set to full-width.

Video URL issue

Some merchants are experiencing issues when using a video URL from Youtube in Shopify, and get an error message from the Theme Editor:

Video URL Fix

When this happens, there's a simple fix that may work for you. We suggest that you try to change this the URL as follow: change the shorts/ part for this watch?v=

For example:

To add a Promotion section, click “Add section” in the main sidebar on the left. Then customize the layout using its setting sidebar. The section’s setting sidebar may be located on the right side of your screen if you're using a large display. You can delete the section by clicking “Remove section” at the bottom. 

The general look and feel of your section is customizable from the section settings sidebar. The content of your section is created by adding blocks in the main sidebar on the left. Each of those blocks can be customized using their own setting sidebar, which may be located on the right side of your screen if you're using a large display. Remember that blocks can be reordered using drag and drop in the sidebar, and deleted by clicking “Remove block” at the bottom of each block’s setting sidebar.

Styling pro tips

Your grid composition can be made of product shots, collection cover images, or any image you might have at hand. Note that you can enable the link on collection and product images. You can use that section with three to six images, and change their position by reordering the blocks in the sidebar. Combine images that together will set a particular tone or mood. Below are some examples as per viewed on large screen.

Why that section is useful

That section provides a dynamic grid that breaks the monotony on a page and catches the eye. It’s a good way to highlight a product or a collection in a rich visual way.

How to best use that section

When used on a repeated template (for example the product page template), you may want the section to showcase different content per product rather than showing the same text and images over and over. There are two ways to achieve that: You can either create different product page templates, or connect the column content from the section to metafields.

Loess themes support blog post author images. Authors are members of your staff. You can manage your staff in the Shopify admin, in the Settings (bottom left of the screen), and then in the Users and permissions tab. More about managing staff. The staff must add their profil picture to their account:

When a blog post is created in the Shopify admin, there's a form field for you to define the author. You can assign the corresponding staff.

In the Theme Editor, you need to ensure the Show author image setting is enabled. That setting is located in the blog post page. In the left sidebar, find the Main blog post section, and click on the Author and date block. The block may not be already installed. If so, you can click on Add block and install it. This block can be reordered for the author and date to be displayed where you want it in the layout.

You can also enable author images whenever you add the Blog posts section: