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:
- Navigate to a product page in the theme editor.
- Click the Sections tab.
- Click Product page.
- 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..
- In the Media area you can choose your media's aspect ratio, enable image zoom or video looping.
- 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: https://htmlcolorcodes.com/color-names/
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
On previous versions this feature was available in a different, more limited form.
There are two blocks for adding special content to your product pages.
- Key product features
- This is larger toggle section, which should be used to emphasize various product or even brand features.
- You can upload your own icons, 76x76px png files that will look sharp.
- You have up to 6 slots for unique product features that you may want to emphasize here.
- Additional product images
- This is actually a copy of the Images with text slider . 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.
- You have up to 6 slots for product images. This limited space is best used with a limited amount of images, but if you have more images, we encourage you to use other sections below the product information, such as Gallery.