Groceria

Getting started

↑ Back to top

Welcome to the official documentation for Groceria – Groceries Store WooCommerce Theme.

Thank you for choosing Groceria! We’ve put a lot of love and effort into developing this WordPress theme, and we’re thrilled you’ve selected it for your website. This guide will help you understand the main features of Groceria, as well as how to use and customize it to suit your needs.

About the theme

↑ Back to top

Groceria is a modern WooCommerce theme thoughtfully designed for the grocery store niche. Whether you’re setting up a fresh produce market or a full-fledged online supermarket, Groceria offers the perfect foundation.

Built as a block theme with Full Site Editing (FSE) support, it leverages theme.json and custom block styles extensively for flexible customization. Styles are inlined and loaded on demand for optimal performance, while a minified global CSS file ensures consistency across the site. All bundled images are carefully optimized to maintain fast loading times and visual quality.

Theme Philosophy

↑ Back to top

While WordPress theme development has evolved significantly over the years, its core principles have remained unchanged. A theme’s primary purpose is to define the visual presentation of a website — not its functionality. In other words, a theme should control how your site looks, not how it works.

When a theme dictates your site’s behavior, it becomes difficult to switch themes or modify specific functionalities later. Ideally, a website’s features and behavior should always be managed by plugins, not by the theme itself.

For instance, Groceria does not create or manage your contact form; it only styles it. You are free to use any contact form plugin — such as Jetpack, WPForms, or Contact Form 7 — and Groceria will seamlessly style it to match your site’s design.

We’ve built Groceria with this philosophy at its core. The theme focuses purely on styling WordPress and WooCommerce blocks, without introducing features that alter your website’s underlying functionality.

System Requirements

↑ Back to top

Groceria is a WooCommerce theme, and therefore, we recommend ensuring that your server meets the official WooCommerce system requirements. Please checkout the server requirements for WooCommerce. As a guide, we recommend:

As a general guideline, we recommend the following setup for optimal performance:

• WordPress version 6.3 or later.
• PHP version 7.4 or later.
• Database: MySQL 5.67 or higher, or MariaDB 10.4 or higher
• Memory limit: At least 256 MB
• HTTPS support enabled

It’s also a good idea to review the WordPress Server Requirements to ensure full compatibility.

Required Plugins

↑ Back to top

WooCommerce – Essential for powering your store, as the homepage and product layouts are built using WooCommerce blocks.

Recommended Plugins

↑ Back to top

We’ve included support for several third-party plugins that enhance your site with essential features:

• WPForms – For creating contact and newsletter forms.
• MAS Static Content – For building customizable megamenus.
• Stackable – For adding countdown timers and other advanced block features.

Need Help?

For details on what is included with theme support and what is not, please review our Support Policy

Installation

↑ Back to top

In this chapter, we’ll guide you through installing our theme on your WordPress website. If you encounter any issues during the installation, please don’t hesitate to contact our support team for assistance.

While installation services are generally outside the scope of standard support, we offer a one-time free installation service for all our customers. To take advantage of this service, reach out to us via our contact page and provide your WordPress admin details. We will set up the theme to match our demo, and the service is typically completed within 3 business days.

Installing the Theme

↑ Back to top

Once you have downloaded the groceria.zip file, you’re ready to install the theme on your WordPress website.

Using WordPress ( recommended )

• Navigate to Appearance → Themes in your WordPress dashboard.
• Click the Add Theme button at the top of the Themes page.
• Click Upload Theme next to the Add Themes title.
• Click Select File, then browse your computer and select the groceria.zip file.
• Click Install Now to begin the installation.
• Once the installation is complete, you’ll see a confirmation message indicating that the theme has been installed successfully.

Installing the Theme via FTP

• Unzip the groceria.zip file on your computer.
• Connect to your web host using an FTP client, such as FileZilla.
• Navigate to the wp-content/themes directory on your server.
• Upload the extracted groceria folder into the wp-content/themes directory.
• After the upload is complete, go to Appearance → Themes in your WordPress dashboard and verify that Groceria appears in the list of installed themes.

Installing Plugins

↑ Back to top

While Groceria can function without WooCommerce, we highly recommend installing WooCommerce to take full advantage of the theme’s product collection blocks and homepage layouts.

Steps to Install WooCommerce

• Navigate to Plugins → Add New in your WordPress dashboard.
• In the Search Plugins field, type WooCommerce and press Enter.
• Locate the WooCommerce plugin in the search results and click Install Now.
• Once the installation is complete, click Activate to enable the plugin on your site.

After installation and activation of the theme and required plugins. You can now install the demo content to get you started.

Activating the Theme

↑ Back to top

Before activating Groceria, it is recommended to activate WooCommerce to ensure full compatibility with all product collection blocks.

Steps to Activate Groceria

• Activate WooCommerce if you haven’t already. You may be prompted to complete the WooCommerce onboarding steps—please follow the instructions to finish setup.
• Navigate to Appearance → Themes in your WordPress dashboard and confirm that Groceria appears in the list of installed themes.
• Hover over the Groceria theme screenshot and click Activate.
• A confirmation message will appear, indicating that Groceria is now the active theme on your website.

Using Demo Content

↑ Back to top

A theme’s demo content is a helpful way to get started quickly. Groceria’s homepages and other pages are built using Patterns, so there’s no need to import every page or add demo products all at once. You can choose to add only the pages you need by selecting the relevant Starter pattern.

Starter Patterns

↑ Back to top

We recommend importing demo products and blog posts only if your website is empty. If you already have your own products or blog content, you can simply use the page patterns and create only the pages you need.

Demo Shop Products

↑ Back to top

Groceria includes demo shop products to help you quickly set up and visualize your online store. These demo products are fully compatible with WooCommerce and showcase how your product collections, categories, and layouts will appear on your site.

Key Points:

• Demo products are optional – you can import them only if your store does not yet have real products.
• Importing demo products helps you see the full potential of the theme, including product grids, single product pages, and category layouts.
• You can easily replace demo products with your own products at any time without affecting the theme’s design.

Demo blog posts

↑ Back to top

Groceria includes demo blog posts to help you quickly set up and visualize your website’s blog section. These demo posts showcase how your blog layout, post styles, and category pages will appear with the theme.

Key Points:

Demo blog posts are optional – import them only if your site does not yet have content.

Importing demo posts allows you to see the full styling and structure of the theme’s blog pages.

You can replace demo posts with your own content at any time without affecting the theme’s design.

One Click Demo Import

↑ Back to top

Use a one-click import plugin to import all demo content, including Home pages, Static pages, and menus, so that your site mirrors our Groceria live demonstration.

Here are the steps to import demo content using One Click Demo Import :

• Please make sure that you’ve installed the theme and have installed all recommended plugins from Appearance > Install Plugins.
• Navigate to Appearance > Import Demo Data and click on Import Demo Data to import the demo content.
• This is truly a one click demo import process. All you need to do is just click the Import Demo Data button and wait for the import to complete.

Updating the Theme

↑ Back to top

Keeping your Groceria theme up to date ensures you have access to the latest features, improvements, and security fixes. There are multiple ways to update the theme depending on how it was installed.

Recommended Update Methods

↑ Back to top

• Via WordPress Dashboard (Zip Upload):
  • Download the latest version of groceria.zip
  • Navigate to Appearance → Themes and click Add New → Upload Theme.
  • Upload the new .zip file. WordPress will detect the existing installation and prompt you to replace it.
  • Click Replace current with uploaded to update.
• Via FTP:
  • Unzip the latest groceria.zip file.
  • Connect to your server via FTP and navigate to wp-content/themes.
  • Upload the updated groceria folder, overwriting the existing theme folder.
  • Check your WordPress dashboard to confirm the theme is updated.

Important Notes

↑ Back to top

Backup first: Always back up your site (files and database) before updating the theme.

Child theme users: If you’ve made customizations via a child theme, your changes will remain intact.

Clear cache: After updating, clear your website and browser cache to see the latest changes.

Setup Pages

↑ Back to top

Home Pages

↑ Back to top

Homepage Setup

Groceria includes 5 beautifully designed homepage layouts, each created as a block pattern. This approach allows you to easily set up your homepage without manually assembling multiple sections — simply choose the pattern you like and apply it. Each homepage has a unique style and layout, giving your store its own distinct identity.

Since all homepages are registered as patterns, users can assign them quickly to a page in just a few clicks, rather than piecing together blocks one by one.

Creating and Assigning Your Homepage

Follow these steps to create and assign your homepage:

Step 1: Create a Homepage

• Go to Pages → Add New.
• When you click Add New Page, a pop-up will appear titled “Choose a Pattern.” From here, you can select any of the available Groceria patterns — including the complete homepage layouts we’ve created as ready-to-use block patterns. This allows you to instantly create a homepage design without building it section by section.
• Alternatively, you can skip the pattern selection and create a blank page by closing the pop-up.
• Enter a title for your page (for example, Home).
• In the right sidebar under Template, select the Canvas template to manually insert the Header and Footer as patterns on each page.
• To load the global Header and Footer across the entire site, choose the Page No Title template.
• Click Publish to save your page.

💡 Tip: Choosing a full homepage pattern at this step automatically loads the layout and blocks for that design, so you can begin customizing immediately.

Step 2: Assign a Template to the Home Page

• Open the page you just created.
• In the right sidebar Under the Page tab, locate the Template section.
• Click Change Template and select the appropriate template:
  • 1. Canvas Template: Use this if you want to manually insert separate Header and Footer for specific homepage.
    
  • 2. Page No Title Template: Use this to load the global Header and Footer across the entire site. 
• Use the Preview icon to see your homepage design in action.

Add Patterns to Your Page

Now you can include additional patterns to further customize your homepage.

For convenience, we’ve created each complete homepage layout as a single pattern — allowing you to instantly load a full homepage design without adding individual sections manually.

• Open the Block Inserter (+) in the editor.
• Navigate to Patterns → Groceria.
• Choose your preferred Home pattern (e.g., Home v1, Home v2, Home v3, Home v4, or Home v5).

You can also mix and match smaller section patterns (like banners, product grids, or testimonials) to build a fully customized homepage that reflects your brand.

About the Header

The header in Groceria is built using blocks and can be fully customized through the Site Editor. Each homepage pattern comes with its own header style, designed to match the overall layout of that homepage.

• Go to Appearance → Editor → Templates → Header.
• Select from the available Header patterns or customize the existing one using block controls.
• Adjust elements such as the logo, navigation menu, search bar, mini cart, and account icon directly within the block editor.

This gives you complete control over the look and functionality of your store’s header while keeping the design consistent with your selected homepage.

Creating a Blog Page

To set up a separate page for your blog posts:

• Go to Pages → Add New.
• Title it Blog.
• Leave the Template as Default (no need to assign a custom one).
• Click Publish.

💡 Tip: This keeps your articles separate from the homepage and allows you to organize your blog content efficiently.

Static Pages

↑ Back to top

Set Static Pages for Homepage and Blog

Finally, tell WordPress which pages to use for your homepage and blog:

• Go to Settings → Reading in your WordPress dashboard.
• Under Your homepage displays, select A static page.
• For Homepage, choose the Home page you created.
• For Posts page, select the Blog page.
• Click Save Changes.

Your site is now ready with:

• A fully designed homepage using your preferred Groceria layout.
• A customizable header tailored to your store’s style.
• A separate blog page for your posts.

You’re ready to start adding products, customizing your content, and showcasing your brand with Groceria.

Inner Pages

Groceria includes several pre-designed inner page templates to give your website a cohesive and professional look. These templates are fully built with blocks, so you can easily customize them using the WordPress Site Editor or add patterns to enhance the page design.

---

About Page

The About Page is designed to showcase your brand story, mission, and team.

• Includes sections for your company overview, mission statement, team members, testimonials, and call-to-action banners.
• Fully customizable via the Block Editor — you can add images, videos, or patterns as needed.
• Pre-styled headings, paragraphs, and buttons ensure a clean and modern look.

💡 Tip: Use this page to build trust with your customers by clearly explaining your values and what sets your store apart.

Contact Page

The Contact Page helps your customers reach you easily.

• Includes pre-designed sections for contact forms, store address, Google Maps, and social media links.
• Works seamlessly with popular form plugins like WPForms, Contact Form 7, or Jetpack forms.
• Each section is built with blocks, allowing you to move, hide, or customize elements effortlessly.

💡 Tip: Ensure your store’s address, email, and phone number are always up to date for better customer support.

---

Blog

The Blog Page is your hub for sharing news, promotions, recipes, or updates.

• Displays all your posts in a clean, easy-to-read layout.
• Supports categories, tags, and featured images to make posts visually appealing.
• Pre-designed single post layouts maintain consistency with your homepage and overall theme.

💡 Tip: Use the blog to engage your audience and improve your site’s SEO.

404 Page

The 404 Page appears when a visitor lands on a non-existent page.

• Designed to be informative and friendly, helping users navigate back to your main pages.
• Includes space for search bar, navigation links, and call-to-action buttons.
• Fully customizable — you can add images, text, or patterns to make it match your brand style.

💡 Tip: A well-designed 404 page can reduce bounce rates and guide visitors back to important content.

Header & Footer

↑ Back to top

Header

↑ Back to top

The header is a key part of your website, appearing on every page and helping visitors navigate your store.

In Groceria, the header is fully block-based and can be customized using the WordPress Site Editor.

Accessing and Editing the Header

• Go to Appearance → Editor → Patterns → All Template Parts.
• Under All Template Parts, you will see Header listed.
• Click on Header to edit it directly or replace it with a pre-designed Header pattern.

Key Features

• Logo: Add your store logo and link it to the homepage.
• Navigation Menu: Fully customizable menus for pages, categories, and links.
• Search Bar: Let users quickly find products.
• Mini Cart: Displays selected products for easy checkout.
• Account Icon / Login: Provides quick access to customer accounts.

Customizing the Header

• Use the block editor to add, remove, or rearrange elements like menus, buttons, or icons.
• Choose a Header pattern to quickly apply a ready-made design.
• Save and preview your changes to ensure consistency across all pages.

💡 Tip: Each homepage pattern has a header style designed to match its layout. You can either keep the style consistent or swap headers to create a unique look.

Navigation

↑ Back to top

The navigation menu is an essential part of your store, allowing visitors to browse products, pages, and categories with ease. In Groceria, the navigation is fully block-based and can be customized directly from the Site Editor.

Accessing the Navigation

• Go to Appearance → Editor → Navigation.
• Here, you’ll find a list of all existing navigation menus used across your site.
• Select the menu you want to edit or click Add New to create a new one.

Editing the Menu

• Click on any menu item to rename or link it to a page, category, or custom URL.
• Use the + (Add Block) button to add new links or submenus.
• Drag and drop items to reorder them easily.
• To create dropdowns, nest menu items under a parent item.

Assigning the Menu

• Once your navigation is ready, go to Appearance → Editor → Patterns → All Template Parts.
• Open the Header and replace or assign the navigation block with the one you created.

💡 Tip: You can design multiple navigation menus — for example, one for the main header and another for the footer — and switch between them anytime from the Navigation screen.

Footer

↑ Back to top

The footer is an important part of your website that appears at the bottom of every page. It’s a great place to include quick links, contact details, social media icons, and other essential information about your store.

In Groceria, the footer is block-based and can be fully customized using the WordPress Site Editor.

Accessing and Editing the Footer

• Go to Appearance → Editor → Patterns → All Template Parts.
• Under All Template Parts, you’ll find the Footer listed.
• Click on Footer to open it in the block editor.

Customizing the Footer

• Use the block editor to add, remove, or rearrange sections like text, menus, or widgets.
• You can include elements such as:
  • Quick Links: Pages like About, Contact, Privacy Policy, etc.
  • Social Icons: Connect your store to social media platforms.
  • Newsletter Signup: Encourage customers to subscribe for updates.
  • Copyright Text: Add store name, year, and legal notices.
• You can also choose a Footer pattern to instantly apply a ready-made design.

Multiple Footer Designs

• Groceria includes different footer variations to match various homepage styles.
• You can easily switch between them by selecting a different Footer pattern from the Template Parts section.

💡 Tip: Keep your footer consistent across all pages to maintain a professional look and make navigation easier for your customers.

WooCommerce Setup

↑ Back to top

Shop Page

↑ Back to top

The Shop page is the heart of your online store, displaying all your products in an organized and visually appealing layout. In Groceria, the Shop page is built using WooCommerce blocks and styled to perfectly match the theme’s design.

Setting Up the Shop Page

• Go to Pages → Add New.
• Enter a title — for example, Shop.
• Leave the template as Default (no need to assign a custom template).
• Click Publish to save the page.

Assigning the Shop Page in WooCommerce

• Go to WooCommerce → Settings → Products.
• Under the General tab, find the Shop page setting.
• From the dropdown, select the Shop page you just created.
• Click Save Changes.

Customizing the Shop Layout

• Go to Appearance → Editor → Templates.
• Open the Shop or Archive Product template.
• Use the block editor to modify the layout — for example:
  • Adjust the number of products per row.
  • Change sorting and filter options.
  • Add banners, headings, or featured collections above the product grid.
• Save your changes when done.

Features of the Shop Page

• Responsive Product Grid – Adapts automatically to different screen sizes.
• Product Filters & Sorting – Allows customers to refine their search.
• Add to Cart – Makes shopping faster and easier.
• Category & Tag Display – Helps users navigate products efficiently.

💡 Tip: You can also include a Product Filter Sidebar with widgets such as filters, price range, or product categories to enhance navigation and improve user experience.

Products

↑ Back to top

The Products section showcases the items you sell in your online store. In Groceria, products are managed through WooCommerce and displayed beautifully using block-based layouts optimized for speed and design consistency.

Adding a New Product

• Go to Products → Add New in your WordPress dashboard.
• Enter the Product Name and Description.
• Set the Product Data:
  • Regular Price and Sale Price.
  • Inventory details like SKU and stock status.
  • Shipping details (weight, dimensions, etc.).
  • Linked Products for upsells or cross-sells.
• Add a Product Image and Product Gallery.
• Assign relevant Categories and Tags to help organize products.
• Click Publish to make the product live on your store.

Customizing the Product Page

• Go to Appearance → Editor → Templates → Single Product.
• Here you can edit the layout of individual product pages using blocks such as:
  • Product Title
  • Product Price
  • Product Image Gallery
  • Add to Cart Button
  • Product Description
  • Related Products or Upsells
• You can rearrange, remove, or add new sections to create a layout that suits your store’s style.

Product Display Features

• Clean Grid Layouts: Products are displayed in an organized and mobile-friendly grid.
• Hover Effects: Smooth image transitions and quick view options.
• Add to Cart & Wishlist: Encourage easy shopping interactions.
• Sale Badges & Labels: Highlight discounts and special offers.
• Optimized Loading: Images and styles load efficiently for faster performance.

💡 Tip: Use high-quality product images and consistent dimensions to maintain a professional look. You can also use plugins like WooCommerce Wishlist or Variation Swatches to enhance functionality.

Single Product Page

↑ Back to top

The Single Product Page displays all the details of an individual product, allowing customers to make informed purchasing decisions. In Groceria, the Single Product Page is fully block-based and customizable using the WordPress Site Editor.

Accessing and Editing the Single Product Page

• Go to Appearance → Editor → Templates → Single Product.
• Open the template to customize the layout of individual product pages.
• Use the block editor to add, remove, or rearrange sections as needed.

Key Sections of the Single Product Page

• Product Title: Displays the name of the product.
• Product Image Gallery: Showcase multiple images with zoom and gallery options.
• Price & Sale Price: Highlight discounts or regular pricing.
• Add to Cart Button: Encourages quick purchases.
• Product Description & Short Description: Detailed info about the product features.
• Product Meta: SKU, categories, and tags.
• Upsells & Related Products: Suggest similar or complementary items.
• Reviews Section: Displays customer feedback and ratings.

Customization Tips

• Rearrange blocks to emphasize important information like images, prices, or promotions.
• Add custom blocks such as call-to-action banners, video demonstrations, or trust badges.
• Ensure your product images are high-resolution for a professional appearance.

Features

• Responsive Design: Looks great on all devices.
• Quick Add to Cart & Wishlist: Improves the shopping experience.
• Optimized Layout: Clean, modern, and fast-loading.
• Pattern Support: You can insert additional patterns such as testimonials, banners, or product highlights to enhance the page.

💡 Tip: Keep the layout consistent across all products for a cohesive user experience. You can also create multiple Single Product templates for different product types if needed.

Cart Page

↑ Back to top

The Cart Page is where customers can review the products they have added, adjust quantities, apply coupons, and proceed to checkout. In Groceria, the Cart Page is fully integrated with WooCommerce and styled to match the theme’s clean and modern look.

Accessing and Editing the Cart Page

• Go to Pages → All Pages and select the Cart page (created automatically by WooCommerce).
• You can edit it using the block editor to add custom content or patterns above or below the cart table.
• To customize the cart layout globally, go to Appearance → Editor → Templates → Cart.

Key Features of the Cart Page

• Product List: Shows all products added to the cart with thumbnail images, titles, prices, and quantity selectors.
• Remove / Update Items: Customers can remove products or adjust quantities directly.
• Coupon Field: Apply discount codes easily.
• Cart Totals: Displays subtotal, taxes, shipping, and total amount.
• Proceed to Checkout Button: Directs customers to the checkout page for payment.

Customization Tips

• Use patterns to add banners, trust badges, or promotional messages above the cart table.
• Rearrange or style cart elements using block settings to match your store’s branding.
• Add optional content like shipping calculators or recommended products to enhance the shopping experience.

💡 Tip: Keep the Cart Page simple and clear — the main goal is to guide customers smoothly to the checkout page.

Checkout Page

↑ Back to top

The Checkout Page is where customers finalize their purchase by providing billing details, selecting a payment method, and placing their order. In Groceria, the Checkout Page is fully WooCommerce compatible and styled to match the clean, modern look of your store.

Accessing and Editing the Checkout Page

• Go to Pages → All Pages and select the Checkout page (created automatically by WooCommerce).
• You can use the block editor to add custom content or patterns above or below the checkout form.
• To customize the layout globally, go to Appearance → Editor → Templates → Checkout.

Key Features of the Checkout Page

• Billing & Shipping Details: Customers fill in their contact and delivery information.
• Order Summary: Displays products in the cart, quantities, prices, and totals.
• Payment Methods: Includes all payment gateways enabled in WooCommerce.
• Place Order Button: Completes the purchase and confirms the order.
• Optional Fields / Notes: Customers can leave instructions for the order.

Customization Tips

• Use patterns to add trust badges, promotional messages, or call-to-action banners above or below the checkout form.
• Rearrange or style blocks to make the checkout process intuitive and user-friendly.
• Keep the design clean to reduce friction and cart abandonment.

💡 Tip: Test the checkout page thoroughly with different payment methods to ensure a smooth customer experience.

Customisations

↑ Back to top

Site-level Customizations

↑ Back to top

Groceria provides several site-level customization options that let you control the overall look and feel of your store. These settings affect all pages, ensuring a consistent and professional design.

Site Logo

To display Logo, standard Site Logo block or an Image block is used.

General step to change logo image:

• Navigate to Appearance → Editor
• In the Site Editor, click on the area of your site that contains the header template part.
• Inside the Header, click on the existing logo image.
• The block toolbar will appear, and the Settings Sidebar will open on the right.
• In the block toolbar or the Settings Sidebar, look for a button like “Replace” or “Upload”.
• Click on it, and choose to either:
  • Upload: Select a new logo file from your computer.
  • Media Library: Select a logo that has already been uploaded to your site.
• In the Settings Sidebar on the right, you can adjust the size of the logo using the Image Width slider or input field.
• Click the Save button in the top right corner of the screen.
• Confirm that you want to save the changes to the Header template part.
• Your new logo will now be displayed across all pages that use this Header template.

💡 Tip: Use a high-resolution logo with transparent background for a clean and professional look.

Header

• Go to Appearance → Editor → Patterns → All Template Parts → Header.
• Edit the header using the block editor:
  • Logo
  • Navigation Menu
  • Search Bar
  • Mini Cart
  • Account Icon / Login
• You can choose a Header pattern to quickly apply a ready-made design or customize blocks to match your brand.

💡 Tip: Each homepage pattern comes with a matching header style, but you can mix and match headers with different pages.

Primary Color

• Navigate to Appearance → Editor.
• In the left sidebar of the Editor, click on Styles.
• In the Styles panel, click on Color.
• You will see the Theme color palette which are added in theme.json.
• To edit one of the existing theme colors, click on any of the color circles in the Theme palette.
• A color picker tool will open.
• Use the color picker to select a new color, or enter a specific hex code.
• To add a brand new color to your palette, click the + (plus) sign next to the CUSTOM label.
• Use the color picker to define your new custom color.
• Once you have set all the desired colors in the palette, click the Save button.

💡 Tip: Choose a color that represents your brand and ensures readability across all text and backgrounds.

Font

• Navigate to Appearance → Editor.
• In the left sidebar of the Editor, click on Styles
• In the Styles panel, click on Typography.
• Customize General or Element-Specific Typography to improve readability and visual hierarchy:
• To Customize Text/Body Typography (General):
  • Click on Aa Text under ELEMENTS.
  • Adjust settings like Font family (if multiple fonts are available), Appearance (weight and style), Line-height, Letter spacing, and Case.
• To Customize Headings:
  • Click on Aa Headings under ELEMENTS.
  • The settings you apply here will affect all headings (H1, H2, H3, etc.) unless overridden individually.
• To Customize Other Elements:
  • Select other elements like Aa Links, Aa Captions, or Aa Buttons under ELEMENTS to apply specific font, size, and styling to those components.
• Customize Font Sizes (Presets)
  • Click on Font size presets under FONT SIZES.
  • You may be able to view or edit the predefined size steps (e.g., Small, Medium, Large) that are used throughout the editor.
• Once you have made all your desired changes to the typography settings, click the Save button.

💡 Tip: Stick to 2–3 fonts maximum for a clean and professional look.

Footer

• Go to Appearance → Editor → Patterns → All Template Parts → Footer.
• Customize the footer using blocks:
  • Quick Links / Menus
  • Social Media Icons
  • Newsletter Signup
  • Copyright & Branding
• You can also select a Footer pattern to quickly apply a pre-designed layout.

💡 Tip: Keep the footer consistent across all pages to maintain a polished appearance and make navigation easy for users.

FAQs

↑ Back to top

General

Help customers by answering commonly asked questions.