Featured product / Product page

Title

You can modify the title of the product in Products editor

Description

You can modify the description of the product in Products editor

Images

You can add images in the Products editor.

Remove background

If you have product photos with plain white background you can make the background transparent by enabling 'Remove image background'

Covers on the image

You have the option to add covers over the first image during scrolling down.

  1. Go to Products > Select a product
  2. Add a .png image with the same dimensions as the first image!
  3. Click on the Cover image > Edit alt text > Add '#cover'

Note: If you have multiple variants add '#cover_all' to appear on different every variants first image. If you want to separate cover images based on variant option you can do that by adding the option name. '#cover_option-name', example: #cover_red, #cover_blue.

Review

You need to install Shopify's Review app from the Shopify app store to use this block. Learn more

Expandable box

  1. In the Text description clink on Insert dynamic source

  2. At Product - Current section click Show more > then (+) Create Metafield

  3. By clicking on Product > Add definition you can easily create a multi-line textfield
  4. On the main site click on Products and select your product
  5. Scroll to the bottom where you can see Metafields and the Input box you've created

  6. Add your text and hit save! This content will appear in the Expandable box if the product has this metafield filled.

Price

  1. Go to Products and select your product

  2. Select a variant and click Edit

  3. Add your price to Compare at price

Note: Price comparsion only works if the product has a current price and a compare price.

Variant picker

Create your own variants the same way, example: add colour with Pink and Dark pink variants.

  1. Once you have your variants click on the Product image > Add alt text

  2. Your alt name should look like this: '#optionname_variant-name', e.g. if your variant is Pink use '#colour_pink'. If your variant is Dark pink then use '#colour_dark-pink'
  3. Make sure you used hyphens instead of spaces.
Note: Anything in the alt field before or after this code will be printed to the page as expected, and the rest will be used for our image set feature.

If you added a Colour variant in your product editor, the theme is going to recognise and use plain colours. You can add your own colour files as well if you want to use custom colours.

  1. On the main page go to Content > Files

  2. Click the Upload files button and select your .png file

  3. Go to Theme settings > Products > Colour swatches.

  4. Choose the file format you want to use. (In this example we used .png)

  5. Make sure you use the same filename matches with the variant's option name, e.g. Pink variant's file should be named as pink.png. Complex colours like Dark pink should be named as dark-pink.png.

Note: Make sure after selecting a file format every uploaded color swatch image should match with that!

If you sell the same products internationaly you can highlight the sizing system.

  1. Go to Theme settings > Products > Size swatches
  2. Add what sizing system are you using.

Note: This will be visible only with Size variants!

 

Quantity selector

This gives the option for customers to put more items to the cart than one.

Note: If you remove this block the default qunantity is 1.

Buy buttons

In the editor dynamic buttons may not appear! In the live view if you have multiple payment options enabled they will appear here, like PayPal, ApplePay, GooglePay, ShopPay, etc.

Payment options

If you have COD payment option on your website, you can show its icon as well! Just check Enable cash on delivery button

Pickup options

This block will show those locations where this product is available.

  1. On the main page go to Settings > Locations and click Add location

  2. After saving it these locations will be available in your Product editor!

  3. Go to Products and select your product

  4. Scroll to Quantity and click on Edit locations

Social share

You can modify the list of the social platform in Theme settings.

  1. Go to Theme settings

  2. Select Social media and scroll down to Sharing options

Vendor

You can edit this block in Product editor

  1. Go to Products > Select a product

  2. Scroll to Product organization

Sku

This block shows the product's own unique sku codes.

  1. Go to Products > Select a product

  2. Scroll to Inventory

Inventory

This block can alert the customers if your shop has ran out of stock or going to run out or still available!

In stock: This message is visible if the inventory is greater than the Inventory treshold

Only a few item left: This message is visible if the inventory is under the Inventory treshold. You have the option to hide the remaining number of the product. In this case uncheck Low stock counter.

Sold out: This message is visible if the inventory is 0 or less.

Inventory on the way: Create Transfer and add Estimated arrival. Learn more

Trust badges

Upload the picture of your own badges. You have the option to use svg file as well.

  1. On the main page go to Content > Files

  2. Click the Upload files button and select your .svg file

  3. Click on Copy link

  4. Paste the link in Image link input field

Rich text

Rich text can be shown only on the bottom of the product section. This block has a special design and background color option to make the design more elevated.

Membership

You can hide content from visitors who are neither a registered or a subscribed customer.

Also with this block you can create specific player for Music or Video content.

Video content

Simply upload videos in your Product editor

Music content

  1. Once you have your variants click on the Product image > Add alt text

  2. Your alt name should look like this: '#audio_url', e.g. #audio_my-music.mp3

Note: Make sure you used hyphens instead of spaces and you use mp3 format!

Tags

You can show product tags in the description area

Custom liquid

You don't need to edit the Theme file anymore. Just add this section and you can add any HTML or Shopify liquid codes. For more info click here.

Back to Template

Editors picks