What Are Blocks?

1. Blocks are smaller components that make up a section.
   
2. While sections define the overall layout or structure of a page (like a banner, product showcase, or testimonial section), blocks are the individual elements inside those sections — such as text, buttons, images, or icons.
   
3. Each section can contain multiple blocks, and you can freely customize or rearrange them to create the design and layout you want.
   

What Are Product Page Blocks?

1. Product Page Blocks are conversion-focused components you can add to your Main Product section in the product pages to highlight key information, build trust, and drive purchases. Each block serves a specific purpose. For example: countdown timers that create urgency, or trust badges that build customer's shopping confidence.
   
2. Although Product Page Blocks are primarily designed to boost conversions on product pages, you can still add them to other pages — such as your homepage or collection pages, depending on your purpose and layout needs.

Why Use Product Page Blocks?

1. Personalize Every Product Page: Show different blocks on different products to highlight what matters most.
2. Boost Conversions: Strategic placement of conversion elements helps guide customers toward purchase decisions by providing the right information at the right time.
3. Save Time and Money: Get a complete suite of conversion-focused elements in one app, no need for multiple subscriptions or expensive developers.
4. Easy Customization: Drag-and-drop installation with full design control. Customize colors, fonts, spacing, and content to match your brand perfectly.
   

Installation Guide

Follow these simple steps to add Product Page Blocks to your store:

Step 1: Install the Block to Your Theme

1. Go to the Block Library
2. Select the block you want to use
3. Click Install, then choose the theme you’d like to add it to.
4. The block will be added to your theme - just like installing a section.
   

After installation, you’ll see a success notification. From there, you can open the Theme Editor directly to start customizing your block.

Step 2: Navigate to the product page you want to customize

1. Go to Online Store → Themes → Customize
2. Choose the product page template you want to customize
   

Step 3: Add Your Block

1. Click "Add section" in the Theme Editor
2. Search for your desired Tapita block (starts with "Tpt", under Tpt block area)
3. Click on the block to add it
   
4. The block will appear in the section list but won't be visible on the page yet
   

Step 4: Add TPT-Block as Placeholder

1. Scroll through your sections list to find "Product information" (may also be called "Main product") - the Product section in your product page. This section contains your product title, price, and buy button
2. Within the Product Information section, click "Add block"
3. Select "Apps" from the block type menu
4. Search for "TPT-Block"
   
5. Click to add it
   

The TPT-Block acts as a placeholder that displays your conversion block in the desired location.

Step 5: Link Your Block

You have two options to connect your block to the TPT-Block placeholder:

Option A: Use Target Selection Dropdown 

1. Click on the TPT-Block you just added
2. Find the "Target Selection" dropdown
   
3. Choose your block name from the list
   

Now, the block will appear.

Option B: Use Custom Target ID

1. Navigate to your conversion block (added in Step 3)
2. Click to open its settings
   
3. Find and copy the "Target Selection ID" (e.g., data-tpt-countdown-block-2-target)
   

1. Return to the TPT-Block settings
   
2. Paste the ID into the "Custom Target ID" field
   

Note: If you use both methods, the Custom Target ID will override the dropdown selection.

Step 6: Position Your Block

1. Drag the TPT-Block to your desired position within the Product Information section:
1. Below product title - Great for trust badges
2. Above buy button - Perfect for countdown timers
3. Below buy button - Ideal for payment icons
   ...

Your block will appear wherever you place the TPT-Block.

Step 7: Customize Your Block

1. Click on your conversion block (not the TPT-Block)
2. Customize as needed:
1. Text content and messaging
2. Colors (backgrounds, text, borders)
3. Typography 
4. Spacing
5. Block-specific settings (timer duration, badge selection, etc.)
   

1. Changes preview in real-time
   
2. Click "Save" when you're satisfied
   

Now you know how to add Tpt - Block to your Product page! Head to the Block Library and start adding blocks to your product pages today!

If you have questions or run into any issues, please don't hesitate to reach out through the Tapita app or contact us at support@tapita.io