Featured product / Product page

This section loads your products from the product editor you have created.

Title

Modify the product title in the Products Editor.

Description

Alter the product description in the Products Editor.

Images

Add images in the Products Editor.

  • Remove Background: If your product photos have a plain white background, you can make it transparent by enabling 'Remove Image Background'.
  • Covers on the Image: You have the option to add covers over the first image while 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'.

Expandable Box

  1. In the Text Description, click on Insert Dynamic Source.
  2. At Product - Current Section, click Show More > then (+) Create Metafield.
  3. By clicking on Product > Add Definition, you can create a multi-line text field.
  4. On the main site, click on Products and select your product.
  5. Scroll to the bottom to 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.

Variant Picker / Swatch color

Create your own variants, like adding color 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 be in the format '#optionname_variant-name', e.g., '#colour_pink' for Pink and '#colour_dark-pink' for Dark Pink.
  3. Use hyphens instead of spaces and make sure all the code is low capital!

If you added a Colour variant in your product editor, the theme will recognize and use plain colors. You can also add your own color files for custom colors.

  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 (e.g., .png).
  5. Ensure the filename matches the variant's option name, e.g., pink.png for Pink, dark-pink.png for Dark Pink.

If you sell the same products internationally, you can highlight the sizing system.

  1. Go to Theme Settings > Products > Size Swatches.
  2. Add the sizing system you are using.

Quantity Selector

This allows customers to add more than one item to the cart.

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

Buy Buttons

Dynamic buttons may not appear in the editor! 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 a COD payment option on your website, you can show its icon as well. Just check Enable Cash on Delivery Button.

Pickup Options

This block shows the locations where this product is available.

  1. On the main page, go to Settings > Locations and click Add Location.
  2. After saving, these locations will be available in your Product Editor.
  3. Go to Products, select your product, and scroll to Quantity and click on Edit Locations.

Social Share

Modify the list of social platforms in Theme Settings.

  1. Go to Theme Settings.
  2. Select Social Media and scroll down to Sharing Options.

Vendor

Edit this block in the Product Editor.

  1. Go to Products > Select a product.
  2. Scroll to Product Organization.

SKU

This block shows the product's unique SKU codes.

  1. Go to Products > Select a product.
  2. Scroll to Inventory.

Inventory

This block alerts customers about the stock status.

  • In Stock: Visible if the inventory is greater than the Inventory Threshold.
  • Only a Few Items Left: Visible if the inventory is under the Inventory Threshold. You have the option to hide the remaining number of the product. Uncheck Low Stock Counter in this case.
  • Sold Out: Visible if the inventory is 0 or less.
  • Inventory on the Way: Create Transfer and add Estimated Arrival. Learn more.

Trust Badges

Upload a picture of your own badges. You also have the option to use an SVG file.

  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 the 'Image Link' input field.

Rich Text

Rich text can only be displayed at the bottom of the product section. This block features a special design and background color options to enhance the design.

Bundles

You can offer accessories or add on products to buy them in a bundle.
  1. Go to Products > Collections
  2. Create a collection for your bundle that you want to show as add-ons

Complementary

You can add complementary, recommended or recently viewed products on your product page.

Shop the look

Product tags can direct you to the product page or scroll to the product itself within this section.

  1. Click on 'Select Product'.
  2. Set the horizontal and vertical position of the tag

Membership

You can hide content from visitors who are neither registered nor subscribed customers.

With this block, you can also create a specific player for Music or Video content.

  • Video Content: Simply upload videos in your Product Editor.
  • Music Content: Once you have your variants, click on the Product Image > Add Alt Text. Your alt name should be formatted as '#audio_url', e.g., '#audio_my-music.mp3'.

Tags

You can display product tags in the description area.

Custom Liquid

There's no need to edit the Theme file anymore. Just add this block, and you can include any HTML or Shopify liquid codes. For more information, click here.

On this page