How to Use Product Blocks: Display and Sell Items Across Your Website

How to Use Product Blocks: Display and Sell Items Across Your Website

By Michael Chen

December 31, 2024 at 07:45 PM

Product blocks allow you to feature shop items anywhere on your website by linking directly to checkout. Here's how to use them effectively:

Requirements:

  • Active shop page containing the product
  • Published and visible product
  • Enabled shop page

Adding a Product Block:

  1. Edit a page/post
  2. Click "Add Block"
  3. Select "Product"
  4. Click pencil icon to edit
  5. Search and select product in "Add a Product" field
  6. Click "Save and Continue"

Red Chili and Half Dill Pickle

Red Chili and Half Dill Pickle

Customizing Product Display:

  • Alignment: Left, center, or right
  • Toggle display options:
    • Product image
    • Title
    • Price
    • Description
    • "Add to Cart" button
    • Quick View

Button Customization:

  • Change button text in product editor
  • Style button design via Website Style > Buttons
  • Button follows primary style options

Product Block Styling:

  • Text/fonts follow website style settings
  • Block width adjusts to content area
  • Shape matches product image aspect ratio
  • Search includes titles, descriptions, tags, categories

Troubleshooting:

  • Wrong image? Change selected product image
  • Cart issues? Ensure shop page is enabled
  • Search limited to 7 results
  • New products may have delayed search appearance

For Custom Shop Layout:

  1. Create products on shop page
  2. Add product blocks to desired page
  3. Move shop page to "Unlinked" to hide from navigation
  4. Keep shop page enabled for cart functionality

Related Articles

Previous Articles