Fareed Daar

Rubab theme guide

Rubab is a Shopify theme for fashion, beauty and jewelry stores. This guide covers installing it, matching the demo, and setting up each feature. Everything here is done in Shopify admin; you don't need to edit code.

1. Install the theme

Download the zip for your style from your purchase email:
- rubab-fashion for clothing and accessories
- rubab-beauty for skincare and cosmetics
- rubab-jewelry for jewelry and watches
In Shopify admin, go to Online Store → Themes.
Under Theme library, click Add theme → Upload zip file and choose the zip.
Click Customize to set it up before you publish. Click Publish when you're happy with it.

All three zips contain the same theme. Only the starting homepage and style differ, so you can switch styles later in Theme settings → Colors and Typography.

2. Match the demo

The demo stores use content you'll need to create in your own store first:

To get this	Create this in Shopify admin
Mega menu with columns	A menu under Online Store → Navigation with three levels (see section 3)
Collection tabs and grids	Collections such as Dresses, Skincare or Necklaces
Wishlist page	A page called "Wishlist" using the page.wishlist template
FAQ page	A page using the page.faq template
Size guide	A page containing your size table

After creating them, open the theme editor and pick them in the matching sections. Empty sections show placeholders until you do.

3. Header and mega menu

Menu: go to Online Store → Navigation → Main menu. A top-level item with second-level items becomes a dropdown. If those second-level items have their own items, it opens as a full-width mega menu with columns.
Promo images in the mega menu: in the theme editor, open Header, then add a Mega menu promo block. Type the exact title of the top-level menu item (for example "Shop") in Menu item. Add an image, heading and link. Two promos per menu item look best. A menu item with a promo opens as a mega menu even without a third level.
Announcement bar: add one message block per message. On computers they sit side by side; on phones only the first one shows, so put the most important message first.
Search: predictive search shows products, collections, pages and articles as shoppers type. No setup needed.
Account icon: appears when customer accounts are turned on under Settings → Customer accounts.

4. Colors, fonts and layout

Open Theme settings (the gear icon in the theme editor).

Colors: Rubab uses color schemes. Each scheme sets background, text, secondary text, primary button, button text, cards and inputs, borders, and sale price. Every section has a Color scheme setting, so you can set the colors of any section with one choice.
Typography: pick heading and body fonts, size scale, letter case and letter spacing.
Layout: page width, side margin and grid spacing.
Buttons & inputs and Cards: corner radius, uppercase buttons, product image ratio, second image on hover, color swatches and vendor.
Animations: reveal sections on scroll and zoom images on hover. Visitors who've set "reduce motion" on their device never see animations.

5. Homepage sections

Add sections with Add section in the theme editor. Every section has color scheme and spacing settings.

Section	What it's for
Hero	Full-width image or video with heading and buttons
Slideshow	Rotating banners with autoplay and pause
Collection list	Collection cards, overlays or circles, as a grid or carousel
Featured collection	Products from one or more collections, with tabs
Featured product	A single product with buy buttons, on any page
Shop the look	A lifestyle photo with clickable product hotspots and quick add
Before / after	Drag slider comparing two images
Image with text	Image next to a heading, text and button
Multicolumn	Icons or images with short text, such as trust badges
Testimonials	Customer quotes with stars and a linked product
FAQ	Questions and answers, marked up so Google can show them in results
Countdown	Timer to a sale or launch date
Stats	Big numbers with labels
Timeline	Your story or process, step by step
Scrolling text	Moving strip of short messages
Video	Shopify-hosted, YouTube or Vimeo video, loaded only on click
Image gallery	Grid of images
Logo list	Press or partner logos
Blog posts	Latest articles from a blog
Newsletter	Email sign-up connected to Shopify customers
Popular searches	Links to key collections; helps shoppers and search engines
Saved products	The shopper's wishlist or recently viewed products
Rich text and Custom Liquid	Free text, or your own code

6. Product page

Open any product in the theme editor and click Product information to add, remove or reorder its blocks.

Variant picker: buttons or dropdowns. Options with swatches set in Shopify admin (for example from the product's Color category field) always show as swatches. Sold-out options are struck through. If a variant has its own image, the gallery jumps to it.
Media gallery: choose stacked or two-column grid for desktop in Desktop media layout; phones get a swipeable carousel. Click an image to open it full screen.
Sticky add to cart: a bar with the price and button appears once shoppers scroll past the main button. Turn it on or off in section settings.
Size chart: add the Size chart block and pick your size guide page. It opens in a side drawer.
Bundle (bought together): shows other products with checkboxes and a combined price. Shoppers add everything in one click.
- For the same bundle on every product, pick products in the block.
- For a different bundle per product, go to Settings → Custom data → Products. Add a definition with namespace and key custom.bundle_products, of type Product with List of products selected. Fill it on each product. It overrides the block's products.
- To give a bundle discount, create an automatic discount under Discounts, and describe it in the block's Note.
Complementary products: "Pairs well with" suggestions from Shopify's Search & Discovery app (free). Set them under Search & Discovery → Product recommendations.
WhatsApp order: a button that opens WhatsApp with the product and selected option already written.
Icons with text: trust lines such as Cash on delivery, Delivery in 3–5 days, Easy returns.
Product rating: shows stars from review apps that use Shopify's standard rating fields (Judge.me, Okendo and others).
Related products: a section below the product, filled automatically by Shopify.
Apps: app blocks from your installed apps appear in Add block.

7. Collections and filters

Filters: install Shopify's free Search & Discovery app and choose filters (size, color, price, availability and so on) under Search & Discovery → Filters. In the Product grid section, choose a sidebar or a drawer for desktop under Desktop filter layout.
Collection banner: turn it on in the Product grid section to show the collection image and description.
SEO text below products: add the Collection SEO text section. Write longer text per collection in a collection metafield custom.seo_content (type Rich text). Longer text helps collections rank in search.
Quick view and quick add: shoppers can open products or add them to the cart from the grid. Turn quick add on or off in Theme settings → Cards.

8. Cart

In Theme settings → Cart:

Cart type: a side drawer, or go straight to the cart page.
Free shipping threshold: shows a progress bar ("You're $20 away from free shipping"). Set it to 0 to hide it. Make sure it matches your real shipping rates.
Product recommendations in cart drawer: suggests related products not already in the cart.
Order notes: lets shoppers leave a note.

9. WhatsApp, wishlist and Pakistan features

WhatsApp: in Theme settings → WhatsApp, enter your number with country code and no spaces (for example 923001234567). Turn on the floating chat button and choose its side.
Wishlist: turn it on in Theme settings → Wishlist and select your Wishlist page. Hearts appear on product cards and product pages, and the header shows a count. The list is saved in the shopper's browser, so no app or account is needed.
Recently viewed: add the Saved products section set to "Recently viewed", on product pages or the homepage.
Cash on delivery: turn on COD under Settings → Payments → Manual payment methods, then mention it in an Icons with text block or the announcement bar.
Right-to-left languages: Urdu, Arabic, Persian and Hebrew display right to left automatically when that language is active.

10. SEO

Rubab handles these for you:

Structured data for products (price, stock, rating), articles, breadcrumbs, your organization and site search.
Filtered, sorted and search-result pages are kept out of Google, so it doesn't index duplicates.
Sharing previews (Open Graph and X cards).
Fast pages: about 14 KB of CSS and 13 KB of JavaScript, with images sized for each screen.

What you should do:

Set your store description in Online Store → Preferences. It's the homepage description in Google.
Write alt text for product images.
Fill in each product's and collection's Search engine listing at the bottom of its page in admin.

11. Languages

All storefront text can be translated in Online Store → Themes → … → Edit default theme content, or with Shopify's free Translate & Adapt app for multiple languages.

12. Updating Rubab

When a new version comes out, you'll get an email with the new zip.

Upload it as a new theme (section 1). Your current theme stays live.
Shopify doesn't copy settings between uploaded themes. Open both themes in the editor and re-apply your changes in the new one, or ask support to move your settings across (see section 13).
Publish when it looks right.

Your products, collections, pages and menus are not part of the theme, so they never change during an update.

13. Support

Your license includes one year of support and updates. Contact us at https://thefareeddaar.com/contact/ with your order number and store URL.

Support covers questions about theme settings and bugs in the theme. It doesn't cover custom code changes, third-party apps, or problems caused by edited theme code. Installation and demo setup is available as a paid add-on.