SureCart Integration User Guide for Reign Theme

Get Started

This guide helps you set up and use SureCart e-commerce functionality with your Reign theme. The integration provides a seamless shopping experience while maintaining your site’s professional design.

Getting Started

Prerequisites

  1. Reign Theme – Ensure Reign theme is installed and activated
  2. SureCart Plugin – Install and activate SureCart from WordPress repository
  3. Initial Setup – Complete SureCart’s setup wizard

Key Features

1. Shopping Cart Icon

  • Automatic Display: Cart icon appears in your header
  • Real-time Updates: Shows current cart item count
  • Customizable Position: Arrange with other header icons

2. Optimized Page Layouts

All SureCart pages automatically use full-width layout:

  • Shop page
  • Checkout page
  • Cart page
  • Customer Dashboard

3. Clean Product Pages

  • No duplicate titles or images
  • Seamless design integration
  • Mobile-responsive layouts

Configuration Guide

Managing Cart Icon Display

  1. Go to Appearance → Customize
  2. Navigate to Header → Header Layout Manager
  3. Find Header Icons Set in the options
  4. Look for SureCart Cart in the sortable list
  5. Drag to reorder or remove from active icons
  6. Click Publish to save

The cart icon will only show when SureCart is active and WooCommerce is not installed.

Customizing Page Layouts

While SureCart pages use full-width layout by default, you can customize individual pages:

  1. Go to Pages in WordPress admin
  2. Find your SureCart page (Shop, Checkout, etc.)
  3. Click Edit
  4. In the Reign Layout Settings metabox:
    • Layout: Choose from Full Width, Left Sidebar, or Right Sidebar
    • Hide Title: Toggle to hide page title
  5. Update the page

Product Page Settings

For individual products:

  1. Edit any SureCart product
  2. Use Reign Layout Settings to:
    • Set custom layout
    • Control sidebar display

Setting Up Your Store

1. Shop Page Setup

SureCart creates pages automatically. If needed:

  1. Go to SureCart → Settings → Pages
  2. Select pages for:
    • Shop Page
    • Checkout Page
    • Cart Page
    • Customer Dashboard

2. Adding Products

  1. Go to SureCart → Products
  2. Click Add New
  3. Fill in details:
    • Product name and description
    • Featured image and gallery
    • Pricing options
    • Inventory settings
  4. Publish when ready

3. Creating Collections

  1. Go to SureCart → Products → Collections
  2. Create collections to organize products
  3. Assign products to relevant collections

Design Customization

Header Cart Styling

The cart icon inherits your header’s styling:

  • Matches header text color
  • Aligns with other icons
  • Follows sticky header behavior

Layout Options in Customizer

  1. Products Archive Layout

    • Go to Appearance → Customize
    • Navigate to Site Layout → SureCart Products
    • Choose layout for product archives

  2. Single Product Layout

    • Same location as above
    • Set default layout for all products
    • Override per-product if needed

Custom CSS

Add custom styles:

  1. Go to Appearance → Customize
  2. Navigate to Additional CSS
  3. Add your styles

Example:

/* Custom cart icon color */
.rg-surecart-cart-icon-wrap sc-cart-icon {
    color: #e74c3c;
}

/* Product button styling */
.sc-product-buy-button {
    background: #3498db;
    border-radius: 5px;
}

Mobile Experience

Responsive Features

  • Cart icon adapts to mobile header
  • Touch-friendly cart interaction

Mobile Menu Integration

The cart icon appears in your mobile menu when enabled, maintaining easy access on all devices.

Troubleshooting

Cart Icon Not Showing?

Check these:

  1. ✓ SureCart plugin is active
  2. ✓ WooCommerce is not installed
  3. ✓ Cart icon is in active header icons
  4. ✓ Clear cache plugins

Layout Issues?

Solutions:

  1. Check page-specific layout settings
  2. Verify theme customizer settings
  3. Clear browser cache
  4. Disable caching temporarily

Products Missing?

Verify:

  1. Products are published
  2. Shop page is set correctly
  3. No plugin conflicts

Advanced Features

Using Blocks

Reign fully supports SureCart blocks:

  1. Product Grid

    • Add to any page/post
    • Customize columns
    • Filter by collections

  2. Cart Button

    • Place anywhere
    • Shows item count

  3. Checkout Form

    • Embed on any page
    • Customize fields

Page-Level Controls

Each page/post has individual controls:

  • Layout: Override default
  • Sidebar: Show/hide
  • Title: Display options
  • Header: Enable/disable

Best Practices

Performance Tips

  1. Optimize Images: Compress before uploading
  2. Use Pagination: For large catalogs
  3. Enable Caching: Exclude cart/checkout pages

SEO Optimization

  1. Product Titles: Use descriptive keywords
  2. Alt Text: Add to all images
  3. Meta Descriptions: Unique for each product

User Experience

  1. Clear Navigation: Use collections effectively
  2. Quick Access: Keep cart visible
  3. Trust Elements: Add security badges

Frequently Asked Questions

Q: Can I use both SureCart and WooCommerce?
A: While possible, we recommend one e-commerce solution for best performance. The cart icon shows WooCommerce when both are active.

Q: How do I change layouts for all products?
A: Use Customizer → Site Layout → SureCart Products →Single to set defaults.

Q: Can I hide the cart icon?
A: Yes, remove it from Header Icons Set in the Customizer.

Q: Are digital products supported?
A: Yes! SureCart handles both physical and digital products.

Q: Can I create member-only products?
A: Yes, combine with Reign’s membership features for exclusive products.

Getting Help

Resources

  • SureCart Docs: docs.surecart.com
  • Reign Support: Through your purchase platform
  • Community: Join the Reign community
Last updated: July 30, 2025