Product

The template is managed through:

Customize Theme → Drop-down menu in the top center → Products

Introduction:

The Product template is a fundamental aspect of a Shopify store, as it determines how product listings are displayed to customers. Customizing the Product template enables merchants to showcase merchandise effectively, provide essential product information, and create a visually appealing browsing experience for visitors.

Sections overview:

The Sections Overview provides a detailed exploration of the various customizable sections available within the Product template. Each section offers unique settings and options to aid in tailoring the appearance and functionality of product pages, aligning with the brand and meeting business objectives. From the product grid and featured collections to related products and testimonials, a range of versatile sections are available to enhance merchandise presentation and elevate the shopping experience for customers. ONLY the sections that are present but not available in the home page template will be included in the following description:

I. Product:

• Color scheme: With that setting, the user can choose the color scheme of the section. For more information on setting up the color schemes, refer to Theme settings → Colors → Schemes.

• Make section full width: Allows the user to use the full width of the screen (small gaps are left at both ends that cannot be absorbed).

• Media layout: Gives the user the choice between tree layout styles: Featured grid, Grid and Stacked.

• Aspect ratio: Gives control over the aspect ratio of the product images. One of three possibilities is to be chosen: Original, Portrait or Landscape.

• Add block: All the blocks compile information about the product. Most of them don't have additional settings for customization.

  • Title: Represents the title of the product.

  • Price: Represents the price of the product.

  • Variant picker: Represents the variants of the product.

    • Style: One of two possible styles is to be chosen: Pills or Dropdown.

  • Quantity selector: A block that activates the quantity setting in the Featured product section.

  • Buy buttons: Represents the 'ADD TO CART' and 'BUY IT NOW' buttons.

    • Show dynamic checkout buttons: Enables or disables the 'BUY IT NOW' button, which will redirect the client directly to the checkout.

    • Show recipient information form for gift cards: Enables or disables the option for sending the gift cards as a personalized gift through e-mail by controlling the message and the receiving date.

  • Vendor: Add the block, and the vendor will appear, which has been provided in the product settings in the admin panel.

  • SKU: Represents the SKU code of the product.

  • Inventory status: Responsible for tracking the quantity of every variant in stock.

    • Show inventory count: Enables or disables the quantity counter on a product.

    • Low inventory threshold: A setting that gives the user the option to control the minimum quantity of every variant, so the block activates the stock notification message 'Low stock'.

  • Pickup availability: Represents the pickup availability of the product.

  • Selling plans: It's a block responsible for the purchase options of the selected product. In order to be able to fully use this block, it is necessary to install an additional application (we recommend PayWhirl, but other apps can be used according to the user's preferences) and configure it for the desired products. Please follow the steps below to set up a subscription plan: 1. Go to Paywhirl App → Plans → Create and create a subscription plan. 2. Go to Products ( → Select the desired product) → Add purchase option → Select existing option.

  • Shop Pay Installments: Allows the user to use Installment payments. Note: 'shop' app should be installed prior to using this feature. For more information, please see the following link.

  • Description: Represents the description of the product.

  • Custom liquid: Тhis block allows the users to directly put in a code into the field through which they can build a completely custom block.

II. Complementary products:

In this section, the user can set the appearance of the related products. The related products can be customized manually by adding 'Complementary products' through the app 'Search & Discovery', which can be found in the app store.

• Color scheme: With that setting, the user can choose the color scheme of the section. For more information on setting up the color schemes, refer to Theme settings → Colors → Schemes.

• Make section full width: Allows the user to use the full width of the screen (small gaps are left at both ends that cannot be absorbed).

• Scrollbar: A setting that enables or disables the scrollbar. See the illustration below.

  
• Auto-rotate slides: A setting that enables auto-rotating of the selected products in the section. When the last product in the section has been reached, the rotation restarts.

• Change slides every: Give the user the control to modify the interval in seconds for every slide to stand on the screen. It can vary from 3 to 10 seconds.

• Text alignment: Gives control over the horizontal positioning of all the text. One of three possibilities is to be chosen: Left, Center or Right.

• Heading: Enter a heading for the slide.

• Heading size: Gives control over the heading font size. One of three possibilities is to be chosen: Small, Medium or Large.

III. Recommendations products:

In this section, the user can set the appearance of recommended products. The recommended products can be generated automatically or manually for each product. Manual customization can be done by adding products in 'Related products' through the app 'Search & Discovery', which can be found in the app store.

• Color scheme: With that setting, the user can choose the color scheme of the section. For more information on setting up the color schemes, refer to Theme settings → Colors → Schemes.

• Make section full width: Allows the user to use the full width of the screen (small gaps are left at both ends that cannot be absorbed).

• Scrollbar: A setting that enables or disables the scrollbar. See the illustration below.

  
• Auto-rotate slides: A setting that enables auto-rotating of the selected products in the section. When the last product in the section has been reached, the rotation restarts.

• Change slides every: Give the user the control to modify the interval in seconds for every slide to stand on the screen. It can vary from 3 to 10 seconds.

• Text alignment: Gives control over the horizontal positioning of all the text. One of three possibilities is to be chosen: Left, Center or Right.

• Heading: Enter a heading for the slide.

• Heading size: Gives control over the heading font size. One of three possibilities is to be chosen: Small, Medium or Large.

Tips:

The user can change the preview product by clicking the Change button on the top left corner of the page.