To add products to your catalog:

• Click "Products" in the left sidebar to open the product list
• Browse or search for products
• Drag a product and drop it onto an empty grid cell on the canvas
• The product will appear in that cell with its image and details

To change the grid layout:

• Click the "Page" tab in the right sidebar
• Find the "Grid Guidelines" section
• Adjust the "Rows" and "Cols" (columns) values
• Use the "Gap" slider to control spacing between cells

Yes! EasyCatalog automatically saves your work to your browser's local storage every 60 seconds. You can also manually save at any time by clicking the "Save" button in the top-right corner. Your work will be restored when you return to the application.

Note: Clearing your browser data will remove saved catalogs. For permanent storage, export your catalog as PDF or HTML.

Drag and drop is the primary way to add products:

• Open Products Panel - Click "Products" in the left sidebar
• Find a Product - Browse or use the search bar
• Drag - Click and hold on a product thumbnail
• Drop - Drag over an empty grid cell (it will highlight) and release

Tips:

• Products already on the page are marked with a checkmark
• Drag a new product onto an occupied cell to replace it
• Press Delete to remove a selected product from its cell

To remove a product from a grid cell:

• Click on the product card to select it
• Press the Delete key on your keyboard
• The cell will become empty and ready for a new product

Alternative: Right-click on the card for a context menu with remove option.

To style product cards:

• Click on a product card on the canvas to select it
• Click the "Cards" tab in the right sidebar
• Use the various sections to customize:
  • Card Layout - Stacked or side-by-side arrangement
  • Images - Background color, fit mode, border radius
  • Content Area - Background, padding, alignment
  • Fields - Show/hide specific product fields
  • Card Border - Add borders and rounded corners

To style text fields:

• Click on a specific field within a product card (e.g., title, price)
• Click the "Properties" tab in the right sidebar
• Use the typography controls to adjust:
  • Font family
  • Font size and weight
  • Text color
  • Line height and letter spacing
  • Bold, italic, underline, and strikethrough

To set a page background:

• Click the "Page" tab in the right sidebar
• Expand the "Background" section
• For a solid color: Click the color swatch and choose a color
• For an image: Click the upload area and select an image file
• Choose the fit mode: Cover, Fit, or Stretch

Yes! You can select multiple cards and apply styles to all of them:

• Ctrl+Click - Add individual cards to your selection
• Ctrl+A - Select all cards on the current page
• Once multiple cards are selected, any changes you make in the "Cards" tab will apply to all selected cards

To copy and paste card styles:

• Select the card with the style you want to copy
• Click the "Copy Style" button (clipboard icon) in the Cards tab, or press Ctrl+C
• Select the card(s) you want to apply the style to
• Click "Paste Style" or press Ctrl+V

To adjust field width:

• Click on the specific field (e.g., title, price, SKU) within a product card
• Open the "Properties" tab in the right sidebar
• Find the "Width" control and adjust the slider or enter a percentage (10% to 100%)
• You can also set a max-width to prevent fields from stretching too wide

Tip: Set two fields to 50% width each to display them side by side on the same line.

To add barcodes to product cards:

• Select a product card on the canvas
• Go to the "Cards" tab in the right sidebar
• Find "Field Visibility" and toggle ON "Barcode"
• The barcode is generated automatically from the product's barcode field or SKU

Customize: Click on the barcode field and use the "Properties" tab to change format (CODE128, EAN13, etc.), size, and colors.

To add QR codes:

• Select a product card on the canvas
• Go to "Cards" tab -> Field Visibility
• Toggle ON "QR Code"
• The QR code is generated from the product URL or handle

Customize: Click on the QR code and adjust size (50-200px), colors, and error correction level in the Properties tab.

EasyCatalog supports multiple barcode formats:

• CODE128 - Versatile, supports all ASCII characters
• EAN13 - European Article Number (13 digits)
• EAN8 - Compact 8-digit EAN
• UPC - Universal Product Code (North America)
• CODE39 - Alphanumeric barcode
• ITF14 - Interleaved 2 of 5 (shipping)

To add elements to your page:

• Click "Elements" in the left sidebar
• Browse available elements: shapes, text boxes, images, QR codes
• Click an element to add it to the center of your page
• Or drag the element directly to your desired position

Available elements: Rectangle, Circle, Line, Arrow, Text Box, Image, QR Code, Barcode

Elements can be freely positioned anywhere on the page:

• Drag - Click and drag to move the element
• Arrow Keys - Nudge selected elements 1px at a time
• Shift + Arrow - Nudge 10px at a time
• Properties Panel - Enter exact X/Y coordinates

Tips: Elements snap to page edges and center lines. Hold Shift while dragging for axis-locked movement.

To resize elements:

• Corner Handles - Drag to resize proportionally
• Side Handles - Drag to change width or height only
• Shift + Drag - Hold Shift to maintain aspect ratio
• Properties Panel - Enter exact width/height values

To rotate elements:

• Select the element
• Grab the rotation handle (circle above the element)
• Drag to rotate freely
• Hold Shift to snap to 15 deg increments

Or enter an exact angle in the Properties panel (0-360 deg).

To create a fully custom content page:

• Add a new page using the + button in the page bar
• Set the grid to 1x1 (or any layout you prefer)
• Leave the grid cells empty (don't add products)
• Use the Elements panel to add shapes, text, and images
• Design freely - elements can go anywhere on the page

Perfect for: Cover pages, category dividers, promotional pages, contact info, terms & conditions.

To change element layering (z-order):

• Right-click on the element
• Choose from the context menu:
  • Bring to Front - Move to top layer
  • Send to Back - Move to bottom layer
  • Bring Forward - Move up one layer
  • Send Backward - Move down one layer

To add custom text:

• Go to Elements -> Text Box
• Click or drag to add it to your page
• Double-click the text box to enter edit mode
• Type your text and style it using the Properties panel

Styling options: Font family, size, weight, color, alignment, line height, letter spacing, background, border, and more.

To add custom images:

• Go to Elements -> Image
• Click or drag to add the image placeholder
• Click the placeholder to open the file browser
• Select your image file (JPG, PNG, GIF, WebP, SVG)
• Resize and position as needed

Supported formats: JPG, PNG (with transparency), GIF, WebP, SVG

To copy elements:

• Ctrl + C / Ctrl + V - Copy and paste
• Ctrl + D - Duplicate (creates offset copy)
• Alt + Drag - Drag while holding Alt to create a copy

To align multiple elements:

• Select multiple elements using Ctrl + Click
• Use the alignment tools in the Properties panel:
  • Align Left/Center/Right - Horizontal alignment
  • Align Top/Middle/Bottom - Vertical alignment
  • Distribute Horizontally/Vertically - Even spacing

To show variant information in a table format:

• Select a product card on the canvas
• Go to "Cards" tab -> Field Visibility
• Toggle ON "Variant Table"
• The table displays all product variants with their properties

Customize: Click on the variant table to adjust which columns to show, row limits, header styling, and zebra striping.

To display metafield data:

• Select a product card on the canvas
• Go to "Cards" tab -> Field Visibility
• Toggle ON "Metafields"
• Available metafields from your product data will be displayed

Options: You can show/hide labels, customize label text, and reorder metafields as needed.

Yes! When you click on the variant table field:

• Go to "Properties" tab in the right sidebar
• Find "Max Rows" setting
• Set the maximum number of variants to display (e.g., 5)
• Excess variants will be hidden to save space

To apply pricing calculations:

• Click on a "Discount Price" field within a product card
• In the "Properties" tab, find the "Discount & Tax" section
• Enter your values:
  • Fixed Discount - Subtracts a fixed amount
  • Discount % - Percentage off (e.g., 10%)
  • Tax % - Removes VAT/tax (e.g., 20% VAT)
  • Multiplier - Multiplies price (e.g., 1.5 for 50% markup)
• Click "Apply to Selected" or "Apply to All Products"

Yes! After applying discount calculations, a "Reset to Original Price" button will appear. Click this button to restore all prices to their original values. The original prices are saved when you first apply a discount, so you can always roll back.

To change the currency:

• Click "Catalog Settings" in the top navigation bar
• Find the "Currency" option
• Select your preferred currency (USD, EUR, GBP, etc.)
• The currency symbol will update throughout the catalog

To add prefix/suffix text:

• Click on the field you want to modify
• In the "Properties" tab, find "Text Before/After" section
• Enter text in "Before" field to add a prefix (e.g., "Price: ")
• Enter text in "After" field to add a suffix (e.g., " per unit")

There are several ways to add new pages:

• Click the "+" button in the page bar at the bottom
• Right-click on a page thumbnail and select "Add New Page"
• Use the keyboard shortcut (if available)

To delete a page:

• Right-click on the page thumbnail in the page bar at the bottom
• Select "Delete Page" from the context menu
• Confirm the deletion when prompted

Note: You cannot delete the last remaining page. The catalog must have at least one page.

To save a page as a template:

• Design your page with the desired grid, styles, and layout
• Click "Save this Page as Template" button in the Page tab
• Enter a name for your template
• The template is saved and will appear in the Templates sidebar

To apply a saved template:

• Click "Templates" in the left sidebar
• Find your saved template
• Click "Apply" to apply it to the current page

To add headers and footers:

• Click the "Page" tab in the right sidebar
• Find the "Header & Footer" section
• Toggle on the header and/or footer checkboxes
• Click on the header/footer area to edit the content
• You can add text, page numbers, or logos

To export as PDF:

• Click the "Export" button in the top-right corner
• Select "Export PDF" from the dropdown
• Choose your export settings (if prompted)
• The PDF will be generated and downloaded to your computer

Tip: For best print quality, ensure your images are high resolution.

Yes! You can export your catalog as HTML:

• Click the "Export" button in the top-right corner
• Select "Export HTML" from the dropdown
• An HTML file will be downloaded that you can open in any browser
• You can host this file on your website or share it directly

To undo changes:

• Press Ctrl+Z (Windows) or Cmd+Z (Mac)
• Or click the undo button (left arrow) in the top navigation

To redo changes:

• Press Ctrl+Y or Ctrl+Shift+Z
• Or click the redo button (right arrow) in the top navigation

If product images are not displaying:

• Check that the image URLs in your product data are accessible
• Ensure images are not blocked by CORS policies
• Try refreshing the page
• Check your browser's console for error messages

To improve performance:

• Close unused browser tabs
• Work with fewer products per page
• Use optimized (smaller file size) images
• Clear browser cache and reload
• Try using a different browser (Chrome recommended)

EasyCatalog auto-saves your work to browser storage. If you accidentally closed the browser:

• Simply reopen the application - your last saved state should be restored
• If auto-save hasn't captured recent changes, check if you have a manual save

Prevention tip: Regularly click "Save" and export important catalogs as PDF for backup.