Install the theme
- In your Shopify admin go to Online Store → Themes.
- If you bought from the Theme Store, Zariya is added to your theme library automatically. Otherwise click Add theme → Upload zip file and choose
zariya-theme.zip. - Click Customize to open the theme editor. When the store looks right, click Publish.
Presets (styles)
Zariya comes with three styles. Pick a style when you add the theme, or later in the theme editor under Theme settings → Theme styles. Every colour and font can be changed afterwards.
Zariya Mono
Black and white, sharp corners, Inter font. Clean and bold for streetwear.
Zariya Sahra
Warm paper background, olive accent, soft corners and pill badges. Work Sans + Playfair Display.
Zariya Shab
Dark mode with a lime accent and an image slider on product cards.
Theme settings
Open the brush icon in the theme editor. Settings are grouped like this:
| Group | What you can change |
|---|---|
| Colors | Background, text, accent, text on accent, muted text, borders, sale and success colours. |
| Typography | Body and heading fonts from the Shopify font library, heading size and letter case. |
| Logo | Logo image, width on desktop and mobile, favicon. |
| Layout | Page width, corner radius, spacing. |
| Product cards | Image ratio, hover effect (second image, image slider, zoom, none), slider speed, badges (sale, sold out, new, custom tag badges, badge tone), colour swatches, title colour. |
| Wishlist | The page used as the wishlist page. |
| Cart | Drawer or page, free shipping goal, free gift tiers, expected delivery days, upsell collection, order note, shipping tab text. |
| Search | Predictive search options. |
| Social media | Links shown in the footer. |
| Chat | Optional chat button with your own link (for example WhatsApp). |
Announcement bar
The first section in the header. Add one Message block per message; each message can have a link.
| Style | Behaviour |
|---|---|
| Static | All messages shown side by side, centred. |
| Rotate | One message at a time with arrows. Set the change interval in seconds. |
| Marquee | Messages scroll continuously. Set the speed and the separator. Scrolling pauses on hover and stops for visitors who prefer reduced motion. |
You can also set background and text colours and uppercase text.
Header and menus
- Menu: choose a menu from Online Store → Navigation. Second-level links become mega menu columns; third-level links are listed under each column heading.
- Mega menu image: add a Mega menu image block, type the menu item name, and choose an image and link.
- Highlighted links: type the names of menu items (for example
Sale) to show them in a highlight colour, with an optional blink. - Country and language selector: shown when you have more than one market or language. It opens a pop-up with a flag, country list and languages.
- Icons: search, account, wishlist and cart. The cart icon shows the number of items.
- Mobile menu: full-screen drawer with tabs, sub-menus and account links.
Home page sections
Click Add section in the theme editor. Every section can be moved, hidden or removed.
| Section | Use |
|---|---|
| Hero slider | Full-width image or video slides with heading, text and buttons. Separate mobile image, autoplay, height options. |
| Product carousel / grid | Products from a collection as a slider or a grid, with tabs. |
| Banner pair | Two images side by side with text and links. |
| Watch and shop | Up to 6+ vertical videos (Shopify video, MP4 link, YouTube or Vimeo). Each video shows a product with quick add. Videos play muted on screen; visitors can turn sound on. |
| Community gallery | Customer photos with up to 3 product hotspots per photo. |
| Reviews strip | Slider of reviews you type in, with stars, source badge and link, and optional autoplay. |
| Rich text | Heading, text and button. |
| FAQ | Questions and answers as an accordion. |
| Newsletter pop-up | Sign-up pop-up with delay and image. |
Product page
Blocks
Blocks in Product information can be reordered: title, price, variant picker, quantity selector, buy buttons, subscriptions, gift card recipient form, pickup availability, description tabs, feature icons, add-ons, free gift, text and app blocks.
Gallery
- Thumbnails: none, below or at the side.
- Zoom on click, arrows and swipe.
- Image behind a transparent header (option Header over image).
- Videos, YouTube / Vimeo and 3D models with View in your space (AR on supported phones).
- Image caption: the alt text of each image appears at the bottom right of the main image; the image counter stays at the bottom left. Add alt text in Products → click an image → Add alt text.
Variants
Colour swatches and size buttons. Sizes that are sold out for the selected colour are crossed out and cannot be selected. Different colour products can be linked as one set of swatches with metafields (see Metafields).
Pricing extras
Unit price is shown when a variant has a unit price. Subscriptions appear when the product has selling plans from a subscription app.
Collection page
- Filters drawer using Shopify Search & Discovery filters, and sort.
- Grid column switch, and Product / Model view switch (shows the model image metafield when present).
- Product cards with hover image or image slider, colour swatches, available sizes and quick add.
- Friendly empty state when no products match.
Cart drawer and cart page
- Free shipping bar: set the amount in Theme settings → Cart.
- Free gifts: up to two gift tiers, by number of items or by cart amount. Choose the gift products; they are added and removed automatically. Tip: set the gift product price to 0 or create an automatic discount for it.
- You may also like: choose a collection for suggestions.
- Expected delivery: minimum and maximum days.
- Order note, discounts, and dynamic checkout buttons on the cart page.
Wishlist
- Go to Online Store → Pages → Add page. Title:
Wishlist. Template:page.wishlist. Save. - In the theme editor open Theme settings → Wishlist and select that page.
- Add the page to your menu if you like. The heart icon appears on cards and product pages.
The wishlist is saved in the visitor's browser.
Other templates
Included: collections list, search, blog, article, page, about, contact, FAQ, 404, password, gift card and all customer account pages (login, register, account, orders, addresses, reset password).
Metafields
Create these in Settings → Custom data → Products (namespace custom). All are optional.
| Metafield | Type | What it does |
|---|---|---|
custom.colour_siblings | List of products | Links separate colour products so they show as one set of swatches. |
custom.colour_name | Single line text | Colour name shown for this product in the swatches. |
custom.colour_swatch | Color | Swatch colour for this product. |
custom.badge | Single line text | Custom badge text on cards and product page. |
custom.model_info | Single line text | Model details, for example "Model is 6'1, wears M". |
custom.model_image | File (image) | Image used by the Model view in collections (product or variant). |
custom.size_chart | Multi-line text | Size chart table (see Size guide). |
custom.size_chart_unit | Single line text | cm or in: the unit used in the chart. |
custom.size_guide_title | Single line text | Title of the size guide. |
custom.size_guide_image | File (image) | Measuring illustration. |
custom.addons | List of products | Add-on products shown under the add to cart button. |
reviews.rating | Rating | Star rating (set by most review apps). |
Size guide
The Size guide link appears next to the size option on the product page. Write the chart in the custom.size_chart metafield, one row per line, values separated by commas. The first row is the header:
Size, Chest, Length, SleeveS, 96, 70, 20M, 102, 72, 21
Visitors can switch between CM and IN and pick a size to see its measurements. For products without the metafield, choose a fallback page in the product page section setting Size guide page.
Description tabs
Add Collapsible tab blocks. Each tab can show fixed text (for example shipping and returns), a page, or content split from the product description: write headings (Heading 3) in the description, such as Description, Features, Material, and each heading becomes its own tab.
Markets and languages
Add markets in Settings → Markets and languages in Settings → Languages. The country and language selectors appear automatically. All theme text can be edited in Online Store → Themes → … → Edit default theme content.
Accessibility and speed
- Keyboard support for menus, drawers, pop-ups, sliders and tabs, with visible focus.
- Colour contrast meets WCAG AA in all presets. If you change colours, keep enough contrast between text and background.
- Animations respect the visitor's reduced motion setting.
- Responsive, lazy-loaded images and deferred JavaScript. For best speed, upload images around 2000 px wide and keep apps to a minimum.
FAQ
Colour swatches do not appear on cards.
Your option must be named Color or Colour, or use the custom.colour_siblings metafield to link separate products.
The free gift is not added.
Check that the gift product is active, available in the Online Store channel and in stock, and that the threshold is reached without counting the gift itself.
The wishlist page is empty.
Make sure the page uses the page.wishlist template and is selected in Theme settings → Wishlist.
How do I change text like "Add to bag"?
Online Store → Themes → … → Edit default theme content, then search for the text.
Will updates remove my changes?
Theme editor changes are kept when you update from the Theme Store. Changes to code files are not, so keep a copy.
Updates
| Version | Changes |
|---|---|
| 1.0.0 | First release. |
Need help? Contact support.