Product pages

For your product pages, Highlight gives you a lot of options and custom sections to make your products stand out from the competition!

To tweak the layout of your product pages:

  1. Navigate to a product page in the theme editor.
  2. Click the Sections tab.
  3. Click Product page.
  4. You'll see the Content area, where you can tweak the content which appears in the product details. Such as vendor, SKU, barcodes, tax info, etc..
  5. In the Media area you can choose your media's aspect ratio, enable image zoom or video looping.
  6. At the top, you also have the Content area through which you can add various content that will appear in the right side (below the add to cart button). Each block needs to be a page, because using pages will allow you to write rich content, such as tables or add images or even videos if they are relevant there).

Using color swatches

Highlight has built-in support for color swatches, based on color names. 

So if a certain variant's name is a HTML valid color, it will show up in the front end as such. You can find a list of HTML valid color names here:

However, there may be instances where a store would require more specific swatches with complex colors or patterns. In this scenario, you can upload images for your swatches, but since the functionality isn't available in the theme, you will have to do a bit of tweaking for this purpose.

For any color swatch that you want to add, you just have to upload a 32x32px png file in your store's files section, with the name exactly the same as your product's variant handle.

For example, let's say that your product has a variant called "Dark Grey". You will want to create an image file name "dark-grey.png" and upload it into the Settings > Files section of your Shopify admin. That's it!

Wait a few minutes, as the images are cached and will take a bit to show on your site.

Adding extra content

There are two sections for adding special content to your product pages.

  1. Key product features
    • This is larger toggle section, which should be used to emphasize various product or even brand features. 
    • You need to choose an aspect ratio for all images to be the same size and have a clean layout. We have the same list of 180 icons that are available in the Text columns with icons section as well, but on top of this, you can even upload your own icons, 76x76px png files that will look sharp.
  2. Additional product images
    • This is actually a copy of the Images with text slider on the Homepage. The idea behind this section is to highlight various features of your products, provide closeups, usage scenarios, anything that grabs the user's attention after going through the main product images and details.
    • You need to choose an aspect ratio for all images to be the same size and have a clean layout.
Each block in these sections have a setting called Show on a single collection / product. This allows you to have different content on different collections or products. For example, if in your store you have apparel and accessories, you might want to offer some details about materials, sizing or consciousness, that you only want to be shown in a specific collection. You can use this feature here.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.