Amer 22 designs
in one theme

Tips

• Start from the design closest to your business, then adjust it. Every part has its own design choice, so you can, for example, take the header from one design and the product card from another.
• Every design has a live demo store; browse it before you choose.

Step by step

1. On the themes page of your Zid dashboard, press “Customize” on the Amer theme.
2. First press “Export” and keep the file it downloads. It is a copy of your current customization, in both languages, to go back to if you change your mind.
3. Next to “Switch layouts in one click.” press “Preview presets”. The “Presets” panel opens with every design, its name and pictures.
4. Choose a design and press “Apply”. Zid asks “Apply changes to current theme?”; press “Apply” again to confirm.
5. Check the page in Arabic and in English, upload your pictures, then press “Publish”.

Tips

• Have a design file (JSON)? Press “Import” in the editor and choose it. Careful: Zid applies it as soon as you choose it, with no question asked, and it replaces just like “Apply”. Import only a file made for Amer.
• Pictures do not come with a design. Picture fields arrive empty, for your own product and brand pictures. Some sections do not show without a picture; the picture field says so in its name or under it. Such a section stays hidden until you upload its picture.
• Each design is named after the business it was made for, such as electronics, perfume and oud, or abayas. You can browse it live on the demo store before applying it.
• After applying you can change anything: any section’s look in “Section design”, the header in “Header design”, and all text and colors.
• Changed your mind? If you have not published yet, press “Undo all changes” to bring back the published version. If you have, see “I applied a design and want my old store back” in “Questions and fixes”.

Step by step

1. Under “Page content”, press “Add section”.
2. Find the section by its name and choose it.
3. Drag the section to its place in the list. The order here is the order on the page.
4. Press the pencil on the section to open its settings. Choose “Section design” first, then fill in the content.
5. Press “Publish”.

Tips

• To hide a section without deleting it, tick “Hide this section” inside it, or choose “Hide” from the options menu beside its name. Everything you wrote in it is kept.
• The same menu has “Duplicate” to copy the section, “Rename” to give it a name you recognize, and “Delete” to remove it.
• Arabic and English each have their own sections and settings. To carry a section over, choose “Copy section to English language” from its menu, then translate its text.
• Open a section’s settings with the pencil, not by clicking the row. The row is for dragging, so clicking it can move the section.
• Changing “Section design” keeps what you wrote and uploaded; only the look changes.

Tips

• “Main slider”: in “Full image, text over it” each slide picture is wide, about 1920 wide by 860 high. Phones show a much narrower slide, so a wide picture loses its sides. So upload a “Mobile image (optional)” close to square, about 1000 wide.
• “Category carousel”: square, about 600 by 600 in most designs. Leave “Image (optional)” empty and the category’s own Zid picture shows.
• “Banner grid”: square in “Two or more banners in a row”. When “Banner style” is “Wide rounded image with an underlined link”, about 690 by 388. The other designs show their size under the picture field.
• “Feature banner”: wide in “Full-width single banner”, about 2115 by 690. In “Features around a product image” the product picture is a 700 by 700 square PNG with a clear background.
• “Countdown banner”: about 1920 by 600 in “Full banner, countdown over the image”; in “Two images, countdown between them” each picture is about 1180 by 1000.
• “Before / after comparison”: both pictures exactly the same size, about 1920 by 720.
• “Benefit showcase”: about 1920 by 900.
• “Collection tabs”: about 1520 by 1400 in “A list of names that swaps a big image”; a 1440 by 1440 square in “Numbered products beside the product image with an add-to-cart bar”.
• “Featured list”: about 450 by 294 in “Product columns with two small stacked banners”; about 450 by 608 in “Product columns with one tall banner”.
• “Product carousel”: the banner depends on the design. In “Two product rows with a side banner (best with the title at the side and three per row)” it is tall, about 840 by 1552. In “A tall banner beside four products (best with the title centered and four per row)” it is tall, about 900 by 1216. In “A banner with two products under it and four beside it (best with the title at the side and four per row)” it is wide, about 1380 by 800.
• “Product scenes (thumbnail swap)”: about 1410 by 1092 in “Small thumbnails that switch the large image, with the product over it”; a 1400 by 1400 square in the other two designs.
• “Product lookbook”: a 700 by 700 square in “Product grid, image and total price”. The other designs show their size under the field. The pins stay on the same spot of the picture.
• “Product tabs”: in “A banner per tab beside a product grid (up to 8 products)” each tab banner is about 1104 by 752. In “Rounded panel, a column of image tabs beside the products” the small tab picture is a 124 by 124 square PNG with a clear background, shown on desktop only.
• “Product spotlight”: in “Details on one side, product images in the middle, an extra image on the other side” the extra picture is tall, 1166 by 1544, and shows on large screens only.
• “Shop the look (pinned images)”: 1440 by 960 or larger; keep the products away from the edges.
• “Gallery (Instagram style)”: square, 700 by 700.
• “Testimonials”: the customer photo is a 700 by 700 square with the face in the middle.
• “Blog”: about 1200 by 800, the same size for every post so the cards line up.
• “Brand logos strip”: PNG or SVG with a clear background. Make it 88 tall or more while the section’s logo height is left as it comes; if you raise that height, make the picture twice as tall. Logos are shown whole, never cropped.
• “Benefits” and “Policy marquee”: square PNG icons with a clear background (104 by 104 or larger in Benefits, 48 by 48 or larger in the strip).
• “Section background image” in any section: fills the whole section and is cropped to fit; about 1920 wide, and calm.
• “Logo” in “Header”: a PNG with a clear background, 175 tall or more.
• “Internal advertisements”: 1440 by 810 (16:9), and 768 by 432 for phones.
• “Welcome window image (your photo or logo)”: a 96 by 96 square, shown in a circle.

Store look

Step by step

1. In the theme editor, open the “Look” settings.
2. In “Store look”, pick the look closest to your business. The preview shows the colours, fonts and corners changing together.
3. For different corners, change “Button corners” or “Card and image corners”.
4. Save, then press “Publish” so your customers see it.

Settings

• Store look: Changes the store's colours, fonts, button and card corners and product picture shape in one go. The advertising popup and the loading screen follow the look too. Any colour or font you choose yourself in “Main colors” or “Fonts” is used instead of the look's.
• Button corners: How rounded buttons are across the store. “Square” gives sharp corners. From “4px” to “20px”, the bigger the number, the rounder the corners. “Fully rounded (pill)” makes a capsule shape. “As the look” keeps the look's own shape.
• Card and image corners: How rounded product cards, pictures and banners are. “Square” gives sharp corners and “24px” is the roundest. “As the look” keeps the look's own.
• Headings and cards fade in as you scroll down: When on, the home page sections' headings and cards rise gently into place as the customer scrolls down to them. Turn it off if you want everything to appear without motion.

Tips

• Button colour: in “Tech (electronics)” and “Soft (beauty)”, while “Primary color (buttons)” is empty, buttons take your store's main colour saved in Zid. In the other looks, the button colour comes from the look itself. In every look, you change it by putting your colour in “Primary color (buttons)”.
• Changing the look changes the appearance only. The home page sections, their text and pictures stay as they are. For a complete ready-made design with its sections, apply it from “Preview presets”.
• Visitors who turned motion off in their device settings do not see the fade-in; that is expected.

Step by step

1. In the theme editor, open “Main colors”.
2. Put your brand colour in “Primary color (buttons)”.
3. If you have a second colour for offers, put it in “Accent color (offers and highlights)”.
4. Leave the other colours empty to keep the look's, or change only the ones you need.
5. Check the preview on desktop and mobile, then press “Publish”.

Settings

• Primary color (buttons): The colour of the main buttons, such as “Add to cart” and “Complete Order”. The WhatsApp and back-to-top buttons take it too, unless you give them a colour of their own. This is the first colour to change to put your brand on the store.
• Text on buttons (empty: picked automatically to stay readable): The colour of the words and icons inside those buttons. Left empty, the theme picks white or a dark colour to suit the button, so it stays readable.
• Accent color (offers and highlights): The colour of small eye-catching details, such as the little number on the cart and wishlist icons and the offer countdown on cards. Links, menu items and icons also take this colour when the mouse is over them.
• Headings color: The colour of section and page headings, product names on cards, and the large price on the product page.
• Text color: The colour of ordinary text on the pages, such as descriptions and paragraphs.
• Secondary text color (small details): The colour of smaller, less important text, such as lines under headings and notes. Keep it lighter than “Text color” but still readable.
• Page background color: The background colour of every page. The header and some footer designs take it too, unless you give them a colour in “Header and footer colors, page background”.
• Cards and panels background color: The colour of light backgrounds, such as the one behind a product picture on its card, and of boxes and panels.
• Dividers and borders color: The colour of thin lines between parts of a page and of card and field borders.
• Sale price color: The colour of prices on product cards, on sale or not, and of the discount percentage badge on cards. The badge's text adjusts itself to stay readable. The large price on the product page does not use it; that one takes “Headings color”.
• Rating stars color: The colour of rating stars on cards and on the product page.
• Badges background color (discount and product badge): The background of two badges: the badge you give a product in Zid (such as “New”) on cards, and the discount badge on the product page. Left empty, the Zid badge on cards stays green. The discount percentage badge on cards does not use it; it takes “Sale price color”.
• Badges text color (empty: picked automatically to stay readable): The colour of the words on those badges. Left empty, white or a dark colour is picked to suit the badge.

Tips

• Start with two colours only: “Primary color (buttons)” and “Accent color (offers and highlights)”. That is usually enough to put your brand on the whole store.
• If you choose a light button colour (yellow or beige, for example), the words on it turn dark by themselves. If you fill “Text on buttons (empty: picked automatically to stay readable)” yourself, check that it shows on the button.
• Keep “Text color” dark enough on “Page background color” for comfortable reading, especially on phones.
• With “Tech (electronics)” and “Soft (beauty)”, while “Primary color (buttons)” is empty the buttons take your store's main colour saved in Zid's settings.

• Arabic font: The font of text on the Arabic store. Headings use it too, unless the look has its own headings font or you choose one in “Arabic headings font”.
• English font: The font of text on the English store. With “As the look”, it is DM Sans in every look.
• Arabic headings font: The headings font on the Arabic store. “Same as the Arabic font” gives headings the text font; “As the look” keeps the look's headings font if it has one.
• English headings font: The headings font on the English store. “Same as the English font” gives headings the text font; “As the look” keeps the look's headings font if it has one.

Tips

• Decorative fonts such as Aref Ruqaa, Lalezar, Jomhuria and Rakkas look good in headings but tire the eye in long descriptions. Keep them for “Arabic headings font” and give “Arabic font” a plain font such as Cairo, Tajawal or Almarai.
• One font for text and one for headings is enough; each extra font adds a little to what the page loads.
• After changing a font, open both the Arabic and the English store and check long headings and product names.

• Header
  • Background color: The background of the header, the part with the logo and the menu. Left empty, it takes “Page background color”.
  • Text color: The colour of the header's text and icons. Change it together with the background so it stays visible: dark on light, or white on dark.
  • Lower menu row background color (empty: same as the header): In the header designs where the menu sits in its own lower row, this is that row's background. Left empty, it takes the header's background.
  • Lower menu row text color (empty: same as the header): The colour of the menu text in the lower row. Left empty, it takes the header's text colour.
• Footer
  • Background color: The background of the footer at the bottom of the page. Left empty, each footer design keeps its own colour.
  • Text color: The colour of the footer's text and links.
• Page background
  • Page background image (optional): A picture repeated behind the content of every page, like a light pattern. Sections with a background colour of their own cover it where they sit.

Tips

• Choose the header's background and text colours together: if you darken the background, lighten the text.
• For the page background, use a small, light pattern that repeats without visible edges, not a large detailed picture.
• The top bar above the header is coloured in the “Top bar” settings. With the “Clear over the first home section” header design, the text and icon colour while the header is clear is set in “Text and icon color while clear (empty: the header's own)” in the “Header” settings.

Product card design

Step by step

1. In the theme editor, open “Product card”.
2. Pick a design in “Product card design”.
3. Pick the buttons in “Buttons shown when the mouse is over the card”.
4. Set “Product image shape” to the shape closest to your product pictures.
5. Check a category page in the preview, then press “Publish”.

Settings

• Product card design: Changes the design of every product card in the store at once.
• Buttons shown when the mouse is over the card: The buttons on the product picture: the heart for the wishlist, the eye for a quick look at the product without leaving the page, and “Add to cart”. On desktop they appear when the mouse is over the card. On phones and tablets they are always visible.
• Product image shape: The shape of the product picture frame: square, portrait, tall or landscape. The product page's pictures use the same shape. Pick the one closest to your photos so little is cropped.
• How the image fits: “Fill the space (may be cropped)” fills the whole frame and may trim the edges; “Whole image, never cropped” shows the entire picture with space around it. Choose “Whole image, never cropped” if your photos come in different sizes or the whole product must show.
• Show the rating (stars): The product's rating stars and number of ratings under its name. They show only when reviews are on in your Zid store and the product has a rating.
• Show the discount percentage on the image: The discount percentage (such as -20%) on the picture of a product on sale, so offers catch the customer's eye.
• Show the product badge you set in Zid: The badge you give a product in Zid (such as “New” or “Best seller”) on the card's picture.
• Show “Available in several options” and “Tax free”: A small line under the price. It says “Available in several options” when the product has sizes, colours or fields the customer fills in, or “Tax free” when it is exempt. It does not show for a sold-out product.
• Show the offer countdown: When a sale has an end date in Zid, a small countdown in days, hours, minutes and seconds appears on the picture until the offer ends. It shows on large desktop screens only.
• Moving sale strip on the product image: the word before the percentage, like “Sale” (leave empty for none): Type a word such as “Sale” and a moving strip with that word and the discount (“Sale 20%”) runs across the picture of every product on sale. Leave it empty for none. It shows on large desktop screens only.
• Show the second product image on hover: When the mouse is over the card, the picture changes to the product's second picture (if it has one). Turned off, the first picture stays and only enlarges slightly.
• Open the cart drawer after adding a product (anywhere in the store, not only from cards): After a customer adds a product anywhere in the store, the cart drawer opens so they see what they added and can go on to checkout. Turned off, they see a small tick or message that it was added, and nothing opens.

Tips

• Product pictures look best when they share one shape and background. With a square “Product image shape”, upload square pictures around 1000×1000.
• The moving sale strip and the offer countdown show on large desktop screens only; on phones the card shows the discount percentage on the picture.
• The heart button shows only when the wishlist is on in your Zid store. On phones it is not on the card, but it stays on the product page.
• “A row of icons in the middle of the image” sits in the middle on large desktop screens; on smaller screens the icons stand at the side of the picture.
• The drawer opens after an add only while “Show the cart drawer” is on in the “Cart drawer” settings.

• Show the category description: The description you wrote for the category in Zid, shown under its name at the top of the page. It introduces the category to customers, and helps with Google too.
• Show the sub-categories strip: If the category has sub-categories in Zid, they appear as a strip under the title with each one's picture and name, so customers can go straight to the one they want.
• Full screen width page: Lets the products and filters use the full screen width instead of a centred column with margins. Useful with 5 or 6 products per row.
• Filters layout: Where the product filters (size, colour, price and so on) sit. The side panel leaves the products the full width of the page. “Column beside the products, start side” and “Column beside the products, end side” keep the filters always in view. “A dropdown per filter” puts each filter as a small button above the products. The column and the “Wide panel that opens above the products” look that way on large desktop screens only; on smaller screens they become a side panel.
• Products per row on desktop: How many products sit side by side on desktop. 5 or 6 show at that count on wide screens only; ordinary laptops show 4. Phones always show two per row. Tablets show three, or two if you choose 2.
• How products show when the page opens: “Grid”: cards side by side. “List”: one product per row, its picture beside the name, price, a short description and the add button. The list suits products that need explaining.
• Show the grid/list switch: Small buttons above the products that let customers choose list or grid, and how many columns, themselves.
• How more products load: For when there is more than one page of products. “Page numbers”: ordinary numbers to move from page to page. A “Load more” button: adds the next products below, on the same page. “Load automatically while scrolling”: the next products are added by themselves as the customer reaches the end.

Tips

• Filters come from Zid, from your products' attributes such as size and colour. A category with no filters shows no filter button.
• If your categories hold many products in sizes and colours, “Column beside the products, start side” lets customers filter while they see the products.
• These settings also apply to the all-products page and search results, except the description and the sub-categories strip, which belong to category pages only.
• Give each sub-category a square picture in Zid; one without a picture shows the first letter of its name instead (after the Arabic article «ال»).

• Show the loading screen: Turned off, pages open straight away without this screen.
• Loading screen style: The motion style: the logo fading in and out, a spinning ring, a line along the top, the store name in the heading font, three dots, or a lifting curtain. “Store name revealed in the heading font” suits a store without a logo.
• Text shown (empty: the store name): The words shown in the “Store name revealed in the heading font” style, such as your brand name in English or a short phrase.Shown when “Loading screen style” is “Store name revealed in the heading font”
• Show the logo above the mark (with the ring, line, dots and curtain; the store name when there is no logo): Shows the store logo (the header's logo) in the middle of the screen with the ring, line, dots or curtain. Without a logo, the store name shows instead. With “Logo fading in and out” the logo always shows. With “Store name revealed in the heading font” this option has no effect.
• A small line under the mark (optional): A small line under the motion, such as “Getting the best offers ready”.
• How often it shows: “On every page” shows it on each page, “Once per visit” on the first page only, and “Once every 24 hours” once a day. “Once per visit” is the kindest to customers.
• Shortest time on screen (1000 = 1 second; 0 = leaves as soon as the page is ready): The shortest time the screen stays even when the page is ready quickly, so the motion is not a flicker. The default is 400 (under half a second).
• Longest time on screen in seconds (then it leaves even if the page is still loading): The screen leaves after this time whatever happens, from 1 to 6 seconds, so customers never wait on a slow connection.
• Background color (empty: the page background). With a dark color, use a light logo so it shows: The screen's background. Left empty, it takes the page background. With a dark colour, use a light logo so it shows.
• Mark color (ring, line, dots or curtain) and the line under it - empty: the look's color: The colour of the ring, line, dots or curtain, and of the small line under it. Left empty, it takes the look's colour. If you choose a background too close to that colour, it switches by itself to white or a dark colour so it shows.

Tips

• In the theme editor the loading screen shows on every preview reload (for up to two seconds) so you can see your choice. Customers see it according to “How often it shows”.
• The screen leaves as soon as the first part of the page appears, not when every picture has loaded, so it does not slow the store.
• Keep “Longest time on screen in seconds (then it leaves even if the page is still loading)” at 3 seconds or less; customers do not like to wait.

Step by step

1. In the theme editor, open “Advertising popup” and turn on “Show the advertising popup”.
2. In “Popup slides”, add a slide: upload its “Image”, write its “Title” and put the discount code in “Short description (optional)”.
3. Write “Button text (leave empty for no button)” and choose “Button link (needed for the button to show)”.
4. Set “Pages it shows on”, “Seconds after the page opens” and “How often it shows”.
5. For every new offer, change “Campaign name (change it to show the popup again to visitors who already saw it)”, then press “Publish”.

Settings

• Show the advertising popup: The main switch. The popup shows only when at least one slide has a picture or words.
• Popup slides: Each slide holds one offer. One slide is enough for one offer; add more if you have several, and the customer moves through them.
  • Title: The large title, such as “20% off your first order”.
  • Short description (optional): A sentence explaining the offer, such as “Use the code WELCOME20 at checkout”.
  • Image: The slide's picture. It is cropped to fill its space, so keep what matters near the middle. A slide with a picture and no words fills the whole window.
  • Mobile image (optional): A different picture for phones. On phones the picture sits above the words at the full width of the window, so a landscape picture works best.
  • Image description for Google and screen readers (alt) - optional: A short description of the picture for Google and screen readers, such as “Winter offer, 30% off”.
  • Button text (leave empty for no button): The words on the button, such as “Shop the offer”. The button shows only when there is a link.
  • Button link (needed for the button to show): The page the button opens, such as your offers category.
  • Open the link in a new tab: Opens the link in a new tab; only useful for links outside your store.
• Image position: Where the picture sits on desktop: beside the words (start or end side) or above them. On phones the picture is always above the words.
• Pages it shows on: Whether the popup shows on the “Home page only” or on “Every page”.
• Seconds after the page opens: How long the visitor is on the page before the popup appears, from 0 to 120 seconds. 4 to 8 seconds lets them see the store first.
• How often it shows: “Once per visit”: once while the customer keeps the store open in the same tab. “Once every 24 hours”: once a day. “On every page”: on every page they open, which can annoy.
• Hide on mobile: The popup never shows on phones. Useful if you feel it gets in the way on a small screen.
• Campaign name (change it to show the popup again to visitors who already saw it): A name for the current offer that customers never see. When you start a new one, change the name (“ramadan-offer”, for example) and the popup shows again even to visitors who saw the old one.
• Autoplay: The slides move on by themselves, with a “Pause slides” button.
• Seconds on each slide: How many seconds each slide stays, from 1 to 60.Shown when “Autoplay” is on
• Start again after the last slide: After the last slide it returns to the first instead of stopping.
• Show arrows: Arrows to move between slides.
• Show dots under the slider: Dots showing how many slides there are. If you have more than one slide and turn arrows, autoplay and dots all off, the dots come back by themselves so customers can still reach the other slides.
• Window background color: The popup's background. With a dark background and “Text color” left empty, the words turn light by themselves.
• Text color: The colour of the title and description.
• Button background color: The button's colour. With “Button text color” left empty, its words adjust themselves to stay readable.
• Button text color: The colour of the words on the button.
• Color behind the window: The colour of the layer that covers the page behind the popup so the popup stands out; black is the usual choice.
• Strength of the layer behind the window (0 clear - 100 solid): How dark that layer is: at 0 the page shows normally, at 100 it is fully covered. 50 suits most stores.

Tips

• Picture size on desktop: beside the words, the picture sits in a nearly square space about 360 pixels wide, so a square picture such as 720×720 looks sharp. Above the words, it becomes a wide strip the width of the window (about 870 pixels) and 220 to 320 pixels high.
• On phones the picture sits above the words, 190 to 300 pixels high, and is cropped from the bottom, so keep what matters in the top part or upload a landscape “Mobile image (optional)”.
• Customers close the popup with its close button, by clicking outside it, or with the Esc key.
• If “How often it shows” is “Once per visit” and you cannot see the popup while testing, open the store in a private (incognito) window, or change “Campaign name (change it to show the popup again to visitors who already saw it)”.

Step by step

1. In the theme editor, open “Internal advertisements” and check that “Show the internal ads (banners above or below the page content)” is on.
2. In “Ads”, add an ad, upload its “Image” and write its “Title”.
3. Choose the page it opens in “Link (the whole ad opens it; needed for the button to show)”.
4. Choose “Where on the page”, and tick the pages in “Pages it shows on (leave empty: every page)”.
5. To show it in one category only, add that category in “Show only in these categories (leave empty to show everywhere)”.
6. Open that page in the preview to check, then press “Publish”.

Settings

• Show the internal ads (banners above or below the page content): The main switch: turned off, every internal ad disappears without being deleted.
• Title above the ads (optional): A small title above the group of ads, such as “This week's offers”. It shows wherever ads appear.
• Text under the title: A short line under the title.
• Ads: Each ad is its own row here. Add one per offer and set each one's place and pages.
  • Small line above the title: A word or short line above the ad's title, such as “Limited time”.
  • Title: The large title on the ad.
  • Short description (optional): One or two sentences under the title.
  • Image: The ad's picture. The frame is 16:9 landscape and the picture is cropped to fill it, so keep what matters near the middle.
  • Mobile image (optional): A different picture for phones, when the desktop picture has small text or details that would be cut. Left empty, the same picture is used.
  • Image description for Google and screen readers (alt) - optional: A short description of the picture for Google and screen readers, such as “30% off sneakers”.
  • Button text (leave empty for no button): The words on the ad's button, such as “Shop now”. The button shows only when there is a link.
  • Link (the whole ad opens it; needed for the button to show): The page the ad opens when a customer taps anywhere on it, such as a category or a product.
  • Open the link in a new tab: Opens the link in a new tab. Only useful for a link outside your store.
  • Where on the page: Whether the ad shows above or below the page content.
  • Pages it shows on (leave empty: every page): Tick the pages the ad shows on. Search results are shown on the “All products page”, so tick it if you want the ad with search results.
  • Show only in these categories (leave empty to show everywhere): Add categories here and the ad shows on those category pages only. Leave it empty for a general ad such as free shipping.
    • Category name (for this panel only): A name so you can recognise the row in the panel; customers never see it.
    • Category: The category whose page shows the ad.
  • Text position: Where the words sit on the ad: start, centre or end.
  • Text color: The colour of the ad's words. White shows on dark pictures; use “Color layer over the image” on light ones.
  • Background color when there is no image: The ad's colour when it has no picture; useful for a text-only ad such as “Free shipping over 200 SAR”.
  • Color layer over the image: Lays a see-through colour over the picture so the words show on it.
  • Layer color: The colour of that layer; black is the usual choice.Shown when “Color layer over the image” is on
  • Layer strength (0 clear - 100 solid): How dark the layer is. 30 to 50 is usually enough for the words to show while the picture stays clear.Shown when “Color layer over the image” is on
• Ads at full screen width: Runs the ads edge to edge instead of at the width of the page content.
• Title position: Where the title and the line under it sit: start, centre or end.
• Ads side by side on desktop: How many ads sit side by side on desktop and tablet, from 1 to 3. With more ads, the rest are reached with the arrows and dots.
• Ads side by side on mobile: How many ads sit side by side on phones, 1 or 2. One is clearer.
• Autoplay: The ads move on by themselves and pause while the mouse is over them. A “Pause slides” button appears with them.
• Seconds on each slide: How many seconds each ad stays before the next, from 1 to 60.Shown when “Autoplay” is on
• Start again after the last slide: After the last ad it returns to the first instead of stopping.
• Show arrows: Arrows to move between ads. They show only when there are more ads than fit at once.
• Show dots under the slider: Dots under the ads showing how many there are and which one is in view.
• Space above the ads: The space between the ads and what is above them on desktop and tablet. Phones use the same space while “Space above the ads on mobile” is on “Default”. “Default” is the theme's own spacing.
• Space below the ads: The space between the ads and what is below them on desktop and tablet. Phones use the same space while “Space below the ads on mobile” is on “Default”.
• Space above the ads on mobile: The space above the ads on phones. Leave it on “Default” to use the desktop space.
• Space below the ads on mobile: The space below the ads on phones. Leave it on “Default” to use the desktop space.

Tips

• Suggested picture sizes: 1440×810 (16:9) for desktop and 768×432 for phones. Text written into the picture gets small on phones, so put it in the ad's fields instead.
• Internal ads never show on the home page; for the home page use the banner sections of the home page.
• If you leave “Pages it shows on (leave empty: every page)” empty and add no categories, the ad shows on every page in that list and on the FAQ page too. That suits a general offer such as free shipping.
• With 2 or 3 ads side by side the pictures get smaller; keep their words short.

Step by step

1. In the theme editor, open “WhatsApp and back-to-top button”.
2. Turn on “Show the WhatsApp button”.
3. Type your number in “WhatsApp number with country code, like 966500000000 (empty: your store's number)”, with the country code and no leading zero.
4. To open WhatsApp directly, turn off “When the button is tapped: show a welcome window first (off: WhatsApp opens directly)”.
5. If you like, write a ready message in “A ready message typed for the customer when WhatsApp opens (optional)”.
6. Try the button in the preview, then press “Publish”.

Settings

• Show the WhatsApp button: Shows the WhatsApp button in the corner of every page of the store.
• WhatsApp number with country code, like 966500000000 (empty: your store's number): The number the chat goes to, with the country code and no leading zero, like 966500000000. If the number is wrong, the button does not show. Left empty, it uses the contact number saved for your store in Zid.Shown when “Show the WhatsApp button” is on
• A ready message typed for the customer when WhatsApp opens (optional): A sentence already typed in the message box when WhatsApp opens, such as “Hi, I have a question about a product”. The customer can edit it before sending.Shown when “Show the WhatsApp button” is on
• When the button is tapped: show a welcome window first (off: WhatsApp opens directly): On: the button opens a small window with your welcome and a “Continue in WhatsApp” button. Off: the button opens WhatsApp directly.Shown when “Show the WhatsApp button” is on
• Welcome window title (empty: “Contact us”): The title at the top of the welcome window, such as “Customer care”.Shown when “Show the WhatsApp button” is on and when “When the button is tapped: show a welcome window first (off: WhatsApp opens directly)” is on
• Welcome window image (your photo or logo): Your photo or logo in a small circle at the top of the window, so customers feel they are talking to real people.Shown when “Show the WhatsApp button” is on and when “When the button is tapped: show a welcome window first (off: WhatsApp opens directly)” is on
• Welcome messages: Short messages shown in the window like chat bubbles, such as “Hello, how can we help?”.Shown when “Show the WhatsApp button” is on and when “When the button is tapped: show a welcome window first (off: WhatsApp opens directly)” is on
  • Message text: The message itself. Each message shows in its own bubble.
• Hide the WhatsApp button on mobile: Hides the WhatsApp button on phones only, if it covers something there.Shown when “Show the WhatsApp button” is on
• WhatsApp button color: The colour of the WhatsApp circle and of the “Continue in WhatsApp” button in the window. Left empty, it takes “Primary color (buttons)”.Shown when “Show the WhatsApp button” is on
• WhatsApp button icon and text color: The colour of the WhatsApp icon in the button and of the words on “Continue in WhatsApp”.Shown when “Show the WhatsApp button” is on
• Welcome window background color: The background of the welcome window.Shown when “Show the WhatsApp button” is on and when “When the button is tapped: show a welcome window first (off: WhatsApp opens directly)” is on
• Welcome window text color: The colour of the title and words in the welcome window.Shown when “Show the WhatsApp button” is on and when “When the button is tapped: show a welcome window first (off: WhatsApp opens directly)” is on
• Welcome messages background color: The colour of the welcome message bubbles.Shown when “Show the WhatsApp button” is on and when “When the button is tapped: show a welcome window first (off: WhatsApp opens directly)” is on
• Show the back-to-top button: A small arrow button that appears in the corner once the customer scrolls down, and takes them back to the top in one tap.
• Shows once the customer has scrolled this far: How far the customer scrolls before the button appears, from 0 to 3000. The default, 300, is after a short scroll.Shown when “Show the back-to-top button” is on
• Back-to-top button color: The colour of the back-to-top circle. Left empty, it takes “Primary color (buttons)”.Shown when “Show the back-to-top button” is on
• Back-to-top arrow color: The colour of the arrow in the button.Shown when “Show the back-to-top button” is on

Tips

• If the button does not show, the number is usually wrong: it must start with the country code (966 for Saudi Arabia, 20 for Egypt) with no 00 or leading zero.
• WhatsApp's familiar green makes the button recognisable at a glance; put it in “WhatsApp button color” if you like.
• The welcome window picture shows in a small circle; 96×96 is the suggested size, with what matters in the middle.

• Show “You may also like” suggestions in the cart: The main switch: turned off, suggestions show nowhere.
• Show on the cart page: Shows the suggestions row at the end of the cart page, under the products and the order summary.
• Show in the cart drawer: Shows the suggestions row inside the cart drawer, under the items.
• Suggestions title (empty: “You may also like”): The title above the suggestions, such as “You might also like” or “Complete your order”.
• Number of products: The most products in the row, from 2 to 24. Customers move through them with the arrows or by dragging.
• Show the price: Shows each suggested product's price under its name.
• Show sold-out products: Lets sold-out products appear among the suggestions. Leave it off so customers are not shown something they cannot buy.

Tips

• Suggestions come from the products related in Zid to what is in the cart. When there are none, they are taken from your other products. Nothing already in the cart is suggested.
• Nothing is suggested while the cart is empty.
• A product without options is added straight away with “Add to cart”. A product with options, such as size or colour, opens its page so the customer can choose first.

• Turn off right-click in the store (makes saving images harder): When on, right-click opens no menu on the store's pages, except inside the fields customers type in (such as the discount code and the address) so they can still paste. Selecting text and copying with the keyboard keep working.

Tips

• Anyone determined can still take a picture another way, such as a screenshot. Putting your logo on your photos protects them better.

• Code added at the end of the head (like tracking and analytics code): If a service's instructions say to put its code in the head, paste it here. This is the usual place for a Snapchat, TikTok or Meta pixel and analytics tools.
• Code added at the end of the page, before the body closes (like chat widgets): If a service's instructions say to put its code at the end of the page, before the body closes, paste it here. This is the usual place for chat and support widgets.

Tips

• Paste the code exactly as the service sent it and check the store afterwards; faulty code can break the look of pages or stop something working.
• Never paste code from a source you do not trust; it runs for every one of your customers.
• If the same service is already connected to your store through Zid itself, do not add its code here too, or visits will be counted twice.

Header design

Step by step

1. On the themes page of your Zid dashboard, press «Customize» on the Amer theme. Open the “Header” settings, then the “Header” group.
2. Upload your logo in “Logo”. A PNG with a clear background works best.
3. Choose “Logo height” for computers and “Logo height on mobile” for phones, and watch the preview until it looks right.
4. If your logo is long and cramped on phones, upload a compact version in “Mobile logo (optional)”.
5. When you're done, press «Publish» so your customers see the change.

Settings

• Header design: Changes the layout and look of the whole header on computers. On phones and tablets every design uses the same simple layout: the menu button, the logo and the icons. Try a few and check the preview before you publish.
• Keep the header clear over the first home section (turn off when that section is not an image): Lets the header sit without a background over the first home section. When the shopper scrolls back up, the header pins to the top and turns solid. Other pages are unaffected. Turn it off when that first section is text on a plain background rather than a picture.Shown with “Clear over the first home section”
• Text and icon color while clear (empty: the header's own): The colour of the text and icons while the header is clear over the picture. Pick white over a dark picture, a dark colour over a light one. Left empty, it keeps the header's usual text colour.Shown with “Clear over the first home section” and when “Keep the header clear over the first home section (turn off when that section is not an image)” is on
• Logo: Your logo in the header on every page. The same logo also shows in the footer in the “Light: logo above the store details” design. Left empty, your Zid store logo is used; with no logo at all, the store name is written instead.
• Mobile logo (optional): A second logo for phones and tablets only. Useful when your logo is long and you have a compact version, such as the mark alone or your initials. Left empty, the same logo is used.
• Logo height: How tall the logo is on computers; the width follows by itself. Go bigger if your logo looks small, smaller if it crowds the menu.
• Logo height on mobile: How tall the logo is on phones and tablets. Keep it small enough that it never runs into the icons beside it.
• Line the logo up with the icons automatically: Places your logo by itself according to its shape, moving it slightly up or down so it lines up with the icons. If the logo looks shifted the wrong way, turn this off and place it yourself with “Move the logo up or down (minus moves it up)”.
• Move the logo up or down (minus moves it up): If the logo still isn't level with the icons, move it yourself: a minus value lifts it and a plus value lowers it. Change it a small step at a time.
• Hide search: Removes the search box and search icon from the header, and the “Search” button from the mobile bottom bar. The search box inside the mobile menu stays. Only worth it when you sell very few products.
• Text inside the search box (empty: “Search products”): The faint text inside the search box before the shopper types. It shows in the header, the search window and the mobile menu. Write something inviting, such as “Find your fragrance”.
• Suggested searches in the search window (empty: your categories): Words shown as buttons in the search window under “Popular searches”, before the shopper types. A tap on one opens its results. Left empty, your categories appear there with their pictures.
  • Search term: The term itself, such as “black abaya” or “wireless earbuds”. Use words your shoppers really search for.
• Hide the language button: Removes the language button from the top bar, the header and the footer. It never shows anyway when your store has a single language.
• Hide the country button: Removes the country button from the top bar, the header and the footer. With this and “Hide the language button” both on, the country and language button at the foot of the mobile menu disappears too.
• Phone number (empty: your store's number): The number shown at the start of the header on computers; tapping it starts a call. Left empty, your store's number from Zid is shown.Shown with “Two rows: contact links first, logo in the middle, menu alone below”
• Links beside the phone number: Short links beside the phone number, such as “Contact us” or “FAQs”. A link shows only when both its “Link text” and “Link” are filled in.Shown with “Two rows: contact links first, logo in the middle, menu alone below”
  • Link text: The words the shopper sees and clicks. Keep it to one or two words.
  • Link: The page the link opens: one in your store, such as /faqs, or a site outside your store.
  • Underline the link: Underlines this link so it stands out from the others. Handy for your most important one.
• Highlighted link text at the end of the menu row (in the header designs with “Browse by category” and the menu below): A highlighted link with a % sign at the end of the menu row on computers, such as “Special offers!”. Handy for sending shoppers straight to your offers. Left empty, it doesn't show.
• Highlighted link goes to (empty: the products page): Where the highlighted link goes, such as your offers category. Left empty, it opens the all-products page.
• Messages under the header: A line of messages under the floating header on computers. With more than one message, they turn every five seconds, with arrows beside them. The line fades once the header pins to the top. Good for an offer or a discount code.Shown with “Floating card: logo, “Browse by category”, menu and search”
  • Message text: The message itself, one short line such as “10% off your first order”. A message with no text doesn't show.
  • Link (optional): With a link here, shoppers can click the message to open that page.
• Keep the header on screen while scrolling: As the shopper scrolls down, the header moves away with the page. As soon as they scroll back up a little, it returns and stays pinned to the top, so search and the cart are close at hand. Turn it off to keep the header only at the top of the page.
• Message text color: The colour of the message line under the floating header. Change it if the words are hard to read over the first home picture.Shown with “Floating card: logo, “Browse by category”, menu and search”

Tips

• On phones and tablets every header design becomes the same header: the menu button at the start, the logo in the centre, the icons at the end.
• The menu links themselves come from the main menu you build in your Zid dashboard, not from the theme settings. When a menu item's sub-items have sub-items of their own, that item opens a wide panel of columns. Items that don't fit on the row gather under “More” by themselves.
• Logo: upload a PNG with a clear background, 175px tall or more. On screen it is never wider than 220px on computers and 160px on phones and tablets. So a very wide logo looks smaller than the height you chose.
• The country and language buttons open a Zid window where shoppers choose their country and language. They show in the top bar, the footer and at the foot of the mobile menu. They also show in the header designs that include them, when the top bar doesn't. “Hide the language button” and “Hide the country button” remove them everywhere at once.
• In the header designs that sit over the first home section, keep important words away from the top of that first picture, so the header never covers them.
• In the two-row designs that include “Browse by category”, the second row folds away on computers while the header is pinned, to save room. Shoppers bring it back with the menu button before the logo. The other designs pin with all their rows.
• In any link box, type the page starting from the / (such as /products) rather than the full address. Shoppers browsing in English then land on the English page by themselves.
• Header settings are saved separately for each language: after finishing in Arabic, switch the editor to English and check the texts and choices there too.

Top bar design

Step by step

1. Open the “Header” settings, then the “Top bar” group, and make sure “Show the top bar” is on.
2. In “Messages”, add a message and write its “Message text”, such as “Free shipping on orders over 200 SAR”.
3. To make the message open a page when clicked, put the page's link in “Link (optional)”.
4. Repeat for each message, and choose “Seconds on each message”.
5. Press «Publish», then open your store and check the bar on a computer and a phone.

Settings

• Top bar design: Decides what the bar holds and where. For messages that also show on phones, pick “Messages in the middle” or “Country and language, messages between arrows, social accounts”.
• Show the top bar: Shows or hides the whole bar. Turn it off when you have no message or offer to announce.
• Show the top bar on: Choose “Every page” to keep the message in view as shoppers move around, or “The home page only” to keep the other pages cleaner.
• Messages: The messages that take turns in the bar. They pause while the shopper's pointer rests on them. A single message stays still.
  • Message text: The message: one short line that reads in a second, such as “10% off with code WELCOME”. Long text is cut off at the end.
  • Link (optional): With a link, shoppers can click the message to open that page, such as your offers page.
• Phone number at the start of the bar, in the designs with contact (empty: your store's number): A number at the start of the bar that starts a call when tapped. Left empty, your store's number from Zid is shown, so fill it in only for a different number, such as your sales line.
• Links beside the phone number, in the designs with contact: Short links beside the number, such as “Shipping and payment” and “FAQs”. A link shows only when both its “Link text” and “Link” are filled in.
  • Link text: The words the shopper sees and clicks. Keep it to one or two words.
  • Link: The page the link opens, such as /faqs for the FAQs or /shipping-and-payment for shipping and payment.
• Show country and language (not in the “Messages in the middle” design): Shows the country and language buttons in the bar; they open Zid's window for choosing both. While the bar shows them, the header designs that include them don't repeat them.
• Show your social accounts (from your Zid store details): Puts icons for your social accounts (Facebook, Instagram, TikTok, Snapchat, X, YouTube, LinkedIn) at the end of the bar. They come from your Zid store details; an account not filled in there doesn't show.Shown with “Country and language, messages between arrows, social accounts”
• Seconds on each message: How long each message stays before the next one. Four to six seconds is enough to read it. The shortest interval that takes effect is two seconds.
• Background color: The bar's background. Left empty, it keeps the design's own: dark, or light in “Light with a line: contact, messages, country and language”.
• Text color: The colour of the words and icons in the bar. If you change the background, pick one that reads clearly on it.

Tips

• In “Contact, messages, country and language” and “Light with a line: contact, messages, country and language”, the messages show on large computer screens only, and the whole bar is hidden on phones. If your message must reach phones, pick another design.
• Messages and links are written separately for each language: after Arabic, switch the editor to English and write them there.
• In the link boxes, type the page starting from the / (such as /faqs) rather than the full address. Shoppers browsing in English then land on the English page by themselves.

Step by step

1. Open the “Header” settings, then the “Browse by category” button group.
2. In “Categories shown”, choose “I choose them”.
3. In “Categories you choose”, add a new one and pick one of your store's categories in “Category”.
4. For a shorter name than its Zid one, type it in “Category name (empty: its name from Zid)”, and upload an “Icon (optional)” if you like.
5. Repeat for each category in the order you want, then press «Publish».

Settings

• Show the “Browse by category” button (in the header designs that have it): Shows or hides the button in the header designs that have room for it. Turn it off when you have few categories and the menu is enough.
• Button text (empty: “Browse by category”): The words on the button, such as “Departments” or “Shop by category”. Left empty, it reads “Browse by category”.
• Categories shown: “All store categories and their sub-categories (automatic)” lists your Zid categories by itself and updates when you add one. Choose “I choose them” to pick the categories and their order yourself.
• Maximum number of categories: The most top-level categories the automatic list shows. Shoppers reach the rest from “All categories” at its end. Ten or fewer keeps the list short and easy.Shown when “Categories shown” is “All store categories and their sub-categories (automatic)”
• Categories you choose: The categories shown, in the order you set. Each still opens its own sub-categories beside it.Shown when “Categories shown” is “I choose them”
  • Category: The store category this line opens.
  • Category name (empty: its name from Zid): A different name to show instead of the category's Zid name, when you want it shorter or clearer.
  • Icon (optional): A small square picture beside the name, best at 64×64px. Left empty, the category's own picture from Zid is used, or a plain placeholder when it has none.
• Button background color: The button's background colour. Leave it empty to keep your header design's own, or use your brand colour to make it stand out.
• Button text color: The colour of the words and icons on the button. Pick one that reads clearly on its background.

Tips

• The small pictures beside the categories come from your category pictures in Zid. Give every category a picture so the list looks complete.
• The button appears only in the header designs whose name includes “Browse by category”. In “One row: logo, “Browse by category”, menu and search” it shows on large computer screens only. It never shows on phones and tablets, where shoppers reach categories through the mobile menu.

Step by step

1. Open the “Header” settings, then the “Mobile menu” group.
2. In “Extra links under the main menu”, add a new link.
3. Write its “Link text”, such as “About us”, and put the page in “Link”.
4. If the link leaves your store (your YouTube channel, say), switch on “Open the link in a new tab”.
5. Press «Publish», then open the menu on a phone to check.

Settings

• Title at the top of the menu (optional): A small heading at the top of the menu, such as a greeting or your store name. Left empty, there is no heading, just the close button.
• Extra links under the main menu: Links shown under your store menu, in the phone and tablet menu only. Handy for pages that aren't in the main menu, such as “About us” or “FAQs”. A link shows only when both its “Link text” and “Link” are filled in.
  • Link text: The words shoppers see in the menu; keep them short and clear.
  • Link: The page the link opens: one in your store, such as /faqs, or a site outside your store.
  • Open the link in a new tab: Opens the link in a new tab, so shoppers don't leave your store. Use it only for links outside the store.
• Show “Need help?” (your store's phone and email): Shows “Need help?” with your store's email and phone number from Zid. Shoppers tap them to write or call. It doesn't show when your store has neither.
• Show the “Login” button: The “Login” button at the foot of the menu. For a shopper already signed in, it becomes “Hello” with their name and opens their account.
• Show country and language: The country and language button at the foot of the menu; it opens Zid's window for choosing both. It also disappears when “Hide the language button” and “Hide the country button” are both on in the “Header” group.
• Menu background color: The menu's background colour. Left empty, it uses the page background colour.
• Text color: The colour of the words in the menu: the title at the top, the main menu items, the extra links, the + buttons, and the sign-in button and the country and language button at the foot. Pick one that reads clearly on the background. Sub-items and the contact details keep their muted colour. “Need help?”, the close button and the search icon keep the headings colour. Left empty, it uses the headings colour.
• Divider color: The colour of the thin lines between menu items and around the search box. Left empty, it uses your store's divider colour.
• Color behind the menu: The colour of the layer covering the page behind the open menu. For now that layer shows in one fixed dark colour in every store, so leave it on black.
• Strength of the layer behind the menu (0 clear - 100 solid): How much that layer darkens the page. At 0 the page stays as it is, and a higher number darkens it more while it stays visible. The value it comes with suits most stores.

Tips

• The menu items themselves come from the main menu you build in your Zid dashboard. An item with sub-items shows a + button that opens them.
• Shoppers close the menu with the close button at the top, or by tapping the page behind it.

Step by step

1. Open the “Header” settings, then the “Mobile bottom bar” group.
2. Make sure “Show the bottom bar on mobile” is on.
3. Switch off the buttons you don't need. Each has its own switch, such as “Show the “Wishlist” button”.
4. To make the “Shop” button open a particular category, put that category's link in ““Shop” button link (empty: the products page)”.
5. Press «Publish», then open your store on a phone to check.

Settings

• Show the bottom bar on mobile: Shows the bar at the bottom of phone and tablet screens. Keep it on in most stores, as it keeps the cart within reach. With every button switched off, the bar disappears by itself.
• Show the “Shop” button: The “Shop” button, which opens the products page or the page you set in the box below it.
• “Shop” button link (empty: the products page): The page the “Shop” button opens, such as your offers category or your main category. Left empty, it opens the all-products page.
• Show the “Search” button: The “Search” button, which opens the search window. It doesn't show while “Hide search” is on in the “Header” group.
• Show the “Account” button: The “Account” button opens the shopper's account. For a shopper who isn't signed in, it opens the sign-in window.
• Show the “Wishlist” button: The “Wishlist” button, which opens the products the shopper saved.
• Show the “Cart” button: The “Cart” button, with the number of items on it; it opens the cart. Keep it on in most stores.

Tips

• On small phones the search and wishlist icons move from the header into this bar while their buttons are on here, so the header stays uncluttered.
• The footer leaves room for the bar at its end, so the copyright line and payment icons are never hidden beneath it.

These repeat across most sections of the page, so they are stated once here instead of under every one of them. Each section below says which of them it has.

• Title: The section’s main heading. Leave it empty for no heading.
• Full screen width: Stretches the section’s content across the whole screen instead of keeping it in the centered page width. Good for banners and large pictures. Leave it off for sections with a lot of text, so the lines do not get too long to read.
• Section background color: The color behind the section. Leave it transparent to take the page background, or pick a color to set the section apart from its neighbors. In “Countdown banner” and “Testimonials” the field’s name says exactly which part it colors.
• Section background image: A picture that fills the whole section behind its content, cropped to fit. Choose a calm picture about 1920 wide. If the text is hard to read on it, turn on “Color layer over the background”.
• Color layer over the background: Lays a see-through color over the section’s background (picture or color) so the text on it reads more clearly.
• Layer color: The layer’s color: black darkens the background for light text, white lightens it for dark text.Shown when “Color layer over the background” is on
• Layer strength (0 clear - 100 solid): How much the layer covers the background. A low number keeps the picture visible; a high one covers more. Start at 40 and raise it if the text is still hard to read.Shown when “Color layer over the background” is on
• Space above the section: The empty space above the section. “This design's own” keeps the space the chosen design comes with. Pick a number to bring the section closer to the one above or push it further away; a smaller number is closer. “None” removes this space. Phones use the same number unless you change “Space above the section on mobile”.
• Space below the section: The empty space below the section. It works exactly like “Space above the section”. Phones use the same number unless you change “Space below the section on mobile”.
• Hide this section: Hides the section from the store without deleting it; everything in it is kept. Handy for a seasonal section, such as an offer or countdown, you will bring back later.
• Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”: Only in “Feature banner”. As the visitor scrolls, the picture stays still while the page moves over it, giving a sense of depth. On phones the picture scrolls normally. While this is on, the picture is not mirrored on Arabic pages, even with “Mirror the image on Arabic pages” on.

Section design

Step by step

1. Open “Slides” and add a new slide.
2. Leave “Slide type” on “Image” and upload your picture in “Image”. If your picture is wide, also upload an upright one in “Mobile image (optional)” so it looks clearer on phones.
3. Write the “Slide title”. If you like, also fill “Text under the title” and “Small line above the title”.
4. Write the “Button text” and choose the “Button link”: a category, a product or a page. The button only shows when both are filled.
5. Use “Text position” and “Text position, top to bottom” to put the text on the empty part of the picture.
6. Check the result in the preview on desktop and on a phone before you publish.

Settings

• Section design: Changes the look of the whole section. Your slides stay as they are when you switch, so try a few designs and keep the one that suits your pictures.
• Slides: Each slide holds its picture or video, its text and its buttons. Slides show in the order listed here. Without slides the section does not appear at all.Up to 12 items
  • Small line above the title: A short line in small type above the title, such as Summer collection or Limited-time offer. Leave it empty if you don't need it. On phones this line is hidden in “Rounded image”. In “Full image, text over it” it is hidden on phones too, unless “Store look” is set to “Luxe”.
  • Slide title: The large title on the slide. Keep it short - two to four words read fastest, especially on a phone.
  • Text under the title: A line or two under the title that explains the offer; leave it empty when the title says enough. In “Full image, text over it” this text is hidden on phones, so keep the key point in the title.
  • Slide type: Sets what the slide shows: a picture, a video you upload, a YouTube video, or just a colour. The video field or the YouTube link field appears to match your choice.
  • Video file: The video file the slide plays. It plays muted and on a loop, so choose a short, light clip that doesn't rely on sound.Shown when “Slide type” is “Uploaded video”
  • YouTube video link: The video's YouTube link. In “Full image, text over it” the video plays inside the slide. In the other designs the slide shows your “Video cover image” with a play mark, and a tap opens the video on YouTube.Shown when “Slide type” is “YouTube video”
  • Image: The slide's picture. It is cropped at the edges to fill its space, so keep what matters near the middle; the best size for each design is written under the field in the panel.
  • Mobile image (optional): A second picture shown on phones only, instead of the main one. Useful when your desktop picture is wide and the product gets lost on a small screen. Left empty, the main picture is used.
  • Video cover image (uploaded and YouTube videos only): The picture shown until the video starts. If you use a YouTube link, always add one: it is the picture the slide shows.
  • Image description for Google and screen readers (alt) - optional: A short description of the picture for Google and for the screen readers blind visitors use, e.g. Black evening dress. It does not appear on the page.
  • Mirror the image on Arabic pages: Flips the picture like a mirror, on Arabic pages only. Turn it on when the Arabic text lands on the product: the flip moves the product to the other side. Leave it off if the picture has writing in it, or the writing will read backwards.
  • Button text (leave empty for no button): The words on the button, e.g. Shop now. The button shows only when this and the button link are both filled.
  • Button link (needed for the button to show): The page the button opens: a category, a product or any page of your store. In “Two slides side by side, text at the bottom” and the “Still grid” designs, a tap on the picture itself opens this link too.
  • Open the button link in a new tab: Opens the button's link in a new tab so your store stays open. Leave it off for your own pages; turn it on for outside links such as Instagram.
  • Second button text (leave empty for no second button): A second button beside the first, e.g. See the collection. It shows only when its text and link are both filled.
  • Second button link (needed for the button to show): The page the second button opens, such as another category or your offers page.
  • Open the second button link in a new tab: Opens the second button's link in a new tab. Turn it on only for links outside your store.
  • Text position: Where the text sits across the slide: “Start” (right in Arabic, left in English), “Center” or “End”. Put it on the empty side of your picture.
  • Text position, top to bottom: Where the text sits from top to bottom. Choose the empty part of the picture so the text is easy to read.
  • Text position on mobile: The text's position across the slide on phones only. Keep “Same as desktop” unless the text covers something important on a phone.
  • Text position on mobile, top to bottom: The text's position from top to bottom on phones only. Keep “Same as desktop” unless it needs moving on the small screen.
  • Background color (shows when there is no image; in “Color panel” it is the panel's color): The slide's colour when it has no picture, or when “Slide type” is “Color only”. In “Color panel for the text, the image beside it” it is the colour of the panel behind the text, and the text turns white or dark by itself to stay readable on it.
  • Color layer over the slide image: Adds a see-through colour layer over the slide's picture. Turn it on when white text is hard to read on a light photo. In “Color panel for the text, the image beside it” and “Split image”, on desktop the layer covers only the part with the text, not the picture beside it.
  • Layer type: “Solid” covers the whole picture evenly. “Gradient” is strong on one side and fades out, so part of the picture stays clear.Shown when “Color layer over the slide image” is on
  • Layer color: The colour of that layer. Black is the usual choice behind white text; your brand colour works too.Shown when “Color layer over the slide image” is on
  • Layer strength (0 clear - 100 solid): How strong the layer is: 0 is invisible, 100 hides the picture. Between 30 and 50 is usually enough.Shown when “Color layer over the slide image” is on
  • Title color: The title's colour on this slide only. Left as it is, the title keeps the colour the design was made with.
  • Color of the text under the title and the small line: The colour of the small line above the title and the text under it, on this slide only.
  • Button text color: The colour of the words on the first button. If you only change the button's background, a readable text colour is picked for you.
  • Button background color: The fill colour of the first button. Pick one that stands out on the picture, or your brand colour.
  • Button border color: The colour of the thin line around the first button. Useful for a see-through button that shows only as an outline.
  • Second button text color: The colour of the words on the second button. If you only change its background, a readable text colour is picked for you.
  • Second button background color: The fill colour of the second button. A colour different from the first makes it clear the first is the main action.
  • Second button border color: The colour of a thin line around the second button.
• Moving message strip above the slides (one message per line; leave empty for none): The messages that move along the strip above the slides. Write one message per line; the strip puts a small star between them. Clear the box to remove the strip.Shown with “Rounded image, text at its bottom, a moving message strip above”
• Slide height on desktop, px (leave at 560 to keep the design's own height): The slide height on desktop. At 560, each design keeps its own measured height. Any other number is used for whichever design you pick. In the “Still grid” designs it is the height of the large card.
• Slide height on mobile, px (leave at 420 to keep the design's own height): The slide height on phones. At 420 the design keeps its own height. Raise it if the text feels crowded on the picture.
• Space between the text and the slide's edge on desktop, px (leave at 24 to keep the design's own): The space between the text and the slide's edge on desktop. At 24, each design keeps its own spacing. Raise it if the text sits too close to the edge.
• Space between the text and the slide's edge on mobile, px (leave at 16 to keep the design's own): The same space on phones. At 16, the design keeps its own spacing.
• Autoplay (not in the “Still grid” designs): Moves to the next slide by itself, and pauses while the visitor's mouse is over the slider.
• Time on each slide (1000 = 1 second): How long each slide stays before moving on: 1000 is one second, and the default 6000 is six. Give visitors time to read.Shown when “Autoplay (not in the “Still grid” designs)” is on
• Start again after the last slide (not in the “Still grid” designs): After the last slide, goes back to the first and carries on. Off: the slider stops at the last slide.
• Slide change animation (not in the “Still grid” designs): How one slide changes to the next. “Smooth” fades or slides, depending on the design. “Instant, no animation” swaps at once.
• Animation length (1000 = 1 second): How long the change takes: 1000 is one second, the default is 800. A smaller number is quicker.Shown when “Slide change animation (not in the “Still grid” designs)” is “Smooth (fade or slide, by design)”
• Play the slide's video by itself (muted): Starts a slide's video by itself, muted, as soon as the slide shows. Off: the visitor starts it with the play button.
• Show arrows (not in the “Still grid” designs): Shows previous and next arrows. Handy on desktop when you have several slides. In “Rounded image” and “Rounded image, text at its bottom” they don't show on phones or on tablets held upright. In “Full image, text over it” they appear only on very wide desktop screens, when the mouse passes over the picture.
• Show bars under the slider (not in the “Still grid” designs): Small bars under the slider that show the visitor which slide they are on. Tapping a bar jumps to its slide. In “Split image” they show only on phones and on tablets held upright.
• Show the slide progress bar (not in the “Still grid” designs): A bar that fills as the slides go by, with the slide number beside it, e.g. 2 / 5.
• Arrow background color: The colour of the circle or square behind the arrows.
• Arrow and bar color: The colour of the arrows and the bars. Change it if they don't show up on your pictures.
• Current slide's bar color: The colour of the bar for the slide showing now, so it stands out from the others.
• Progress bar color (empty part): The colour of the empty part of the progress bar.Shown when “Show the slide progress bar (not in the “Still grid” designs)” is on
• Progress bar color (filled part): The colour of the part of the progress bar that fills up.Shown when “Show the slide progress bar (not in the “Still grid” designs)” is on
• Pattern over the panel color (tablet and up): A pattern laid over the colour panel behind the text. It shows on tablets and larger screens. Use a PNG with a transparent background so the panel colour shows through.Shown with “Color panel for the text, the image beside it”
• Space above the section on mobile: The space above the section on phones only. On “This design's own”, it matches the “Space above the section” you chose for desktop. If you never changed that one, the design's own spacing is used.
• Space below the section on mobile: The space below the section on phones only. On “This design's own”, it matches the “Space below the section” you chose for desktop. If you never changed that one, the design's own spacing is used.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Title", "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• The suggested size for each design is written under the “Image” field in the panel - for example 1920×860px for “Full image, text over it”. Pictures are cropped at the edges to fill their space, so keep the product near the middle.
• In most designs a slide on a phone is taller than it is wide. So an upright or square picture in “Mobile image (optional)” looks clearer than a cropped wide one.
• The “Still grid” designs show only your first three slides and never move. Any slide after the third will not appear, and arrows and autoplay don't work there.
• A button needs both its text and its link to show; with either missing, it stays hidden.
• If a picture has writing in it (a brand name on a box, say), leave “Mirror the image on Arabic pages” off so the writing isn't reversed.
• “Full screen width”: Stretches the slider across the whole screen instead of the page width. In “Full image, text over it” the picture already spans the screen, so this only widens the space for the text. In some designs it changes the look too. In “Rounded image” the neighbouring slides peek in at the sides. In “Color panel for the text, the image beside it” the panel and the picture split the screen half and half.
• “Section background color”: The colour behind the whole section. It shows in the space around the slides, not inside the pictures.
• “Section background image”: A picture behind the whole section. The slides cover most of it, so it only shows in the space around them.
• “Color layer over the background”: Adds a colour layer over the section's background, not over the slides. For a layer over a slide's picture, use “Color layer over the slide image” inside the slide.

Section design

Step by step

1. Open “Categories” and add an item.
2. Under “Category”, pick a category from your store. Its name, picture and link come with it.
3. For a shorter name or a better picture, fill “Category name” and upload “Image (optional)”.
4. Repeat for each category. Their order in the list is their order on the page.
5. Rather not pick by hand? Turn on “Pull the store's categories automatically” and set “Maximum categories”.

Settings

• Section design: Changes the look of the section. The categories you chose stay as they are. Each design shows the parts it has room for.
• Look of each category: How each category looks in the row: “Round image”, “Image with rounded corners”, or “Card with a background and the product count”. The last one puts a small picture, the name and the count inside a coloured card.Shown with “Category row with a title”
• Chip colors: “A different light color for each chip” colours the chips with seven light shades in turn. “One color” gives them all the theme's light background colour.Shown with “Small colored chips: image, name and count”
• Text under the title: A short line under the title that explains the section.Shown with “Tall images with the product count”
• Row title: A title above the row of categories, e.g. Shop by category. Leave it empty for no title.Shown with “Category row with a title”
• Text under the row title: A short line under the row title that explains the section.Shown with “Category row with a title”
• Section title: A centred title above the category pictures. Leave it empty for no title.Shown with “Wide rounded images, one or two rows”
• Text under the section title: A short line under the title that explains the section.Shown with “Wide rounded images, one or two rows”
• Categories: The categories to show, in the order listed here. Leave the list empty and the section brings in your store's main categories by itself.Up to 12 items
  • Category: The category from your store. Its name, picture and link come from it automatically.
  • Category name (empty: its name from Zid): A name shown instead of the category's name in Zid. Use it when you want the name shorter or different on the home page. If this item is an offer tile, this is the name shown with it.
  • Count text, e.g. 12 products (not shown on the “Three large cards” or “Image cards” designs): Text shown with the name, e.g. 12 products. You type it yourself; it isn't counted for you. So update it when the number changes, or leave it empty.
  • Short text over the image (“Image cards” design only): A short line on the card's picture under the name, e.g. New collection on sale.
  • Image (optional): A picture instead of the category's picture in Zid. Leave it empty if that one is fine. The right size for each design is written under the field in the panel.
  • Mirror the image on Arabic pages - “Image cards” design only: Flips the card's picture like a mirror on Arabic pages, so the text lands on its empty side. Leave it off if the picture has writing in it.
  • Offer tile instead of the image (“Category row”: a circle with the offer text; “Small colored chips”: a % icon): Turns this item into an offer tile among your categories, in place of the picture. Pair it with “A link I choose” under “What the tile opens”, to send visitors to your offers or sale page.
  • Offer text, e.g. 20% (“Category row” design only): The large text inside the offer circle, e.g. 20%. If this and “Word under the offer” are both empty, a price-tag icon shows instead.Shown when “Offer tile instead of the image (“Category row”: a circle with the offer text; “Small colored chips”: a % icon)” is on
  • Word under the offer, e.g. OFF (“Category row” design only): A small word under the offer text, e.g. OFF.Shown when “Offer tile instead of the image (“Category row”: a circle with the offer text; “Small colored chips”: a % icon)” is on
  • What the tile opens: “The category page” opens the category you picked; “A link I choose” opens any page you set, such as your offers page.
  • Link (the whole card opens it): The page the tile opens. In “Category row with a title”, “Image cards” and “Small colored chips” you can also make a tile with only a link and no category.Shown when “What the tile opens” is “A link I choose”
  • Button text (empty: “View more”) - “Image cards” design only: The words on the card's button, e.g. Shop the collection. Empty: “View more” shows.
  • Text color over the image (“Image cards” design only): The colour of the text on the card's picture: “Dark” for light pictures, “White” for dark ones.
  • Chip color, empty: from “Chip colors” (“Small colored chips” design only): The colour of this chip only. A dark colour turns its text white by itself. Left empty, it takes its colour from “Chip colors”.
• Pull the store's categories automatically instead of “Categories” above (an empty “Categories” pulls them anyway): Brings in your store's main categories by itself, with their names and pictures. Sub-categories are left out. A main category you add to your store later appears here without you doing anything. While this is on, the ones you picked under “Categories” don't show.
• Maximum categories (when automatic): The most categories shown when the section brings them in automatically. “All” shows every main category in your store.
• “View all” button text (leave empty to hide it): The words on the “View all” button by the title, e.g. All categories. Leave it empty to hide the button.Shown with “Category row with a title”
• “View all” button link (empty: the categories page): The page the “View all” button opens. If you leave it empty, it opens the page listing all your categories.Shown with “Category row with a title”
• First section on the page? Turn on to load its first image right away (not on “Big words”: its images show only on hover): Turn it on only when this is the first section on the page, with no slider above it. Its first pictures then load straight away. Lower down the page, leave it off so the page opens faster.
• Title position: “Center” puts the title in the middle above the categories. “At the side” puts it at the start, with the “View all” button on the other side.Shown with “Category row with a title”
• Category rows: “Two rows” shows the categories in two rows. “One sliding row” puts them in one row the visitor slides through. “Start again after the last slide” works only with the single row.Shown with “Wide rounded images, one or two rows”
• Autoplay (not on the “Big words” or “Three large cards” designs): Slides the categories by itself every 4 seconds, and pauses while the visitor's mouse is over it.
• Start again after the last slide (not on the “Big words” or “Three large cards” designs, or when the categories are in two rows): After the last category, goes back to the first and carries on.
• Show arrows (not on the “Big words” or “Three large cards” designs): Two arrows at the sides of the row. They show on wide desktop screens only; on phones visitors swipe with a finger.
• Space above the section on mobile: The space above the section on phones only. On “This design's own”, it matches the “Space above the section” you chose for desktop. If you never changed that one, the design's own spacing is used.
• Space below the section on mobile: The space below the section on phones only. On “This design's own”, it matches the “Space below the section” you chose for desktop. If you never changed that one, the design's own spacing is used.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• Want an offers tile among your categories? Add an item under “Categories” without picking a category. Fill “Category name” and turn on “Offer tile instead of the image”. Then, under “What the tile opens”, choose “A link I choose” and add your offers page. This works in “Category row with a title” and “Small colored chips”.
• Each design has its own picture shape: square 600×600px for most, upright 540×710px in “Tall images with the product count”, wide 600×450px in “Wide rounded images”, 1100×690px in “Image cards” and 1000×700px in “Three large cards”. Pictures are cropped to fill their space, so keep what matters near the middle.
• Category pictures with the same background and lighting make the row look tidy and professional.
• When “Pull the store's categories automatically” is on, the names and pictures come from your categories in Zid. So set each category's picture on the categories page of your Zid dashboard.
• “Section background color”: The colour behind the whole section. In “Category row with a title”, a dark colour turns the text on it (the title and the names) light by itself. The exception is the names in “Card with a background and the product count”, which sit on their own light cards.

Section design

Step by step

1. Open “Moving messages” and add a new message.
2. Write it in “Message text”. Keep it short, e.g. Free shipping on orders over 200 SAR.
3. In the “Icon and text, moving” design: pick an icon under “Icon”. Or set “Icon type” to “Your own image” and upload your icon in “Icon image”.
4. In the “Round image and text, moving” or “Large outlined words and pill images” design: upload the “Image”.
5. To make the message open a page, such as your returns policy, fill “Link (optional)”.
6. Adjust “Movement speed” and “Movement direction” until the strip is easy to read.

Settings

• Section design: Changes the look of the strip. Your messages stay as they are. Each design shows the parts it has room for: the icon or the picture.
• Text size: How big the words are. “Extra large” is the biggest, with thinner letters. “Large, a little bolder” is slightly smaller, with thicker letters. Pick the second one if your messages are a bit long.Shown with “Large outlined words and pill images”
• Every second message in plain grey (no outline): Every second message turns plain grey, with no outline, for a little variety along the strip.Shown with “Large outlined words and pill images”
• Moving messages: The phrases that move along the strip. The strip repeats them by itself to fill the screen. Without messages the section does not appear.Up to 10 items
  • Message text: The phrase itself. Two to five words read best while moving.
  • Icon type (“Icon and text” design only): “Ready-made icon” picks one from a list; “Your own image” lets you upload an icon in your own style.
  • Icon: The icon before the message - a truck for shipping, a return arrow for returns, a shield for guarantees; pick the one that matches the words.Shown when “Icon type (“Icon and text” design only)” is “Ready-made icon”
  • Icon image (square): Your own icon instead of a ready-made one. It shows very small (16×16px), so keep it simple and square. A PNG with a transparent background works best.Shown when “Icon type (“Icon and text” design only)” is “Your own image”
  • Image (“Round image” and “Large outlined words” designs only): A picture shown after the message. In “Round image and text, moving” it is cropped to a circle. In “Large outlined words and pill images” it becomes a pill shape. The other two designs don't show it.
  • Link (optional): Makes the whole message open this page when tapped, such as your returns policy. Leave it empty if the message is just information.
• Movement speed: How fast the words pass: “Slow” is easiest to read, “Fast” grabs more attention.
• Movement direction: Which way the words travel. “With the reading direction” moves them to the right on Arabic pages and to the left on English ones. “Against the reading direction” moves them the other way.
• Pause when the mouse is over it: Stops the strip while the visitor's mouse is on it, so they can read or click a message. Keep it on when your messages have links.
• Space above the section on mobile: The space above the strip on phones only. On “This design's own”, it matches the “Space above the section” you chose for desktop. If you never changed that one, the design's own spacing is used.
• Space below the section on mobile: The space below the strip on phones only. On “This design's own”, it matches the “Space below the section” you chose for desktop. If you never changed that one, the design's own spacing is used.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Title", "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• The strip repeats your messages by itself until the screen is full, so three or four short messages are enough.
• In “Round image and text, moving” the picture shows as an 80×80px circle, so upload a square 160×160px. In “Large outlined words and pill images” it shows at 160×80px (smaller on phones and tablets), so upload 320×160px.
• If a visitor has turned on reduced motion in their device settings, the strip stands still for them. That is expected, not a fault.
• “Full screen width”: In “Text only, wide band” the band stops at a set width on very wide screens. This stretches it across the whole screen. The other designs already run edge to edge.
• “Section background color”: The colour behind the strip. In “Round image and text, moving” it becomes the colour of the band itself instead of the light one.

Section design

Step by step

1. Write the “Title”, e.g. Best sellers.
2. Under “Slider products”, choose where the products come from: your newest products, the ones on sale, or one category.
3. Set “Products per row on desktop”, “Products per row on tablet” and “Products per row on mobile”.
4. If your design has a banner, upload the banner picture, write its title and button, and choose its link.
5. For a button to all your products, fill the “View all” button text and its link.

Settings

• Section design: Changes the layout: products alone, or products with a banner. The products and the title stay as they are. Each banner design has its own banner fields, which appear when you pick it.
• Text under the title (in “Two product rows with a side banner” it sits above the title): A short line that explains the section, e.g. Our customers' favourites.
• Slider products (the section does not show without any): Where the products come from: your newest products, the ones on sale, or the products of a category you choose. Up to 20 show. If there are none, the section hides.
• Banner image: The picture of the banner beside the products. It is upright, and it shows on desktop only. It is cropped to the height of the products, so keep what matters near the middle.Shown with “Two product rows with a side banner (best with the title at the side and three per row)”
• Banner image description for Google and screen readers (alt) - optional: A short description of the banner picture for Google and screen readers. It doesn't appear on the page. Left empty, the banner title is used.Shown with “Two product rows with a side banner (best with the title at the side and three per row)”
• Small line above the banner title: A small line above the banner title, e.g. Deal of the week.Shown with “Two product rows with a side banner (best with the title at the side and three per row)”
• Banner title (each line here is a line on the banner): The large title on the banner. A tap on it opens the “Banner link”.Shown with “Two product rows with a side banner (best with the title at the side and three per row)”
• Banner button text (leave empty for no button): The words on the banner's button, e.g. Shop now. Leave it empty for no button; the picture and the title open the link anyway.Shown with “Two product rows with a side banner (best with the title at the side and three per row)”
• Banner link (empty: the products page): The page the banner opens, such as the collection's page. If you leave it empty, it opens your page of all products.Shown with “Two product rows with a side banner (best with the title at the side and three per row)”
• Banner text position on the image: one of: “Bottom”, “Top”Shown with “Two product rows with a side banner (best with the title at the side and three per row)”
• Tall banner image: The tall banner's picture. On desktop it takes the height of the products beside it. On phones and on tablets held upright it sits above them. The text goes at the top centre of the picture, so keep that part plain.Shown with “A tall banner beside four products (best with the title centered and four per row)”
• Tall banner image description for Google and screen readers (alt) - optional: A short description of the tall banner's picture for Google and screen readers. It doesn't appear on the page. Left empty, the banner title is used.Shown with “A tall banner beside four products (best with the title centered and four per row)”
• Small line above the tall banner title: A small line above the tall banner's title, e.g. New collection.Shown with “A tall banner beside four products (best with the title centered and four per row)”
• Tall banner title (each line here is a line on the banner): The large title on the tall banner. A tap on it opens the “Tall banner link”.Shown with “A tall banner beside four products (best with the title centered and four per row)”
• Tall banner button text (leave empty for no button): The words on the tall banner's button, e.g. Discover the collection. Leave it empty for no button.Shown with “A tall banner beside four products (best with the title centered and four per row)”
• Tall banner link (empty: the products page): The page the tall banner opens. If you leave it empty, it opens your page of all products.Shown with “A tall banner beside four products (best with the title centered and four per row)”
• Wide banner image: The picture of the wide banner above the two products. The text goes in its top corner on the side where reading starts: right in Arabic, left in English. So keep that part plain.Shown with “A banner with two products under it and four beside it (best with the title at the side and four per row)”
• Wide banner image description for Google and screen readers (alt) - optional: A short description of the wide banner's picture for Google and screen readers. It doesn't appear on the page. Left empty, the banner title is used.Shown with “A banner with two products under it and four beside it (best with the title at the side and four per row)”
• Mirror the wide banner image on Arabic pages, so the text sits on its calm side: off by defaultShown with “A banner with two products under it and four beside it (best with the title at the side and four per row)”
• Wide banner title (each line here is a line on the banner): The large title on the wide banner. A tap on it opens the “Wide banner link”.Shown with “A banner with two products under it and four beside it (best with the title at the side and four per row)”
• Short line under the wide banner title: A short line under the wide banner's title, e.g. Up to 30% off.Shown with “A banner with two products under it and four beside it (best with the title at the side and four per row)”
• Wide banner button text (leave empty for no button): The words on the wide banner's button, e.g. Shop now. Leave it empty for no button.Shown with “A banner with two products under it and four beside it (best with the title at the side and four per row)”
• Wide banner link (empty: the products page): The page the wide banner opens. If you leave it empty, it opens your page of all products.Shown with “A banner with two products under it and four beside it (best with the title at the side and four per row)”
• “View all” button text (leave empty to hide it; not shown while the arrows sit beside the title): The words on a button to a page with all the products, e.g. View all. When the title is “Center”, it sits under the title. When the title is “At the side”, it sits on the other side. When the arrows are beside the title, it doesn't show.
• “View all” button link (needed for the button to show): The page the “View all” button opens, such as the category itself. Without a link the button doesn't show.
• Title position: “Center” puts the title in the middle. “At the side” puts it at the start, with the arrows on the other side if “Show arrows” is on.
• Space under the title: The space between the title and the products. “This design's own” is the original spacing. Raise it if the title sits too close to the products.
• Products per row on desktop (beside the tall or wide banner: half this number): How many products show in a row on desktop. In “A tall banner beside four products” and “A banner with two products under it and four beside it”, half this number shows beside the banner: 4 becomes 2. In “Two product rows with a side banner” the number applies as it is.
• Products per row on tablet: How many products show in a row on a tablet.
• Products per row on mobile: How many products show in a row on a phone: 2 shows more products, 1 makes each picture bigger.
• Product rows: “Two rows” shows the products in two rows beside the banner. “One row” puts them in a single row. “Start again after the last slide” works only with one row.Shown with “Two product rows with a side banner (best with the title at the side and three per row)”
• Autoplay: Slides the products by itself every 3 seconds, and pauses while the visitor's mouse is over it.
• Start again after the last slide (not with two product rows, nor in “A tall banner” or “A banner with two products under it”): After the last product, goes back to the first and carries on.
• Show arrows: Two arrows for sliding through the products. With the title “At the side”, they sit beside the title on any screen larger than a phone. With the title “Center”, they sit at the sides of the products, on wide desktop screens only.
• Show dots under the slider: Small dots under the products that show the visitor where they are in the slider. When every product already fits, the dots hide by themselves. In “Plain slider” with the title “At the side”, they show on phones only.
• Banner button color: The banner button's colour: “White” or “Store's main color”. Pick whichever stands out more on your picture.Shown with “Two product rows with a side banner (best with the title at the side and three per row)”
• Banner title color: The colour of the banner title. Change it if it doesn't show up on your picture.Shown with “Two product rows with a side banner (best with the title at the side and three per row)”
• Banner small line color: The colour of the small line above the banner title.Shown with “Two product rows with a side banner (best with the title at the side and three per row)”
• Tall banner button color: The tall banner button's colour: “White” or “Store's main color”. Pick whichever stands out more on your picture.Shown with “A tall banner beside four products (best with the title centered and four per row)”
• Tall banner title color (over the image): The colour of the tall banner's title over the picture. Without a picture, the text uses the theme's colours.Shown with “A tall banner beside four products (best with the title centered and four per row)”
• Tall banner small line color (over the image): The colour of the tall banner's small line over the picture.Shown with “A tall banner beside four products (best with the title centered and four per row)”
• Darken the tall banner image so its text reads (0 = none): Darkens the tall banner's picture so white text reads on it. 0 means none. 20 to 40 is enough for most light pictures.Shown with “A tall banner beside four products (best with the title centered and four per row)”
• Wide banner button color: The wide banner button's colour: “Store's main color” or “White”. Pick whichever stands out more on your picture.Shown with “A banner with two products under it and four beside it (best with the title at the side and four per row)”
• Wide banner title color: The colour of the wide banner's title. Change it if it doesn't show up on your picture.Shown with “A banner with two products under it and four beside it (best with the title at the side and four per row)”
• Wide banner short line color: The colour of the short line under the wide banner's title.Shown with “A banner with two products under it and four beside it (best with the title at the side and four per row)”
• Space above the section on mobile: The space above the section on phones and tablets held upright. On “This design's own”, it matches the “Space above the section” you chose for desktop. If you never changed that one, the design's own spacing is used.
• Space below the section on mobile: The space below the section on phones and tablets held upright. On “This design's own”, it matches the “Space below the section” you chose for desktop. If you never changed that one, the design's own spacing is used.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• Want specific products by name? Make a category in your store holding just those products, and choose it under “Slider products”.
• Banner sizes: 840×1552px upright in “Two product rows with a side banner”, 900×1216px upright in “A tall banner beside four products”, and 1380×800px landscape in “A banner with two products under it and four beside it”.
• In “A banner with two products under it and four beside it”, the spots under the banner need enough products. With six or more, two show under the banner; with five, one; with four or fewer, none.
• The look of the product cards themselves is set once for the whole store under “Product card” in “Layout Settings”.

Section design

Step by step

1. In the theme editor, open the “Banner grid” section and choose the look that suits you in “Section design”.
2. Under “Banners”, add a banner and upload “Banner image”.
3. Fill in “Banner title”. If you want a button, fill in “Button text (leave empty for no button)”.
4. Set the link of the page the banner opens.
5. In “Text colors”, choose colours that read on your picture.
6. Check the preview, then press “Publish” so your customers see the change.

Settings

• Section design: Decides how the banners are laid out. The banners you added are kept when you switch looks, but each look suits a different number of banners.
• Banner style: The banners' shape in the row. “Square image with a button”: a square picture, a coloured shade under the words and a white button. “Wide rounded image with an underlined link”: no shade, and the button becomes an underlined link.Shown with “Two or more banners in a row”
• Text at the top or the bottom of the image: one of: “Bottom”, “Top”Shown with “Two or more banners in a row” and when “Banner style” is “Square image with a button”
• Tall banner layout: The arrangement of the large banner and the ones beside it. Try all four and keep the one that suits your number of banners and the shape of your pictures.Shown with “A tall banner with smaller ones beside it (up to four)”
• Big figure at the start of the strip (e.g. 35%): The big figure or word that catches the eye at the start of the strip, such as the discount.Shown with “A discount strip with a code that copies on click (uses the first banner only)”
• Discount code (customers tap it to copy): The discount code shown in the strip. When the customer taps it, the code is copied. Important: it must be a code you have already created in your Zid store; this section only shows it and does not create the coupon.Shown with “A discount strip with a code that copies on click (uses the first banner only)”
• Banners: Each item here is one banner with its picture, words and link.Up to 5 items
  • Small line above the banner title (optional): A small word above the title, such as: new, or 20% off.
  • Banner title: The banner's big title. Keep it short: in some looks a very long title is cut after one to three lines.
  • Short description (optional): A line or two under the title. Keep it short: some looks cut it after one to three lines.
  • Banner type: Choose “Banner with an offer countdown” to show a countdown under the banner's words until the offer ends.
  • Offer end date and time (write it like 2026-12-31 23:59): The day and time the offer ends. The countdown runs down to that moment.Shown when “Banner type” is “Banner with an offer countdown”
  • Countdown word for “days” (empty: Days): Changes the word under the days number in the countdown, for example Day instead of Days.Shown when “Banner type” is “Banner with an offer countdown”
  • Countdown word for “hours” (empty: Hours): Changes the word under the hours number in the countdown.Shown when “Banner type” is “Banner with an offer countdown”
  • Countdown word for “minutes” (empty: Mins): Changes the word under the minutes number in the countdown.Shown when “Banner type” is “Banner with an offer countdown”
  • Countdown word for “seconds” (empty: Secs): Changes the word under the seconds number in the countdown.Shown when “Banner type” is “Banner with an offer countdown”
  • Message after the offer ends (empty: the countdown hides): The sentence shown in the countdown's place once time is up, such as: this offer has ended.Shown when “Banner type” is “Banner with an offer countdown”
  • Banner image: The banner's picture. Its edges may be cropped to fit its space, so keep what matters in the middle. The suggested size for each look is written under the field in the editor. Without a picture, a plain block in your store's colour shows in its place.
  • Mobile image (optional): A separate picture for phones, for when the computer picture crops badly on a small screen. In “A discount strip with a code that copies on click (uses the first banner only)” it is the small picture shown in the strip on tablets and phones.
  • Image description for Google and screen readers (alt) - optional: Say in a few words what the picture shows, such as: black smart watch. Google and screen readers for blind visitors read it; it does not show on the page.
  • Button text (leave empty for no button): The words on the banner's button, such as: shop now.
  • Link (the whole banner opens it; in “A discount strip” the button does): The page that opens when the visitor taps anywhere on the banner. In “A discount strip with a code that copies on click (uses the first banner only)” only the button opens it, and the button needs its words to show.
  • Text position: Where the words sit on the banner. “Start” means the right on Arabic pages and the left on English ones; “End” is the opposite.
  • Text colors: The colours of the words on the banner. “Light (white text)” for dark pictures, “Dark (black text)” for light ones. “Light (white title, light grey text)” when you want the description softer than the title. Or pick a colour yourself in “Text color”. In “A discount strip with a code that copies on click (uses the first banner only)” this colours the whole strip: the two light choices fill it with your store's accent colour and white words, and “Dark (black text)” turns its border, big figure, title and code the dark text colour.
  • Text color: The colour of the banner's words. In “A discount strip with a code that copies on click (uses the first banner only)” it colours the whole strip: its border, the big figure, the title and the code. Left white, the strip takes your store's accent colour.Shown when “Text colors” is “A color you pick (in “Text color” below)”
• First section on the page? Turn on to load its first image right away: Turn it on only when this section is the very first thing at the top of the page, so its first picture shows sooner. Anywhere else, leave it off so the whole page opens faster.
• Zoom the image on hover: The picture grows slightly when the mouse rests on the banner. Turn it off for still banners. The large banner in the looks with a tall banner never zooms.
• Color of the panel holding the title and button (its text is dark; with a dark color set each banner’s “Text colors” to “Light”): The colour of the panel beside the picture that holds the words and button.Shown with “An image beside a colored panel with the title and button (two per view, slider)”
• Shade color under the text: The colour of the soft shade rising from the bottom of the picture behind the words, so they read. Pick a dark colour, or one close to your store's colours.Shown with “Two or more banners in a row” and when “Banner style” is “Square image with a button”
• Faint pattern behind the strip (optional): A faint pattern picture stretched behind the whole strip. Leave it empty for a plain strip.Shown with “A discount strip with a code that copies on click (uses the first banner only)”
• Space above the section on mobile: The space above the section on phones only, when you want it different from computers. Handy for bringing sections closer together on a small screen.
• Space below the section on mobile: The space below the section on phones only, when you want it different from computers.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Title", "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• The suggested picture size differs by look and is written under the “Banner image” field in the editor. For example, square in “Two or more banners in a row”, and about 450×520 px in “Portrait banners with the text at the top (three per view, slider)”.
• Write the offer's end with the digits 0-9 (not ١٢٣), exactly like this: 2026-12-31 23:59 - year-month-day, then the time on the 24-hour clock (11 pm is 23:00). The countdown runs on the visitor's own device clock, so the offer ends at the time you wrote in the visitor's own time zone.
• For “A discount strip with a code that copies on click (uses the first banner only)”, make the banner you want in the strip the first one in the list.
• In “A tall banner with smaller ones beside it (up to four)”, the “The tall one two-thirds wide, images to the screen edge (with 4 or 5 banners: three columns)” arrangement already reaches the screen's edges. You do not need to turn on “Full screen width”.
• If the words do not read on the picture, change “Text colors”. In “Two or more banners in a row” with “Square image with a button” you can also pick a darker “Shade color under the text”. Both are better than writing the words into the picture itself.

Section design

Step by step

1. In the theme editor, open the “Countdown banner” section and choose the look that suits you in “Section design”.
2. In “Offer end date and time (write it like 2026-12-31 23:59)”, write when the offer ends, exactly in that format.
3. Fill in “Title” and the description.
4. Upload the banner picture, or the two side pictures if you chose “Two images, countdown between them”.
5. In “When the offer time is up”, choose what shows once the offer is over.
6. Check the preview, then press “Publish” so your customers see the change.

Settings

• Section design: Changes the whole look of the banner. The date and words you wrote are kept when you switch looks.
• Description (in “Two images” this is the big line): The line under the title saying exactly what the offer is. In “Two images, countdown between them” it is the big line.
• Banner image (needed for the section to show): The picture filling the whole banner, with the words and countdown over it. Choose one with a calm area for the words.Shown with “Full banner, countdown over the image”
• Image description for Google and screen readers (alt) - optional: Say in a few words what the picture shows, such as: black smart watch. Google and screen readers for blind visitors read it; it does not show on the page.Shown with “Full banner, countdown over the image”
• Mirror the image on Arabic pages: On Arabic pages the words sit on the right. If the empty space in your picture is on the left, turn this on so the picture is mirrored on Arabic pages and the empty space ends up behind the words. Leave it off if the picture has writing in it.Shown with “Full banner, countdown over the image”
• Side images - the first before the text, the second after it: The side pictures. With just one, it shows before the words.Shown with “Two images, countdown between them”Up to 2 items
  • Image: The picture itself. On computers it is cropped to the height of the words in the middle, so keep what matters in its centre.
  • Image description for Google and screen readers (alt) - optional: Say in a few words what the picture shows, such as: black smart watch. Google and screen readers for blind visitors read it; it does not show on the page.
• Offer end date and time (write it like 2026-12-31 23:59): The day and time the offer ends, which the countdown runs down to. Left empty, there is no countdown.
• Countdown word for “days” (empty: Days): Changes the word under the days number in the countdown, for example Day instead of Days.
• Countdown word for “hours” (empty: Hours): Changes the word under the hours number in the countdown.
• Countdown word for “minutes” (empty: Mins): Changes the word under the minutes number in the countdown.
• Countdown word for “seconds” (empty: Secs): Changes the word under the seconds number in the countdown.
• When the offer time is up: Decides what happens when the offer ends. “The countdown hides” removes the countdown. “A message in its place” tells visitors the offer is over or to watch for the next one; you write it in “Message after the offer ends”.
• Message after the offer ends: The sentence shown in the countdown's place after the offer ends, such as: this offer is over - watch for the next one.Shown when “When the offer time is up” is “A message in its place”
• What shows beside the countdown: Decides what shows beside the countdown in the strip. “A discount code customers copy” suits a coupon; “Button” sends the visitor to the offer's page.Shown with “Simple strip, countdown beside it”
• Discount code (customers tap it to copy): The discount code shown in the strip. When the customer taps it, the code is copied. Important: it must be a code you have already created in your Zid store; this section only shows it and does not create the coupon.Shown with “Simple strip, countdown beside it” and when “What shows beside the countdown” is “A discount code customers copy”
• Button text (leave empty for no button; in “Simple strip” pick “Button” in “What shows beside the countdown”): The words on the button, such as: shop now. The button only shows when it also has a link. In “Simple strip, countdown beside it” you also pick “Button” in “What shows beside the countdown”.
• Button link (needed for the button to show): The page the button opens, such as your offers page or one category.
• First section on the page? Turn on to load its first image right away: Turn it on only when this section is the very first thing at the top of the page, so its first picture shows sooner. Anywhere else, leave it off so the whole page opens faster.Shown with “Full banner, countdown over the image”
• First section on the page? Turn on to load the side images right away: Turn it on only when this section is the very first thing at the top of the page, so the side pictures show sooner. Anywhere else, leave it off so the whole page opens faster.Shown with “Two images, countdown between them”
• Text and countdown color (empty: white): The colour of the title, description and countdown numbers. Change it if white does not read on your picture or background.
• Space above the section on mobile: The space above the section on phones only, when you want it different from computers. Handy for bringing sections closer together on a small screen.
• Space below the section on mobile: The space below the section on phones only, when you want it different from computers.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• Write the offer's end exactly like this: 2026-12-31 23:59 - year-month-day, then the time on the 24-hour clock (11 pm is 23:00). Arabic numerals (١٢٣) work too.
• The countdown runs on the visitor's own device clock, so the offer ends at the time you wrote in the visitor's own time zone. A mistyped date shows no countdown, and once the date has passed the banner does what you chose in “When the offer time is up”.
• Picture for “Full banner, countdown over the image”: about 1920×600 px. The words sit on the right on Arabic pages (the left on English ones), so keep that side of the picture calm.
• Side pictures in “Two images, countdown between them”: about 1180×1000 px each.
• A new line you start in the title shows on computers and tablets. On phones the words just run on.
• “Title”: The banner's big title. In “Two images, countdown between them” it is the small line at the top.
• “Section background color”: The background colour. Left empty, the strip and the panel between the two pictures take your store's “Headings color”.
• “Section background image”: A picture filling the section's background. In “Two images, countdown between them” it shows behind the panel holding the words, in place of its colour.
• “Color layer over the background”: Lays a layer of colour over the background to calm it, so the words read more clearly. In “Two images, countdown between them” it covers the side pictures too.

Section design

Step by step

1. In the theme editor, open the “Product tabs” section.
2. In “Section design”, choose the look that suits you.
3. Under “Tabs”, add a new tab and fill in “Tab name”.
4. In “Tab products (a tab with none is not shown)”, choose the products this tab shows.
5. Repeat for each tab. The first tab in the list is the one open when the page loads.
6. Check the preview, then press “Publish” so your customers see the change.

Settings

• Section design: Changes the whole look of the section. The tabs and products you chose are kept when you switch looks.
• Text under the title (not shown in the “Title with the tab names under it” design): A short line under the heading telling the visitor what they will find here. It is not shown in “Title with the tab names under it, products in a slider”.
• Tabs: Each item here is one tab with a name and products. A tab missing its name or its products is not shown in the store.Up to 10 items
  • Tab name: The name written on the tab. Keep it to a word or two so the tabs fit side by side.
  • Tab products (a tab with none is not shown): The products shown when the visitor opens this tab.
  • Small image beside the tab name (in the “Rounded panel, a column of image tabs” design only): A small square picture beside the tab's name, such as an icon for the group or one of its products. Shown on computers only.
  • Banner image (in the “A banner per tab” design only): The promo banner's picture, above the tab's first two products. The words are written on it in white, so pick a darkish picture for them to show.
  • Banner image description for Google and screen readers (alt) - optional (in the “A banner per tab” design only): Say in a few words what the picture shows, such as: black smart watch. Google and screen readers for blind visitors read it; it does not show on the page.
  • Small line above the banner title (in the “A banner per tab” design only): A small word or line above the banner's title, such as: for a limited time.
  • Banner title (in the “A banner per tab” design only): The banner's big title. If you start a new line while typing, that break shows on large screens only; on smaller screens the words just run on.
  • Banner description (in the “A banner per tab” design only): A line or two under the banner's title explaining the offer.
  • Banner button text (in the “A banner per tab” design only): The words on the banner's white button, such as: shop now. Leave it empty for no button.
  • Banner link (in the “A banner per tab” design only): The page that opens when the visitor taps anywhere on the banner. Leave it empty and the banner opens nothing.
• “View all” button text (leave empty to hide it): The words on the “View all” button, which takes the visitor to more products. In “Title with the tab names under it, products in a slider” it is a link at the end of the heading row, and under the tabs on phones. In the other two looks it is a button centred under the products.
• “View all” button link (needed for the button to show): The page the “View all” button opens, such as all products or one category.
• Space above the section on mobile: The space above the section on phones only, when you want it different from computers. Handy for bringing sections closer together on a small screen.
• Space below the section on mobile: The space below the section on phones only, when you want it different from computers.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• If a tab does not show, check that it has a name and that you chose products for it. An incomplete tab is not shown in the store.
• Keep tab names short. With many or long names, visitors on phones have to swipe the tab row sideways to see them all.
• Banner picture in “A banner per tab beside a product grid (up to 8 products)”: about 1104×752 px (landscape). The words start from its top corner (the right on Arabic pages, the left on English ones), so keep that corner dark and calm.
• Tab pictures in “Rounded panel, a column of image tabs beside the products”: square, 124×124 px, ideally a PNG with no background (transparent).
• The “View all” button shows only when both its words and its link are filled in.
• “Section background color”: A colour behind the whole section. In “Rounded panel, a column of image tabs beside the products” it colours the rounded panel itself; left empty, the panel takes “Cards and panels background color” from “Main colors”, usually a light grey or beige.

Section design

Step by step

1. In the theme editor, open the “Collection tabs” section and choose “A list of names that swaps a big image” in “Section design”.
2. Under “Collections”, add a new collection.
3. In “Store category (optional): fills the name, image and link you leave empty”, pick one of your store's categories; its name, picture and link fill in by themselves.
4. For a different name or picture, fill in “Collection name (empty: the category's name)” and upload “Big image (empty: the category's image)”.
5. Add “Short description (optional)” if you like, and repeat for up to six collections.
6. Check the preview, then press “Publish” so your customers see the change.

Settings

• Section design: Decides whether you show your store's categories or products you choose. Each look has its own list: “Collections” for the first and “Products (one tab each)” for the second. What you fill in for one does not show in the other.
• Description: A line or two under the heading introducing the section.
• Collections: Each item here is one collection with a name and a picture. The first in the list is the one shown open.Shown with “A list of names that swaps a big image”Up to 6 items
  • Store category (optional): fills the name, image and link you leave empty: Pick one of your store's categories. Any field you leave empty - the name, the picture or the link - fills itself from that category.
  • Collection name (empty: the category's name): The name shown in the list. A collection with no name at all (none typed and no category picked) is not shown.
  • Short description (optional): A short description shown under the name when the visitor opens the collection. Tapping the same name again closes it.
  • Big image (empty: the category's image): The big picture shown when the visitor opens the collection. If you leave it empty and the category has no picture either, a plain tile with an icon shows instead.
  • Big image link (empty: the category page): The page that opens when the visitor taps the big picture. With neither a link nor a category, the picture opens nothing.
  • Product shown over the big image (optional): A product shown in a small card over this collection's big picture: its picture, name, price and cart button. If it has options such as size, the button leads to the product page; if it is sold out, the button is hidden. Leave it empty for no card.
• Products (one tab each): Each item here is one product, shown as a name in the numbered list. The first is the one shown open.Shown with “Numbered products beside the product image with an add-to-cart bar”Up to 6 items
  • Product: The product whose name, price and cart button appear on its picture. If it has options such as size or colour, the button leads to the product page so the customer can choose.
  • Tab name (empty: the product's name): The name shown in the list, on a single line. If the product's name is long, write a shorter one here.
  • Big image (empty: the product's image): The big square picture for this product, when you want something other than the product's main picture.
• “View all” button text (leave empty to hide it): The words shown as an underlined link below the product list.Shown with “Numbered products beside the product image with an add-to-cart bar”
• “View all” button link (needed for the button to show): The page that link opens, such as these products' category or all products.Shown with “Numbered products beside the product image with an add-to-cart bar”
• First section on the page? Turn on to load its first image right away: Turn it on only when this section is the very first thing at the top of the page, so its first picture shows sooner. Anywhere else, leave it off so the whole page opens faster.
• Number the tabs (1. 2. 3.): Puts a number before each product's name in the list - Arabic numerals (١. ٢. ٣.) on Arabic pages. Turn it off for names without numbers.Shown with “Numbered products beside the product image with an add-to-cart bar”
• Space above the section on mobile: The space above the section on phones only, when you want it different from computers. Handy for bringing sections closer together on a small screen.
• Space below the section on mobile: The space below the section on phones only, when you want it different from computers.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• Collection picture: about 1520×1400 px. Its edges may be cropped to fit its space, so keep what matters in the middle.
• Product picture in “Numbered products beside the product image with an add-to-cart bar”: square, about 1440×1440 px. The white bar covers its lower part, so keep nothing important there.
• If the category you picked has no picture, upload one for the collection yourself so the icon tile does not show in its place.
• On phones, “Numbered products beside the product image with an add-to-cart bar” shows the picture first and the product list under it.
• “Section background color”: A colour behind the section. In “A list of names that swaps a big image” it shows around the light card, not inside it, so only at the edges. It shows more if you add space above and below the section.

Section design

Settings

• Section design: Changes the look and layout of the section. Everything you have filled in - text, products, pictures - is kept when you switch, so feel free to try each design in the preview.
• Small line above the title: A small word or line above the title, such as the collection or the season.
• Description: A line or two under the title that introduces the scenes.
• Scenes (each an image and a product; both are needed for it to show): The scenes, up to 8. Each is a photo of a product in use, together with that product. Add a scene for each product you want to show.Up to 8 items
  • Image description for Google and screen readers (alt) - optional: A short description of the photo, read by Google and by the screen readers that visually impaired shoppers use - e.g. Grey sofa in a living room. It does not show on the page.
  • Image: The scene photo: the product in use or in place. It is cropped to fill its space, so keep the product near the middle.
  • Small image (optional, “Small thumbnails that switch the large image” design only): Upload a picture here when you want the small picture visitors press to differ from the scene photo - a close-up of the product, for example. Used only in “Small thumbnails that switch the large image, with the product over it”. Left empty, the scene photo itself is used.
  • Product: The product in the photo. In “Small thumbnails that switch the large image, with the product over it” and “A grey panel with the text and the products one at a time, beside a large image that changes with them”, it shows in a small card with its name, price and a cart button. In “A colored panel with the text and one product, beside the first two images”, pressing the photo opens the product's page. If the product has options (such as size or colour), the cart button leads to its page so the shopper can choose.
• Product on the panel (empty: the first scene's product): The product shown inside the coloured panel. Left empty, it is the first scene's product; choose one here to show a different product.Shown with “A colored panel with the text and one product, beside the first two images”
• Button text (leave empty for no button): The words on the button under your text - e.g. Shop all. Leave it empty for no button.
• Button link (needed for the button to show): The page the button opens, such as a category. It is set to the all-products page to begin with; if you clear it, the button does not show.
• Color of the text panel: The colour of the panel that holds the text and the product.Shown with “A colored panel with the text and one product, beside the first two images”
• Text color on the panel: The colour of the words in the panel. Pick one that reads clearly on the panel colour.Shown with “A colored panel with the text and one product, beside the first two images”
• Space above the section on mobile: The space above the section on phones only, if you want it different from larger screens. Left on “This design's own”, phones follow what you chose in “Space above the section”.
• Space below the section on mobile: The space below the section on phones only, if you want it different from larger screens. Left on “This design's own”, phones follow what you chose in “Space below the section”.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• Suggested scene photo size: 1410×1092 px in “Small thumbnails that switch the large image, with the product over it”, 1400×1400 px (square) in the other two. “Small image (optional, “Small thumbnails that switch the large image” design only)” is square, 240×240 px.
• A scene needs both a photo and a product to show. If a scene is missing, check that you uploaded its photo and chose its product.
• In “Small thumbnails that switch the large image, with the product over it” the section sits right against the sections before and after it, with no gap. For a gap, set “Space above the section” and “Space below the section”.
• If the product has options (such as size or colour), the card button leads to its page instead of adding it to the cart.
• “Title”: The section title. In “Small thumbnails that switch the large image, with the product over it”, if you type the title on two lines, it keeps those two lines on computers.

Section design

Step by step

1. Open the “Brand logos strip” section in the theme editor, or add it to the page.
2. Add a new item to the list of logos.
3. Upload the logo and type the brand's name.
4. To send shoppers to that brand's products, paste the link of its category page into the link field.
5. Repeat for each brand, check the preview, then publish.

Settings

• Section design: Changes the look of the whole strip. Your logos and settings stay as they are when you switch.
• Text under the title: A line or two under the heading to introduce the strip - that every brand is genuine, say. Optional.
• Logos (the strip repeats them by itself to fill the width): The list of logos, up to 20; add each logo as a new item. If you have only a few, the strip repeats them by itself to fill the width with no gaps.Up to 20 items
  • Brand name (the logo's description for Google - needed if you add a link): The brand's name. It is not printed in the strip, but it becomes the logo's description for Google and for the screen readers visually impaired visitors use. Always fill it in, especially when the logo has a link.
  • Logo: The logo itself. It shows whole, never cropped, at the logo height you set below (or smaller if the file is shorter), and its width follows its shape. An item with no picture is left out of the strip.
  • Link (optional, e.g. the brand's category page): Where the logo leads when tapped. The brand's category page in your store works best. Leave it empty for a logo that is only on show. A linked logo fades slightly under the mouse.
  • Open the link in a new tab: Opens the link in a new tab, so your store stays open in the first one. Use it only for links outside your store.
• Logo height (in “Logos moving in a strip” the strip's height; in “Each logo in an outlined box” the most a logo gets inside its box): Raise it if the logos look small and hard to read; lower it for a quieter strip. In “Each logo in an outlined box, the boxes moving”, each box has a fixed size, so a logo never grows past its box however high you set this.
• Movement speed: How fast the logos pass. “Slow” is easier on the eye with many logos; “Fast” gives more movement.
• Movement direction: Which way the logos travel. “With the reading direction” is the natural choice. “Against the reading direction” helps when another moving strip on the page should run the other way.
• Pause when the mouse is over it: Stops the strip while the mouse is over it, so the visitor can read a logo or click it. Keep it on, especially when your logos have links.
• Fade at both ends (a logo fades in and out instead of being cut off): Logos fade in and out at both ends of the strip instead of being cut off sharply. Turn it off if you want logos fully visible right up to the edge.
• Space above the section on mobile: The space above the section on phones. “This design's own” follows your choice in “Space above the section”. Pick a smaller number if the gap looks too big on a phone.
• Space below the section on mobile: The space below the section on phones. “This design's own” follows your choice in “Space below the section”. Pick a smaller number if the gap looks too big on a phone.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• Upload logos as PNG or SVG with a transparent background, at least twice the logo height you set (88 pixels if you keep it at 44), so they stay sharp on phones.
• Trim the extra empty space around each logo before uploading; space inside the file shrinks the logo itself and makes the logos look uneven.
• This section comes with no space above or below. For some room around it, choose “Space above the section” and “Space below the section”.
• If a visitor's device is set to reduce motion, the strip shows still.
• “Full screen width”: The strip reaches both edges of the screen with no side margin. The heading stays where it is.

Step by step

1. Under “Images (an image's number is its place here: first 1, second 2 …)”, add an item and upload its photo; repeat for each photo.
2. Under “Product pins on the images (each pin picks the number of its image)”, add a pin and choose its “Product (the pin shows once you pick one)”.
3. In “Number of the image the pin sits on (1 = the first image in “Images”)”, choose the photo’s place in the list: 1 for the first photo, 2 for the second, and so on.
4. Move “Pin position across (% from the left)” and “Pin position down (% from the top)” until the pin sits on the product in the preview.

Settings

• How the images are shown: “Grid: images side by side” shows every photo at once. “Slider: images slide” moves through them, and choosing it brings up the slider and navigation settings.
• Text under the title: A line or two under the title that introduces the look.
• Images (an image's number is its place here: first 1, second 2 …): The look photos, up to six. A photo’s place here is its number: the first is 1, the second 2, and so on. The pins use that number to know which photo they sit on, so after reordering or deleting a photo, check the pins’ numbers.Up to 6 items
  • Image description for Google and screen readers (alt) - optional: A short description of the photo, read by Google and by the screen readers that visually impaired shoppers use. It also names the photo in the editor’s list. It does not show on the page.
  • Image: The photo itself. It keeps its proportions, but may be cropped a little in the slider or with a fixed “Image height”, so keep the products away from the edges.
  • Mobile image (optional): A second photo for phones, such as a portrait crop of the same shot. The pins sit at the same places on it, so the products must be in the same spots in both photos.
• Product pins on the images (each pin picks the number of its image): The pins on the photos, up to 12 for the whole section. Each has a product, the number of its photo and a position.Up to 12 items
  • Pin name (to find it in the list): A name that helps you find the pin in the editor's list of pins - e.g. Handbag. It is for you; visitors see the product's name.
  • Product (the pin shows once you pick one): The product the pin points to; the pin shows only once you pick one. Pressing the pin shows a card with the product’s picture, name, price and a link to its page.
  • Number of the image the pin sits on (1 = the first image in “Images”): The number of the photo the pin sits on, by the photos’ order in “Images (an image's number is its place here: first 1, second 2 …)”. If no photo has that number (say 5, when you have only 3 photos), the pin goes on the first photo.
  • Pin position across (% from the left): Where the pin sits from the picture's left edge to its right: 0 is the far left, 100 the far right. It works the same in Arabic and English, because the picture is never flipped for the language. Move it while watching the preview until the pin sits on the product.
  • Pin position down (% from the top): Where the pin sits from the top of the picture down: 0 is the top edge, 100 the bottom.
  • Product card opens to the: Pressing the pin opens the product card. On a computer the card opens beside the pin, and this setting picks the side. “Automatic” opens it towards the wider part of the picture, and if the side you chose has no room, it opens on the other side. On tablets and phones the card places itself above or below the pin, and on small phones it spans the full width.
• Title position: Where the title and the line under it sit: “Center”, or “Start” (the right in Arabic, the left in English).
• How wide the images run (with “Full screen width” they reach the screen edges): How wide the photos run. “Page width” matches the other sections. “Wider than the page” is a little wider. “To the screen edges, small margin (20px)” and “To the screen edges, wider margin (up to 40px)” take the photos to the screen edges with that margin. “Touching the screen edges” leaves no margin at all. With “Full screen width” on, the photos reach the screen edges whichever you choose.
• Images per row on desktop: How many photos sit side by side on computers. In the slider, it is how many show at a time.
• Images per row on tablet: How many photos sit side by side on tablets and small laptops.
• Images per row on large or sideways phones (a phone held upright always shows one): Choose 2 for two photos side by side on large phones, or phones turned sideways. A phone held upright always shows one photo per row.
• Space between images on desktop: The space between photos on computers. Set 0 for photos that touch.
• Space between images on tablet: The space between photos on tablets.
• Space between images on mobile: The space between photos on phones.
• Image height: “The image's own proportions” shows each photo at its natural height. “Fixed on tablet and mobile: 600px and 400px (own proportions on desktop)” gives all the photos one height on tablets and phones and crops the rest - useful when your photos differ in size.
• Minimum image height (0: no minimum, except 400px on phones): The least height a photo can have. A shorter photo is enlarged to reach it and cropped at the sides. Useful when very wide photos come out too short.
• Image corner radius: Rounds the photo corners; 0 keeps them sharp.
• Round the top corners only: Rounds the two top corners only; the bottom ones stay square.
• Autoplay: The slider moves on by itself, without the visitor pressing anything.Shown when “How the images are shown” is “Slider: images slide”
• Time on each slide (1000 = 1 second): How long each photo stays before the slider moves on: 5000 is 5 seconds.Shown when “How the images are shown” is “Slider: images slide” and when “Autoplay” is on
• Start again after the last slide: After the last slide the slider goes back to the first instead of stopping.Shown when “How the images are shown” is “Slider: images slide”
• Show arrows: Round arrows at the sides of the photos to move through them. They are hidden on phones, where visitors swipe.Shown when “How the images are shown” is “Slider: images slide”
• Moving between images: How visitors move between photos: dots under the photos, bars under the photos, a card on the photo’s corner with arrows and a count, or nothing. The card hides itself when every photo is already on screen.Shown when “How the images are shown” is “Slider: images slide”
• Text above the count (optional): A small line above the count on the card - e.g. Shop the look.Shown when “How the images are shown” is “Slider: images slide” and when “Moving between images” is “A card on the image's corner with arrows and a count (1 / 3)”
• Space above the section on mobile: The space above the section on phones only, if you want it different from larger screens. Left on “This design's own”, phones follow what you chose in “Space above the section”.
• Space below the section on mobile: The space below the section on phones only, if you want it different from larger screens. Left on “This design's own”, phones follow what you chose in “Space below the section”.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• Suggested photo size: 1440×960 px or larger (landscape). When photos sit side by side, give them the same proportions so the row lines up.
• Pins stay on the same product even when a photo is cropped, because their place is measured on the photo itself.
• On small phones the product card spans the full width, over a dark layer. It shows at the bottom or the top depending on where the pin is, so it never covers the pin; in the slider it shows inside the photo itself. Visitors close it with a tap outside the card.
• After reordering or deleting photos, check “Number of the image the pin sits on (1 = the first image in “Images”)” on every pin.
• On phones a photo is never less than 400 px tall, unless you set a number in “Minimum image height (0: no minimum, except 400px on phones)”.

Section design

Step by step

1. Upload the look picture in “Image with the pins (needed for the section to show)”.
2. Under “Product pins on the image”, add a pin for each product in the picture and choose its “Product (the pin shows once you pick one)”.
3. Move “Pin position across (% from the left)” and “Pin position down (% from the top)” until the pin sits on the product in the preview.
4. For extra products beside the picture without a pin, choose them in “Products beside the image (the pinned products are added by themselves)”.

Settings

• Section design: Changes the look and layout of the section. Everything you have filled in - text, products, pictures - is kept when you switch, so feel free to try each design in the preview.
• Text under the title: A line under the title that describes the look.
• Image with the pins (needed for the section to show): The look picture the pins sit on. Use one where every product of the look is clearly visible.
• Second image, without pins (optional): An extra picture without pins, shown beside the main one - a close-up of the same look, for example. It shows on large screens only. Suggested size, the same as the main picture: 910×1212 px (portrait).Shown with “Two images and a product list”
• Product pins on the image: The pins on the picture, up to six. Each is tied to a product, and you set its place on the picture with numbers.Up to 6 items
  • Pin name (to find it in the list): A name that helps you find the pin in the editor's list of pins - e.g. Handbag. It is for you; visitors see the product's name.
  • Product (the pin shows once you pick one): The product the pin points to; the pin shows only once you pick one. That product is added by itself to the products beside the picture.
  • Pin position across (% from the left): Where the pin sits from the picture's left edge to its right: 0 is the far left, 100 the far right. It works the same in Arabic and English, because the picture is never flipped for the language. Move it while watching the preview until the pin sits on the product.
  • Pin position down (% from the top): Where the pin sits from the top of the picture down: 0 is the top edge, 100 the bottom.
  • Product card opens to the: Pressing the pin opens the product card. On a computer the card opens beside the pin, and this setting picks the side. “Automatic” opens it towards the wider part of the picture, and if the side you chose has no room, it opens on the other side. On tablets and phones the card places itself above or below the pin, and in some designs it rises from the bottom of the screen on small phones. In some designs and screen sizes no card opens at all: the pin takes the visitor to its product in the list beside the picture.
• Products beside the image (the pinned products are added by themselves): Extra products shown beside the picture. The pinned products are added by themselves, so choose only products without a pin here.
• “Add all to cart” button text: The words on the button that adds all the look’s products to the cart, in “Product grid, image and total price”. Left empty, it reads “Add all to cart”.Shown with “Product grid, image and total price”
• “Add all to cart” button text (the count and the total show beside it): The words on the button under the list that adds every product to the cart, in “Pinned image beside a numbered list and an Add all button”. The count and the total show beside your words. Left empty, it reads “Add all to cart”.Shown with “Pinned image beside a numbered list and an Add all button”
• Button text under each product (empty: “Order now”): The words on the button under each product in “One-product slider beside an image with numbered pins”, which opens the product page. Left empty, it reads “Order now”; for a sold-out product it reads “Notify me when available” instead.Shown with “One-product slider beside an image with numbered pins”
• Autoplay: The slider moves on by itself, without the visitor pressing anything.Shown with “Product grid, image and total price”
• Time on each slide (1000 = 1 second): How long each slide stays before the slider moves on: 3000 is 3 seconds.Shown with “Product grid, image and total price” and when “Autoplay” is on
• Start again after the last slide: After the last slide the slider goes back to the first instead of stopping.Shown with “Product grid, image and total price”
• Show arrows: Arrows at the sides of the slider to move between products. They appear when there is more than one product.Shown with “Product grid, image and total price”
• Show dots under the slider: Small dots under the slider that show visitors where they are and let them jump between slides. These are not the product pins on the picture.Shown with “Product grid, image and total price”
• Product panel color: The colour of the panel holding the title and the products.Shown with “Image beside a colored product panel”
• Text color on the panel: The colour of the title and text in the panel. Pick one that reads clearly on the panel colour.Shown with “Image beside a colored product panel”
• Space above the section on mobile: The space above the section on phones only, if you want it different from larger screens. Left on “This design's own”, phones follow what you chose in “Space above the section”.
• Space below the section on mobile: The space below the section on phones only, if you want it different from larger screens. Left on “This design's own”, phones follow what you chose in “Space below the section”.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• Suggested picture size by design: “Product grid, image and total price” square, 700×700 px; “One-product slider beside an image with numbered pins” 960×800 px; “Two images and a product list” portrait, 910×1212 px; the other two 885×720 px.
• Pins stay on the same product even when the picture is cropped on a smaller screen, because their place is measured on the picture itself.
• The section needs the picture and at least one product to show. That product can come from a pin or from the products beside the picture.
• The total and the add-all button count only products that can go straight into the cart: a product with options, or a sold-out one, is left out. The total is the sum of current prices; it does not apply a discount.
• In “Product grid, image and total price” on computers, a pin makes its product stand out in the slider instead of opening a card, so “Product card opens to the” makes no difference there.
• In “One-product slider beside an image with numbered pins” and “Image beside a colored product panel” the section sits right against the sections before and after it, with no gap. For a gap, set “Space above the section” and “Space below the section”.

Step by step

1. Upload a picture in “Banner image”.
2. Type the title in “Title”.
3. Under “Benefits”, add each benefit on its own: type its “Benefit name” and choose its “Icon”.
4. In “Products on the image (up to 4)”, choose the products to show on the picture.
5. If the text is hard to read on your picture, turn on “Color layer over the background” or change “Text color on the image”.

Settings

• Banner image: The picture behind the whole section; the title, benefits and products sit on top of it. It is cropped to the size of the section, so keep what matters near the middle.
• Benefits: The benefit tiles on the picture, up to 12. Each tile has an icon and a name, and a short line if you want one.Up to 12 items
  • Benefit name: The benefit's name, shown in its tile under the icon - e.g. Fast delivery.
  • Short description (optional): A small line under the name that explains the benefit. Leave it empty when the name says enough.
  • Icon type: Choose “Ready-made icon” to pick one of the theme's icons, or “Your own image” to upload an icon of your own.
  • Icon: The icon above the benefit's name. The list names each icon (Truck, Shield, Timer…); pick the one that matches the benefit.Shown when “Icon type” is “Ready-made icon”
  • Icon image (square): Your own icon, shown small in the ready-made icon's place. Upload it square, ideally a PNG with a transparent background.Shown when “Icon type” is “Your own image”
• Products on the image (up to 4): The product cards on the picture beside the benefits, up to four. Each card shows the product's picture, name, price and any discount. It also has a cart button, a button to view the product, and a wishlist button if your store has the wishlist turned on.
• Show the product description (with one product only): When there is a single product card, its description shows under it (up to three lines). Turn this off to show the card without it.
• Your own text instead of the product description (shows with one product only): Your own text, shown under the card instead of the product's description from Zid. Leave it empty to use the product's own description.Shown when “Show the product description (with one product only)” is on
• First section on the page? Turn on to load its first image right away: Turn it on only when this is the first section on the home page, so its picture appears sooner as the page opens. Lower down the page, leave it off so the page opens faster.
• Text color on the image: The colour of the title, the benefit tiles and the description on the picture. Change it when your picture is light and white text is hard to read.
• Space above the section on mobile: The space above the section on phones only, if you want it different from larger screens. Left on “This design's own”, phones follow what you chose in “Space above the section”.
• Space below the section on mobile: The space below the section on phones only, if you want it different from larger screens. Left on “This design's own”, phones follow what you chose in “Space below the section”.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• Suggested picture size: 1920×900 px. The section grows or shrinks with the text and products on it, and the picture is cropped to fit, so keep what matters near its middle.
• Choose a dark or calm picture so white text reads, or turn on “Color layer over the background”.
• Until you upload a picture or choose a background colour, the section uses the theme's main colour as its background, so the text stays readable.
• Benefits are laid out three to a row on computers and tablets, two on large phones and one per row on regular phones, so three or six benefits look best.
• To choose exactly which products show, put them in a category of their own and choose that category in “Products on the image (up to 4)”. The section shows the first four only.
• “Title”: The large title at the top of the picture. Keep it to two or three words, because it is shown very large.
• “Full screen width”: Lets the title, benefits and products run the full width of the screen. The difference shows only on very large screens, because they are already wide. The picture fills the screen width either way.
• “Section background color”: The section background colour, seen when there is no “Banner image”.
• “Section background image”: Another picture for the whole section background. It sits over the “Banner image” and hides it, so use only one of the two - the “Banner image” is the simpler choice.
• “Space above the section”: The space between the top of the picture and the title; the picture fills it too. “This design's own” is the spacing the section was designed with. What you choose here applies on phones too, unless you choose a different value in “Space above the section on mobile”.

Section design

Step by step

1. In the theme editor, open the “Featured list” section and choose the look that suits you in “Section design”.
2. In “Products”, choose the products to show.
3. In “Products per column”, set how many products stack in each column. In “Columns on desktop”, set how many columns show at once.
4. Under “Banners”, add a banner, upload “Banner image” and fill in “Banner title” and “Banner link (empty: the products page)”.
5. In “Where the banner sits among the product columns”, choose after how many columns the banner comes.
6. Check the preview, then press “Publish” so your customers see the change.

Settings

• Section design: Decides the banner among the products: two small ones, one above the other, or one tall one.
• Text under the title: A short line under the heading.
• Products: The products to show. They fill the columns in order, and the section shows up to 24.
• Banners: The promo banners shown among the product columns. A banner with neither a picture nor words is not shown.Up to 4 items
  • Small line above the banner title (in “Product columns with one tall banner” only): A small word or line above the tall banner's title, such as: the sale ends soon.
  • Banner title: The banner's big title. Tapping it opens the banner's link. A new line you start while typing is kept.
  • Short description (in “Product columns with two small stacked banners” only): A line of description under the title in the small banner.
  • Offer end date and time (write it like 2026-12-31 23:59) - in “Product columns with one tall banner” only: With a date and time here, a countdown shows in place of the button. When time is up, the countdown disappears.
  • Banner image: The banner's picture, with the words written on it. Without a picture, the banner shows as a light-coloured block with the words inside.
  • Mirror the image on Arabic pages: On Arabic pages the words sit on the right. This mirrors the picture on Arabic pages only, so its empty part ends up behind the words. Leave it off if the picture has writing in it, or the writing will be reversed.
  • Banner button text (leave empty for no button; with an offer end date the countdown shows in its place): The words on the banner's button, such as: shop now. In the small banner it shows as a link with an arrow. Leave it empty for no button.
  • Banner link (empty: the products page): The page that opens when the visitor taps the banner, its title or its button.
  • Text colors: With a dark banner picture choose white words, with a light one black. This choice only applies when the banner has a picture.
• Columns on desktop: How many columns show at once on a computer, counting the banner column. The rest come into view as the slider moves.
• Columns on tablet: How many columns show at once on a tablet.
• Columns on mobile: How many columns show at once on a phone.
• Products per column: How many products stack in each column, on computers and tablets.
• Products per column on mobile: How many products stack in a column on phones. A smaller number keeps the section shorter on a small screen.
• Where the banner sits among the product columns: Where the banner column sits among the product columns. If there are fewer product columns than that, the banner goes last.
• Show the banner on mobile and tablet: The banner shows on computers only. Turn this on to show it on phones and tablets too.
• Autoplay: The columns slide on their own every three seconds, and pause while the mouse rests on the slider.
• Start again after the last slide (the banner then shows at every width, and a mobile column holds as many products as a desktop one): After the last column, the slider carries on from the first without stopping. It only works when the total number of columns, the banner's included, is at least twice “Columns on desktop” - with 4 there, you need 8 columns or more. When it works, the banner shows on every screen and a phone column holds as many products as a computer column.
• Show arrows: Arrows at the slider's sides for moving along. Shown on large computer screens only.
• Show bars under the slider: Small bars under the slider showing the visitor where they are; tapping one moves there.
• Space above the section on mobile: The space above the section on phones only, when you want it different from computers. Handy for bringing sections closer together on a small screen.
• Space below the section on mobile: The space below the section on phones only, when you want it different from computers.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• Small banner picture: about 450×294 px (landscape). Tall banner picture: about 450×608 px (portrait). A picture's edges may be cropped to fit, so keep what matters in the middle.
• Write the offer's end with the digits 0-9 (not ١٢٣), exactly like this: 2026-12-31 23:59 - year-month-day, then the time on the 24-hour clock (11 pm is 23:00). The countdown runs on the visitor's own device clock, so the offer ends at the time you wrote in the visitor's own time zone.
• When the offer ends, the countdown disappears and the button does not come back by itself. Clear the date to bring the button back.
• The banner does not show on phones and tablets unless you turn on “Show the banner on mobile and tablet”.

Step by step

1. In “Bundle products (3 to 5 products)”, choose the products of the bundle.
2. To show other products in the slider, choose them in “Slider products (empty: the bundle products)”.
3. Type the “Bundle box title” and the “Text under the bundle box title”.
4. Type the “Savings line: the words after “Buy” and the product count (e.g. products in your bundle)” and the “Savings amount at the end of the line, in bold (e.g. 30%)”.
5. Set up the real discount on the products in your Zid dashboard, so the prices match what you wrote.

Settings

• Text under the title: A line under the title that explains the bundle.
• Bundle products (3 to 5 products): The products inside the bundle box. The section shows the first five only, and needs at least one to show at all.
• Slider products (empty: the bundle products): The slider products beside the bundle (up to 12), for shoppers to browse more before buying. Left empty, the slider shows the bundle products themselves.
• Bundle box title: The title at the top of the bundle box - e.g. Save with the bundle.
• Text under the bundle box title: A line under the box title that explains the offer.
• Savings line: the words after “Buy” and the product count (e.g. products in your bundle): Part of the savings line. The line reads: “Buy”, then the number of products in the bundle, then your words, then the amount - e.g. Buy 4 products in your bundle 30%. The number shows only when the bundle has 3 products or more.
• Savings amount at the end of the line, in bold (e.g. 30%): The percentage or amount in bold at the end of the savings line. It is text only and does not apply a discount: you set the real discount on the products in your Zid dashboard.
• “Add all to cart” button text: The words on the button that adds the whole bundle to the cart. Left empty, it reads “Add all to cart”.
• “View all” button text (leave empty to hide it): The words on the button at the other end of the title's row - e.g. View all products. Leave it empty to hide the button.
• “View all” button link (needed for the button to show): The page that button opens, such as a category. It is set to the all-products page to begin with; if you clear it, the button does not show.
• Products per row on desktop: How many product cards each row of the slider shows on computers. With twice this number of products or more, they stack in two rows. On tablets and phones there are two to a row.
• Space above the section on mobile: The space above the section on phones only, if you want it different from larger screens. Left on “This design's own”, phones follow what you chose in “Space above the section”.
• Space below the section on mobile: The space below the section on phones only, if you want it different from larger screens. Left on “This design's own”, phones follow what you chose in “Space below the section”.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• The section does not apply a discount by itself. The subtotal is the sum of the product prices as they are in your store, after any sale price. If you write a savings amount, set that discount on the products in your Zid dashboard so the words match the price.
• Choose products without options for the bundle. A product with options (such as size or colour) stays in the bundle without a quantity, with “Choose options” under it leading to its page. It is left out of the subtotal and is not added to the cart with the rest. A sold-out product shows faded, marked “Sold out”.
• Shoppers can take a product out with “Remove”; if they remove them all, a “Restore bundle” button brings them back.
• The add button never adds more than is in stock, and it takes into account what is already in the shopper’s cart.
• To choose exactly the bundle products, put them in a category of their own and choose that category in “Bundle products (3 to 5 products)”.

Section design

Settings

• Section design: Changes the look and layout of the section. Everything you have filled in - text, products, pictures - is kept when you switch, so feel free to try each design in the preview.
• Text under the title (shown only in the “Title, large image” and “Two products side by side” designs): A line under the title that sums up the product or the offer. It shows only in the same two designs as the title.
• Small line above the product name (e.g. its category): A small word above the product name, such as its category or New. In “Two products side by side, buy button with the price” it shows over both names.
• Product (the first one shows; in “Two products side by side”, the first two): The product to feature. The section takes the first product you chose - the first two in “Two products side by side, buy button with the price”. With no product chosen, the section does not show.
• Show the product description: Shows the product's description under the price (under each name in “Two products side by side, buy button with the price”). Turn it off for shorter details.
• Your own text instead of the product description (in “Two products side by side” each card shows its product's own): Your own text, shown instead of the product's description from Zid. Useful when that description is long, or when you want a sales line. Leave it empty to use the product's description. In “Two products side by side, buy button with the price” it is not used: each card shows its own product's description from Zid.Shown when “Show the product description” is on
• Extra image beside the product image (optional): An extra picture on the other side of the product photos, such as the product in use. It shows on large screens only, and zooms too while “Zoom the product image on hover” is on.Shown with “Details on one side, product images in the middle, an extra image on the other side”
• Decorative corner image (optional): A small picture with a transparent background (a leaf, say) peeking out of each card corner as decoration. Leave it empty for none.Shown with “Two products side by side, buy button with the price”
• Show the “Buy now” button: “Buy now” adds the product to the cart and takes the shopper straight to checkout. A shopper who is not signed in goes to sign-in first. In “Two products side by side, buy button with the price” it is the price button on each card, which adds the product to the cart without going to checkout.
• Description: maximum lines: The most lines the description can take; the rest is cut off and replaced with three dots (…). Raise it when the whole description matters; lower it for a shorter section.
• Product thumbnail strip (not in “Two products side by side”): The small pictures a visitor presses to see the product's other photos. “Follow the section design” shows them in every design except “Details on one side, product images in the middle, an extra image on the other side”. “Show” shows them in any design, and “Hide” hides them in any design. Either way they appear only when the product has more than one photo, and “Two products side by side, buy button with the price” has none at all.
• Zoom the product image on hover: On a computer, resting the mouse on the product photo shows an enlarged view beside it. Pressing the photo, on a computer or a phone, opens all the product's photos full screen. Turn it off so pressing the photo opens the product page instead. In “Two products side by side, buy button with the price” it only gives the photo a gentle zoom.
• “Buy now” button color (empty: the theme's colors): The colour of the “Buy now” button; in “Two products side by side, buy button with the price” it colours the buy button on each card. Left empty, it uses the theme's colours. Change it when you want the button to stand out from the rest of the store's buttons.Shown when “Show the “Buy now” button” is on
• “Buy now” button text color (empty: the theme's colors): The colour of the words on the same button. Left empty, it uses the theme's colours. Pick one that reads clearly on the button colour.Shown when “Show the “Buy now” button” is on
• Space above the section on mobile: The space above the section on phones only, if you want it different from larger screens. Left on “This design's own”, phones follow what you chose in “Space above the section”.
• Space below the section on mobile: The space below the section on phones only, if you want it different from larger screens. Left on “This design's own”, phones follow what you chose in “Space below the section”.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• A product with options (such as size or colour) shows a “Choose options” button that leads to its page, instead of the quantity and buy buttons. A sold-out product shows “Notify me when available”. For shoppers to buy straight from the section, pick a product without options.
• The section shows the first product you chose (the first two in “Two products side by side, buy button with the price”). To control which, put that product, or those two, in a category of their own and choose that category.
• The photos come from the product itself in Zid. On a computer the large photo is portrait (close to 3 wide by 4 tall). On phones it is shorter, close to square in most designs. It is cropped to fill its space, so keep the product in the middle of its photos.
• Stars and the review count show when reviews are turned on in your store and the product has a rating - in every design except “Two products side by side, buy button with the price”.
• Suggested sizes: “Extra image beside the product image (optional)” 1166×1544 px (portrait); “Decorative corner image (optional)” 306×344 px, a transparent PNG.
• In “Details on one side, product images in the middle, an extra image on the other side” the section sits right against the sections before and after it, with no gap. For a gap, set “Space above the section” and “Space below the section”.
• “Title”: A centred title at the top of the section. It shows only in “Title, large image with thumbnails on it” and “Two products side by side, buy button with the price”. Leave it empty if you don't need one.

Section design

Step by step

1. In the theme editor, open the “Feature banner” section and choose the look that suits you in “Section design”.
2. Upload “Image”. If it crops badly on phones, also upload “Mobile image (optional)”.
3. Write the title and description in their fields.
4. Write the button's words and set the link of the page it opens. The button does not show without a link.
5. Fill in the fields that belong to the look you chose, such as the features, the taglines or the contact card.
6. Check the preview, then press “Publish” so your customers see the change.

Settings

• Section design: Changes the whole look of the banner. Your picture and words are kept when you switch, but each look uses only some of them.
• Feature style: Changes the discs holding the icons and the product picture in the middle. Try both and keep the one that suits your store's colours.Shown with “Features around a product image”
• Small line above the title (not shown in “Full image with taglines”, “Features around a product image” or “Wide image with a turning circle of text”): A small line above the title, such as: new, or for a limited time.
• Description (not shown in “Full image with taglines”, “Features around a product image” or “Wide image with a turning circle of text”): A line or two under the title explaining the offer.
• Title: The centred title above the product picture and its features.Shown with “Features around a product image”
• Text under the title: A short line under that title.Shown with “Features around a product image”
• Image: The banner's main picture. In most looks the section does not show without it. The suggested size for each look is written under the field in the editor.
• Mobile image (optional): A separate picture for phones. Upload it when the wide picture crops and loses its detail on a small screen.
• Image description for Google and screen readers (alt) - optional: Say in a few words what the picture shows, such as: black smart watch. Google and screen readers for blind visitors read it; it does not show on the page.Shown when “Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”” is off
• Mirror the image on Arabic pages: On Arabic pages the words sit on the right. This mirrors the picture on Arabic pages, so its empty part ends up behind the words. Turn it off if the picture has writing or a logo in it, so they are not reversed.Shown with “Full-width single banner”
• Contact card title: The contact card's title, such as: need help?Shown with “Banner beside a contact card (phone, email, WhatsApp)”
• Text under the contact card title: A line under the title encouraging the visitor to get in touch.Shown with “Banner beside a contact card (phone, email, WhatsApp)”
• Phone number (empty: your store's number): The number shown in the card, called with one tap. Left empty, your store's number from its Zid details is shown.Shown with “Banner beside a contact card (phone, email, WhatsApp)”
• Email (empty: your store's email): The email shown in the card, opening a new message with one tap. Left empty, your store's email is shown.Shown with “Banner beside a contact card (phone, email, WhatsApp)”
• WhatsApp number with the country code, e.g. 966500000000 (empty: the phone number above): The number the WhatsApp button opens a chat with. Write it with the country code and no leading zero, like 966500000000, or the button will not show.Shown with “Banner beside a contact card (phone, email, WhatsApp)”
• WhatsApp button text (empty: “Message us on WhatsApp”): The words on the WhatsApp button.Shown with “Banner beside a contact card (phone, email, WhatsApp)”
• Text turning in the circle (repeated until it closes the ring, e.g. “Store name · ”; empty: no circle): The words turning in the circle, such as your store's name or motto. They repeat by themselves until they close the ring.Shown with “Wide image with a turning circle of text on its edge”
• Where the circle sits on the image's bottom edge: Sets where the circle sits on the picture's bottom edge. Keep it away from the most important part of the picture.Shown with “Wide image with a turning circle of text on its edge”
• Big word behind the product image: The huge word behind the product picture, such as the product's or brand's name. A short word looks best.Shown with “Big word behind a product image, text below”
• Image inside the word's letters (optional): A picture filling the big word's letters, drifting slowly up and down inside them. Left empty, the letters take a gradient from your store's accent colour to its headings colour.Shown with “Big word behind a product image, text below”
• Features (up to 4, two on each side): The features shown around the product picture. A feature without a name is not shown.Shown with “Features around a product image”Up to 4 items
  • Feature name (needed for it to show): The feature's name in a couple of words, such as: fast delivery.
  • Short description (optional): A short line explaining the feature.
  • Icon type: Choose “Ready-made icon” from the theme's list, or “Your own image” if you have your own icon.
  • Icon: The ready-made icon shown in the disc beside the feature. Pick the one closest in meaning.Shown when “Icon type” is “Ready-made icon”
  • Icon image (square): Your own icon picture, shown inside the disc instead of a ready-made icon.Shown when “Icon type” is “Your own image”
• Taglines (the section does not show without them): The taglines shown along the picture's bottom edge. Add at least one, or the section will not show.Shown with “Full image with taglines”Up to 8 items
  • Tagline title: The tagline itself in a couple of words, such as: free shipping.
  • Short description (optional): A small line under the tagline explaining it.
• Moving messages: The words moving in the strip along the picture's bottom edge.Shown with “Wide image with a big moving strip of words along its bottom”Up to 10 items
  • Message text: A word or short phrase repeated in the strip, such as the campaign's name.
• Button text (leave empty for no button; not shown in “Full image with taglines”, “Features around a product image” or “Wide image with a turning circle of text”): The words on the banner's button, such as: shop now. The button shows only when there is a link.
• Link (needed for the button to show; not used in “Full image with taglines” or “Features around a product image”; in “Wide image with a turning circle of text” the whole image opens it): The page the button opens. In most looks the title opens it too, and in some the whole picture does.
• First section on the page? Turn on to load its first image right away: Turn it on only when this section is the very first thing at the top of the page, so its first picture shows sooner. Anywhere else, leave it off so the whole page opens faster.Shown when “Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”” is off
• Text position: Where the words sit on the picture. “Start” means the right on Arabic pages and the left on English ones; “End” is the opposite.Shown with “Full-width single banner”
• Movement speed: How fast the strip of words moves. The strip pauses while the mouse rests on it.Shown with “Wide image with a big moving strip of words along its bottom”
• Movement direction: Whether the strip moves with the reading direction or against it.Shown with “Wide image with a big moving strip of words along its bottom”
• Tagline motion: “Still”: the taglines stand side by side, sliding when there are more than fit. “Moving strip”: they move along as a continuous strip.Shown with “Full image with taglines”
• Text color (empty: the design's own): The colour of the banner's words, for when the look's own colour does not read on your picture.
• Space above the section on mobile: The space above the section on phones only, when you want it different from computers. Handy for bringing sections closer together on a small screen.
• Space below the section on mobile: The space below the section on phones only, when you want it different from computers.

Plus every option in "Options every section shares", in the Home page sections chapter.

Tips

• The suggested picture size differs by look and is written under the “Image” field in the editor. For example, about 2115×690 px for “Full-width single banner”.
• In the looks where the words sit at one side of the picture, keep that side of the picture dark and calm so they read.
• In “Features around a product image” and “Big word behind a product image, text below”, use a PNG of the product with no background (transparent).
• WhatsApp button in “Banner beside a contact card (phone, email, WhatsApp)”: write the number like 966500000000, with no leading zero.
• If the picture has writing or a logo in it, turn off “Mirror the image on Arabic pages” so it is not reversed on Arabic pages.
• “Title”: The banner's big title. In most looks, tapping it opens the link.
• “Color layer over the background”: Lays a layer of colour over the section's background to calm it, so the words read more clearly. In “Wide image with a big moving strip of words along its bottom” it covers the picture itself, under the words.

Section design

Step by step

1. In the theme editor, add the “Before / after comparison” section.
2. Upload the “Before” image and the “After” image. Use the same size and the same camera angle for both.
3. Type the word to show on each picture in its own field - 'Before' and 'After', for example.
4. Choose the “Section design” that suits you.
5. Check the section in the preview, then publish so your customers see it.

Settings

• Section design: Changes the whole look of the section. Your two pictures and your words stay as they are when you switch.
• “Before” image: The picture from before the product was used. It sits on the right on Arabic pages and on the left on English ones. The dividing line starts in the middle.
• “After” image: The picture from after, on the other side. Keep it the same size as the “Before” image and shot from the same spot. That way, when the line moves, the only change the eye sees is the result.
• “Before” label on the image (in the “Rounded corners” design it is the title in its bottom corner): The word shown on the “Before” image - 'Before', or 'Before use'. In the “Rounded corners” design it becomes the title in the bottom corner. On phones it shows in a small badge at the top of the picture. Leave it empty for no words on the picture.
• Line under the “Before” title (desktop and tablet only): A short line under the “Before” title in the corner, saying how things were. It shows on computers and tablets only; phones show the title alone.Shown with “Rounded corners, with a title and a line of text in each bottom corner”
• “After” label on the image (in the “Rounded corners” design it is the title in its bottom corner): The word shown on the “After” image - 'After', or 'After two weeks'. In the “Rounded corners” design it becomes the title in the bottom corner. On phones it shows in a small badge at the top of the picture.
• Line under the “After” title (desktop and tablet only): A short line under the “After” title in the corner, putting the result in plain words. It shows on computers and tablets only.Shown with “Rounded corners, with a title and a line of text in each bottom corner”
• Text color on the image: The colour of the titles and lines in the two bottom corners. White reads well on dark pictures; if your pictures are light at the bottom, pick a dark colour. The small badges on phones stay white with dark text.Shown with “Rounded corners, with a title and a line of text in each bottom corner”
• Space above the section on mobile: The space above the section on phones. “This design's own” follows your choice in “Space above the section”. Pick a smaller number if the gap looks too big on a phone.
• Space below the section on mobile: The space below the section on phones. “This design's own” follows your choice in “Space below the section”. Pick a smaller number if the gap looks too big on a phone.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Title", "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• The section only appears once both pictures are uploaded.
• The best size for both pictures is 1920×720 (landscape). The frame crops each picture to fill it, and crops more from the sides on phones, so keep what matters in the middle.
• Shoot both pictures from the same spot in the same light, so that as the line moves the eye sees only the result, not a change of framing.
• Visitors can drag the line, or tap anywhere on the picture to move the line there.
• The word in the small badge on a picture disappears while the line passes over it and comes back once the line moves on, so it never hides the line.
• This section comes with no space above or below. If it touches the section before it, choose a gap in “Space above the section”.
• “Full screen width”: Lets the frame grow to the full screen width. It only makes a difference on very wide screens; on most screens the frame already takes nearly the full width, with a small margin at the sides.
• “Section background color”: The section's background colour. The two pictures cover almost the whole section, so this colour only shows in the space around them: above and below if you add spacing, and at the sides in the “Rounded corners” design.
• “Color layer over the background”: Lays a colour over the section's background picture and colour. It does not cover the “Before” and “After” pictures, so it only shows in the space around them. Most stores will not need it in this section.

• Small line above the statement: A short line above the statement, e.g. Our story. It shows in one of the theme's accent colours.
• Extra text under the statement (optional): A short paragraph under the statement when you need to say more; leave it empty if the statement is enough.
• Button text (leave empty for no button): The words on the button, e.g. Learn more about us. The button shows as soon as you write them.
• Button link (empty: the products page): The page the button opens, such as your About page. If you leave it empty, it opens your products page.
• Text color (empty: the theme's colors, white over a background image): The colour of all the text in the section - the small line, the statement and the paragraph. Change it if the text doesn't read well on the background colour or picture you chose.
• Space above the section on mobile: The space above the section on phones and tablets held upright. On “This design's own”, it matches the “Space above the section” you chose for desktop. If you never changed that one, the design's own spacing is used.
• Space below the section on mobile: The space below the section on phones and tablets held upright. On “This design's own”, it matches the “Space below the section” you chose for desktop. If you never changed that one, the design's own spacing is used.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• The statement looks best at one to three lines. A very long one weighs the section down; details belong in “Extra text under the statement”.
• In the statement, each English word gets a capital first letter by itself, so there is no need to type capitals yourself.
• “Statement”: The key sentence of the section. Say what your store offers and who it is for, in one to three lines. To break the line at a certain word, start a new line there as you type.
• “Section background color”: The section's background colour. If you pick a dark one, set “Text color” to a light colour so the text shows.
• “Section background image”: A picture behind the statement. With one set, the text turns white and sits on a dark see-through box. That way it reads on any picture.

• Lines under the title (each one on its own line): The lines under the heading. Each line you add shows as its own paragraph. If the heading and all the lines are empty, the section does not appear.
  • Line: The text itself. A new line you type shows as a new line on the page too.
• Space above the section on mobile: The space above the section on phones only. On “This design's own”, it matches the “Space above the section” you chose for desktop. If you never changed that one, the original spacing is used.
• Space below the section on mobile: The space below the section on phones only. On “This design's own”, it matches the “Space below the section” you chose for desktop. If you never changed that one, the original spacing is used.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• The text in this section uses the theme's dark colours, so keep any background light, or turn on “Color layer over the background” in white.
• A short heading with one or two lines looks cleaner than a long paragraph.
• “Section background color”: The section's background colour. Choose a light one: the text here uses the theme's colours, and there is no setting to change its colour.
• “Section background image”: A picture filling the section behind the text. Choose a light, calm picture so the dark text stays clear on it.
• “Space below the section”: The empty space below the section on desktop and tablet. Reduce it when this section introduces the one straight after it.

Section design

Step by step

1. Open the “Testimonials” section in the theme editor, or add it to the page.
2. Add a new item to the list of reviews.
3. Type the customer's name and review, choose the rating and upload their photo.
4. In “Product the customer reviewed (optional)”, pick the product so it shows with its price.
5. Check the section in the preview, then publish so your customers see it.

Settings

• Section design: Changes how all the reviews are shown. The reviews you wrote stay as they are when you switch. Each design shows the customer photo its own way.
• Text under the title: A line under the heading - that these are real reviews from people who bought from you, for example. Optional.
• Customer reviews: The list of reviews, up to 12; add each one as a new item. Every review has a name, photo, rating and text, and can be linked to a product.Up to 12 items
  • Customer name: The customer's name as they are happy to show it - a first name and an initial, for example.
  • Job or city (optional): A small line beside the name - their city or job, such as 'Riyadh'. It makes the review feel real.
  • The review: The customer's own words. Two or three sentences about a specific experience convince more than a long paragraph.
  • Rating: The number of stars shown with the review. Every review shows stars; it starts at 5.
  • Show the “Verified buyer” badge: Adds a small green check mark and the words “Verified Buyer” beside the name. It starts ticked, so untick it for any review that did not come from a customer who really bought from you.
  • Customer photo: The customer's photo, or their photo with the product. Each design crops it its own way - square, tall, wide or a small circle - so keep the face or product in the middle.
  • Product the customer reviewed (optional): The product the customer talked about. It shows with the review - picture, name and price - and the visitor can tap it to open its page, turning the review into a sale.
  • Price before discount (optional, shown only when the product has no sale price in the store): A before-discount price, shown struck through beside the product's price. It prints exactly as you type it, so include the number and the currency. It shows only when the review has a product picked. If the product is already on sale in your store, the theme shows the store's own original price and ignores this field. So most of the time, leave it empty.
• “View all” button text beside the title (leave empty to hide it): The words on the “View all” button beside the heading - 'Shop all products', for example. The button shows as an underlined word. It only shows when both the text and the link are filled in.Shown with “Small cards, round customer photo”
• “View all” button link (needed for the button to show): Where the “View all” button leads. It starts on the all-products page; you can point it at a category instead.Shown with “Small cards, round customer photo”
• Autoplay: Reviews move on by themselves without the visitor tapping, and pause while the mouse is over them.
• Time on each slide (1000 = 1 second): How long each slide stays before moving on: 5000 means 5 seconds. Raise it if your reviews are long and need time to read.Shown when “Autoplay” is on
• Start again after the last slide: After the last review the slider carries on from the first instead of stopping at the end.
• Show arrows: Two arrows at the sides of the reviews to move between them. They show only on very wide screens, such as large desktop monitors (1600 pixels wide or more). On phones and tablets visitors swipe or use the dots. On wide laptop screens (1440 to 1599 pixels) there are neither arrows nor dots, so visitors can only drag - unless you turn on “Autoplay”.Shown with “Two linked sliders: the customer's photo and the review beside it”
• Show arrows beside the title: Two large arrows on the heading's line, inside the panel, to move between reviews. They hide by themselves when every review is already in view.Shown with “White cards on a colored panel, arrows by the title”
• Show dots under the slider: The dots under the reviews (drawn as short bars) show visitors where they are; tapping one jumps there. They hide by themselves when every review is already in view. In “Two linked sliders: the customer's photo and the review beside it” they show only on screens narrower than 1440 pixels (phones, tablets and most laptops).
• Card color on hover: The colour a card takes when the mouse is over it on a computer. Pick one of your brand colours.Shown with “Small cards, round customer photo”
• Card text color on hover: The colour of everything written on the card - name, review, stars and price - while the mouse is over it. Pick a colour that stands out on the card colour (light on dark, or dark on light) so the review stays readable.Shown with “Small cards, round customer photo”
• Space above the section on mobile: The space above the section on phones. “This design's own” follows your choice in “Space above the section”. Pick a smaller number if the gap looks too big on a phone.
• Space below the section on mobile: The space below the section on phones. “This design's own” follows your choice in “Space below the section”. Pick a smaller number if the gap looks too big on a phone.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• Customer photo: a 700×700 square works for every design. Some designs crop it tall, wide or into a circle, so keep the face in the middle.
• In the designs with a large photo, a review without one leaves an empty space; give every review a photo, or choose a design that shows the photo small beside the name.
• In the designs with a panel, “Space above the section” and “Space below the section” change the space inside the panel itself.
• When every review is already in view, the slider does not move and the dots and arrows hide; add more reviews for it to slide.
• Use real reviews, with their authors' names and photos, and with their permission.
• “Title”: The section heading - 'What our customers say', for example. In most designs it is centred above the reviews. In “Small cards, round customer photo” and “White cards on a colored panel, arrows by the title” it sits to one side.
• “Full screen width”: The section spreads across the full screen width instead of the usual page width. In the designs with a panel (“Photo beside the review on a grey panel”, “White cards on a colored panel, arrows by the title” and “One centered review over a dark image”), the panel reaches both screen edges, with square corners.
• “Section background color”: The section's background colour. In the designs with a panel, it is the panel's colour. In “One centered review over a dark image” it is the colour under the picture, so keep it dark for the white text to show.
• “Section background image”: A picture behind the whole section. In “One centered review over a dark image” this is the picture behind the review. It shows slightly faded over the background colour so the white text reads. Use a picture of your shop, or of your product in use.

Section design

Step by step

1. Open the “Benefits” section in the theme editor, or add it to the page.
2. Add a new item to the list of benefits.
3. Type the benefit's name and a short description.
4. Choose the icon, or set “Icon type” to “Your own image” and upload your icon.
5. Check the section in the preview, then publish so your customers see it.

Settings

• Section design: Changes the size of the icons and titles and the space around the section. The benefits you wrote stay as they are when you switch.
• Benefits: The list of benefits, up to 8; add each as a new item. A computer shows 4 side by side, a tablet 3, and a phone 1 or 2 depending on its width. Any more slide into view with a swipe.Up to 8 items
  • Benefit name: The benefit's name in two or three words - 'Free shipping', for example.
  • Short description (optional): A short line under the name that explains the benefit - 'Delivered within two days to every city', for example. Optional.
  • Icon type: “Ready-made icon” picks from the theme's icons, coloured like your store's headings. “Your own image” is for icons of your own brand.
  • Icon: The icon shown above the benefit's name. Pick the one that matches the benefit - “Truck” for shipping, “Shield” for a guarantee.Shown when “Icon type” is “Ready-made icon”
  • Icon image (square): Your own icon. It shows small and square above the benefit's name, so upload a square PNG with a transparent background for a clean look.Shown when “Icon type” is “Your own image”
• Divider line and space above the benefits: A thin line across the section above the benefits, with space between it and the icons. Turn it off when the section sits right under a banner and you want no divider.
• Space above the section on mobile: The space above the section on phones. “This design's own” follows your choice in “Space above the section”. Pick a smaller number if the gap looks too big on a phone.
• Space below the section on mobile: The space below the section on phones. “This design's own” follows your choice in “Space below the section”. Pick a smaller number if the gap looks too big on a phone.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Title", "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• Four benefits fill the row exactly on a computer.
• Keep each name short and each description to one line, so the row stays even.
• Icon image: square, 104×104 or larger, a PNG with a transparent background.

Step by step

1. Open the “FAQs” section in the theme editor, or add it to the page.
2. Type the title and the description.
3. Add a new item to the list of questions, type the question and its answer, and repeat for each one.
4. For a button, type its words and add the link to your FAQ or contact page.
5. Check the section in the preview, then publish so your customers see it.

Settings

• Description: A short text under the heading - that these are the questions you hear most, for example. Enter starts a new line.
• Questions: The list of questions, up to 12; add each one as a new item. The first question starts open. When a visitor opens another, the one that was open closes.Up to 12 items
  • Question: The question in the customer's own words - 'When will my order arrive?', for example.
  • Answer (the question does not show without it): The answer, short and clear. Enter starts a new line. A question without an answer does not show.
• Button text (leave empty for no button): The words on the button under the description - 'All FAQs' or 'Contact us', for example. The button only shows when both the text and the link are filled in.
• Button link (needed for the button to show): Where the button leads - your store's FAQ page or contact page, for example. It starts on the all-products page, so change it to the right page.
• Section fonts: Left as it comes, the heading and answers use the section's own fonts. You only see the difference on English pages, when “Store look” (under “Look” in “Layout Settings”) is set to “Tech (electronics)”. Choose “The store's fonts” for the section to use your store's fonts everywhere.
• Space above the section on mobile: The space above the section on phones. “This design's own” follows your choice in “Space above the section”. Pick a smaller number if the gap looks too big on a phone.
• Space below the section on mobile: The space below the section on phones. “This design's own” follows your choice in “Space below the section”. Pick a smaller number if the gap looks too big on a phone.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• Write 5 to 8 questions - the ones you really get on WhatsApp and in messages.
• On a computer the heading sits in one column and the questions in the column beside it; on smaller screens the questions move under the heading.
• This section comes with no space above or below. If it touches its neighbours, choose “Space above the section” and “Space below the section”.
• The section does not appear at all unless at least one question has an answer.
• “Title”: The large heading beside the questions. Press Enter to split it over two lines - for example, 'Have a question?', then Enter, then 'We're here to help.'

Section design

Step by step

1. Make sure the blog is switched on in your Zid store and has published posts.
2. Open the “Blog” section in the theme editor and set “Posts source” to “Automatic, from the store blog”.
3. For one category only: open your store's blog page and click the category. Copy the address from the top of the browser and paste it into the category field.
4. Choose the “Number of posts”. For a button under the posts, type the words to show on it.
5. Check the section in the preview, then publish so your customers see it.

Settings

• Section design: Changes how the posts are laid out. Your posts and settings stay as they are when you switch.
• Text under the title: A line or two under the heading telling visitors what they will find on the blog. Optional.
• Posts source: “Automatic, from the store blog” shows your latest published posts and updates itself when you publish a new one. It needs the blog to be switched on in your Zid store. “Posts I write here” shows only the posts you type in the list below.
• Number of posts: How many posts are fetched from your blog. With “As the chosen design”, “Posts in a slider” fetches as many as it shows at once on a computer, and the other two designs fetch 4. In “One large post beside a list” the number includes the large post.Shown when “Posts source” is “Automatic, from the store blog”
• Show posts from one blog category only (optional): type the category name or paste its link; leave empty for all posts: To show posts from one blog category only, paste the category's link here. To get it: open your store's blog page, click the category's name and copy the address from the top of the browser. If you type instead of pasting, type the word at the end of the category's link, not the name customers see - the name can differ and would bring no posts. Leave it empty to show every post.Shown when “Posts source” is “Automatic, from the store blog”
• Posts you write here (with the automatic source, shown only when the store blog is off or empty): Posts you type yourself, up to 12. With “Posts I write here” these are what shows. With “Automatic, from the store blog” they only show as a back-up, when the blog is off or has no posts, so the section never looks empty. A post with no title does not show.Up to 12 items
  • Post title: The post title as it appears on the card. It must be filled in for the post to show.
  • Post excerpt (in the “One large post beside a list” design the large post shows none): A sentence or two under the title that sums up the post and invites a read. Keep it short.
  • Post category (optional, shown on the image): A short word shown in the corner of the post's picture - 'Tips', for example. Optional.
  • Post date (optional): The date, shown above the title exactly as you type it - '12 September 2026', for example. Optional.
  • Post image: The post's cover picture. Keep every post's picture the same size so the cards line up.
  • Post link (empty: the blog page): The post's page on your blog. If you leave it empty, the card leads to the blog page.
• “Read more” link under each post: The “Read more” link under each post. Left as it comes, it shows in the “Posts in two columns, image beside the text” design only. Choose “Show” to show it in every design, or “Hide” to remove it everywhere.
• “All posts” button text (leave empty for no button): The words on the button under the posts - 'All posts', for example. The button only shows when both the text and the link are filled in.
• “All posts” button link (needed for the button to show): Where the button leads. It starts on the blog page. If the section shows one category and you keep this link as it is, the button opens that category's page by itself.
• Posts shown at once on desktop: How many cards sit side by side on a computer: 3 for smaller cards, 2 for bigger cards with clearer pictures. Tablets show 2, and phones 1 or 2 depending on the screen width.Shown with “Posts in a slider”
• Post image shape: The shape of each post's picture. “As uploaded” keeps each picture's own shape, so pictures of different sizes make uneven cards. Pick a fixed shape to crop them all alike. With “Automatic, from the store blog”, “As uploaded” gives every picture the same landscape shape.
• Autoplay: Posts move on by themselves without the visitor tapping, and pause while the mouse is over them.Shown with “Posts in a slider”
• Time on each slide (1000 = 1 second): How long each slide stays before moving on: 5000 means 5 seconds.Shown with “Posts in a slider” and when “Autoplay” is on
• Start again after the last slide: After the last post the slider carries on from the first instead of stopping at the end.Shown with “Posts in a slider”
• Show arrows: Two arrows at the sides of the slider to move between posts. They do not show on phones, where visitors swipe.Shown with “Posts in a slider”
• Show dots under the slider: The dots under the slider (drawn as short bars) show visitors where they are; tapping one jumps there. They hide by themselves when every post is already in view.Shown with “Posts in a slider”
• Space above the section on mobile: The space above the section on phones. “This design's own” follows your choice in “Space above the section”. Pick a smaller number if the gap looks too big on a phone.
• Space below the section on mobile: The space below the section on phones. “This design's own” follows your choice in “Space below the section”. Pick a smaller number if the gap looks too big on a phone.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• Is the section showing the posts typed in its list instead of your blog's posts, or has it disappeared? Then one of three things is true: the blog is switched off in your store, it has no published posts, or the category you entered has none.
• The best size for post pictures is 1200×800 (landscape), the same for every post.
• With “Automatic, from the store blog”, the title and the summary each stop after two lines, to keep the cards even. So keep each post's summary on the blog short.
• With “Automatic, from the store blog”, the posts appear a moment after the page opens, into space already kept for them, so nothing on the page jumps.

Step by step

1. Open the “Gallery (Instagram style)” section in the theme editor, or add it to the page.
2. Add a new item to the list of photos and upload the photo.
3. Add the link of the product in the photo, and a short description. Both are optional.
4. Type the words for your account button and add your account's link.
5. Check the section in the preview, then publish so your customers see it.

Settings

• Text under the title: A line under the heading - your store's hashtag, or an invitation for customers to share their photos. Optional.
• Images: The list of photos, up to 20; add each as a new item. A computer shows 5 side by side, a tablet 3, and a phone 2 or 3 depending on its width. The rest slide into view.Up to 20 items
  • Image description for Google and screen readers (alt) - optional: A short description of the photo - 'A customer wearing the black abaya', for example. It is not printed on the photo, but Google reads it, and so do the screen readers visually impaired visitors use.
  • Image: The photo itself. It is cropped square, so keep what matters in the middle. An item with no photo does not show.
  • Link (optional: on hover a button on the image opens it): With a link, an eye button on the photo leads to it. On a computer the button appears when the mouse is over the photo; on phones and tablets it is always showing. Link the product shown in the photo, so the photo becomes a way to buy.
• Account button text (e.g. “Follow us on Instagram” - the button shows when both text and link are set): The words on your account button under the photos - 'Follow us on Instagram', or your handle. The button opens your account in a new tab. It only shows when both the text and the link are filled in.
• Account button link (needed for the button to show): The link to your Instagram account, or to any other platform.
• Autoplay: Photos move on by themselves without the visitor tapping, and pause while the mouse is over them.
• Time on each slide (1000 = 1 second): How long each slide stays before moving on: 5000 means 5 seconds.Shown when “Autoplay” is on
• Start again after the last slide (from 6 images): After the last photo the slider carries on from the first instead of stopping. It works with 6 photos or more; with fewer it stays off.
• Show arrows: Two arrows at the sides of the photos to move through them. They show on wide computer screens only. On smaller screens visitors swipe.
• Show dots under the slider: Small dots under the photos that show visitors where they are; tapping one jumps there. They hide by themselves when every photo is already in view.
• Space above the section on mobile: The space above the section on phones. “This design's own” follows your choice in “Space above the section”. Pick a smaller number if the gap looks too big on a phone.
• Space below the section on mobile: The space below the section on phones. “This design's own” follows your choice in “Space below the section”. Pick a smaller number if the gap looks too big on a phone.

Plus the options in "Options every section shares", in the Home page sections chapter, except "Keep the image fixed while scrolling (parallax) - not in “Big word behind a product image”".

Tips

• Photos are square; 700×700 is a good size. Keep what matters in the middle, as the edges may be cropped.
• Upload 6 photos or more. A computer shows 5 at once, so with fewer than 6 the slider will not move on a computer, and starting again after the last photo will not work.
• Keep the photos in one mood and light so they read as one tidy account.

Step by step

1. To add a size guide: in the theme editor, open “Product page”.
2. Turn on “Show the “Size guide” button”.
3. Upload the chart in “Size guide image” and write any notes in “Size guide text”.
4. Open any product in the preview and press the button to check the chart, then press “Publish”.

Settings

• Product images layout: How the product's pictures are shown. “Slider with thumbnails”: one large picture with small ones beside or below it. “Two-column grid”: pictures side by side, two per row. “Stacked”: each picture at full width. “One column, product info stays beside it”: the pictures are stacked, and the price and buy button stay in view beside them as the customer scrolls.
• Thumbnails position (only with “Slider with thumbnails”): Whether the small pictures sit beside the large one (start or end side) or below it. On screens smaller than a large desktop they always go below.Shown when “Product images layout” is “Slider with thumbnails”
• Image zoom: How customers zoom into a picture with the mouse: inside the picture itself, in a large panel beside it (wide screens only), with a round lens that follows the mouse, or no zoom. Zoom works only with “Slider with thumbnails”, and only with a mouse on desktop. On phones, customers open the picture full screen instead, while “Open the image full screen on click” is on.
• Open the image full screen on click: When a customer taps a picture it opens full screen and they can swipe through all the product's pictures. Very useful on phones.
• Show the product SKU: The product's SKU from Zid, shown under the product name. Useful when customers ask or order by code. It shows only when the product or the chosen option has one.
• Show how many times it sold: A line such as “Sold more than 25 times” under the product name, once the product has sold. It reassures customers.
• Show the offer countdown: When a sale has an end date in Zid, a countdown in days, hours, minutes and seconds appears under the price until the offer ends.
• Variant picker style: How option buttons such as size look: “Boxes”, “Pills” or “Radio buttons”, or a “Dropdown” when there are many values. A colour option shows as coloured circles by itself when its name contains the word colour and all its values are colour names (red, white, beige…). With “Dropdown” it stays a list, with a dot of each colour.
• Show the “Size guide” button: A button under the options that opens a window with your size chart. It appears on every product page, so there is one chart for the whole store.
• Size guide button and window title (empty: “Size guide”): The words on the button and at the top of the window, such as “Size chart” or “Shoe sizes”.Shown when “Show the “Size guide” button” is on
• Size guide image: The chart itself, shown across the whole window, never cropped.Shown when “Show the “Size guide” button” is on
• Size guide text: Text shown under the picture, such as how to measure or advice when a customer is between two sizes. Each new line shows on its own line.Shown when “Show the “Size guide” button” is on
• Show the “items left” bar (products with a set stock): A bar showing how many are available and how many sold (“Available: 5”, “Sold: 20”), which nudges customers to buy before it runs out. It shows only for products with a set stock in Zid that have already sold.
• Show the share buttons: Buttons for customers to share the product on Facebook, Pinterest, X and WhatsApp.
• Extra info rows (like shipping and returns): Short lines with an icon, shown under the buy button on every product page, such as “Free shipping over 200 SAR” or “Returns within 14 days”. The quick-view window (opened by the eye button on a card) shows only the first 3.Up to 6 items
  • Row text: The line itself. Keep it short and clear.
  • Icon: The icon beside the line; pick one that matches it, such as “Truck” for shipping and “Return” for returns.
• Show the payment method icons: The icons of the payment methods enabled in your Zid store, under the buy button, to reassure customers that payment is safe.
• Text above the payment icons (empty: “Guaranteed safe checkout”): A short line above the payment icons, such as “Pay securely”.Shown when “Show the payment method icons” is on
• Description and tabs layout: How the description, reviews, questions and extra tabs are shown under the product. Choose “Tabs” side by side, “Collapsible sections (accordion)”, “All shown, one after another”, or “Side tabs”. On phones and tablets, “Side tabs” become ordinary tabs above the content.
• Extra tabs beside the description: Tabs you add yourself, shown on every product page next to “Description”, such as “Shipping and delivery” or “How to use”. A tab shows only when both its name and its content are filled.Up to 6 items
  • Tab name: The title customers tap.
  • Tab content: The text inside the tab. Each new line shows on its own line.
• Show related products (“You may also like”): A slider of products at the bottom of the page titled “You may also like”, with the products related to this one in Zid. With no related products, it does not appear.
• Show “Recently viewed”: A slider of the products this customer has opened before in your store. The list is kept on their own device only. With related products also on, the two appear as tabs side by side.
• Keep an add-to-cart bar at the bottom of the screen while scrolling: Once the customer scrolls past the buy button, a bar appears at the bottom of the screen with the product picture, price and “Add to cart”, so they can buy without scrolling back up. On phones only the button with the price shows. The bar hides when the product cannot be bought.

Tips

• The picture frame here follows “Product image shape” and “How the image fits” in the “Product card” settings. If your photos are portrait or landscape, change them there.
• Upload all of a product's pictures at one size and background. The large picture is shown up to 1200 pixels wide, so 1200×1200 (or 1200×1600 for portrait) looks sharp and holds up to zoom.
• There is one size guide for all products; if you sell things without sizes (perfume, for example) next to clothing, think before turning it on.
• The extra info rows are a good place for your shipping and returns policy; 2 to 4 rows are enough.
• The Reviews and Questions tabs appear by themselves when reviews and questions are on in your Zid store settings.

• Page title (empty: “Shopping cart”): The large title at the top of the page, such as “Your bag” or “Your basket”.
• Text under the title: A small line under the title, such as “Cash on delivery available”. Leave it empty if you do not need it.
• Show Zid's progressive discount offer (the bigger the cart, the bigger the discount): If you run a progressive discount in Zid (the bigger the cart, the bigger the discount), it is shown above the cart's products so the customer adds more to reach it.
• Show the free-shipping progress bar: If you offer free shipping above an amount in Zid, a message such as “Add products with total of 50 SAR to get free shipping” appears in the order summary box. A “Read More” button with it lists the cities the free shipping covers.
• Show the discount code field: The “Discount coupon” field where customers type a code. Turn it off if you do not use codes, so customers do not leave the cart hunting for one.
• Link for “Or continue shopping” and “Shop now” (empty: home and the products page): Where customers go when they press “Or continue shopping” under the order button, or “Shop now” when the cart is empty. Pick your offers category, for example, to send them back to your best products. This is for the cart page only; the cart drawer's links are fixed and are not changed here.

Tips

• The free-shipping bar and the progressive discount depend on your Zid settings; if they do not show, set up the offer or the free-shipping rule first.
• The suggested products in the cart are set in “Cart recommendations”.
• For a banner above or below the cart's content, add it in “Internal advertisements” and tick “Cart page”.

• Show the cart drawer: When on, the cart icon opens the side panel. Turned off, the cart icon takes customers straight to the cart page.
• Show the discount code field: The “Coupon code” field inside the drawer, so customers can apply a code without going to the cart page.
• Show the free-shipping progress bar: A bar at the top of the drawer telling customers how much more gets them free shipping, filling up as they add. It shows only if you offer free shipping above an amount in Zid.
• Background color: The panel's background. Left empty, it takes the page background.
• Text color: The colour of the words in the panel: names, prices and headings. Left empty, it takes the store's text colours.
• Divider color: The colour of the thin lines between items and sections.
• Free-shipping bar color: The colour of the filled part of the free-shipping bar. Left empty, it takes “Primary color (buttons)”.

Tips

• The panel opens by itself after an add while “Open the cart drawer after adding a product (anywhere in the store, not only from cards)” is on in the “Product card” settings.
• If you make the background dark, make “Text color” light so the words show.
• The suggested products inside the drawer are set in “Cart recommendations”.
• When gifting is on in your Zid store, the panel shows a “Make it a gift” row that takes the customer to the cart page to fill in the gift details.

Footer design

Step by step

1. Activate the payment methods you accept in your Zid dashboard; their icons come from there by themselves.
2. In the theme editor, open the “Footer” settings, then the “Footer” group.
3. Switch on “Show the payment method icons”.
4. Press «Publish». The icons appear on the footer's last line, each opening the shipping and payment page.

Settings

• Footer design: Changes the whole footer's layout and colours. The columns and text you wrote stay as they are when you switch designs.
• Show the logo instead of the “About the store” title: Puts your logo (the header's) at the top of the store column in place of its title. Turn it off to show a written title such as “Our store”.Shown with “Light: logo above the store details”
• Show the “My account” column (sign in, orders, wishlist): Adds a “My account” column with “Login”, “My orders”, “Wishlist” and “Cart”. Useful when your store relies on returning customers.
• Show the large text, still, under the columns: Shows the large sentence you write in the box below, still and centred under the columns. It starts off, so the sentence appears only when you decide.Shown with “Store benefits above the columns”
• Large text at the foot (moving in the “Dark” design, still under the columns in “Store benefits above the columns”): A short sentence in large type at the foot, such as your slogan or promise. In “Dark: two groups with a divider and a large moving text” it moves across the screen. In “Store benefits above the columns” it shows still, once the switch above it is on. The other footer designs don't show it, and left empty it shows in none.
• Show the VAT number, commercial register and Saudi Business Center: Shows a line with your Saudi Business Center record, your VAT number with the ZATCA mark and your commercial register number with the Ministry of Commerce mark. Each shows only when its number is available. It tells shoppers your store is official, so keep it on.
• VAT number (if it isn't in your Zid store details): Type your VAT number here if it isn't in your Zid store details. When Zid has one, Zid's number is shown.Shown when “Show the VAT number, commercial register and Saudi Business Center” is on
• Commercial register number (if it isn't in your Zid store details): Your commercial register number. Zid sometimes doesn't pass it to the storefront even when it's in your account. So if it's missing from the footer, type it here.Shown when “Show the VAT number, commercial register and Saudi Business Center” is on
• Show your store app links: Shows App Store and Google Play badges for your store's app. If you have no app, turn it off: the badges come with an example link, not yours.
• Your App Store link (a Zid app's own link is used by itself): Your app's App Store link. A Zid-made app's link is filled in by itself; otherwise, replace the address here with your app's.Shown when “Show your store app links” is on
• Your Google Play link (a Zid app's own link is used by itself): Your app's Google Play link. A Zid-made app's link is filled in by itself; otherwise, replace the address here with your app's.Shown when “Show your store app links” is on
• Show country and language: Shows the country and language buttons on the footer's bottom line. Turning on “Hide the country button” or “Hide the language button” in the header settings removes that button here too.
• Copyright line (empty: “© Your store. All rights reserved.”): The copyright line at the very bottom. Left empty, it reads “© Your store. All rights reserved.”, so write one only for different wording, such as adding your founding year.
• Show the payment method icons: Shows icons for the payment methods active in your Zid store. Each opens the shipping and payment page. Keep it on so shoppers see they can pay their way.

Tips

• Your phone, email, address, social accounts, VAT number and payment methods all come from your Zid store details; update them there and the footer follows by itself.
• On phones the footer columns fold under their titles. Shoppers tap a title to open its column, so the page stays short.
• Footer settings are saved separately for each language: after finishing in Arabic, switch the editor to English and check the titles and texts there.

• Column title (empty: “Our store”): The column's title, such as “Our store” or “About us”. Left empty, it reads “Our store”. In the “Light: logo above the store details” footer design, the title shows only when the logo is off.
• A short line about the store (optional): A line or two about your store under the title, such as “Original French perfume, delivered to your door”. Keep it short.
• Show phone, email and address (from your Zid store details): Shows the phone, email and address from your Zid store details. Shoppers tap them to call or write. When your store's location is pinned on the map in Zid, they can also open the address on the map.
• Text before the phone number: A few words before the phone number, such as “Customer support:” or “Call us:”. Left empty, the number shows alone.Shown when “Show phone, email and address (from your Zid store details)” is on
• Store address (if your Zid store details don't show one): Type an address here, such as “Riyadh, Al Nakheel”, when your Zid store details don't display one. When Zid shows the address, Zid's is used.Shown when “Show phone, email and address (from your Zid store details)” is on
• Show your social accounts (from your Zid store details): Shows icons for your social accounts (Facebook, Instagram, TikTok, Snapchat, X, YouTube, LinkedIn). They come from your Zid store details; an account not filled in there doesn't show.

Tips

• To change the number, email or social accounts, edit them in your Zid store details rather than here. The column reads them from there.

Step by step

1. Open the “Footer” settings, then the “First column” group.
2. Write the “Column title”, such as “Shop”.
3. In “Links”, add a link, write its “Link text” and put the page in “Link”.
4. Repeat for up to eight links, then press «Publish».

Settings

• Hide this column: Hides this column without deleting its links, so you can bring it back any time.
• Column title: The heading above the links, such as “Shop” or “Customer service”. On phones, shoppers tap it to open the column.
• Links: The column's links in order, up to eight. The column doesn't show at all unless at least one link has both its “Link text” and “Link” filled in.Up to 8 items
  • Link text: The words shown, such as “Returns policy”. Needed for the link to show.
  • Link: The page the link opens, such as /faqs or one of your store's pages. Needed for the link to show.

Tips

• Type the page starting from the / (such as /products or /faqs) rather than the full address. Shoppers browsing in English then land on the English page by themselves.
• Group links by what they're for: one column for shopping, one for customer service and policies, one for anything else. Don't put everything in one column.
• The “Second column” and “Third column” work exactly the same way.

• Hide this column: Hides this column without deleting its links, so you can bring it back any time.
• Column title: The heading above the links, such as “Customer service”. On phones, shoppers tap it to open the column.
• Links: The column's links in order, up to eight. The column doesn't show at all unless at least one link has both its “Link text” and “Link” filled in.Up to 8 items
  • Link text: The words shown, such as “Shipping and payment”. Needed for the link to show.
  • Link: The page the link opens, such as /shipping-and-payment. Needed for the link to show.

• Hide this column: Hides this column without deleting its links, so you can bring it back any time.
• Column title: The heading above the links, such as “Links” or “Learn more”. On phones, shoppers tap it to open the column.
• Links: The column's links in order, up to eight. The column doesn't show at all unless at least one link has both its “Link text” and “Link” filled in.Up to 8 items
  • Link text: The words shown, such as “About us”. Needed for the link to show.
  • Link: The page the link opens: one in your store, or a site elsewhere. Needed for the link to show.

Step by step

1. In your Mailchimp account, open the sign-up form code (Embedded form) for your list, and copy the address in it that contains list-manage.com.
2. In the theme editor, open the “Footer” settings, then the “Newsletter” group.
3. Paste it into “Mail service form address, e.g. Mailchimp (optional - empty: a button to create an account in your store)”.
4. Leave “Email field name in that form (keep EMAIL if unsure)” as it is.
5. Press «Publish», sign up with your own email from the store and check it reached your Mailchimp list.

Settings

• Show the newsletter: Shows or hides the newsletter column in the footer.
• Where the newsletter sits with three or more link columns, “My account” included (in the “Light: logo above the store details” footer only): With three or more link columns, choose “Its own column beside the links” so the newsletter stays in the same row instead of dropping under the store details and leaving a gap under the links.Shown when “Show the newsletter” is on
• Title (empty: “Newsletter”): The column's title, such as “Be the first to know”. Left empty, it reads “Newsletter”.
• Description: A short line telling shoppers what they get, such as “Exclusive offers and new arrivals every week”.
• Mail service form address, e.g. Mailchimp (optional - empty: a button to create an account in your store): If you use a mail service, put its sign-up form address here. Shoppers then get an email box that sends straight to it. Left empty, a “Create an account to get our offers” button opens sign-in and sign-up for your store; a signed-in shopper sees “Manage your newsletter subscription” instead.
• Email field name in that form (keep EMAIL if unsure): The email field name your mail service expects. Mailchimp uses EMAIL, so change it only if your service names it differently. Without a form address above, it does nothing.
• Small note under the sign-up box (optional): A small line under the sign-up, such as a note that shoppers can unsubscribe any time. Leave it empty if you don't need it.

Tips

• Without a mail service, the button lets visitors create an account in your store, and you'll find them in your Zid customer list.
• With a mail service, the subscription confirmation opens in a new tab, so shoppers never leave your store.

Step by step

1. Open the “Footer” settings, then the “Footer” group, and set “Footer design” to “Store benefits above the columns”.
2. Open the “Store benefits in the footer” group and add a benefit.
3. Write its “Benefit name”, such as “Fast shipping”, and a “Short description (optional)”, such as “Within 2-4 days”.
4. Choose the right “Icon”, or upload an “Image instead of the icon (optional)”.
5. Repeat for up to six benefits, then press «Publish».

Settings

• Benefits (shown in the “Store benefits above the columns” design only): The benefits shown side by side in a row above the columns, up to six. When space runs short, they wrap onto a new line by themselves. A benefit without a name doesn't show.Up to 6 items
  • Benefit name: The benefit's name, in clear type. Keep it to two or three words, such as “Free returns”. Needed for the benefit to show.
  • Short description (optional): A small line under the name that explains it, such as “Within 14 days of delivery”.
  • Icon: One of fifteen ready icons, shown in the footer's text colour. Pick the one closest in meaning, such as “Truck” for delivery or “Shield” for a guarantee.
  • Image instead of the icon (optional): Your own picture in place of the ready icon. Make it square, 120×120px or larger, ideally a PNG with a clear background. Once you upload one, the chosen icon no longer shows.

Tips

• The picture shows as a small square beside the name, so a simple one-colour mark reads better than a detailed photo.
• Use the same promises as the rest of your store (shipping, returns, payment), and never state one you can't keep.

Step by step

1. You have not pressed “Publish” yet: changes stay a draft only you can see.
2. The section is hidden: untick “Hide this section”, or choose “Show” from the options menu beside its name.
3. Its main content is empty: many sections do not show while empty. For example, a banner whose required picture is not uploaded yet, “FAQs” with no answers, or a “Product carousel” with no products.
4. Its product source is empty: for example “Category products” for a category with no products, or “On sale products” while nothing is discounted. The section then has nothing to show.
5. You are looking at the other language: the English page has its own sections. See the next question.

Step by step

1. Switch the editor to English and make the same change.
2. To carry a whole home section over, choose “Copy section to English language” from the options menu beside its name. Then translate its text.
3. Under “Header”, “Footer” and “Page settings”, a small copy icon beside each group’s name does the same.
4. Check the English page before you press “Publish”. If the English home page is empty, shoppers who open your store in English see an empty page.

Step by step

1. Open the product in your Zid dashboard.
2. Without options: enter its quantity, or make it unlimited.
3. With options: give every option its own quantity (each size, each color).
4. Save, then open the product in your store again.

Tips

• In “Cart recommendations”, leave “Show sold-out products” off so sold-out products are not suggested in the cart.

Step by step

1. Open the product in your Zid dashboard and make sure its sale price is filled in.
2. With options: put the sale price on every option. Zid works out the product’s price from its options, and the product page shows the price of the option the shopper picked.
3. If the discount on the picture is missing: in “Page settings”, open “Product card” and tick “Show the discount percentage on the image”.

Tips

• When the sale has an end date, the card shows a countdown to it. To remove it, turn off “Show the offer countdown” in “Product card”; for the product page, turn off the same box in “Product page”.
• The sale price color is “Sale price color” in “Main colors”.

Step by step

1. If “Posts source” is “Posts I write here”, change it to “Automatic, from the store blog”.
2. Make sure the blog is switched on in your Zid dashboard and has published posts.
3. If you typed a category name in the box under “Number of posts”: make sure it is spelt exactly as in the blog, or paste the category’s link instead. Also make sure that category has published posts. Or clear the box to get every post.

Step by step

1. Open the section, go into each entry and pick its “Category”.
2. To show only the categories you picked, untick “Pull the store's categories automatically instead of “Categories” above (an empty “Categories” pulls them anyway)”.
3. Pictures: with “Image (optional)” left empty, the category’s picture from Zid shows. So give the category a picture in your Zid dashboard, or add one to the entry.

Step by step

1. Tick “Show the WhatsApp button”.
2. Type the number in “WhatsApp number with country code, like 966500000000 (empty: your store's number)”. Left empty, the button uses your Zid store’s number. If your Zid store has no number, the button does not show.
3. Pick “WhatsApp button color” and “WhatsApp button icon and text color”.
4. To hide it on phones only, tick “Hide the WhatsApp button on mobile”.

Tips

• These settings are kept per language, so change them in the English editor too. Or copy the whole group with the copy icon beside its name, then translate the “Welcome messages”.

Step by step

1. Upload it in “Logo”. A PNG with a clear background, 175 tall or more, works best.
2. For a different logo on phones, upload it in “Mobile logo (optional)”.
3. Set its size with “Logo height” and “Logo height on mobile”.
4. Press “Publish”.

Tips

• If the logo does not sit in line with the icons, keep “Line the logo up with the icons automatically” on. Or move it yourself with “Move the logo up or down (minus moves it up)”.

Step by step

1. To turn it off: untick “Show the loading screen”.
2. To show it less: set “How often it shows” to “Once per visit” or “Once every 24 hours”.
3. To have it leave sooner: set “Shortest time on screen (1000 = 1 second; 0 = leaves as soon as the page is ready)” to 0.

Tips

• Inside Zid’s editor the screen shows briefly on every preview refresh, whatever you chose, so you can see it. That is in the editor only: your customers see it according to “How often it shows”.

Step by step

1. Keep the home page focused: hide or delete the sections you do not need.
2. Turn on “First section on the page? Turn on to load its first image right away” only in the first section of the page and leave it off everywhere else. The “Main slider” loads its first picture right away by itself.
3. An uploaded video in a “Main slider” slide weighs more than a picture: use a short, light video, or a picture.
4. Every code you paste in “Custom code” loads on every page; remove the ones you no longer use.

Tips

• Want a calmer page? Untick “Autoplay” in the sliders, and untick “Headings and cards fade in as you scroll down” in “Look”.
• Left as it comes, the loading screen stays at least 0.4 seconds. To show the store straight away, set “Shortest time on screen (1000 = 1 second; 0 = leaves as soon as the page is ready)” to 0, or turn the screen off.

Step by step

1. Check three things: “Show the advertising popup” is ticked. At least one entry in “Popup slides” has a picture, a title or text. And “Pages it shows on” covers the page you are on.
2. To show it again to everyone who saw it, you included, change “Campaign name (change it to show the popup again to visitors who already saw it)” to a new name.
3. With “Hide on mobile” ticked it does not show on phones.
4. The popup does not open at once: it waits the number of seconds in “Seconds after the page opens”.

Step by step

1. Put your app links in “Your App Store link (a Zid app's own link is used by itself)” and “Your Google Play link (a Zid app's own link is used by itself)”.
2. If you have no app, untick “Show your store app links”.

Step by step

1. Not published yet: press “Undo all changes”. The editor goes back to the published version. Note that this also drops every other change you have not published.
2. Already published: open “History” and press “Restore” on the newest entry (marked “Current version”). That brings back the version that was live before your last publish. Check it, then press “Publish”.
3. Have a file you exported earlier? Press “Import” and choose it. Your customization comes back exactly as it was, in both languages. Then press “Publish”.

Tips

• “History” keeps no changes that were never published, so press “Export” before applying a design; you then have a copy to go back to.