MEET DIRASSA+

Where does your story begin?

Guide d’utilisationChaque page expliquée pas à pas, en animationDirassa StudioRecord · Edit · PublishBlogFAQ
Language
العربيةFrançaisEnglish
Create my platform

Already with us?Log in

Made for teachers and schools in Algeria
The Dirassa+ guide
Store

Appearance and the store on your site

“Appearance” decides how your store looks to your site’s visitors: its colour, grid and cards, the banner and its countdown, the “Order now” form with its fields, badges and questions — all with a live preview nobody sees before you publish. The lesson then follows what visitors actually see: the store page, the product page, the cart and checkout, the order page and tracking, the store sections you place on any page of your site, and the products that appear on their own under your courses and in the student’s account. The example: Adel Mansouri, a wedding photographer selling a printed guide, presets and a course; the same steps serve a teacher selling books or a trainer selling tools.

  • About 15 minutes
  • 9 steps

Who can do it: “Appearance” needs the “Store and products” permission. Store sections on the site’s pages need “Edit the public site”. The store itself is open to every visitor of your site, who orders without an account.

Open in your dashboard

In 9 steps

  1. 1In “Store” → “Appearance”: a live preview on desktop and phone, and the store’s colour, grid, cards and corners.
  2. 2The “Banner” with its title, button and a real countdown, the “Categories bar”, and “Only … left” and “… sold” on cards.
  3. 3“Buy button text”, the sticky phone bar, then the “Form fields”: what is fixed and what you choose.
  4. 4Countdown, “Trust badges” and “FAQ”, then “Publish changes”: nothing shows before it.
Show all
  1. 5The store page on your site: search, sorting, categories and teachers, cards and the pack.
  2. 6The product page: “Order now” with cash on delivery on the page itself for shipped goods, “Buy now” for what is paid first, then the tabs and “You may also like”.
  3. 7The cart, then a one-page “Checkout” with the “Order summary”, then the order page and “Track your order” without an account.
  4. 8In the site editor, the “Store” group of “Add a section”: five sections for any page.
  5. 9Under every course “Goes with this course” appears by itself; in the student’s account, “Store” opens with “For your course”.

Before you start

  • An open store in “Store settings” with at least one published product: the preview shows your real products, and examples until you have some.
  • Your site’s colour and font set the way you want in “Public site”: the store inherits them to start.
  • For a banner with a countdown: an offer with an end date in “Offers and discounts”.
  1. Step 1 of 9

    Open “Appearance”: colour, grid, card

    In “Store”, open “Appearance” (the “People and numbers” group): short choices on one side and, on the other, the “Live preview” (“Your store as a visitor sees it”), changing with every click, on “Desktop” or “Phone”. Above the choices sit two tabs: “Storefront” and “Product page and form”. The first line is the colour: “Inherits the academy’s colours and font” is on to start, so the store wears your site’s colour and follows it on its own. Adel Mansouri’s site is black and white, but he wants his store in his brand’s burgundy: he turns the switch off, the line becomes “A colour of its own”, and he picks the shade in “Store colour” (“Its contrast is adjusted so white text stays readable.”); the font stays the site’s. Then “Grid”: “2 columns”, “3 columns” or “4 columns” (“On phones: always 2 columns.”), “Card style”: “Large photo” (square, for clothes and tools), “Book cover” (portrait, for books and files) or “Compact”, and “Corners”: “Sharp”, “Soft” or “Round”. Adel takes “3 columns” and “Book cover”, because his printed guide has a portrait cover.

    On screenStoreAppearanceLive previewDesktopPhoneStorefrontProduct page and formInherits the academy’s colours and fontA colour of its ownStore colourGridCard styleBook coverCorners

    TipThe preview shows your best-selling published products (up to 8); before your first product it shows examples. Every change saves itself as a draft: “Saving…”, then “Draft · saved” beside the title.

    Heads-up“Compact” shows a smaller photo and the title on one line, without the seller or the kind-and-delivery line: more products per screen, less to read about each. The grid you pick applies on wide screens; on phones it is always two columns.

  2. Step 2 of 9

    The banner and its countdown, categories, and what a card says

    The “Banner” is a strip in the store’s colour at the top of the store page: switch it on, then write the “Title”, the “Line under it”, the “Button text” and the “Link” (a store path like /store/wedding-guide or an https link; left empty, the button goes to the offer’s product when there is just one, otherwise to the store). Under “Follows an offer”, pick an offer from “Offers and discounts” instead of “No offer”: “Show the offer’s countdown” appears, and the store writes “Offer ends in” with days, hours, minutes and seconds down to the offer’s real end, never restarting. Adel writes “Wedding season: the guide at a special price” and ties it to his offer that ends this weekend; with no button text, the store writes “See the offer”. The “Categories bar” puts “All” and your categories, each with its number of products, above the grid (categories are created in “Products”). “Show stock left” writes “Only … left” on a card once 5 or fewer remain, and “Show units sold” writes “… sold” only after the first 10 real sales: no invented numbers.

    On screenBannerTitleLine under itButton textLinkFollows an offerNo offerShow the offer’s countdownOffer ends inSee the offerCategories barShow stock leftShow units soldOnly … left

    TipA flash offer you asked a banner for in “Offers and discounts” shows at the top of the store with its countdown even when the “Banner” is off here, and disappears when it ends. The countdown only shows for an offer with an end date.

    Heads-upA banner that follows an offer disappears by itself when that offer ends, even with a title; a “No offer” banner with a title stays up until you switch it off. “Icons” puts before each category the symbol of what it mostly sells, and “Photos” turns them into a row of round pictures, the first from its products.

  3. Step 3 of 9

    The buy button and the “Order now” form

    “Buy button text” names the order button on the product page and in the phone bar: “Order now” (to start), “Buy now”, “Reserve your copy” or “Other text” you write yourself (24 characters at most). “Sticky buy bar on phones” keeps the price and that button at the bottom of the screen wherever the visitor scrolls. In the “Product page and form” tab, the “Form fields”: “Name and phone” and “Wilaya and delivery type” are “Fixed”, because the carrier needs them; “Commune” is “Required” or “Optional”, and “Email” “Required”, “Optional” or “Hidden” (useful to send the invoice and files). Two switches: “Note for the teacher” (on the page, the link “+ Add a note for the seller”) and “Quantity” (a counter beside the total). Adel keeps email “Optional”: the phone is enough for the carrier. And “Form position on phones” chooses between “Top of the page” and “After the photos”.

    On screenBuy button textOrder nowBuy nowReserve your copyOther textSticky buy bar on phonesForm fieldsFixedCommuneEmailHiddenNote for the teacherQuantityForm position on phones

    TipFiles, courses and subscriptions don’t take this form: they are paid before they open, with a button like “Buy now” that leads to checkout.

    Heads-up“Top of the page” and “After the photos” only change the preview for now: on phones, the published product page shows the photos first, then the price and the form. The sticky bar makes up for it: the button is under the thumb from the top of the page.

  4. Step 4 of 9

    Countdown, badges and questions, then “Publish changes”

    “Offer countdown”: “Top bar”, “Under the price” or “No countdown”. “Trust badges”: keep what is true for you — “Cash on delivery”, “69 wilayas”, “…-day exchange” (the days come from returns in “Store settings”), “Open the parcel before paying” — and one badge in your own words in “Another badge”; Adel writes “Premium colour print”. They make a strip at the bottom of the store page (four at most, and “Instant download for digital files” is added by itself when you sell files), and on the product page small ticks right under the buy button, three at most, the parcel ones only for shipped goods. The “FAQ” is written by the switch “Written from the delivery and returns settings”, so it never contradicts your settings; turn it off to write your own, up to 8, with “Add a question”; they show on every product page in the “Questions” tab. All of this is a draft (“Draft · saved”) and visitors keep seeing the previous look until “Publish changes”, which shows “The new look is live”; “Discard the draft” goes back to what was last published.

    On screenOffer countdownTop barUnder the priceNo countdownTrust badgesOpen the parcel before payingAnother badgeFAQWritten from the delivery and returns settingsAdd a questionDraft · savedPublish changesDiscard the draftThe new look is live

    TipBadges follow a fixed order where yours comes last: with everything on, “Another badge” may not show, and the product page stops at the third. The exchange badge stays hidden while the return days are zero.

    Heads-up“Offer countdown” shows on the product page only for a product under a running offer with an end date: “Top bar” puts the offer’s name, “Offer ends in” and the numbers in a bar under the price, “Under the price” writes it as one line. An offer whose countdown you turned off in “Offers and discounts” reads “… · limited time”, with no numbers, and “No countdown” hides both.

  5. Step 5 of 9

    The store page on your site

    The store is a page of your academy’s site, at …/store, with your site’s header, footer and WhatsApp button, in your colour and corners. At the top the banner, then the store’s name and number of products, with “Search the store” and a sort menu as soon as there is more than one product: “Most popular” (to start), “Newest”, “Price: low to high”, “Price: high to low”. Below, category buttons starting with “All”, each with its count; with no categories and at least two kinds, kind buttons take their place (“Shipped products”, “Digital files”…). In a school where teachers sell, the “From our teachers” row with their photos: picking a teacher shows the link “…'s page in the store →” to their page …/store/t/… (who they are, “Their courses”, their products only, then “The whole store →”). A store with 8 or more products, 3 of them really sold, opens with a “Most ordered” row (4 at most), then “All products”; packs come first in the grid. Each card: the photo and at most one honest ribbon (the discount percentage, “Only … left”, “New”, “Pre-order” or “Sold out”), the seller only in a store with several teachers, the title, then a line saying how it arrives: “Arrives in 2–4 days” for shipped goods, “Digital · instant download” for a file, “Course · instant access” for a course, with “… sold” if you allow it. Then the price struck against the one before, and a small + button that puts a simple product in the cart in one press. A pack shows what’s inside, “Save … DZD” and the “Order the pack” button. A store with no published product says “The store is getting ready”; a closed store says “…'s store is closed for now” and sends visitors back to your site.

    On screenSearch the storeMost popularNewestPrice: low to highPrice: high to lowAllFrom our teachers…'s page in the store →Their coursesThe whole store →All productsOnly … leftNewArrives in 2–4 daysDigital · instant downloadOrder the packThe store is getting ready

    TipTurn the cart off in “Store settings” and the + button leaves the cards; ordering stays possible from the product page.

  6. Step 6 of 9

    The product page: “Order now” on the page itself, or “Buy now”

    A product page starts with the photos (full width on phones); beside them on desktop, a column that stays in view: the title, the reviews line when there are any (the share who “recommend it” and the number of reviews, which jumps to them), the price struck against the one before with “Save … DZD” from a 5% discount, “Only … left” under 6 pieces, then the options and the arrival line: “Delivery to your wilaya from … DZD · 2–4 days” (the cheapest rate in your table) for shipped goods, or “Opens as soon as you pay · instant download” for a file. Then the way to buy for its kind. Anything shipped gets the “Order now, pay on delivery” form right on the page, “No account · one minute”: “Full name”, “Phone number”, “Wilaya” and commune, then “Delivery”, “Home delivery” or “Courier's pickup desk”, each price written beside it before the choice, and the “Total” moving on its own. Adel’s guide at 1,600 DZD to the Oran pickup desk at 400 DZD: 2,000 DZD in total, a button reading “Order now” followed by “Cash on delivery”, and under it “Nothing to pay now. We'll call you to confirm before we ship.”. Files, courses and subscriptions are paid first: the “Buy now” button goes to checkout, with “Files aren't cash on delivery: they unlock the moment you pay, in your name.”, like Adel’s presets at 1,200 DZD; beside both buttons, “Add to cart” for anyone gathering several products. On phones a bar stays at the bottom with the button and the price (Order now · 1,600 DZD); it opens the same form as a sheet from below and steps aside while the form is on screen. A sold-out product shows “Notify me when available”. Under the buy button sit the trust badges; under the photos and the column, a row of tabs showing only what has content: “Description” (with the linked course), “Details” (the highlights, “What you get” for files, the size guide), “Delivery & returns” from your policies, “Questions” and “Buyer reviews (…)”. Then “Buy them together” when the product has such an offer, and “You may also like”: 4 products from the same category first, then the same kind, never sold-out ones.

    On screenOrder now, pay on deliveryNo account · one minuteFull namePhone numberWilayaDeliveryHome deliveryCourier's pickup deskTotalCash on deliveryBuy nowAdd to cartNotify me when availableSave … DZDDelivery to your wilaya from … DZD · 2–4 daysOpens as soon as you pay · instant downloadDescriptionDetailsDelivery & returnsQuestionsYou may also like

    TipWhat the buyer typed stays for the same session: a second product or the checkout finds their name, phone and wilaya already filled in. And reviews have no stars: someone who received their order answers on its page “I recommend it” or “I don't recommend it”, with words to pick and an optional sentence; the review shows in its tab with their first name and last initial.

  7. Step 7 of 9

    Cart and checkout, then the order page and tracking

    Whatever goes in the cart shows as a floating button at the bottom (“Your cart”, the amount and “View cart”) that opens the cart: “In the parcel · pay on delivery” and “Digital · pay now, instant access”, the discount code, “Payment methods in this store”, then “Checkout”. Checkout is one page in numbered sections: “Your details” (name and phone), then “Delivery” when something ships, then “Payment”, and beside them (at the top on phones) the “Order summary”: each line marked “In the parcel” or “Instant download”, “Have a discount code?” and the “Total”. An order paid entirely at the door gets the “Cash on delivery” card (“You pay … DZD in cash when the parcel arrives”). What is paid now goes by “BaridiMob or CCP” (then a receipt photo), by “CIB or Edahabia card” when card payment is ready, or “Pay everything on delivery” if you allow it; a mixed order is said in one sentence: “You pay … DZD now for what opens right away, and … DZD when the parcel arrives.”. Under the “Confirm order” button, three reassuring lines such as “Nothing to pay now” and “We call you to confirm before shipping”. Then the order page: “Thank you, … — we've got your order” with its number (for example #A-1048), “We'll call you within a few hours to confirm your order”, “What happens next” step by step, and “Keep your order number — it lets you track it without an account”. While the order isn’t confirmed and nothing has shipped, the buyer finds “Cancel the order” under it, with a reason to pick. From “Track order” they reach “Track your order”: the order number and their phone are enough to see its state in plain words (“On its way to you”…) and the carrier’s “Parcel journey”, with “Message the academy” and “Call us”.

    On screenYour cartView cartPayment methods in this storeCheckoutYour detailsDeliveryPaymentOrder summaryCash on deliveryBaridiMob or CCPCIB or Edahabia cardConfirm orderThank you, … — we've got your orderWhat happens nextCancel the orderTrack your order

    TipThe order page opens on the device the order was placed from, or from the buyer’s account; from another device they track it with the order number and phone.

    Heads-upAll of this is for a visitor in Algeria. A visitor from a country where you sell in another currency sees prices in that currency, with no cash-on-delivery form and no delivery: they pay by PayPal or bank transfer, and shipped goods can’t be ordered from abroad. The details are in the lesson on selling abroad.

  8. Step 8 of 9

    Store sections on any page of your site

    In the “Public site” editor, open “Add a section”: the “Store” group has five sections that take their products, prices and offers from your store. “Store products” is a grid of the store’s own cards; in “What it shows” pick “Most ordered” or “Newest” (both update on their own), “Shipped products”, “Digital files” or “Products I pick”, then “Number of products” from 2 to 12, “Columns” (“On phones, always two cards per row.”) and the “Whole store” link switch. “Featured product” is one product, large, with its price and running offer, plus “Different title (optional)”, “Primary button text” and “Layout”: “Text + image” or “Centred card”; its button opens the product page, and Adel puts it on his site’s home page for “The couples' wedding photo guide”. “The pack” shows one pack, what’s inside and “Save … DZD”. “Order now” for a product places a shipped product’s photo (or a pack’s) with the real order form beside it; in the editor you only see its look (“The real form works on the published site.”). And the “Offer bar” is one line with the running offer and its countdown: an empty “Text” takes the offer’s name, and visitors don’t see it when no offer is running.

    On screenPublic siteAdd a sectionStoreStore productsWhat it showsProducts I pickNumber of productsFeatured productDifferent title (optional)LayoutText + imageThe pack“Order now” for a productOffer bar

    TipEvery section except the “Offer bar” has a “Background”: “Light”, “Warm”, “Neutral” or “Dark”. A product not yet published shows in the picker as “Not published — visitors won't see it until it is”.

    Heads-upWhen the store is closed, visitors don’t see these sections at all, and in the editor the section says “The store is closed — turn it on in “Store › Settings” so visitors can see your products.”.

  9. Step 9 of 9

    Under your course “Goes with this course”, and in the student’s account “Store”

    On every course page, right after its cover, the “Goes with this course” section appears by itself (“Picked by the teacher for this course's students · added to the same cart”): the products you linked to this course from the product page (up to 8), each with its picture, price and a + button when it adds in one press, then the first pack that holds the course: “Or get everything: …” with its price and the “Order the pack” button, a short line such as “Courses and files unlock as soon as you pay”, and the link “The whole store →”. Nothing to add in the editor: with no linked product and no pack, or with the store closed, the section never shows. Adel linked “Wedding presets” to his course “Wedding photography from scratch”, so they show under its cover, followed by the “Wedding photographer pack” that holds the course and the presets. In the student’s account, “Store” is a store that knows them: the “For your course: …” shelf first for each course they study, with the same links and packs, then “From the academy’s teachers” in a school, subscriptions and “From the academy”. The student price is “Applied on its own at checkout, no code needed”, what they own is marked “Yours”, and their orders and files are in “My orders” and “My library”.

    On screenGoes with this coursePicked by the teacher for this course's students · added to the same cartOr get everything: …Order the packThe whole store →Courses and files unlock as soon as you payStoreFor your courseFor your course: …From the academy’s teachersApplied on its own at checkout, no code neededYoursMy ordersMy library

    TipThe section loads after the page, so it never slows the course down, and its prices and offers are the store’s own.

Did this lesson help?
Next lessonCustomers and reportsStart the lesson

After the look

Questions

Do visitors see my “Appearance” changes right away?

No. Every change saves itself as a draft, and visitors keep seeing the previous look until “Publish changes”. “Discard the draft” goes back to what was last published.

Why is there no countdown in my store?

The countdown follows a real offer with an end date: tie the “Banner” to an offer from “Offers and discounts” and turn on “Show the offer’s countdown”, or add the “Offer bar” section. Without such an offer the preview says so: “No offer with an end is running, so no countdown will show in the store.”

Does a customer in France see the price in their currency?

Yes, if you sell in euros from “Selling abroad” in “Settings”: they see the store’s prices in euros and pay by PayPal or bank transfer. Shipped goods stay for Algeria only, and their card reads “Not shipped outside Algeria”. With no currency for them, they see the store in dinars, as before.

How do I put a product on my site’s home page?

In “Public site”, open “Add a section” → “Store” → “Featured product”, then pick the product in the side panel. It shows with its price and running offer, as in the store, and its button opens the product page. For the order form on the page itself, use “Order now” for a product.

Why doesn’t “Goes with this course” show under my course?

Because no product is linked to the course and no pack holds it, or because the store is closed. Link the product to the course from the product page: the section then appears on its own after the course’s cover.

Can the customer cancel an order themselves?

Yes, while it isn’t confirmed and nothing has shipped: under the order page, “Cancel the order”, with a reason to pick. After that the link is gone, and they message the academy.

Why doesn’t the “Most ordered” row show in my store?

It shows when the store has 8 or more published products, at least 3 of them really sold, and while the visitor hasn’t searched or picked a category, kind or teacher. No invented numbers: the order comes from real sales.

Previous lessonOffers and coupons