Tiraz theme
documentation.

Getting started

Tiraz is built for modest fashion: abayas, kaftans, dresses, veils and made-to-measure pieces. It ships in English and Arabic, works right to left out of the box, and uses only Shopify's own features. No apps are required.

Install

1. In your Shopify admin go to Online Store → Themes. If you bought Tiraz from the Theme Store it appears in your theme library automatically. Otherwise click Add theme → Upload zip file.
2. Click Customize to open the theme editor. Everything below is done there unless the path says otherwise.
3. Publish when you are ready: Actions → Publish.

First ten minutes

1. Logo: Theme settings → Logo. Upload a logo for light backgrounds and one for dark backgrounds (footer, drawers, dark sections). 600 × 200 px PNG with transparency works best.
2. Colors: Theme settings → Colors. Tiraz ships five schemes: White, Cream, Sunken, Aubergine and Night. Every section has a Color scheme setting, so you change a scheme once and every section that uses it follows.
3. Fonts: Theme settings → Typography. Heading, body and interface fonts come from Shopify's font library. Turn on Use separate fonts for Arabic to pair Latin and Arabic faces; only the fonts of the current language are loaded.
4. Menus: Online Store → Navigation. Tiraz reads Main menu for the header and Footer for the footer by default. Any menu can be chosen in the header and footer blocks.
5. Home page: the home template comes with every section in place. Replace the images and text, remove what you do not need.

Theme settings

Theme editor → Theme settings (the paint-brush icon)

Sections

Sections marked any page can be added through Add section on every template. Sections tied to a template appear only there.

Home page

The home template is a sequence you can reorder freely. Image sections take a desktop and a mobile image; when the mobile image is empty the desktop one is cropped to portrait. Each section has a color scheme and a spacing setting (inherit, compact, standard, generous).

Products

Product page blocks

The product information section is built from blocks you can reorder: title, price, variant picker, stock counter, quantity, buy buttons, description, size guide link, color matcher link, share, trust row, shipping and delivery, pickup availability, gift wrap. Add app blocks from any installed app.

Stock counter

Shows the real inventory of the chosen variant: "In stock", "Only 3 left" with a small bar at or below your threshold, "Available on backorder" when the variant sells with no stock, or "Sold out". It stays empty until a size is chosen and updates with the variant. Untracked inventory reads as in stock; nothing is invented.

Shipping and delivery

A block for your delivery options under the buy buttons: each row has a heading, a delivery time, a note and a fee text (for example "Free" or "Calculated at checkout"), with one row highlighted. The same rows exist on the cart page as the delivery preview. Add a link to your shipping policy and, if you like, the computed delivery window from the section's delivery settings. Rates themselves are still chosen at checkout.

Product videos

Videos you add to a product's media (hosted, YouTube or Vimeo) and 3D models appear in the gallery with a play badge on their thumbnail. Hosted videos can autoplay muted and loop while on screen: turn on Product information → Video → Autoplay product videos. Visitors who prefer reduced motion get the controls only.

Usually bought together

The Complementary products section under the product shows up to six pieces that pair with it. Choose them per product in the free Search & Discovery app (Complementary products), or switch the section's source to a product list or a collection. Change the heading and kicker in the section settings.

Optional product metafields

Create these once in Settings → Custom data → Products and the theme picks them up:

Badges

New is automatic for the number of days you set after publishing; Sale is automatic when a compare-at price exists; Sold out is automatic; Limited shows for products carrying the tag you set (default limited).

Color swatches

Tiraz draws swatches from Shopify's own color data, so one setup covers cards, the product page, quick view, cart lines and filters, in every language.

1. Open a product, choose a Category with a Color attribute (for example Clothing → Abayas & Jilbabs, Dresses, Outfit Sets, Scarves & Shawls).
2. In Variants, edit the Color option and choose Connect to the Color metafield.
3. Pick a Shopify color for each value, or add your own shade in Content → Metaobjects → Color: label, hex color, optional square image for prints and two-tone fabrics, base color and pattern.
4. Translate labels in Translate & Adapt if you sell in more than one language.

Options not linked to a swatch show a neutral striped placeholder rather than a guessed color. "Color", "Colour" and "اللون" are recognized automatically; add another option name in the variant picker block if you use a different word.

Collections

Collection banner image

Collection cards use the collection image (portrait, around 1200 × 1600 px). The banner at the top of each collection page is much wider, so it can use a separate image. Create two collection metafields once, then set them per collection:

Turn on storefront access for both. When they are empty the banner falls back to the collection image. A custom.kicker single-line metafield replaces the product count above the title.

Filters

Filters come from Shopify's free Search & Discovery app. Add Availability, Price, Color, Size and Product type there; Tiraz renders color and size filters as swatches and chips. For translated color names, set the Color filter to show individual values rather than grouped base colors.

Color matcher

The Color matcher lets a customer color a drawing of your look piece by piece. The theme suggests shades that sit well with the first choice and lists products in those colors. It needs no app and sends no data anywhere.

1. Add the section to a page (the demo uses a dedicated page with the Page banner above it).
2. Upload your own SVG drawing or start with the included demo sketch. The drawing is a vector file with one named group per colorable part, for example model-abaya, model-veil, model-belt, and a locked model-skin group that never changes.
3. Add one Layer block per part, typing the same name as in the file.
4. Add Tone blocks for your palette: name, hex and which tones pair well with it.
5. Add Outfit blocks for ready-made looks the customer can start from.
6. Set the figure background color, outline width and color, and the collection the matcher searches for products. Products are matched by their linked swatch colors.

The full drawing guide, with export settings for Illustrator, Figma and Inkscape, is in the theme editor under the section's documentation link and in the support site's Color matcher article.

Arabic, RTL and markets

1. Settings → Languages: add Arabic (or make it the default) and publish it. Tiraz includes every storefront string in Arabic; the free Translate & Adapt app lets you translate your own content (products, collections, pages, menus) and the theme's section text.
2. Text direction follows the language automatically; force it in Theme settings → Language if you need to.
3. Typography → Use separate fonts for Arabic to choose Arabic faces; the Numerals setting switches counters and dates to Arabic-Indic digits.
4. Settings → Markets: add the countries you ship to; the header and footer show the country and language selectors when more than one is available.

Pages, blog and contact

• Page template: title and content, plus any section you add. Use Page banner for a hero and turn off Show page title in the Page section to avoid a double title.
• Contact page: assign the page.contact template to your contact page. The form has name, email, phone, subject list, an optional preferred-date field (plain text, no booking logic) and a message. Studio blocks hold address, hours, phone, email, a map image and a map link.
• Blog: board layout (drifting masonry) or list layout, featured first article, tag chips, reading time, author and date.
• 404, password and gift card pages are styled and translated.

Cart and checkout

Choose a cart drawer or a cart page. The cart shows a free shipping bar, line items with swatches, an order note, gift wrapping (adds your gift-wrap product as a line), delivery preview blocks, payment icons and suggestions. On phones the total can stay pinned at the bottom. Checkout is Shopify's own and follows your checkout settings.

Image sizes

Upload JPG at quality 80 or PNG for logos; Shopify resizes and converts images for each device.

Speed and accessibility

• Images are lazy-loaded except the first hero image; slides after the first load on the visitor's first interaction.
• Every section loads only its own stylesheet and script; heavy behaviors start when the section comes into view.
• Keep the home page to the sections you use; each section adds a little weight.
• All overlays are dialogs with focus management and Escape to close; every control has a visible focus state; contrast meets WCAG AA in the shipped schemes.

FAQ

Changelog and support

1.0.0 — First release.

Support: see the support page. Include your store URL, the theme version from Online Store → Themes, the page concerned and a screenshot.