Dana 30 designs
in one theme

New to Dana? Start here: what the theme includes, how to apply one of the 30 designs, where each setting is in the editor, and the picture sizes.

Dana is a Zid theme in Arabic and English with 30 ready designs for many kinds of business, such as fashion, electronics, flowers and books. All come inside the one theme you buy; every name is in “The 30 designs”.

Everything is changed in the Zid theme editor, with no code: look, colours and fonts, the header (5 designs) and top bar (3), the footer (3), the product card (4), home sections (24 kinds), the product, category, cart and blog pages, the cart drawer, the search window, the loading screen, the advertising popup and the WhatsApp button.

A design puts a complete home page in your store, with its sections and text, plus its header, footer, colours and fonts. You apply it in the theme editor, and it stays a draft until you press “Publish”.

Note: applying replaces; it does not add. “Page settings”, the header, footer and home sections become exactly the design's, in both languages; sections you added are removed, and settings the design does not set return to their defaults. Your products, categories, pages and store settings are not touched.

The editor has three parts: “Header” for the header, “Page content” for the home sections, and “Footer” for the footer. A fourth, “Page settings”, holds what applies to every page (look, colours, fonts, product card, product page, cart, WhatsApp).

Settings inside every section come in nearly the same order:

1. The section's look.
2. Content: title, text, pictures, lists and buttons.
3. Layout: width, columns and height.
4. Motion: autoplay, arrows and dots.
5. Colours and background.
6. Spacing.
7. “Hide section” last.

Some fields show only with certain looks, or once the option above them is on (“Overlay color” appears with “Enable overlay”). Cannot find a field? Check the chosen look or switch on the option above it.

Each picture is uploaded in its field in the section and kept in your Zid store. Most sections show the suggested size under the picture field, in pixels (width x height). Most pictures are cropped to fill their space, so keep what matters (the product, a face, words) in the middle, and upload at the suggested size or a little larger.

These change every page at once, under “Page settings” in the editor: look, colours and fonts, the product card, the inner pages' title bar, the category and blog pages, the phone bottom bar, the loading screen, the advertising popup, WhatsApp, internal ads and cart recommendations.

The whole store's character in a few choices: button shape and font, card and picture corners, slider dots and heading weight. A change here applies to every page at once.

1. 1“Button shape”
   The shape of every button in the store.
2. 2“Buttons font”
   “The headings font” sets every button in the store in the headings font.
3. 3“Card and panel corners”
   Product cards, boxes and windows.
4. 4“Picture corners”
   Banner and section pictures whose own setting is on “As the other pictures”.
5. 5“Slider dots”
   The dots under every slider.
6. 6“Headings weight”
   How bold headings are across the store.
7. 7“Sections fade in as you scroll down”
   Sections appear with a gentle motion as you reach them. Turn it off for a still page.

All your store's colours in one place. Any empty field keeps the colour of the design you applied, and an empty button colour takes your Zid brand colour. Words on buttons and badges turn white or dark by themselves so they read.

1. 1“Buttons color (empty: your Zid brand color)”
   The filled buttons on every page.
2. 2“Buttons text (empty: picked to stay readable)”
   Leave it empty unless you want a particular colour.
3. 3“Accent color (sales, badges, hovers)”
   An eye-catching colour: sales, badges and links on hover.
4. 4“Headings color”
   Every heading.
5. 5“Text color”
   The pages' text.
6. 6“Secondary text color”
   Quieter text, such as lines under headings and old prices.
7. 7“Page background color”
   With a dark background, the text turns white by itself.

1. 1“Cards and panels background”
   Cards, boxes and side panels.
2. 2“Lines and borders color”
   Dividers and field borders.
3. 3“Sale price color”
   The discounted price.
4. 4“Rating stars color”
   Rating stars on cards and the product page.
5. 5“Badges background color”
   Badges such as “New” and “Sale” on cards.
6. 6“Badges text (empty: picked to stay readable)”
   Leave it empty unless you want a particular colour.

A font for Arabic and one for English, and different ones for headings if you like. All are Google fonts loaded with the page.

1. 1“Arabic font”
   The font for Arabic page text.
2. 2“English font”
   The font for English pages. On Arabic pages, English words use the Arabic font's own Latin letters when it has them.
3. 3“Arabic headings font”
   “Same as the Arabic font” keeps headings and text in one font.
4. 4“English headings font”
   “Same as the English font” keeps headings and text in one font.

The product card everywhere: home sections, category and search pages. Its look, its picture, the icons on it (cart, wishlist, quick view) and the details it shows. A section with its own card design setting can change it there only.

1. 1“Product card design”
   Changes every card in the store.
2. 2“Details card: text on a panel, centred button”
   With the “Details: brand, features, button” card only: the words sit on a panel in the cards colour that turns dark on hover.
3. 3“Product picture shape”
4. 4“How the picture fits”
   “Whole picture, never cropped” for product shots on white, such as electronics.
5. 5“Picture ground (when the whole picture shows)”
   “None” sets a whole picture straight on the card's ground, as book covers on white.
6. 6“Product picture corners”
   “As the other pictures” follows “Picture corners” in “Look”.
7. 7“A thin line round the product picture”
   Good for product shots on white, so their edges show.

1. 1“Name and price alignment”
   The name and price at the start or centred.
2. 2“Product name in the headings font”
3. 3“Product names in capitals (English pages)”
   English only; Arabic has no capitals.
4. 4“Product name and price size”
   “Large” enlarges the name and price; suits short names.
5. 5“Regular price colour (not the sale price)”
6. 6“Card icons (cart, wishlist, quick view)”
7. 7“Card icons on the cards and panels colour”
   The icon circles take the cards colour instead of white.

1. 1“Card icons colour on hover”
   The colour the cart, wishlist and quick view circles take on hover.
2. 2“Add to cart button under the card”
   A visible button under each card; a product with options sends the shopper to its page.
3. 3“Star rating (when reviews are on in Zid)”
   Shows only for products that have reviews.
4. 4“Discount percentage on the picture”
5. 5“The product badge you set in Zid”
   The badge you set on the product in Zid, such as “New”.
6. 6“Sale countdown”
   A countdown on the picture when the sale has an end date in Zid.

1. 1“Several options and tax free notes”
   “Available in several options” and “Tax free” lines under the price.
2. 2“Brand name (the Details card always shows it)”
   The brand name above the product name.
3. 3“In stock or sold out line”
   An “In stock” or “Sold out” line under the price.
4. 4“Moving sale strip word (empty: no strip)”
   A word such as “Sale” moving in a strip across discounted products' pictures.
5. 5“Second picture on hover”
   On computers the product's second picture shows on hover.
6. 6“Open the cart drawer after adding”
   After adding, the cart drawer opens; off: the button itself says the product was added.

The bar holding the page title and its path (Home / Category) at the top of category, products, blog, pages and cart. With a picture or two blended colours.

1. 1“Title bar background picture”
   A calm wide picture about 1920 x 360 behind the title.
2. 2“Bar colour at its start, with no picture (empty: grey)”
   The first colour of the blend, when there is no picture.
3. 3“Bar colour at its end (empty: the same as its start)”
   The blend's last colour; the same as the first for a single colour.
4. 4“Title bar text colour (empty: the heading colour)”
   The title and path on the bar.

The category, all-products and search pages: filters, products per row, how more products load, and the sub-categories strip with pictures. When a category has no sub-categories in Zid, the strip takes them from the header menu.

1. 1“Full screen width page”
   The products take the whole screen width; allows 5 or 6 per row.
2. 2“Filters layout”
   The filters come from Zid's filter settings in your dashboard; this sets their look only.
3. 3“Products per row on desktop (5-6 at full width)”
   On computers; phones show two.
4. 4“How products show when the page opens”
   “List” shows each product on a line with a short description.
5. 5“Show the grid/list switch”
   A switch letting the shopper pick grid or list.
6. 6“How more products load”
   “Load automatically while scrolling” brings more products without a tap.

1. 1“Show the sub-categories strip”
   The sub-categories with pictures above the products.
2. 2“Sub-categories look”
   “Picture cards, name on the picture” are large pictures; “Round pictures, name below” are smaller and fit more in a row.Shown when “Show the sub-categories strip” is on
3. 3“Category description position”
   The category description you write in Zid.
4. 4“Banner picture at the end of the filters”
   A small promo under the filters.
5. 5“Text on the filters banner”
   Words on the promo.
6. 6“Filters banner link”
   The page the promo opens.

A small benefits row (shipping, returns, support...) you write once; it shows on category pages and the categories page, or in the cart, as you choose.

1. 1“Show it on category pages and the categories page”
   Under the products on category pages.
2. 2“Show it on the cart page”
   The same row reassures shoppers as they review their order before paying.
3. 3“Benefits (icon, title, line)”Up to 4 items

The blog and post pages: the posts list layout, the sidebar with blog categories and recent posts, a banner in it, and related posts under each post. The posts themselves are written in the blog in your Zid dashboard.

1. 1“Posts layout”
   How the post cards look on the blog page.
2. 2“Sidebar (categories and recent posts)”
   “No sidebar” gives the posts the full width.
3. 3“Sidebar banner picture”
   A promo in the sidebar, such as an offer or a category.
4. 4“Text on the sidebar banner”
   Words on the promo.
5. 5“Sidebar banner link”
   The page the promo opens.
6. 6“Show related posts under a post”
   Other posts under a post so the reader carries on.

The header's and footer's own colours, and a pattern behind the page if you like. Empty fields follow “Main colors”.

1. 1“Background color”
   The header's background (logo, menu and icons).
2. 2“Text color”
   The header's words and icons; change it with the background: dark on light, white on dark.
3. 3“Menu row background (empty: as the header)”
   The lower menu row, in the header designs that have one.
4. 4“Menu row text (empty: as the header)”
   The menu words in that row.
5. 5“Background color”
   The footer's background. When dark, its words, lines and logo turn light by themselves.
6. 6“Text color”
   The footer's words and links.
7. 7“Page background image (optional)”
   A pattern repeated behind every page's content; sections with their own background colour cover it.

A bar fixed at the bottom of phones and tablets, with icons for home, account, shop, search, wishlist and the cart with its count. Pick which buttons show; it does not appear on computers.

1. 1“Home button”
   Back to the home page.
2. 2“Account button”
   The customer's account, or sign-in for a guest.
3. 3“Shop button”
   Opens the products page or the link you choose.
4. 4“Shop button link (empty: all products)”
   Such as your offers category.Shown when “Shop button” is on
5. 5“Search button”
   Opens the search window.
6. 6“Wishlist button”
   The wishlist with its count.
7. 7“Cart button”
   Opens the cart drawer with its count.

A simple screen covering the page for a moment while it loads, in six styles. It leaves as soon as the page is ready, and never stays past “Longest time on screen, in seconds”, even on a slow connection. The page content stays underneath it for Google.

1. 1“Show the loading screen”
   Off: pages open straight away.
2. 2“Loading screen style”
   “Store name in the heading font” suits a store without a logo.
3. 3“Text shown (empty: the store name)”
   Such as your brand name or a short phrase.Shown when “Loading screen style” is “Store name in the heading font”
4. 4“Logo above the mark (no logo: the store name)”
   The header's logo in the middle of the screen.
5. 5“A small line under the mark (optional)”
   Such as “Getting the best offers ready”.

1. 1“How often it shows”
   “Once per visit” shows on the first page only, the kindest to shoppers.
2. 2“Shortest time on screen (1000 = 1 second)”
   So the motion is not a flicker when the page is quick. 400 is under half a second.
3. 3“Longest time on screen, in seconds”
   After this the screen leaves even if the page is still loading.
4. 4“Background color (empty: the page's)”
   The whole screen's colour.
5. 5“Mark color (empty: the look's)”
   The ring, line or dots.

A window that shows a visitor a few seconds after the page opens, with a picture, a title and a button: a first-order discount, a seasonal offer or a new category. It can hold several slides, and you choose where and how often it shows. Or, instead of pictures, it can show products under a countdown to the end of a deal.

1. 1“Enable popup”
   The main switch. The popup needs a slide with a picture or words, or products in the products type, to show.
2. 2“Popup type”
   “Products with a deal countdown” shows up to 8 products in a slider under a countdown, instead of picture slides.
3. 3“Deal products, empty: the latest”
   From “Recent products”, “On sale products” or “Category products”.
4. 4“Deal ends at, like 2027-03-31 23:59”
   Empty or a past date: no countdown, and the products still show.
5. 5“Deal words above the countdown”
   Shown with a clock icon above the countdown.
6. 6“Deal button text, empty: no button”
   A button under the products, such as “Shop the deal”.
7. 7“Deal button link”
   Such as your offers category; empty: the all products page.

1. 1“Display on”
   “Home” only or “All pages”.
2. 2“Hide on mobile”
   If it gets in the way on a small screen.
3. 3“Delay in seconds”
   4 to 8 seconds lets the visitor see the store first.
4. 4“Frequency”
   “Once per session” is once while the store stays open in the tab; “Every page visit” shows on every page, which can annoy.
5. 5“Campaign key (change for a new campaign)”
   Customers never see it. Change it for each new offer (“ramadan”, say) and the popup shows again even to those who saw the old one.
6. 6“Image position (for the Pictures and offers type)”
   On computers; phones always put the picture above the words.

1. 1“Background”
   With “Text color” empty, the words turn light or dark by themselves.
2. 2“Text color”
   The title and words.
3. 3“Button background”
   Empty: the theme's buttons colour; with a text colour chosen, one that text reads on.
4. 4“Button text color”
   Empty: picked to stay readable on the button.
5. 5“Backdrop color”
   The layer covering the page behind the popup; black is usual.
6. 6“Backdrop opacity (0 transparent - 100 opaque)”
   40 to 50 suits most stores.

1. 1“Advertisement content (for the Pictures and offers type)”
2. 2“Automatic rotation (for the Pictures and offers type)”
   Slides turn by themselves, with a pause button.
3. 3“Slide interval in seconds (for the Pictures and offers type)”
   With automatic rotation on: how long before the next picture shows.
4. 4“Loop slides (for the Pictures and offers type)”
   Instead of stopping at the last slide.
5. 5“Show arrows”
   To move between slides.
6. 6“Show dots”
   With several slides and arrows, autoplay and dots all off, the dots come back so shoppers can reach the rest.

Two buttons in the corner of every page: WhatsApp to reach you, and an arrow back to the top. WhatsApp can open a welcome window with your messages first, or the chat straight away.

1. 1“Enable WhatsApp”
   In the corner of every store page.
2. 2“Show WhatsApp window before opening link”
   On: a small window with your welcome and a “Continue in WhatsApp” button. Off: WhatsApp directly.
3. 3“International WhatsApp number with country code”
   With the country code, no + and no leading zero (a Saudi mobile starts 966 5). A wrong number hides the button; empty uses your store's contact number in Zid.
4. 4“Hide WhatsApp on mobile”
   If it covers something on phones.
5. 5“Window title”
   Such as “Customer care”.
6. 6“Window image”
   Your photo or logo in a small circle at the top of the window.

1. 1“Welcome messages”
2. 2“Suggested WhatsApp message for the customer”
   Pre-typed in the message box, such as “Hi, I have a question about a product”; the shopper can edit it.
3. 3“WhatsApp window background”
   The whole window.
4. 4“WhatsApp window text”
   The title and words.
5. 5“Welcome message background”
   The message bubbles.
6. 6“WhatsApp button background”
   The corner WhatsApp button and “Continue in WhatsApp”.

1. 1“WhatsApp button text”
   The icon and words on the button.
2. 2“Enable back to top”
   An arrow that appears in the corner once the shopper scrolls, back to the top in one tap.
3. 3“Back-to-top scroll threshold”
   300 means after a short scroll.
4. 4“Back-to-top background”
   The button's colour.
5. 5“Back-to-top text”
   The arrow's colour.

A “You may also like” row in the cart drawer and the cart page: products related to what is in the cart (or from your store when there are none), with a quick add button. It raises the order value.

1. 1“Enable recommendations”
   The main switch; off means no suggestions anywhere.
2. 2“Show on the cart page”
   Under the items on the cart page.
3. 3“Show in the cart drawer”
   Under the items in the cart drawer.
4. 4“Title”
   Such as “Complete your order”.
5. 5“Number of products”
   The most shown; shoppers move through them with arrows or by dragging.
6. 6“Show price”
   Under each product's name.
7. 7“Show out-of-stock products”
   Leave it off so shoppers are not shown what they cannot buy.

Advertising banners above or below the content of inner pages: category, products, product, search, blog and cart. For each ad you choose the pages it shows on, and can limit it to particular categories.

1. 1“Enable internal advertisements”
   The main switch; off hides every ad without deleting it.
2. 2“Full width”
   Ads edge to edge instead of the page width.
3. 3“Top spacing”
   The space above the ads; “Default” is the theme's own.
4. 4“Bottom spacing”
   The space below the ads.
5. 5“Mobile top spacing”
   On “Default” phones use the desktop space.
6. 6“Mobile bottom spacing”
   On “Default” phones use the desktop space.

1. 1“Section title”
   A title above the ads, such as “This week's offers”, wherever they show.
2. 2“Section subtitle”
   A short line under the title.
3. 3“Title alignment”
   Where the title and its line sit.
4. 4“Advertisements”
5. 5“Advertisements per view on desktop”
   How many ads side by side on computers; more slide.
6. 6“Advertisements per view on mobile”
   One is clearer on a small screen.

1. 1“Automatic rotation”
   The ads turn by themselves, with a pause button.
2. 2“Slide interval in seconds”
   The time on each ad.
3. 3“Loop slides”
   Instead of stopping at the last ad.
4. 4“Show arrows”
   When there are more ads than fit at once.
5. 5“Show dots”
   Show how many ads there are and which is in view.

Turns off the right-click menu on the store to make quick picture saving harder. Not full protection, but it stops casual copying.

1. 1“Disable right click”
   Except inside fields shoppers type in (discount code, address) so they can paste. Selecting and keyboard copying still work.

A place for the code services ask you to add to your store, such as ad pixels or chat tools, without editing the theme.

1. 1“Code at the end of the head”
   For code a service says goes in the head, such as Snapchat, TikTok or Meta pixels and analytics.
2. 2“Code at the end of the page (before the body closes)”
   For code that goes before the body closes, such as chat and support tools.

The top of every page, under “Header” in the editor: “Header” (5 designs), “Top bar” (3 designs), “Browse categories button”, “Search window” and “Mobile menu”. Pick the “Header design” first, then the logo.

The header above every page: the logo, the menu from your Zid menus, search, and the account, wishlist and cart icons. Five designs; it can sit clear over the first home section, with a separate logo for English pages.

1. 1“Header design”
   Below 1200px every design becomes one phone row: menu, logo, search and cart.
2. 2“Logo”
   Empty: your Zid store logo, and with no logo at all the store name is written. The footer and loading screen use the same logo where they show one.
3. 3“Light logo (over pictures and dark backgrounds)”
   For a clear header with light text, or a dark background.
4. 4“Mobile logo (optional)”
   A smaller or wider logo for small screens.
5. 5“English pages logo (optional)”
   If you have an English logo, it replaces the Arabic one on English pages, in the header, footer and loading screen.
6. 6“Light logo for English pages (optional)”
   A light version of the English logo.
7. 7“Logo width”
   On computers; the height follows.
8. 8“Logo width on phones”
   On phones and tablets.

1. 1“Menu in capital letters”
   Affects English letters only.
2. 2“Category pictures beside their names in the dropdowns”
   A dropdown from the menu shows each category's picture beside its name, from your category pictures in Zid.
3. 3“Names beside the account, wishlist and cart icons”
   “Two lines beside each icon” puts a small word above a larger name.
4. 4“Hide search”
   Removes search from the header.
5. 5“Text inside the search box (empty: Search products)”
   Such as “Search dresses, bags...”.
6. 6“Category picker inside the search bar (designs with a bar)”
   A list in the search bar to pick a category before searching, in the header designs with a search bar.
7. 7“Hide the language button”
   If your store has one language.

1. 1“Hide the country button”
   If you sell to one country.
2. 2“Phone number in a circle at the end of the menu row”
   It becomes a link the shopper taps to call.Shown with “Search row, then categories and menu”
3. 3“Phone number (empty: your store's number)”
   A number other than the store's.Shown with “Search row, then categories and menu” and when “Phone number in a circle at the end of the menu row” is on
4. 4“Help links at the end of the menu row”Shown with “Search row, then categories and menu”Up to 3 items
5. 5“A thin line under the header”
   A thin line separating the header from the page.
6. 6“Clear header over the first home section”
   The header turns clear over the slider on the home page only, and takes its colour back once pinned.
7. 7“The header comes back pinned when scrolling up”
   The header hides as you scroll down and returns when you scroll up, keeping the menu and cart close.

Zid shows your Arabic store logo on English pages too. Dana has a field for the English logo, so a shopper on the English pages sees your brand in English in the header, footer and loading screen.

When a shopper points at a menu item with categories under it, the dropdown shows a small picture beside each category's name. The pictures come from your category pictures in Zid, so there is nothing to upload again.

The “Browse categories” button in the header design “Search row, then categories and menu”: it opens a list of your categories with pictures. Automatic from your Zid categories, or the ones you choose.

1. 1“Show the browse button (in the design with a categories row)”
   Shows only in the header design with a categories row.
2. 2“Button text (empty: Browse categories)”
   Such as “All departments” or “Shop by category”.
3. 3“Categories shown”
   “Your store's categories, automatically” takes your store's main categories and keeps up with them.
4. 4“Maximum number of categories”
   The most in the list.Shown when “Categories shown” is “Your store's categories, automatically”
5. 5“Button look”
   “Text only, with a divider after it” is the lightest look.
6. 6“Browse button and phone circle colour (empty: the theme's)”
   The filled button's colour.
7. 7“Their text colour (empty: to suit the background)”
   Empty: white or dark to suit the button.

The full-screen search window opened from the search icon: the search field, popular searches (or your categories with pictures), and featured products in a slider (or a grid beside your newest articles) before the shopper types. As they type, your products appear under the field at once.

A slim bar above the header with moving messages (such as “Free shipping over 200 SAR”), optionally a countdown beside a message, and social accounts or contact details and links. It scrolls away with the page.

1. 1“Top bar design”
   On phones only the messages show, in every design.
2. 2“Show the top bar”
   Off: no bar.
3. 3“Show it on”
   “The home page only” to show it there only.
4. 4“Moving messages”Up to 12 items
5. 5“Phone number at the start”
   The phone number at the start of the bar.Shown with “Contact, messages and links”
6. 6“Phone number (empty: your store's number)”
   A number other than the store's.Shown with “Contact, messages and links” and when “Phone number at the start” is on
7. 7“Email at the start”
   The email at the start of the bar.Shown with “Contact, messages and links”

1. 1“Email (empty: your store's email)”
   An email other than the store's.Shown with “Contact, messages and links” and when “Email at the start” is on
2. 2“Links at the end of the bar”Shown with “Contact, messages and links”Up to 6 items
3. 3“Message speed (seconds to cross the bar)”
   A bigger number means slower movement.
4. 4“Direction”
   Which way the messages move.
5. 5“Pause while the pointer is over it”
   So a visitor can read or click a message.
6. 6“Background colour (empty: dark grey)”
   The bar's colour.
7. 7“Text colour (empty: to suit the background)”
   Empty: white or dark to suit the bar.

1. 1“Text”
   Such as “Track order”.
2. 2“Link”
   The page the link opens.

1. 1“Message”
   A short message.
2. 2“Link (optional)”
   The message becomes a link.
3. 3“Countdown end, YYYY-MM-DD HH:MM”
   A countdown shows beside the message, which leaves by itself when time is up.

The menu that slides in on phones and tablets from the menu button: your store menus at every level, the account, language and country, “Need help?” with your contact details, and extra links.

1. 1“Menu title”
   The title at the top of the menu.
2. 2“Show account”
   Sign in or the shopper's account.
3. 3“The Wishlist button beside Login”
   Opens the shopper's wishlist; shows only with “Show account” on.
4. 4“Show language and region”
   Shoppers change language or country from the menu.
5. 5“«Need help?» with your store's phone, email and address”
   Your phone, email and address from your Zid store details.
6. 6“Menu background (empty: the page's)”
   The menu's colour.

1. 1“Menu text (empty: the headings color)”
   The menu's words.
2. 2“Dividers (empty: the lines color)”
   The lines between items.
3. 3“Backdrop color”
   The layer covering the page behind the menu.
4. 4“Backdrop opacity (0 transparent - 100 opaque)”
   40 suits most stores.
5. 5“Additional links”

An old group with no settings; the bar moved to “Top bar”, where you write your messages. Leave this one as it is.

The home page is built from sections you add, reorder and hide under “Page content”. Dana has 24 kinds, 13 of them in several looks picked in the section's first field. Options that many sections share (title, width, background, spacing, hiding) are explained once, at the top of this chapter.

The first thing a visitor sees: large slides with a picture, a video or a colour, carrying a title, text and two buttons. Each slide has its own words, colours and text position; the settings under the list (height, motion, dots) apply to every slide.

1. 1“Section design”
   Your slides stay when you switch.
2. 2“Slides”Up to 12 items
3. 3“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
4. 4“Space from the screen edge”
   A space between the slider and the screen's edge with “Full width”, so it looks like a card.Shown when “Full width” is on
5. 5“Slide height”
   “The picture’s own” shows the whole picture; “Fill the screen (from 1440px)” on large screens; “Fixed height” crops it to the height you choose.
6. 6“Height from 992px to 1440px (0 = the picture's own)”
   For laptops and mid-size screens, before “Fill the screen (from 1440px)” takes over; 700 suits most.Shown when “Slide height” is “Fill the screen (from 1440px)”
7. 7“Slide height on phones”
   Raise it for portrait phone pictures so they are not cropped.

1. 1“Slide corner rounding”
   Zero: square corners.
2. 2“Box behind the text”
   “Card” puts the words on a card so they read on any picture.
3. 3“Card corners”
   How round the corners of the card behind the words are.Shown when “Box behind the text” is “Card”
4. 4“Card width on phones”
   “Full width” reads easiest; “As wide as the text” leaves more of the picture in view.Shown when “Box behind the text” is “Card”
5. 5“Text alignment inside the card”
   “Centred” centres the words inside the card even when the card sits at a side.Shown when “Box behind the text” is “Card”
6. 6“Title size”
   The slide titles' size on computers; phones scale it down.
7. 7“Title weight”
   “As the Look” follows “Headings weight” in “Look”.

1. 1“Slanted title (English pages)”
   English only; Arabic has no slanted letters.
2. 2“Size of the text under the title”
   20px for a short line meant to stand out; 16px for longer text.
3. 3“Hide the small line and the text on phones”
   On small screens only the title and button stay, so the slide is not crowded.
4. 4“Button look”
   The button look on every slide.
5. 5“Button size”
   “Large” is a bolder button.
6. 6“Arrow beside the button text”
   A small arrow after the button words.
7. 7“Space between the text and the slide edge”
   The space between the words and the slide's edge on computers.

1. 1“Text to slide edge space on phones”
   Raise it if the words touch the screen's edge.
2. 2“Width of the text column”
   “A narrower column” shortens the lines when the words sit at one side of the slide.Shown with “Full picture, text over it”
3. 3“Decoration along the bottom”
   “Clouds” draws clouds in the page colour along the slider's bottom edge. Suits baby stores.
4. 4“Autoplay”
   Pauses under the mouse.
5. 5“Time on each slide (1000 = 1 second)”
   5000 is 5 seconds.Shown when “Autoplay” is on
6. 6“Start again after the last slide”
   After the last slide it returns to the first.
7. 7“Slide change animation”
   “Fade” is the calmest. “Centered slide, neighbors peeking” always slides.

1. 1“Animation length (1000 = 1 second)”
   1000 is one second.
2. 2“Play the slide video by itself (muted)”
   Off: the video shows play controls and the shopper starts it.
3. 3“Picture stays while the page scrolls (from 992px)”
   The picture moves slower than the page as you scroll, on screens 992px and wider.
4. 4“Show arrows”
   Two arrows beside the slider.
5. 5“Show dots”
   A dot per slide under the slider.
6. 6“Progress bar in place of the dots”
   A line that fills with each slide's time, instead of the dots.
7. 7“Ring around the current dot (dot in a ring look)”
   Applies when “Slider dots” in “Look” is “Dot in a ring”.Shown when “Show dots” is on and when “Progress bar in place of the dots” is off

1. 1“Dots distance from the bottom”
   Raise the dots if they cover something in your picture.Shown with “Full picture, text over it”
2. 2“Arrow background color”
   The arrows' circles. Empty: the “Page background color”.
3. 3“Arrow and dot color”
   Empty: the theme's colours. Change it if the arrows or dots get lost on your pictures.
4. 4“Current slide marker color (the dot or its ring)”
   The current slide's dot or its ring.
5. 5“Halo colour round the current dot (halo dots)”
   Shows when “Slider dots” in “Look” is “Dot with a halo”; left transparent, the usual halo stays.Shown when “Show dots” is on and when “Progress bar in place of the dots” is off
6. 6“Card color”
   The card behind the words.Shown when “Box behind the text” is “Card”
7. 7“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.

1. 1“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.
2. 2“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
3. 3“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
4. 4“Bottom spacing”
   Like “Top spacing”, below the section.
5. 5“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
6. 6“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
7. 7“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

1. 1“Small line above the title”
   A short phrase above the title, such as “New collection”.
2. 2“Slide title”
   The large title; Enter starts a new line.
3. 3“Text under the title”
   A line or two under the title.
4. 4“Slide type”
   “Color only” is a slide of words on its “Background color (behind the picture, or the panel)”.
5. 5“Picture”
   The slide's picture; the size is under the field.
6. 6“Phone picture (optional)”
   Shown instead of the picture on phones, so a wide picture is not cut.
7. 7“Video cover picture”
   Shown until the video loads.
8. 8“Picture description for Google (optional)”
   A few words describing the picture. Empty: the title is used.

1. 1“Mirror the picture on Arabic pages”
   Mirrors the picture in Arabic so its empty side falls under the words. Leave it off if the picture has writing.
2. 2“Button text”
   Such as “Shop now”.
3. 3“Button link (needed for the button to show)”
   The page the button opens.
4. 4“Open the link in a new tab”
   Only for links outside your store.
5. 5“Second button text”
   A second button beside the first, such as “Discover more”.
6. 6“Second button link”
   Needed for the second button to show.
7. 7“Open the second link in a new tab”
   Only for links outside your store.
8. 8“Text position”
   “Start” is the right in Arabic and the left in English. Pick the empty side of your picture.

1. 1“Text position, top to bottom”
   The words at the top, middle or bottom.
2. 2“Text position on phones”
   “Same as desktop” follows “Text position”.
3. 3“Text position on phones, top to bottom”
   “Same as desktop” follows “Text position, top to bottom”.
4. 4“Background color (behind the picture, or the panel)”
   The panel in “Color panel beside the picture”, a slide with no picture, and the ground behind a see-through picture.
5. 5“Second background color (gradient)”
   With the first colour it makes a gradient.
6. 6“Enable overlay over the picture”
   A colour layer over the picture so the words read.
7. 7“Title color”
   Leave it automatic and the theme picks a colour that reads on the picture.
8. 8“Colour of the small line above the title”
   Changes the small line alone; without it, it takes the “Text and small line color”.

1. 1“Text and small line color”
   The text under the title and the small line.
2. 2“Button text color”
   The first button's words.
3. 3“Button background color”
   Transparent: the theme's buttons colour. With “Outline” it is the hover fill.
4. 4“Button border color”
   The first button's border.
5. 5“Second button text color”
   The second button's words.
6. 6“Second button background color”
   Transparent: the theme's buttons colour. With “Outline” it is the hover fill.
7. 7“Second button border color”
   The second button's border.

A strip of words that keeps moving: your offers or promises (“Free shipping”, “14-day returns”) with a separator between messages. It catches the eye between two sections without taking room.

1. 1“Strip style”
   Your messages stay when you switch.
2. 2“Moving messages”Up to 10 items
3. 3“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
4. 4“Line above and below the strip”
   A thin line above and below; useful when the strip matches the page colour.
5. 5“Text weight”
   How thick the letters are.
6. 6“Every second message outlined”
   Off: every message is solid.Shown with “Big words, solid and outlined”
7. 7“Separator between messages”
   The mark between one message and the next.

1. 1“Movement speed”
   “Slow” is easier to read.
2. 2“Movement direction”
   “Against the reading direction” when two strips follow each other and you want them opposite.
3. 3“Pause when the mouse is over it”
   So a visitor can read or click a message.
4. 4“Text color”
   Empty: the “Headings color”.
5. 5“Outline color of the outlined words”
   The outline of the outlined messages.Shown with “Big words, solid and outlined”
6. 6“Separator color”
   The mark between messages.
7. 7“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.

1. 1“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.
2. 2“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
3. 3“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
4. 4“Bottom spacing”
   Like “Top spacing”, below the section.
5. 5“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
6. 6“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
7. 7“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

1. 1“Message text”
   A short message, such as “Free shipping over 200 SAR”.
2. 2“Link (optional)”
   A message with a link can be clicked.

Your store's categories with their pictures in a slider; a tap opens the category. Choose them yourself, or leave the list empty and the section fetches your categories, with their names and pictures, from Zid.

1. 1“Section design”
   Your categories stay when you switch.
2. 2“Picture shape”
   “Circle on a coloured card” takes its colour from “Colour behind the picture or the card”.Shown with “Picture with the name under it”
3. 3“Small word above the title”
   A short word above the title, such as “Shop by department”.
4. 4“Title”
   The section's main heading; leave it empty for none.
5. 5“Text under the title”
   A short line under the title.
6. 6“Categories”Up to 12 items
7. 7“Pull the store's categories instead of the list”
   The section shows your store's categories by itself (those in the header menu first) and keeps up with them. The same happens when the list is empty.
8. 8“Most categories when automatic”
   The most it fetches.

1. 1“Link under the name, e.g. Shop now (empty: none)”
   A small link under the name.Shown with “Picture with the name under it”
2. 2“Product count under the name (when Zid gives it)”
   Shows only when Zid sends a number above zero.Shown with “Picture with the name under it”
3. 3“First on the page? Load its pictures right away”
   Turn it on only when the section is first on the page.
4. 4“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
5. 5“Title position”
   “A column beside the categories” puts the title in a side column.
6. 6“Title size”
   The larger sizes suit a short title; keep a long one “Normal”.
7. 7“Section background shape”
   With a “Background color” or “Background image”: the section shows as a panel in from the screen's edges or with rounded corners.

1. 1“Categories in a row on desktop”
   “As the design shows”: 3 in “Picture with the name on a button over it”, 6 in “Picture with the name under it”.
2. 2“Categories in a row on tablet”
   How many tiles on a tablet.
3. 3“Categories in a row on mobile”
   “One and a half” shows part of the next tile so visitors know to swipe.
4. 4“The row runs to the edge of the screen”
   The row runs to the screen's edge and shows half a tile more, hinting there is more.
5. 5“Space between categories”
   “None” butts the pictures together into one mosaic.
6. 6“Picture corners”
   How round the picture corners are.
7. 7“Picture proportions (not for circles)”
   “As the picture was uploaded” does not crop; the others crop every picture alike.

1. 1“Name position under the picture”
   The name centred or at the start.Shown with “Picture with the name under it”
2. 2“Size of the category name”
   Enlarge it when your category names are short and should stand out; keep long names “Regular”.Shown with “Picture with the name under it”
3. 3“An arrow at the end of the name”
   A small arrow after the name.
4. 4“Category names in capitals (English pages)”
   English only; Arabic has no capitals.
5. 5“Category names in the headings font”
   Instead of the text font; the names then match the section title.
6. 6“Autoplay”
   The slider turns by itself.
7. 7“Start again after the last one”
   Instead of stopping at the last category.

1. 1“Dots under the slider (smaller screens)”
   Dots under the slider on smaller screens.
2. 2“Arrows (large screens)”
   Arrows on large screens; phones swipe.
3. 3“Arrows position”
   “By the title” puts the two arrows in the title row instead of beside the pictures.Shown when “Arrows (large screens)” is on
4. 4“Title colour (empty: as the names)”
   The section title's colour, and in some sections the words around it, as the field's name says. Transparent keeps the theme's colour.
5. 5“Title and names colour”
   The section title and the category names.
6. 6“Colour behind the picture or the card”
   The card behind the circle, or the ground behind the picture.
7. 7“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.

1. 1“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.
2. 2“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
3. 3“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
4. 4“Bottom spacing”
   Like “Top spacing”, below the section.
5. 5“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
6. 6“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
7. 7“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

1. 1“Category”
   A category from your store; it gives the name, picture and link.
2. 2“Name (empty: the category name from Zid)”
   A shorter or clearer name than the category's.
3. 3“Picture (empty: the category picture from Zid)”
   A picture other than the category's in Zid.
4. 4“Short line with the name”
   A small line under the name, such as “Seasonal deals”.
5. 5“Tab name (empty: same tab as the one before)”
   Type a tab name to split the categories into tabs above the slider; the ones after it with no name join the same tab.
6. 6“What the tile opens”
   “A link I choose” to open another page instead of the category.

A row of your store's products in a slider, using the theme's product cards: the newest, those on sale, a category or products you choose. It can carry a countdown to an offer's end by the title, and a “View all” button.

1. 1“Small word above the title”
   A short word above the title, such as “Best sellers”.
2. 2“Small word link (with a link it becomes a button)”
   With a link the word becomes a small button that opens it.
3. 3“Title”
   The section's main heading; leave it empty for none.
4. 4“Text under the title”
   A short line under the title.
5. 5“Products (none chosen: the newest)”
   Four sources: “Select products” to choose them one by one, “Category products”, “Recent products” or “On sale products”. If the source is empty, the section does not show.
6. 6“Most products to show”
   The most cards in the slider.
7. 7“Offer end for a countdown (like 2026-12-31 23:59)”
   Shows a countdown by the title to this date; it disappears once the date passes. Empty: no countdown.
8. 8“View all text (empty: no link)”
   Such as “View all”.

1. 1“View all link”
   Such as the category the products come from.
2. 2“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
3. 3“Content width on large screens”
   “Wider” widens the row on very large screens.
4. 4“Title position”
   The last two put the title at the start of the line and the countdown, “View all”, the arrows or the text at its end.
5. 5“Title size”
   The section title's size.
6. 6“Slanted title (English pages)”
   English only; Arabic has no slanted letters.
7. 7“Space under the title (desktop)”
   The space between the title and the products, in pixels.
8. 8“View all place”
   “By the title” is a small link; “A button under the products” is a clear button.

1. 1“A frame round the products, the title on its line”
   A gradient frame round the products with the title set into its line.
2. 2“Section background shape”
   With a “Background color” or “Background image”: the section shows as a panel in from the screen's edges or with rounded corners.
3. 3“Products in a row on desktop”
   How many products show in a row on computers.
4. 4“Products in a row on tablet”
   Three suits most pictures; four makes the cards small.
5. 5“Products in a row on mobile”
   One shows a bigger picture and fewer products; two shows more.
6. 6“Space between products on desktop”
   Wider gives each card more room; suits calm designs.
7. 7“Product card design in this section”
   “As the product card settings” follows the “Product card” in Page settings.
8. 8“Sale countdown on the cards”
   “As the product card settings” follows “Sale countdown” in “Product card”; “Shown” and “Hidden” apply to this section only.

1. 1“Add to cart button under the cards”
   The cart button under the cards in this section only.
2. 2“Autoplay”
   Pauses under the mouse.
3. 3“Start again after the last one”
   Instead of stopping at the last product.
4. 4“Arrows (large screens)”
   Phones swipe in every case.
5. 5“Arrow look”
   “Larger circle” stands out on big screens; “Arrow, no circle” is quieter.
6. 6“Under the products”
   “A bar that fills as it slides” shows visitors where they are.
7. 7“Background picture moves with the scroll”
   With a “Background image”: the picture moves slower than the page.
8. 8“Title colour (empty or transparent: automatic)”
   The section title's colour, and in some sections the words around it, as the field's name says. Transparent keeps the theme's colour.

1. 1“Colour of the text under the title and View all (empty or transparent: automatic)”
   The line under the title and the “View all” link.
2. 2“Countdown numbers colour (empty or transparent: automatic)”
   Empty: the “Accent color (sales, badges, hovers)”.
3. 3“Card button colour”
   The colour of the add to cart button under this section's cards.
4. 4“Frame colour”
   The frame's first colour.Shown when “A frame round the products, the title on its line” is on
5. 5“Second frame colour (it fades into it)”
   The colour the frame fades into.Shown when “A frame round the products, the title on its line” is on
6. 6“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.
7. 7“Second background colour (a top-to-bottom gradient)”
   Makes a gradient from the “Background color” at the top to this colour at the bottom; on its own it fades in from the page.

1. 1“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.
2. 2“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
3. 3“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
4. 4“Bottom spacing”
   Like “Top spacing”, below the section.
5. 5“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
6. 6“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
7. 7“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

Several groups of products in one section, each in a tab: “New in”, “Best sellers”, “Deals”... The visitor taps a tab and the products swap without reloading the page.

1. 1“Design”
   Your tabs stay when you switch.
2. 2“Small word above the title (when the title shows)”
   A short word above the title.Shown with “Tabs above the products”
3. 3“Title (hidden when the tab names are the heading)”
   The section's main heading; leave it empty for none.
4. 4“Text under the title (when the title shows)”
   A short line under the title.
5. 5“Tabs (a tab with no products is not shown)”Up to 8 items
6. 6“Most products in each tab”
   The most cards in each tab.
7. 7“View all button text (empty = hidden)”
   Such as “View all”.

1. 1“View all button link”
   The page the button opens.
2. 2“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
3. 3“Heading and tabs”
   In the first two choices the tab names are the heading and the “Title” is hidden.Shown with “Tabs above the products”
4. 4“Tabs beside a title with text under it”
   When a line of text sits under the title: the tabs at that line's foot or level with the middle of both.Shown with “Tabs above the products” and when “Heading and tabs” is “Title at the start, tabs at the end”
5. 5“Title size”
   The larger sizes suit a short title; keep a long one at “Normal (36)”.Shown with “Tabs above the products”
6. 6“Space under the heading and tabs”
   The space between the heading, tabs and products.Shown with “Tabs above the products”
7. 7“Tab look”
   How the chosen tab is marked.Shown with “Tabs above the products”

1. 1“Tab name size”
   The tab names' size; the choices with two numbers shrink on tablets and phones.Shown with “Tabs above the products”
2. 2“Tab name weight”
   How thick the tab names are.Shown with “Tabs above the products”
3. 3“Room round the tab names (not the buttons)”
   “Each name in an equal 148px box” makes the tabs the same width.Shown with “Tabs above the products”
4. 4“A thin rule under the whole tab row”
   Separates the tab row from the products.Shown with “Tabs above the products”
5. 5“Products shown as”
   “A grid” shows every product in rows, no sliding.Shown with “Tabs above the products”
6. 6“Section background shape”
   With a “Background color” or “Background image”: the section shows as a panel in from the screen's edges or with rounded corners.
7. 7“Products in a row on desktop”
   How many products in a row on computers.

1. 1“Products in a row on tablet”
   Three suits most pictures; four makes the cards small.
2. 2“Products in a row on mobile”
   One shows a bigger picture and fewer products; two shows more.
3. 3“Space between products”
   “Wider on tablets” leaves more space between cards on tablets.
4. 4“Product card design in this section”
   “As the general Product card setting” follows the “Product card” in Page settings.
5. 5“Add to cart button under the card”
   The cart button under the cards in this section only.
6. 6“Autoplay (when the products are a slider)”
   Pauses under the mouse.Shown with “Tabs above the products” and when “Products shown as” is “A slider”
7. 7“Start again after the last one”
   Instead of stopping at the last product.Shown with “Tabs above the products” and when “Products shown as” is “A slider”

1. 1“Slider arrows (large screens)”
   Where the slider arrows sit; phones swipe.Shown with “Tabs above the products” and when “Products shown as” is “A slider”
2. 2“Arrow look”
   An arrow in a circle or a long arrow.Shown with “Tabs above the products” and when “Products shown as” is “A slider”
3. 3“Under the slider”
   Dots or a bar under the slider.Shown with “Tabs above the products” and when “Products shown as” is “A slider”
4. 4“Title colour (empty or transparent: automatic)”
   The section title's colour, and in some sections the words around it, as the field's name says. Transparent keeps the theme's colour.
5. 5“Tab names colour (empty or transparent: automatic)”
   The tabs not selected. Empty: the “Secondary text color”, or the “Headings color” with “Outlined buttons”.
6. 6“Chosen tab colour (empty or transparent: automatic)”
   The chosen tab's colour; its words turn white or black by themselves.
7. 7“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.

1. 1“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.
2. 2“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
3. 3“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
4. 4“Bottom spacing”
   Like “Top spacing”, below the section.
5. 5“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
6. 6“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
7. 7“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

1. 1“Tab name”
   A word or two, such as “New in”.
2. 2“Tab products (none chosen: the newest)”
   “Select products”, “Category products”, “Recent products” or “On sale products”. An empty tab is not shown.
3. 3“Round picture beside the tab name (optional)”
   A small round picture beside the tab name, such as the category's picture.

A large picture beside a list of your collection names; a visitor taps a name and the picture swaps to that collection's, and tapping the picture opens its page. With the list empty it shows your store's first 4 categories.

1. 1“Section design”
   One look today; your collections are kept.
2. 2“Title”
   The section's main heading; leave it empty for none.
3. 3“Description”
   A short line under the title.
4. 4“Collections (empty: the store's first 4 categories)”Up to 6 items
5. 5“First section on the page? Load its picture right away”
   Turn it on only when the section is first on the page.
6. 6“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
7. 7“Title, names and lines color (empty: design colors)”
   The title, the collection names and the lines between them.
8. 8“Chosen collection name color (empty: headings color)”
   The colour of the name the visitor is on.

1. 1“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.
2. 2“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.
3. 3“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
4. 4“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
5. 5“Bottom spacing”
   Like “Top spacing”, below the section.
6. 6“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
7. 7“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
8. 8“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

1. 1“Store category (fills an empty name, picture and link)”
   Gives the name, picture and link you leave empty.
2. 2“Collection name (empty: the category's name)”
   A collection with no name is left out.
3. 3“Big picture (empty: the category's picture)”
   Without one a tidy placeholder takes the picture's place.
4. 4“Picture link (empty: the category page)”
   The page the picture opens.

Your banners (picture, words, link) in a row, a slider or a mosaic of different sizes. Each banner can be tied to a category or a product, which fills the title, picture and link you left empty; a product also shows its price.

1. 1“Section design”
   Your banners stay when you switch. The mosaic designs show the first 3 or 4 banners only; with fewer, the shape adjusts to them.
2. 2“Title”
   The section's main heading; leave it empty for none.
3. 3“Line under the section title (optional)”
   A short line under the section title.
4. 4“Banners - fixed layouts show the first 3 or 4”Up to 6 items
5. 5“First on the page? Load its first picture at once”
   Turn it on only when the section is the first on the page.
6. 6“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
7. 7“Distance from the screen edge”
   “40px on wide screens” widens the banners to 40px from the screen's edge instead of the page's usual width.
8. 8“Section title position”
   “At the start with a line beside it” draws a thin rule beside the title.

1. 1“Where the words sit on the picture”
   “As the section design” keeps each banner's place from the original design.
2. 2“Banner title size”
   Each banner title's size.
3. 3“Banner title font”
   “The text font” sets the banner titles in the body font instead of the headings font.
4. 4“Banner title weight”
   “As the Look” follows “Headings weight” in “Look”.
5. 5“Words on a white card over the picture”
   A white card behind the words instead of the shade. Not in “Words under the picture, in a row or a slider”.
6. 6“Banners per row (row and slider designs)”
   On computers; small screens show one.
7. 7“Banners side by side from (row and slider designs)”
   “Larger screens (992px)” shows one banner across the row on tablets.
8. 8“Banner shape on phones”
   Pick the shape closest to your banner pictures so less is cropped on phones; “Fixed height” is the design's own.Shown with “Words over the picture, in a row or a slider”

1. 1“Space between the banners”
   “None” sets the banners edge to edge.
2. 2“Picture corners”
   How round the banners' corners are.
3. 3“Button style”
   The button look on every banner.
4. 4“Arrow beside the button text”
   A small arrow beside the button words.
5. 5“Slider in the row designs (off: a fixed grid)”
   Off: the banners sit in a fixed grid instead of sliding.
6. 6“Zoom the picture on hover”
   A slight zoom on computers.
7. 7“Shade behind the words on pictures”
   A dark shade under the words so they read on the picture. Zero: no shade.
8. 8“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.

1. 1“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.
2. 2“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
3. 3“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
4. 4“Bottom spacing”
   Like “Top spacing”, below the section.
5. 5“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
6. 6“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
7. 7“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

1. 1“Banner title (Enter starts a new line)”
   Keep it short. Empty: the picked category's or product's name. In “A tall banner, two stacked beside it”, “Tall, two stacked, tall” and “Two tall banners, two stacked”, a banner with no button words shows its title on the button.
2. 2“Category (optional): fills an empty title, image, link”
   Fills the title, picture and link you left empty.
3. 3“Product (optional): shows its price, fills the rest”
   Shows the product's price (and the old price when it is on sale) and fills what is empty, like a category.
4. 4“Banner image”
   The picture is cropped to its place, so keep what matters in the middle.
5. 5“Mobile image (optional)”
   A phone crop for when the computer picture is cut badly.
6. 6“Image description for Google (optional)”
   A few words describing the picture. Not shown on the page.
7. 7“Small line above the title (optional)”
   Such as “New” or “20% off”.

1. 1“Coloured pill above the title (optional)”
   A bright pill such as “Best seller”.
2. 2“Short description (optional)”
   A short line under the title.
3. 3“Button text (optional)”
   Such as “Shop now”. Left empty, the banner has no button, except in the looks that put the banner's name on a button.
4. 4“Link (the whole banner opens it)”
   Empty: the picked category's or product's link.
5. 5“Text colour”
   “Light (white)” for dark pictures, “Dark (black)” for light ones.
6. 6“Panel colour behind or instead of the picture”
   The colour of a banner with no picture, or the ground behind the picture.
7. 7“Second panel colour (a gradient from the first)”
   With the colour above it the panel becomes a gradient; on its own it is the panel's one colour.

A banner for one important message: a new collection, a product to push, or your store's story. One or two pictures (or a video) with a title, a description and a button beside or over them.

1. 1“Design”
   Changes how pictures and words are arranged; what you wrote and uploaded stays when you switch.
2. 2“Small line above the title”
   A short phrase such as “New” or “Limited time”.
3. 3“Title”
   The section's main heading; leave it empty for none.
4. 4“Description”
   A line or two explaining the offer.
5. 5“Picture”
   The main picture; each design's size is written under the field.
6. 6“Mobile picture (optional)”
   A phone crop for when the wide picture loses detail on small screens. With a video, phones show it instead of the video.
7. 7“Picture description for Google (optional)”
   A few words describing the picture. Empty: the title is used.
8. 8“Video instead of the picture (optional)”
   Plays in the picture's place, muted. Upload the “Picture” too, so it shows until the video loads.Shown with “Large picture with the text over it”

1. 1“Button text (empty: no button)”
   Such as “Shop now”. The button shows when it has both words and a link.
2. 2“Button link”
   The page the button opens. In “Large picture with the text over it” the whole picture opens it too.
3. 3“First on the page? Load its picture at once”
   Turn it on only when the banner is the first section on the page, so its picture appears sooner.
4. 4“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
5. 5“Picture side (when beside the text)”
   In the designs with the picture beside the words: the start is the right in Arabic and the left in English.
6. 6“Space before the text beside the picture”
   In “Picture beside the text” and “Two overlapping pictures beside the text”: a gap between the picture and the words. Turn it off to start the words at their column's edge.
7. 7“Text alignment”
   On phones the words are always centred.
8. 8“Text place on the picture”
   The words at the bottom or in the middle of the picture.Shown with “Large picture with the text over it”

1. 1“Card behind the text”
   A white card behind the words so they read on any picture. Its colour comes from “Colour of the panel or card behind the text, if any”.Shown with “Large picture with the text over it”
2. 2“Banner height”
   “The picture's own” shows it whole, uncropped; the others are fixed heights the picture is cropped to.Shown with “Large picture with the text over it”
3. 3“Shape of the picture beside the text”
   “The picture’s own” shows it as uploaded; the others crop it to that shape. It has no effect in “Large picture with the text over it” and “Two pictures side by side, a card between”.
4. 4“Picture corners”
   “As the section design” keeps the design's own corners; “Square” has none.
5. 5“Title size”
   “The design’s own” is the original template size.
6. 6“Title weight”
   “As the Look” follows “Headings weight” in “Look”.
7. 7“Slanted title (English pages)”
   English only; Arabic has no slanted letters.
8. 8“Description size”
   “Smaller” suits a long description, so it does not crowd the banner.

1. 1“Small line style”
   “In a coloured pill” turns the small line into a badge; “A larger plain line” enlarges it with no pill.
2. 2“Button style”
   “Underlined text” is a plain link with no button shape.
3. 3“Arrow beside the button text”
   A small arrow after the button words.
4. 4“Picture moves as the page scrolls”
   The picture drifts slowly as the page scrolls.Shown with “Large picture with the text over it”
5. 5“Picture effect on mouse hover”
   Computers only; phones show no effect.
6. 6“Text colour (empty: the design’s)”
   The title and description colour. Empty: white on dark grounds and the theme's colour on light ones.
7. 7“Title colour (empty: as the text colour)”
   The section title's colour, and in some sections the words around it, as the field's name says. Transparent keeps the theme's colour.

1. 1“Description colour (empty: as the text colour)”
   Gives the description its own colour, such as grey under a coloured title.
2. 2“Colour of the panel or card behind the text, if any”
   The panel in “Picture beside a coloured panel”, the card with “Card behind the text” and in “Two pictures side by side, a card between”.
3. 3“Button colour (empty: the buttons’ colour)”
   The filled button's colour, or the outline button's line and words.
4. 4“Button text colour”
   Empty: the theme picks white or black to suit the button colour.
5. 5“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.
6. 6“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.
7. 7“Enable overlay”
   A see-through colour layer over the background or picture so the words read.

1. 1“Overlay color”
   Black darkens for light words; white lightens for dark words.Shown when “Enable overlay” is on
2. 2“Overlay opacity (0 transparent - 100 opaque)”
   Start at 40 and raise it if the words still do not read.Shown when “Enable overlay” is on
3. 3“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
4. 4“Bottom spacing”
   Like “Top spacing”, below the section.
5. 5“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
6. 6“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
7. 7“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

A banner for an offer with an end: a clock counting the days, hours, minutes and seconds to the date you type, with a button to the offer. When time is up the clock hides or a message takes its place, and the rest of the banner stays.

1. 1“Section design”
   Changes the arrangement only; your words, date and picture stay when you switch.
2. 2“Small line above the title”
   A short phrase such as “Limited time offer”.
3. 3“Title”
   The section's main heading; leave it empty for none.
4. 4“Description”
   A line or two saying exactly what the offer is.
5. 5“Banner picture”
   Its size is written under the field; it is cropped to its place, so keep what matters in the middle.
6. 6“Phone picture (optional)”
   A taller picture for phones, so the wide one is not cut too much on a small screen.Shown with “Picture with the text and countdown over it”
7. 7“Picture description for Google (alt)”
   A few words describing the picture, such as “Summer dresses on sale”. Not shown on the page.

1. 1“Mirror the picture on Arabic pages”
   Mirrors the picture on Arabic pages so its empty side falls under the words. Turn it off if the picture has writing.Shown with “Picture with the text and countdown over it”
2. 2“Offer end (write it like 2026-12-31 23:59)”
   Year-month-day, then the time on a 24-hour clock. Arabic digits work, and a date with no time counts to the end of that day. Empty: no clock.
3. 3“Countdown word for days (empty: Days)”
   The word under the days number.
4. 4“Countdown word for hours (empty: Hours)”
   The word under the hours number.
5. 5“Countdown word for minutes (empty: Mins)”
   The word under the minutes number.
6. 6“Countdown word for seconds (empty: Secs)”
   The word under the seconds number.
7. 7“When the offer time is up”
   Either way the rest of the banner stays; “A message in its place” shows what you write below.

1. 1“Button text (empty: no button)”
   Such as “Shop now”. The button shows when it has both words and a link.
2. 2“Button link”
   The page the button opens, such as the offer's category.
3. 3“First on the page? Load the picture right away”
   Turn it on only when the banner is the first section on the page, so its picture appears sooner. Anywhere else leave it off.
4. 4“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
5. 5“Text place on the picture”
   “At the start” puts the words on the right in Arabic and on the left in English.Shown with “Picture with the text and countdown over it”
6. 6“Card behind the text”
   A white card behind the words so they read on any picture. Its colour comes from “Color of the card, strip or panel behind the text”.Shown with “Picture with the text and countdown over it”
7. 7“Countdown look”
   How the numbers look: in a row, each in a box, or each in a circle.

1. 1“Picture moves with the scroll”
   The picture drifts slowly as the page scrolls. It stays still for visitors who reduce motion on their device.Shown with “Picture with the text and countdown over it”
2. 2“Text color”
   The colour of the title, description and clock words. Empty: the theme picks a colour that reads on what is behind the words.
3. 3“Title colour (empty: as the text colour)”
   The section title's colour, and in some sections the words around it, as the field's name says. Transparent keeps the theme's colour.
4. 4“Color of the card, strip or panel behind the text”
   The words on it turn white or dark by themselves so they read.
5. 5“Countdown numbers colour”
   The digits only. Empty: the theme's colour.
6. 6“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.
7. 7“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.

1. 1“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
2. 2“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
3. 3“Bottom spacing”
   Like “Top spacing”, below the section.
4. 4“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
5. 5“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
6. 6“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

One product with its photos, description and the whole buy box on the home page: price, discount, stock, quantity, “Add to cart” and “Buy now”. For your best seller or the product you want to sell today.

1. 1“Title”
   The section's main heading; leave it empty for none.
2. 2“Text under the title”
   A short line under the title.
3. 3“Small line above the name (empty: the brand)”
   Such as “Skincare”. Empty: the product's brand.
4. 4“Product (the first shows; none chosen: the newest)”
   The source's first product is the one shown. For a particular product, choose “Select products” and pick only that one.
5. 5“Show the product description”
   Shows the product's short description from Zid, or the full one when there is no short one.
6. 6“Your own text instead of the description (optional)”
   Text you write here shows instead of the product's description.Shown when “Show the product description” is on
7. 7“Show the rating (when store reviews are on)”
   The stars and the number of reviews.

1. 1“Show in stock or out of stock”
   An “In stock” or “Out of stock” pill.
2. 2“Sale countdown (when the sale has an end date)”
   Counts down to the sale end set on the product in Zid.
3. 3“Wishlist button (when the store's wishlist is on)”
   A heart beside the “Add to cart” button.
4. 4““Buy now” button”
   Adds the product and takes the shopper straight to checkout.
5. 5“Details link text (empty: “View full details”)”
   A link that opens the product page.
6. 6“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
7. 7“Product picture shape”
   Pick the shape closest to your product photos so they are not cut.

1. 1“Product thumbnails”
   On phones the thumbnails are always under the large picture.
2. 2“Description: maximum lines”
   A longer description is cut with dots at the end.Shown when “Show the product description” is on
3. 3“Slanted title (English pages)”
   English only.
4. 4“Panel corners (when it has a colour)”
   Works once you choose a “Panel colour behind the content”.
5. 5“Arrows on the large picture”
   Two arrows on the large picture to move between photos.
6. 6“Zoom the picture on hover, full size on click”
   On computers the mouse magnifies part of the photo, and a click opens it full size.
7. 7“Panel colour behind the content (transparent = none)”
   A rounded coloured panel behind the whole product.

1. 1““Add to cart” colour (empty: the theme's)”
   The “Add to cart” button colour here only.
2. 2““Add to cart” text colour”
   Empty: picked to stay readable on the button.
3. 3““Buy now” colour (empty: the theme's)”
   The “Buy now” button colour here only.Shown when ““Buy now” button” is on
4. 4““Buy now” text colour”
   Empty: picked to stay readable on the button.Shown when ““Buy now” button” is on
5. 5“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.
6. 6“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.

1. 1“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
2. 2“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
3. 3“Bottom spacing”
   Like “Top spacing”, below the section.
4. 4“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
5. 5“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
6. 6“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

A set of products sold together: a picture beside a slider of the products, and one button that adds them all to the cart at once and opens the cart drawer. A product that needs a size or colour is chosen on its own page, and a sold-out one is left out.

1. 1“Design”
   Your products and words stay when you switch.
2. 2“Title”
   The section's main heading; leave it empty for none.
3. 3“Text under the title”
   A short line on why this bundle is worth it.
4. 4“Picture”
   Without it the box stands alone.
5. 5“Picture alt text for search engines (empty: title)”
   A few words describing the picture for Google. Not shown on the page.
6. 6“Details bar title”
   The first word in the bar, such as “Weekly basket”.Shown with “Picture with a details bar under it”
7. 7“Short details in the bar”Shown with “Picture with a details bar under it”Up to 4 items
8. 8“Bar link text (empty: no link)”
   Such as “Learn more”.Shown with “Picture with a details bar under it”

1. 1“Bar link”
   The page the bar's link opens.Shown with “Picture with a details bar under it”
2. 2“Bundle products”
   Four sources: “Select products” to choose the bundle's products yourself, “Category products”, “Recent products” or “On sale products”. With no products the section does not show.
3. 3“Products in the bundle”
   How many of the source's first products make the bundle.
4. 4“Line above the button (optional)”
   Such as “Save 15% when you buy them together”.
5. 5“Bundle button text (empty: Add bundle to cart)”
   The words on the add button.
6. 6“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
7. 7“Picture side”
   The picture at the start of the line (the right in Arabic) or the end.
8. 8“Products side by side on desktop”
   How many product cards show side by side.

1. 1“Product card design here”
   “As the rest of the store” follows the “Product card” in Page settings.
2. 2“Add to cart button under the cards here”
   The cart button under each card, here only.
3. 3“Card text alignment here”
   The product name and price alignment in these cards only.
4. 4“Arrows at the sides (large screens)”
   On large screens; phones swipe.
5. 5“Dots under the slider”
   Dots showing where the visitor is among the products.
6. 6“Title colour (transparent = automatic)”
   The section title's colour, and in some sections the words around it, as the field's name says. Transparent keeps the theme's colour.
7. 7“Bundle button colour (transparent: the buttons colour)”
   The add button's colour.
8. 8“Bundle button text colour (transparent = automatic)”
   Transparent: the theme picks white or black to suit the button.

1. 1“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.
2. 2“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.
3. 3“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
4. 4“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
5. 5“Bottom spacing”
   Like “Top spacing”, below the section.
6. 6“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
7. 7“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
8. 8“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

1. 1“Detail”
   A couple of words, such as “Same-day delivery”.

A wide photo (or more) with pins; each pin opens a small card with the product's picture, name, price and an add to cart button. For a furnished room, a full outfit or a shelf of products.

1. 1“Title”
   The section's main heading; leave it empty for none.
2. 2“Text under the title”
   A short line under the title.
3. 3“Photos (a photo's number is its place here)”Up to 6 items
4. 4“Pins on the photos (each opens a product card)”Up to 12 items
5. 5“Products for pins with none (in order)”
   Supplies pins with no product, in order. A pin with no product at all is not drawn.
6. 6“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.

1. 1“Photos side by side (wide screens)”
   With more than one photo, they sit side by side on wide screens.
2. 2“Photo height”
   The first choice fixes the height at 500px on tablets and phones, cropping from the centre.
3. 3“Photo corner rounding”
   Zero: square corners.
4. 4“Title and text colour (transparent = automatic)”
   The title and the line under it.
5. 5“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.
6. 6“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.

1. 1“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
2. 2“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
3. 3“Bottom spacing”
   Like “Top spacing”, below the section.
4. 4“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
5. 5“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
6. 6“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

1. 1“Photo name (for search and screen readers)”
   A few words describing the photo. Not shown on the page.
2. 2“Photo”
   The photo the pins sit on.
3. 3“Mobile photo (optional)”
   A phone crop of the same scene.

1. 1“Pin name (for the list and screen readers)”
   A short name read before the product's for screen readers, such as “By the window”.
2. 2“Product (empty: from “Products for pins with none”)”
   The product the card shows.
3. 3“Number of the photo the pin sits on”
   1 for the first photo in the list, 2 for the second, and so on.
4. 4“Pin across (% from the left)”
   0 is the left edge and 100 the right, in both languages.
5. 5“Pin down (% from the top)”
   0 is the top and 100 the bottom. The pin stays on the same spot if the photo is cropped.
6. 6“The card opens to the (large screens)”
   Choose a side if the card covers another product. On phones it opens above the pin.

A look photo with pins, beside a slider showing one product at a time. Tapping a pin turns the slider to its product, and the product in view lights its pin. If you pick no products for the pins, it takes your latest products in order.

1. 1“Title”
   The section's main heading; leave it empty for none.
2. 2“Photo with the pins”
   Without it the slider shows alone, centred.
3. 3“Picture description for Google (optional)”
   A few words describing the photo. Not shown on the page.
4. 4“Pins on the photo (a pin turns the slider to it)”Up to 6 items
5. 5“Products (for pins with none, or the slider)”
   Supplies pins with no product, or the slider when there are no pins.
6. 6“Show the rest of “Products” after the pinned ones”
   Adds the rest of the products to the slider after the pinned ones, up to 12.
7. 7“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
8. 8“Picture side”
   The photo at the start of the line or its end.

1. 1“Title size”
   The section title's size.
2. 2“Title in capitals (English pages)”
   Affects English letters only.
3. 3“Add to cart button under the card”
   The cart button under the product card, here only.
4. 4“Product picture shape in the card”
   The product picture shape in this card only.
5. 5“Arrows at the sides (large screens)”
   On large screens; phones swipe.
6. 6“Dots (phones, tablets; every screen without arrows)”
   Under the card on phones and tablets, and on every screen with the arrows off.
7. 7“White dots on the photo (every screen)”
   The dots sit white on the photo instead of under the card.Shown when “Dots (phones, tablets; every screen without arrows)” is on
8. 8“Panel colour behind the slider (transparent = none)”
   The panel holding the title and slider.

1. 1“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.
2. 2“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.
3. 3“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
4. 4“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
5. 5“Bottom spacing”
   Like “Top spacing”, below the section.
6. 6“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
7. 7“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
8. 8“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

1. 1“Pin name (list, screen readers; empty: the product's)”
   A short name for the pin; not shown on the photo.
2. 2“Product (empty: the next one from “Products”)”
   The product the pin shows in the slider.
3. 3“Pin across (% from the left)”
   0 is the left edge and 100 the right, in both languages.
4. 4“Pin down (% from the top)”
   0 is the top and 100 the bottom. The pin stays on the same spot if the photo is cropped.

A large picture with your reasons to buy (quality, shipping, warranty...), each with an icon, a name and a short line.

1. 1“Section layout”
   Your picture and points stay when you switch.
2. 2“Title”
   The section's main heading; leave it empty for none.
3. 3“Picture”
   Without it the points show on their own.
4. 4“Points”Up to 6 items
5. 5“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
6. 6“Picture side”
   The picture at the start of the section (the right in Arabic) or the end.Shown with “Picture beside a list of points”

1. 1“Icon colour (transparent = automatic)”
   The ready-made icons' colour.
2. 2“Titles colour (transparent = automatic)”
   The section title's colour, and in some sections the words around it, as the field's name says. Transparent keeps the theme's colour.
3. 3“Description colour (transparent = automatic)”
   The short line under each point.
4. 4“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.
5. 5“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.
6. 6“Enable overlay”
   A see-through colour layer over the background or picture so the words read.

1. 1“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
2. 2“Bottom spacing”
   Like “Top spacing”, below the section.
3. 3“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
4. 4“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
5. 5“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

1. 1“Point name”
   Such as “Guaranteed quality”.
2. 2“Short description”
   A line explaining the point.
3. 3“Icon type”
   “Your own picture” for an icon of your brand.
4. 4“Icon”
   Pick the closest match; each icon's shape is written beside it.Shown when “Icon type” is “Ready-made icon”

Two pictures in one frame; the shopper drags the line in the middle to see the difference: a skincare result, a room before and after the furniture, a repair. The section shows once both pictures are uploaded.

1. 1“Title”
   The section's main heading; leave it empty for none.
2. 2““Before” picture”
   Shows on the left in both languages.
3. 3““After” picture”
   Shows on the right. Shoot it from the same spot and angle so the only difference is the result.
4. 4““Before” tag on the picture (empty = none)”
   A white pill in the picture's corner, such as “Before use”.
5. 5““After” tag on the picture (empty = none)”
   Such as “After two weeks”.
6. 6“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
7. 7“Title colour (transparent = automatic)”
   The section title's colour, and in some sections the words around it, as the field's name says. Transparent keeps the theme's colour.
8. 8“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.

1. 1“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.
2. 2“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
3. 3“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
4. 4“Bottom spacing”
   Like “Top spacing”, below the section.
5. 5“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
6. 6“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
7. 7“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

Short portrait videos (like reels) in a slider, each with the product it shows, its picture and price, at its foot. A video plays muted by itself while in view and pauses when it leaves.

1. 1“Title”
   The section's main heading; leave it empty for none.
2. 2“Text under the title”
   A short line under the title.
3. 3“Videos”Up to 8 items
4. 4“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
5. 5“Videos side by side on desktop”
   How many videos show on computers.
6. 6“Videos side by side on tablet”
   “One and a half” shows part of the next video.
7. 7“Play the videos by themselves (muted)”
   Off: a play button on each video.
8. 8“Show dots under the slider (phone and tablet)”
   Phones and tablets only.

1. 1“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.
2. 2“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.
3. 3“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
4. 4“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
5. 5“Bottom spacing”
   Like “Top spacing”, below the section.
6. 6“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
7. 7“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
8. 8“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

1. 1“Video name (to find it in the list)”
   A name to find the video in the list; screen readers read it too.
2. 2“Video”
   A short, light video.
3. 3“Cover picture”
   With no video, the picture shows on its own.
4. 4“Product in the video (optional)”
   A small card under the video with the product's picture, name, price and link.

Reviews from your customers that you type yourself, with stars, the customer's photo and the product bought (its name, picture and price from your store), or press quotes with their logos. Use real reviews only.

1. 1“Section look”
   Your reviews stay when you switch.
2. 2“Small text above the title”
   A short word above the title.
3. 3“Title”
   The section's main heading; leave it empty for none.
4. 4“Text under the title”
   A short line under the title.
5. 5“Reviews”Up to 12 items
6. 6“Icon above the review”
   A mark above each review, such as a quote mark.
7. 7“Icon shape”
   “The look's own icon” keeps the original look's mark.Shown when “Icon above the review” is “Icon”
8. 8“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.

1. 1“Title position”
   Where the section title sits.
2. 2“Section background shape”
   With a “Background color” or “Background image”: the section shows as a panel in from the screen's edges or with rounded corners.
3. 3“Title size”
   The section title's size.
4. 4“Customer photo side”
   The customer photo before or after the review.Shown with “Customer photo beside the review”
5. 5“Review alignment”
   The review centred or from the start.Shown with “Customer photo beside the review”
6. 6“Review box width”
   “A little narrower” keeps the review box in from the page's edges on large screens.Shown with “Customer photo beside the review”
7. 7“Card or review box corners (the box when it has a colour)”
   “As the store's other cards” follows “Card and panel corners” in “Look”.

1. 1“Autoplay”
   The reviews turn by themselves.
2. 2“Loop back to the first”
   Instead of stopping at the last review.
3. 3“Arrows at the sides or under the review”
   Where they sit depends on the look.
4. 4“Arrows by the title or at the ends of the pager”
   Arrows by the title, or at the two ends of the dots in some looks.
5. 5“Dots”
   A dot per review or group.
6. 6“How reviews change”
   How one review gives way to the next.Shown with “Customer photo beside the review”
7. 7“Background picture stays still on scroll”
   In “Testimonials” only: the background picture stays still while the page moves over it.

1. 1“Title and text colour (transparent = automatic)”
   The title and the words around the reviews.
2. 2“Panel colour behind the content”
   A coloured panel behind the whole section; its words adjust to read.
3. 3“Second panel colour (a gradient from the first)”
   With the “Panel colour behind the content” it makes a top-to-bottom gradient; without it, it does nothing.
4. 4“Card or review box background”
   The review cards' colour.
5. 5“Icon colour”
   The quote mark or icon.
6. 6“Stars colour (transparent: the Look's)”
   The rating stars in this section only.
7. 7“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.

1. 1“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.
2. 2“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
3. 3“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
4. 4“Bottom spacing”
   Like “Top spacing”, below the section.
5. 5“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
6. 6“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
7. 7“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.

1. 1“Review title (optional)”
   A short line from the review, such as “Best buy of the year”.
2. 2“Customer or publication name”
   The customer's name, or the publication's in press quotes.
3. 3“The review”
   The customer's words as said.
4. 4“Star rating”
   “No stars” for press quotes.
5. 5““Verified buyer” badge”
   Turn it on only for someone who really bought.
6. 6“Customer photo or press logo”
   The customer's photo or the publication's logo; sizes are under the field.
7. 7“Product bought (optional)”
   Shows the product's name, picture, price and link from your store.

The logos of the brands you sell or your partners, in a strip that moves by itself or in cells that slide. It tells visitors the products are genuine.

1. 1“Section look”
   Your logos stay when you switch.
2. 2“Title”
   The section's main heading; leave it empty for none.
3. 3“Text under the title”
   A short line under the title.
4. 4“Logos”Up to 20 items
5. 5“Full width”
   The content spans the whole screen instead of the page width. Good for banners and large pictures.
6. 6“Title position”
   Where the section title sits.
7. 7“Logo height”
   Each logo's size in the strip; the width follows.Shown with “Logos moving in a strip”

1. 1“Movement speed”
   How fast the strip moves.Shown with “Logos moving in a strip”
2. 2“Movement direction”
   “Against the reading direction” when two moving strips follow each other and you want them opposite.Shown with “Logos moving in a strip”
3. 3“Pause when the mouse is over it”
   So a visitor can click a logo.Shown with “Logos moving in a strip”
4. 4“Fade at both ends”
   Logos fade out at the ends instead of being cut.Shown with “Logos moving in a strip”
5. 5“Title and text colour (transparent = automatic)”
   The title, the line under it and the brand names.
6. 6“Background color”
   A colour behind the whole section to set it apart. Transparent takes the page colour.
7. 7“Background image”
   A picture behind the whole section, cropped to fit; choose a calm one about 1920 wide.

1. 1“Enable overlay”
   A see-through colour layer over the background or picture so the words read.
2. 2“Top spacing”
   “Default” keeps the chosen design's space, “00” removes it, the rest are pixels.
3. 3“Bottom spacing”
   Like “Top spacing”, below the section.
4. 4“Mobile top spacing”
   On “Default” phones use the “Top spacing” number.
5. 5“Mobile bottom spacing”
   On “Default” phones use the “Bottom spacing” number.
6. 6“Hide section”
   Hides the section without deleting it; its content is kept. Handy for a seasonal offer.