Get a free audit

Getting started with Rawnaq

Last updated Theme version 1.0.0

Press / to search. Use the arrow keys and Enter to open a result.

All guides
On this page

Rawnaq is a Shopify theme for online stores, with first class support for English, Arabic and Hebrew. It suits any catalog and is especially strong for products that come in colors and sizes, such as fashion and apparel. This page takes you from a fresh install to a store that looks like yours. Set aside about an hour.

You do not need any code. Everything in this guide is done in the Shopify theme editor.

How the theme editor works

Open the editor from your Shopify admin: Online Store > Themes > Customize.

  • The left side lists the sections of the page you are on. Click a section to change its settings, or click Add section to put a new one on the page.
  • The paintbrush icon opens Theme settings. These apply to the whole store: logo, colors, fonts, buttons, cart and more. They are explained in Theme settings.
  • The page picker at the top lets you switch between the home page, a product, a collection, the cart and other templates. Each template has its own sections.
  • Changes are saved as a draft until you press Save. Use the preview to check phone, tablet and desktop widths.

Install the theme

  1. Buy Rawnaq from the Shopify Theme Store and choose Add to your store. Approve the permission screen.
  2. In your admin, go to Online Store > Themes. Rawnaq appears in your theme library.
  3. Select Customize to edit it without showing it to customers yet.
  4. When you are happy with the result, open the three dot menu next to Rawnaq and choose Publish.

Good practice: keep your old theme in the library until Rawnaq has been live for a week, so you can switch back if you need to.

Choose a preset

A preset is a ready made style: colors, fonts, spacing, layout and a sample home page. Rawnaq includes five presets, and each one has its own demo store you can browse before you buy:

  • Rawnaq, for clothing and fashion: wide capital headings, square corners, tall portrait photos, a film on the home page and a monochrome palette with stone neutrals.
  • Camellia, for beauty and skincare: porcelain and blush tones with a plum accent, a serif heading font, rounded photos and pill shaped buttons.
  • Linden, for home and furniture: warm linen and olive tones, a serif heading font, landscape photos and a full screen room photo under a see through header.
  • Nacre, for jewelry and accessories: a near black background with ivory text and a soft gold accent, classic capital headings and portrait photos.
  • Kinetic, for electronics: cool white and steel grey with an electric blue accent, a wide search bar, product specs and a model comparison table.

You pick a preset on the Rawnaq page of the Shopify Theme Store when you add the theme. To switch to another preset later:

  1. Open the theme editor and click the paintbrush icon for Theme settings.
  2. Look for the theme style option at the top of the panel. This is where presets are listed.
  3. Select the preset you want.

Switching a preset replaces your theme settings with the preset's values. Choose the preset first, then customize.

First steps checklist

Work through these in order. Each step links to the page with more detail.

1. Logo and favicon

  1. Open Theme settings and select Theme settings > Logo and favicon.
  2. Upload your Logo. A PNG or SVG with a transparent background works best.
  3. Set Logo width on desktop and Logo width on mobile until the logo looks balanced in the preview.
  4. Upload a Favicon. It is the small icon in the browser tab. Use a square image, at least 32 x 32 px.
  5. Upload a Social sharing image (1200 x 628 px). It appears when someone shares a link to your store on social media.
  6. If you want a transparent header over your home page banner, also upload Logo for transparent header. Use a light version of your logo. See Header and navigation.

2. Colors

  1. Select Theme settings > Colors.
  2. Rawnaq uses five color schemes. A color scheme is a matching set of background, text, button and accent colors. Every section lets you pick which scheme it uses with its Color scheme setting, so you can alternate light and dark bands down a page.
  3. Edit the schemes you plan to use. Start with scheme 1 (the main light look) and the scheme used by your footer. Check that text is easy to read on every background.
  4. Set the status colors lower in the same group: Sale badge and price, In stock and success, Low stock and warnings, Errors, Rating stars and WhatsApp buttons.

3. Fonts

  1. Select Theme settings > Typography.
  2. Under Headings, choose a Font. Do the same under Body.
  3. Use Size scale to make all headings or all body text slightly larger or smaller.
  4. If your store has Arabic or other right-to-left customers, choose the Heading style and Body style under Arabic and Hebrew. See Languages and right-to-left.

4. Menus

Menus are managed in Shopify admin, not in the theme editor: Content > Menus.

  1. Open your main menu (its handle is main-menu). Add your top level links, such as Women, Men, Sale.
  2. Add second level links under each (Dresses, Knitwear) and, if you want a full mega menu, third level links under those.
  3. Open your footer menu (handle: footer) and add the links you want in the footer, such as Shipping, Returns and Contact.
  4. Back in the editor, select the Header section and check that Menu points to your main menu and Secondary menu points to your footer menu. Select the Footer section and check its Menu blocks.

5. Homepage

  1. In the page picker, choose Home page.
  2. Select the first section (the Slideshow), upload your own images and rewrite the text.
  3. Go through each section. Replace the sample text and images, point Collection settings at your own collections, and delete the sections you do not need.
  4. Add sections you do want with Add section. Every section is described in Homepage sections.
  5. Press Save, then preview on a phone width.

6. Products and collections

  1. Add your products in Products. Give each product a clear title, good photos and a description.
  2. Group products into collections. Collections feed the menus, the home page and the shop pages.
  3. Open a product in the editor (page picker > Products > Default product) and review the blocks. See Product page.

7. Cart and checkout

  1. Open Theme settings > Cart.
  2. Pick the Cart type and enter your Free shipping threshold if you offer free shipping. See Cart.

8. Contact details and chat

Open Theme settings > Chat and contact and enter your phone, email, address and WhatsApp number. See WhatsApp and chat.

9. Final checks before you launch

  1. Open your store on a real phone and place a test order (use Shopify's bogus gateway or a 100 percent discount code).
  2. Check that every menu link works.
  3. Check that you have a Privacy policy, Refund policy and Terms of service under Settings > Policies. The footer links to them.
  4. Remove your store password in Online Store > Preferences when you are ready to open.

Good to know

  • Nothing you do in the editor changes your products, orders or customers.
  • Theme settings are saved per theme. If you duplicate the theme, the copy keeps your settings.
  • Most text that shoppers read (such as "Add to cart") is not in the editor. It is edited under Language settings. See Languages and right-to-left.
  • If a setting seems to do nothing, check that you are on the right template. For example, product page settings only show on a product.
  • Use Duplicate on the theme before big changes, so you always have a safe copy.

Still stuck? Contact support