Mahas Documentation

Mahas is a Shopify theme designed for grocery and food stores, like farm shops, bakeries and organic food sellers. This guide covers Mahas version 26.8.1.

You change almost everything in the theme editor. To open it, go to Online Store > Themes in your Shopify admin and click Customize next to Mahas.

---

Getting started

Do these steps first, in this order.

1. Add your logo. In the theme editor, click Header and upload your logo under Logo image.
2. Add a favicon. Open Theme settings > Favicon and upload a Favicon image (32 x 32px .png recommended).
3. Pick your colors and fonts. Open Theme settings > Colors and Theme settings > Typography.
4. Set up your menus. See How to set up the menu.
5. Build your home page. Add, remove and reorder sections. Pick a collection, image or text in each one.
6. Add your social media links. Open Theme settings > Social media.
7. Add your contact details. Open Theme settings > Contact info.
8. Choose your cart type. Open Theme settings > Cart.
9. Create your About, Contact and FAQ pages. See Page templates.
10. Check the mobile view. Use the mobile preview at the top of the theme editor.

How the theme editor works

• Sections are the big parts of a page, like a slideshow or a product grid.
• Blocks are small parts inside a section, like one slide or one logo.
• Theme settings apply to your whole store.

Most sections have Padding top and Padding bottom, which add space above and below the section. Many also have a Heading and Heading size. Some have Background color and Text color. Leave those empty to use the theme's colors.

Most buttons in sections need both a Button label and a Button link to show on your live store. In the theme editor, a button with a label still shows without a link, so you remember to add one.

When an image is cropped to fit its space, it keeps the focal point you set on the image in your Shopify admin. The Image banner, Promo banners and the hero's Full image slide use their own position setting instead.

Tip: Before you change any theme code, duplicate the theme first. Go to Online Store > Themes, click … next to Mahas and choose Duplicate. Then you always have a working copy to go back to.

Back to top

---

Theme settings

These settings apply to your whole store. In the theme editor, open Theme settings.

Colors

• Background and Text: the page background and main text.
• Muted text: softer text, like descriptions.
• Primary accent: buttons, links, badges and highlights.
• Accent dark: the hover color for buttons and links.
• Accent text: text and icons shown on top of the accent colors.
• Borders and Card background.
• Top bar background and Top bar text.

Choose colors with strong contrast so text stays easy to read.

Typography

• Heading font and Body font: pick from Shopify's font library. Poppins is the default for both.
• Heading 1 (H1) to Heading 6 (H6) and Paragraph: each has Font size, Line height, Letter spacing and Letter case.

Buttons

There are three styles: Primary button, Secondary button and Outline button. Each one has:

When a section lets you pick a Button style, it uses these styles.

Layout

• Page width: the widest your page content can get.

Product cards

Product page

• Autoplay product videos: videos play muted and loop. When off, shoppers see a play button. This applies to the product page, quick view and the featured product section.

Search

• Search only products: off by default. When on, search results and suggestions never include pages or blog articles.
• Products shown before typing: Latest arrivals, Random or Alphabetical (A–Z).

Social media

• Instagram URL, Facebook URL, X (Twitter) URL and LinkedIn URL. An icon only shows for a link you fill in.

Contact info

• Email address and Phone number. These show at the bottom of the mobile menu.

Cart

• Cart type: Drawer or Page. See Cart.

Checkout

The checkout isn't part of the theme. Change its look in Settings > Checkout in your Shopify admin.

Flash sale popup and Newsletter popup

See Popups.

Favicon

• Favicon image: the small icon in the browser tab.

Back to top

---

Header and footer

The top bar, header and footer show on every page.

Top bar

The thin bar above the header.

• Add Announcement message blocks. Each has a Message and a Link (optional).
• Autoplay speed (seconds): how fast messages rotate when there are two or more.
• Show social media icons: adds your links from Theme settings > Social media.

Header

The search bar suggests products as shoppers type. The account icon shows when customer accounts are turned on in Settings > Customer accounts.

On screens narrower than 1280px, the header shows a menu button instead of the main menu. The side menu holds your main menu, the categories menu and your contact details.

How to set up the menu

1. In your Shopify admin, go to Content > Menus.
2. Open Main menu and add the links you want in the header.
3. To make a dropdown, drag a link under another link so it sits one step to the right. You can go three levels deep.
4. Click Save menu.
5. In the theme editor, click Header and check that Main menu is set to your menu.
6. For the categories button, create a second menu, for example "Categories". In Header, choose it under Categories dropdown menu. This menu shows one level of links.

Footer

The footer is made of Column blocks. Add these blocks inside a column:

Footer settings:

• Background color and Text color: leave empty for the default dark footer.
• Copyright text: leave empty for your shop name and the current year.
• Show "Powered by Shopify"
• Show country and currency picker: only appears when your shop sells to more than one country.
• Show language picker: only appears when your shop has more than one language.
• Both pickers switch as soon as the shopper picks an option. In a browser with JavaScript turned off, an Update button appears next to each picker instead.
• Show the Shop follow button
• Show payment icons: shows the payment methods your store has turned on.

Back to top

---

Sections

Add these sections to your home page and other pages. In the theme editor, click Add section.

Hero slideshow

A large slideshow at the top of a page. Up to 5 slides.

There are two slide blocks:

• Full image slide: text over an image or color. It has Background image, Background size, Background repeat, Background position and Overlay opacity.
• Regular slide: text beside an image. It has Image, Image size and Image position.

Each slide also has:

• Background color and Text color (Light or Dark).
• Eyebrow, Heading, Subheading, Description, Button label, Button link and Button style.
• Desktop layout and Mobile layout, each with Content alignment and Text alignment.

Section settings: Height, Slide transition effect, Transition speed (milliseconds), Autoplay, Pause autoplay on mouse hover and Autoplay speed (seconds).

Shoppers swipe between slides on touch screens. With a mouse, arrows appear when the pointer is over the slideshow.

How to add a slideshow

1. In the theme editor, open the page and click Add section.
2. Choose Hero slideshow.
3. Click Add block and choose Full image slide or Regular slide.
4. Upload an image. Fill in Heading, Button label and Button link.
5. Set Text color to Light for a dark image, or Dark for a light one. On a full image slide, raise Overlay opacity to darken a busy photo.
6. Add more slides the same way. Drag them to change the order.
7. Click Save.

For a simpler slideshow with up to 8 slides, choose Image slideshow instead.

Image slideshow

A full-width slideshow. Up to 8 slides.

• Each Slide: Image, Image darkening overlay (%), Text color, Eyebrow, Heading, Description, Button label, Button link and Button style.
• Height, Text alignment and Slide transition.
• Autoplay and Autoplay speed (seconds).
• Show arrows, Show dots and Show progress bar.

Trust badges

A row of icons with short text, like "Free Shipping". Up to 8.

• Each Badge: Icon, Heading and Description.
• Background color and Text color.

Deal of the week

Products from one collection, with an optional countdown to a date you set.

• Collection: falls back to all products if left blank.
• Deal ends on (YYYY-MM-DD) and Deal ends at (24-hour HH:MM, in your store's timezone). Leave Deal ends on blank to hide the countdown.
• Hide this section once the deal ends: when off, the section shows that the deal has ended. The countdown never restarts on its own.
• Show "View all" link, Rows to show and Products per row.
• Background color and Text color.

Tip: Only set a countdown for a deal that really ends at that time.

Collection list

A grid of your collections with images.

• Each Collection block: Collection, Custom image (optional) and Custom heading (optional).
• Eyebrow, Heading, Show product count and Collections per row.
• Background color and Text color.

Promo banners

Banners in rows, one or two per row.

• Banner block: an image. Banner link makes the whole banner clickable. It also has Image size and Image position.
• Banner with text block: an image with Heading, Description, Button label and Button link. It also has Image position, Image width, Image fills to the banner edges, Text alignment, Heading color and Description color.
• Both blocks have Banner height and Banner width (Half row or Full row). Banner with text also has Background color.

Featured collection

A product slideshow from one collection.

• Collection: falls back to all products if left blank.
• Show "View all" link, Products to show, Products per row and Autoplay.
• Background color and Text color.

Collection tabs

Products from several collections, with tabs to switch between them.

• Each Collection block: Collection and Tab label.
• Show "View all" link, Rows to show and Products per row.

With one collection, no tabs show. With no collections, it shows products from your whole store.

Offer banner

A bold sale banner with a large number, like "50% OFF".

• Discount number and Discount label, each with its own color.
• Heading and Heading (accent word), each with its own color.
• Description, Button label, Button link and Button style.
• Image, Image position, Image width and Background color.

Image banner

A wide banner with text over an image or color.

• Background image, Image size, Image position, Background color and Banner height.
• Overlay color and Overlay opacity: tint the image so text stays readable.
• Text color: Light or Dark.
• Desktop layout and Mobile layout, each with Content alignment and Text alignment.
• Blocks: Large accent text, Heading, Description and Button.

Image with text

An image beside text, or above it.

• Image block: Image, Image size and Image position (Left, Center or Right).
• Eyebrow, Heading, Description and Button blocks. The text blocks have Text size and Text color.
• Background color, Text color and Background width.

Clients logo

A scrolling row of logos.

• Each Logo block: Logo image, Client name and Link.
• Logo height, Space between logos and Show logos in grayscale until hovered.
• Scroll speed (seconds per logo), Scroll direction and Pause on mouse hover.

Blog preview

Recent articles from one blog.

• Blog, Rows to show, Articles per row and Image height.
• Show "Browse All" button, Button label and Button link. Leave the link empty to link to the blog.

Featured product

One product with its gallery and buy options.

• Product, Heading, Center heading and Show discount badge.
• It has the same Product details and Buy box blocks as the product page. See Product page.
• Until you pick a Product, the section is hidden on your live store. In the theme editor, it shows a reminder to pick one.

Testimonials

Customer quotes in a slideshow. Up to 12.

• Each Testimonial: Quote, Name, Role or detail and Rating. Set Rating to 0 to hide the stars.
• Eyebrow and Testimonials per slide.

Newsletter

An email signup section. Emails go to your customer list.

• Image: optional. Adds a two-column layout with the image on the left.
• Background color.
• Heading, Heading size and Heading color.
• Description, Description size and Description color.
• Terms text: small print below the form. Leave empty to hide it.

Rich text

A Heading and Text, with an optional Eyebrow.

Custom Liquid

For app code or your own Liquid. Paste it into Liquid code.

More sections

Count the numbers up is skipped for visitors who have reduced motion turned on in their device settings.

Back to top

---

Product page

The product page shows your product's media, details and buy options. Its blocks sit in two groups, Product details and Buy box. You can add, remove and reorder the blocks in each group.

Product details blocks

Buy box blocks

The page opens on the selected variant's image. When a shopper picks a variant, the price, variant image, SKU, pickup details and Add to cart button update. A variant that's sold out shows Sold out, and its Add to cart button is turned off.

Gallery and tabs

• All images, videos, YouTube and Vimeo videos, and 3D models show in the gallery, with thumbnails.
• Show description tab and Tab label: the full product description.
• Show specifications tab and Tab label: a table of product facts. Turn each row on or off, from Row: brand / vendor to Row: date added. The availability row shows a stock count only when Shopify tracks the variant's inventory and doesn't sell it past zero. Otherwise it shows "In stock".

If a product has more images than there are thumbnails, picking a variant still switches the gallery to that variant's image.

Recommendations

The product template also has these sections:

• Complementary products: products you pair in Shopify's free Search & Discovery app. It shows on a product once that product has pairings.
• Related products: Shopify picks these for you.
• Recently viewed products

Complementary and related products both have Eyebrow, Heading, Rows to show and Products per row.

How to set up gift cards

1. In your Shopify admin, go to Products > Gift cards and create a gift card product.
2. Add its values, like $25 and $50.
3. Save. The product page shows a Send as a gift checkbox for this product.

When a shopper ticks Send as a gift, they fill in Recipient email, Recipient name, an optional Message (up to 200 characters) and Send on (up to 90 days ahead). Dynamic checkout buttons don't show on gift cards, so these details are never skipped.

The gift card page your customer opens from their email shows the value, the code, a QR code, an Add to Apple Wallet button, a Print button and the send date.

Back to top

---

Collection and search

These pages help shoppers find products.

Collection page

Shows a collection's products with filters and sorting. Settings in the Collection page section:

Shoppers can filter, sort and switch between grid and list view. On smaller screens, filters open in a side panel.

How to set up filters

1. Install Shopify's free Search & Discovery app.
2. In the app, open Filters and add the filters you want, like product type, vendor, color or size.
3. Save. The filters now show on your collection and search pages.
4. In the theme editor, open a collection page and use Show price filter, Show availability filter and Show other filters to choose what appears.

Product cards

Product cards show the image, title, price and a + Add button. They can also show a sale badge, a second image on hover, the vendor and a video on hover.

If a product has more than one variant, the + Add button opens quick view so the shopper can pick one. Sold-out products show Sold.

On devices with a mouse, two buttons appear when a shopper hovers over a card or reaches it with the keyboard: Quick view and Add to compare. They're hidden on touch screens.

Quick view

Opens a product in a window, with its media, price, stock, options and an Add to cart button. A View details link opens the full product page.

Compare

Shows products side by side. No account is needed. The list is kept in the shopper's current browser.

1. A shopper clicks Add to compare on a product card, or Add to Compare on a product page.
2. A bar at the bottom of the screen shows how many products they picked, with Compare and Clear all buttons.
3. Compare opens the compare page. The header compare icon goes there too.

The compare table lists price, discount, brand, product type, tags, availability, options, SKU, weight and description. Shoppers can add products with a search box and remove them.

The compare page uses the compare search template. To edit it, open the template menu at the top of the theme editor and choose the compare template. Its Compare products section has:

• Heading and Heading size
• Highlight rows where products differ
• Suggested products: a collection shown in the search box before the shopper types. Defaults to all products.

How many products a shopper can compare is set in Theme settings > Product cards > Maximum products to compare.

Search

• Search dropdown: suggested products before typing, then matching products as the shopper types. Pages and articles show too when Search only products is off.
• Search page: results with filters and page links. Products show as product cards. Pages and articles show as simple cards. Products per row sets the grid.

Back to top

---

Cart

Mahas has a cart drawer and a cart page. Theme settings > Cart > Cart type decides what happens when a shopper adds a product.

How to choose your cart type

1. In the theme editor, open Theme settings.
2. Open Cart.
3. Set Cart type to Drawer or Page.
4. Click Save.

Drawer is the default. Adding a product opens a panel from the side. Page sends shoppers to the cart page.

Cart drawer

Shoppers can change quantities and remove items. The drawer shows discounts, subscription details, gift card recipients and unit prices. Its note says whether taxes are included, based on your store's tax settings. It has a Checkout button and a View cart link.

Cart page

Shows all items, the order summary and the Checkout button. It also shows discounts, a note about taxes and shipping, and accelerated checkout buttons like Shop Pay. Settings in the Cart page section:

• Show the cart / checkout / done steps
• Show shipping estimator
• Show order note

When something goes wrong

If Shopify can't add a product or change a quantity, for example when the shopper asks for more than you have in stock, the shopper sees Shopify's message. In the cart, the quantity goes back to what's really in the cart. This works in product cards, quick view, the cart drawer and the cart page.

After a quantity change in the cart, keyboard focus stays on the same button, and screen readers hear the new total.

Shipping estimator

Shoppers choose a country, a state or province if needed, and enter a postal code. Then they click Get rates.

• It lists your shipping rates for that address. A rate of 0 shows as Free.
• If the address isn't valid, it shows the error message Shopify returns.
• If you don't ship there, it says "We don't ship to that address yet."

Rates come from Settings > Shipping and delivery in your Shopify admin.

Back to top

---

Pages, blog and contact

Mahas includes page templates for About, Contact and FAQ pages, plus blog and article pages.

Page templates

To use a template:

1. In your Shopify admin, go to Online Store > Pages and create a page.
2. Under Theme template, choose the template.
3. Save, then open the page in the theme editor to edit its sections.

About story

A Heading, Text and an Image. Video link adds a play button on the image. Media position puts the image left or right.

Contact details

Cards with an Icon, Heading, Text, Link label and Link. Cards per row sets the grid.

For a call link, enter tel: and your number. For an email link, enter mailto: and your email address.

Contact form

• Eyebrow, Heading, Show subject field, Message heading and Message text.
• Background color and Text color.
• Messages go to your store's email address.

Map

• Google Maps embed code: in Google Maps, click Share > Embed a map > Copy HTML, then paste it here.
• Map description: read aloud by screen readers in place of the map.
• Height and Map width.

FAQ

• Add a Category block for each group, with its own Eyebrow and Heading. Add Question blocks inside it. Each question has a Question and an Answer.
• Show jump-to-section list and List label: links to each category.
• The help card has its own Heading and Text.

Blog page

• Show breadcrumb and Show tag filter. The tag filter only shows when your articles have tags.
• Articles per page, Articles per row and Image height.
• Show excerpt and Show "Read more" button.

Article page

• Show breadcrumb, Show author, Show date, Show reading time, Show tags and Show share links.
• Previous / next style: Arrows at the screen edges or Cards below the article. On smaller screens, both show as cards.
• Article comments: shows when comments are turned on for the blog. Comments per page sets how many show.

Other pages

• 404 page: a "Page not found" message and a Continue shopping button.
• Collections list page: all your collections in a grid. It has Eyebrow, Heading, Description, Show "Shop Now" button, Show product count, Collections per row and Collections per page.
• Password page: your shop name, your password message, an email signup form and a password box. A wrong password shows an error message.
• Customer account pages: Mahas includes login, register, account, order, address, activation and password reset pages for legacy customer accounts. New customer accounts use pages hosted by Shopify. The order page shows the discounts applied to each item and to the whole order. The address forms show a state or province field for countries that have one, and show Shopify's error messages.

Back to top

---

Popups

Two optional popups. Both are off until you turn them on in Theme settings.

Flash sale popup

A small popup in a corner that shows products you choose.

Tip: Only call an offer "limited time" if it really ends.

Newsletter popup

Asks shoppers to join your email list. Emails go to your customer list.

• Enable newsletter popup
• Image (optional), Heading, Supporting text, Button label and Terms text.
• Delay before first showing.
• After a shopper closes it, show again.

Shoppers who subscribe don't see it again in that browser.

Back to top

---

Translations

Mahas comes with English text. You can change that text, or translate it into other languages.

How to change or translate text

To change wording in your store's main language:

1. In your Shopify admin, go to Online Store > Themes.
2. Click … next to Mahas and choose Edit default theme content.
3. Search for the text, change it and click Save.

To sell in more languages:

1. Add your languages in Settings > Languages.
2. Install Shopify's free Translate & Adapt app and translate your theme text and content.
3. In the theme editor, keep Show language picker on in the Footer section, so shoppers can switch languages.

Text you type into sections, like headings and buttons, is translated in the same app.

Back to top

---

FAQ

Why don't I see the categories button in the header?
It shows on screens 1280px and wider when Show categories dropdown is on and a menu is picked. On smaller screens, the categories menu is in the side menu.

Why doesn't a button show on my store?
Most buttons need both a Button label and a Button link. Add both in the section or block settings.

Why are the quick view and compare buttons missing on my phone?
They only appear on devices with a mouse. On touch screens, shoppers tap the card to open the product page.

Why don't I see complementary products?
The section only shows on products that have pairings. Pair products in the Search & Discovery app.

How do I add filters like color or size?
See How to set up filters.

Why isn't my countdown showing?
Fill in Deal ends on in the Deal of the week section, as YYYY-MM-DD.

How do I hide the payment icons or "Powered by Shopify"?
In the Footer section, turn off Show payment icons or Show "Powered by Shopify".

Where do newsletter signups go?
To your customer list in Shopify.

Why don't the country and language pickers show?
They only appear when you sell to more than one country, or your store has more than one language.

Can I use my own fonts?
Mahas uses fonts from Shopify's font library. Pick them in Theme settings > Typography.

Where does the shipping estimator get its prices?
From Settings > Shipping and delivery.

How do I add an app?
Many apps add their own blocks to the product page, or add a section. If an app gives you code, use a Custom Liquid section or block.

Can I edit the theme code?
Yes, but duplicate the theme first. Custom code changes aren't covered by support. See What support covers. For bigger changes, you can hire a Shopify Partner.

Back to top

---

Version

This guide covers Mahas version 26.8.1.

When you contact support, tell us which version you use.

Back to top

---

Support

Contact us at https://codendesigner.com/pages/mahas-support.

When you write, please tell us:

• Your store URL
• Your Mahas version
• What you were trying to do
• What happened instead, with a screenshot if you can

Back to top

---

What support covers

Covered:

• Fixing bugs in the theme's own code.
• Answering questions about how the theme's features and settings work.

Not covered:

• Setting up your store for you, like adding your content or changing settings on your behalf.
• Custom code, or changes to the theme's code.
• Third-party apps, or problems caused by them.
• Store design work, like building your pages or choosing your content.

Back to top

---

Release notes

Version 26.8.1 — Initial release.

Mahas launches with hero and image slideshows, a full set of home page sections, block-based product pages, quick view, product compare, a cart drawer and cart page with a shipping estimator, collection filters, predictive search, gift card recipient details, flash sale and newsletter popups, and About, Contact and FAQ page templates.

Back to top