Appearance
Layout Editor (Drag-and-Drop)
The Layout Editor lets you customize your storefront's homepage, header, and footer using an easy drag-and-drop interface. No coding required -- just add sections, rearrange them, and configure their settings.
Accessing the Layout Editor
- Log in to your Admin Panel
- Go to Layout Editor in the sidebar
The Layout Editor has three tabs: Homepage, Header, and Footer.
Homepage Sections
The homepage is built from reusable sections that you can add, remove, reorder, and configure. Use the sidebar to manage sections and see a live preview of your changes.
Adding a Section
- In the Layout Editor, click Add Section
- Choose a section type from the list
- The new section appears at the bottom of your homepage
- Drag it to your preferred position
- Click the section to configure its settings
Removing a Section
Click the section you want to remove, then click the Delete or Remove button. The section will be removed from your homepage.
Reordering Sections
Drag sections up or down in the sidebar to change their order on the homepage. The preview updates in real time.
Enabling and Disabling Sections
Each section has an enable/disable toggle. Disabled sections stay in your layout but are hidden from customers. This is useful for seasonal content you want to keep but not display all the time.
Available Section Types
Shop Craft includes 12 section types you can add to your homepage:
Hero Banner
A full-width banner at the top of your homepage with a title, subtitle, and call-to-action button.
| Setting | Description |
|---|---|
| Title | The main heading text |
| Subtitle | Supporting text below the title |
| Button Text | Text for the call-to-action button (e.g., "Shop Now") |
| Button Link | Where the button takes customers when clicked |
| Hero Style | Choose between a solid color background or a background image |
| Background Image | Upload an image for the banner background |
| Overlay Opacity | How dark the overlay is on top of the background image (0-100%) |
| Text Alignment | Left, center, or right |
| Padding | Spacing above and below the section |
Featured Categories
Displays your top product categories in a grid with images. Great for helping customers navigate your store.
| Setting | Description |
|---|---|
| Title | Section heading (e.g., "Shop by Category") |
| Show View All | Toggles a "View All" link to your full categories page |
| Limit | Number of categories to show (e.g., 6) |
| Columns | Number of columns in the grid (e.g., 3, 4, or 6) |
Featured Products
Shows a selection of your products, filtered by sale status. Ideal for highlighting deals and promotions.
| Setting | Description |
|---|---|
| Title | Section heading (e.g., "On Sale") |
| Filter | Choose "On Sale" to show products with a sale price, or show latest products |
| Limit | Number of products to display |
| Columns | Number of columns in the product grid |
New Arrivals
Displays your most recently added products automatically. No manual curation needed.
| Setting | Description |
|---|---|
| Title | Section heading (e.g., "New Arrivals") |
| Limit | Number of products to show |
| Columns | Number of columns in the product grid |
Banner
A promotional banner with a custom background color, text, and optional button. Use it for announcements, sales, or seasonal messaging.
| Setting | Description |
|---|---|
| Title | Banner heading |
| Subtitle | Supporting text |
| Button Text | Optional button text |
| Button Link | Where the button leads |
| Background Color | Banner background color |
| Text Color | Banner text color |
Text Block
A simple section for custom text content with a heading. Use it for store descriptions, brand stories, or any custom messaging.
| Setting | Description |
|---|---|
| Title | Section heading |
| Content | The text content (supports basic formatting) |
Testimonials
Displays customer testimonials in a grid layout. Builds trust with potential buyers.
| Setting | Description |
|---|---|
| Title | Section heading (e.g., "What Our Customers Say") |
| Subtitle | Optional supporting text |
| Columns | Number of columns (e.g., 3) |
| Testimonials | List of testimonial entries, each with a quote, author name, and role |
Each testimonial entry has:
- Quote -- The customer's testimonial text
- Author -- The customer's name
- Role -- A label like "Verified Buyer"
Newsletter
An email signup section to collect subscribers. Great for building your mailing list.
| Setting | Description |
|---|---|
| Title | Section heading (e.g., "Stay in the Loop") |
| Subtitle | Supporting text (e.g., "Subscribe for updates, deals, and new arrivals.") |
| Button Text | Text on the subscribe button |
| Background Color | Optional custom background color |
| Text Color | Optional custom text color |
Image with Text
A side-by-side layout with an image on one side and text content on the other. Includes an optional call-to-action button.
| Setting | Description |
|---|---|
| Title | Section heading |
| Content | Text content next to the image |
| Button Text | Optional button text |
| Button Link | Where the button leads |
| Image | Upload an image |
| Image Position | Left or right side |
FAQ / Collapsible
An accordion-style section for frequently asked questions. Customers click a question to expand the answer.
| Setting | Description |
|---|---|
| Title | Section heading (e.g., "Frequently Asked Questions") |
| Items | List of Q&A pairs, each with a question and answer |
Each FAQ item has:
- Question -- The question text (shown as the clickable heading)
- Answer -- The answer text (shown when expanded)
Video Embed
Embed a YouTube or Vimeo video with an optional title and description. Perfect for product demos, brand videos, or tutorials.
| Setting | Description |
|---|---|
| Title | Optional heading above the video |
| Subtitle | Optional text below the heading |
| Video URL | The YouTube or Vimeo video URL |
| Aspect Ratio | Video aspect ratio (16:9 is standard) |
Multicolumn
A flexible multi-column layout for content like features, benefits, or service highlights. Each column can have its own heading, text, icon, and button.
| Setting | Description |
|---|---|
| Title | Optional section heading |
| Columns | Number of columns (e.g., 2, 3, or 4) |
| Column Content | List of column entries with heading, text, icon, button text, and button link |
Header Customization
Click the Header tab in the Layout Editor to customize your store header.
| Setting | Description |
|---|---|
| Show Category Navigation | Display a row of category links below the main header |
| Show Search | Show or hide the search bar in the header |
| Show Dark Mode Toggle | Let customers switch between light and dark mode |
| Logo Position | Align the logo to the left or center |
| Sticky Header | Keep the header fixed at the top of the page as customers scroll |
| Announcement Bar | Enable a banner across the top of the page with custom text, link, and colors |
| Announcement Bar Text | The message displayed in the announcement bar |
| Announcement Bar Link | Optional link -- clicking the bar takes customers to this URL |
| Announcement Bar Background | Background color of the announcement bar |
| Announcement Bar Text Color | Text color of the announcement bar |
TIP
The announcement bar is a great way to highlight sales, free shipping thresholds, or important notices. It appears above the main header on every page.
Footer Customization
Click the Footer tab in the Layout Editor to customize your store footer.
Footer Columns
You can add multiple columns to your footer, each with a title and a list of links. Common setups include:
- Quick Links -- About, Contact, FAQ
- Policies -- Terms & Conditions, Privacy Policy, Return Policy
- Customer Service -- Order Tracking, Help Center
Each link has a Label (the text customers see) and an Href (the URL it points to).
Social Links
Enable the social links section to display icons linking to your social media profiles:
- Twitter / X
Enter the full URL for each profile. Leave a field blank to hide that icon.
Payment Icons
Toggle Show Payment Icons to display accepted payment method icons in the footer (Visa, Mastercard, etc.).
Copyright Text
Set custom copyright text that appears at the bottom of the footer. If left blank, a default copyright notice will be displayed.
Saving Your Changes
After making changes to the homepage, header, or footer:
- Click Save to apply your changes
- Changes take effect immediately on your storefront
WARNING
The Layout Editor saves each section (homepage, header, footer) independently. Make sure to save your changes on each tab before switching to another.