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
There are two sections 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 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.
- 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.