Products

Overview

Offers more detailed and fine control over how the Product Grids on the Home Page, Product Page and Collection Page Template will appear and function.

Reviews

Enable

Review stars and the reviews counter will appear under the Product Name, if applicable:

Collection Image

To display the collection's image at the top of the page, check the "Show collection image" option. You can then enable the parallax effect and define the size of the image below.

To add a Collection Image, please see the guide below for further information:

Note:

The parallax effect will only work if the collection image size is not set to "Original".

Layout

Feature

Sidebar

Grid

Enable Discount Savings

If you would like to display the discount amount on products which are on sale, select one of the following options from the Enabling discount savings? drop-down menu:

  • ​Percentage​

  • Value​

If you do not wish to display the discount amount, simply select Hide.

These discount savings tags will only be visible on items which are on sale.

Percentage

The percentage of how much your customers save will be displayed in this tag.

Discount showing as a percentage.

Value

The value of how much your customers save will be displayed in this tag.

Percentage showing as a value.

Product Grids

Grid image size

Similar to the Auto-height function present elsewhere in the theme, this allows you to instantly pick between four sizes/Aspect Ratios for the Product Images:

Note:

If possible, we would still recommend uploading all Product Images in a consistent set of Image Dimensions - this is more of a forced solution, than an elegant setup.

See our Image Size guide for more details:

Natural

The original, native dimensions the image was uploaded in.

Square

Squared images - great for uniform looks or sites geared with a Mobile focus.

Tall

Portrait shaped - good for vertical shaped products and Collections with lots of Products and thus images.

Wide

Landscape shaped - good for smaller collections and Product Images that need to display more details.

Note:

This is an automatic change- using a different aspect ratio from the native dimension for your Product Images may result in image content being hidden.

You can see this on the edges of the images in the clip above.

Where possible, match your native Aspect Ratio as closely as possible!

Enable quick view

When the button is clicked, a drawer with a detailed product overview is shown.

Show add to cart buttons

Replaces the Quick view button with an Add to Cart button, for immediate conversions:

Note:

This cannot operate alongside the Quick View, which must be disabled for this to function.

Note:

If you have a Product with multiple Variants, the theme's code will automatically convert this to read ' View Options' and open the Quick View menu, so the customer can still correctly select their desired variants:

Gift Wrapping

This option enables a gift wrap product, and customers can choose to gift wrap on a per-product basis from the product page.

The gift wrap product is automatically added to the cart with the product if the 'gift wrap this product' box is checked.

Within the cart itself, the quantity of the gift wrap matches the quantity of product chosen - gift wrap quantity will be automatically updated/removed in the cart drawer when changing product quantity.

Setup

Setting up the Product

  1. From your Shopify admin, go to ProductsAll products.

  2. Click Add product.

  3. Create a gift wrap product just as you would create any other product:

You can use your product description to explain what materials will be used to gift-wrap the items.

Once done, give your gift-wrap product the price that you want to charge for the service - if you want gift wrapping to be free, then set the price of your gift-wrap product to be 0.

If preferred, you can upload an image for the product to show your customers what a gift-wrapped order will look like:

Please note: Please ensure that your gift-wrapped product includes inventory, or else adjust the settings so that Shopify doesn't track inventory for the gift-wrap product.

If your store has multiple locations, then uncheck Track quantity to prevent Shopify from tracking inventory for the gift-wrap product.

Product settings

  1. In the theme editor, go to Theme settings → Products:

2. Check the 'Enable gift wrap option' checkbox

3. Select the product you created in step one under the 'Gift wrap product' field.

4. Customise the checkbox label text, if preferred.

5. You should see the checkbox appear on the product page just above the quantity selector:

6. When that box is checked, and the product is added to the cart by the customer, the gift wrap product is added to the cart automatically:

7. This works with each of the three different cart actions: Cart drawer, Added message and Cart page

Cart settings

1. The merchant can decide whether or not to offer a gift note text area in the cart:

This works in the same way as the existing cart notes, and will come through in an order under the 'Additional details' panel:

Influencing factors

Automatic discounts

The gift wrap product will trigger any automatic product discounts based on product numbers, as another gift wrap product is added to the cart.

For example, if a discount like '£10 off when you buy 10 products' with no specific products chosen is set, the gift wrap product would count towards that 10.

Cart page

This option works best when the Cart is set to the 'Cart Drawer' mode.

The automatic quantity changing seen in the cart drawer won't operate the same on the Cart Page (which is used when the Add to cart action is set to 'added message' or 'cart page')

The 'Gift wrap: yes' text in the cart can't be reliably removed when the gift wrap product itself is removed or quantity changed - we disabled the 'quantity +/- ' buttons for the gift wrap product, to prevent any misuse.