# Rizel theme documentation Rizel is a Shopify theme by **Rizenyte Web**. Use this guide to install your theme, build your storefront and understand the controls available in **version 1.0.0**. Choose your products, images and wording in Shopify, then use Rizel’s sections to arrange them. You can preview your changes before making them visible to customers. For theme help, email [service@rizenyteweb.com](mailto:service@rizenyteweb.com). ## Contents - [Install, back up, preview and publish](#install-back-up-preview-and-publish) - [Understand the theme editor and templates](#understand-the-theme-editor-and-templates) - [Branding, fonts, colors and buttons](#branding-fonts-colors-and-buttons) - [Header, navigation and footer](#header-navigation-and-footer) - [Banners, announcements and sale countdowns](#banners-announcements-and-sale-countdowns) - [Product and collection display sections](#product-and-collection-display-sections) - [Images, feature icons, FAQs and number counters](#images-feature-icons-faqs-and-number-counters) - [Collections and collection shortcuts](#collections-and-collection-shortcuts) - [Products, quick-add, cart and checkout](#products-quick-add-cart-and-checkout) - [Search and product recommendations](#search-and-product-recommendations) - [Custom, Newsletter and Celebration popups](#custom-newsletter-and-celebration-popups) - [Pages and the contact form](#pages-and-the-contact-form) - [Blogs, articles and special pages](#blogs-articles-and-special-pages) - [Troubleshooting FAQs](#troubleshooting-faqs) - [Safe updates and version notes](#safe-updates-and-version-notes) - [Support and licensing](#support-and-licensing) ## Install, back up, preview and publish ### Install your ZIP 1. In Shopify admin, open **Online Store → Themes**. 2. In **Draft themes**, choose **Import theme → Upload zip file**. 3. Choose your Rizel ZIP and select **Upload**. Upload the ZIP itself; you do not need to unzip it first. 4. Find the uploaded theme and select **Edit theme** to open the editor. Uploading adds a draft theme. It does not replace your published theme. Check that your Shopify plan supports the Online Store theme features you need. See [Shopify’s theme installation guide](https://help.shopify.com/en/manual/online-store/themes/adding-themes). ### Make a backup Before changing an existing storefront, open its theme actions menu and choose **Duplicate**. Give the copy a recognizable name, such as “Rizel backup before launch.” Work on a draft copy when trying a substantial change. [Shopify’s duplication guide](https://help.shopify.com/en/manual/online-store/themes/managing-themes/duplicating-themes) explains the backup process. For a separate theme backup, choose **Download theme file** from the actions menu. Shopify emails the ZIP to the address associated with your staff login. A theme download does not include products, collections, menus, pages, blog posts or files stored in **Content → Files**; retain those separately when moving stores. See [downloading a theme](https://help.shopify.com/en/manual/online-store/themes/managing-themes/downloading-themes). ### Preview and prepare Open the theme’s actions menu and choose **Preview** to check the draft storefront. Use the editor’s desktop and mobile views too. Replace example wording, choose your own images and connect real products, collections and menus. Check links, variants, sold-out products, the cart and any active promotion before launch. ### Publish when ready Find Rizel in **Draft themes** and choose **Publish**, or use **Publish** in the editor’s top bar and confirm. Only one theme is published at a time. Your previous theme stays in Draft themes, ready to publish again if needed. Publishing a theme does not remove password protection. See [Shopify’s publishing instructions](https://help.shopify.com/en/manual/online-store/themes/managing-themes/publishing-themes). ## Understand the theme editor and templates Open **Edit theme** beside Rizel. Use the page selector at the top to choose **Home page**, a product, collection, page, blog or another supported template. Choose a real resource to preview its content. **Sections** are the main areas of a page. **Blocks** are items inside a section, such as a slide, question or menu. Select an item to change its settings. Use **Add section** or **Add block** where offered, drag items to reorder them, use the visibility control to hide them, or remove optional items. Save your changes. Header and footer areas are shared across the main storefront. Some settings appear only after you enable the feature they control. For example, autoplay timing appears with autoplay enabled. Hidden settings retain their saved values. A collection picker may remain visible even when another setting determines whether it is used; follow its help text. ### Shared templates and individual content A template controls the layout of every resource assigned to it. Editing a shared product or page template affects all products or pages using that template. Selecting another page in the preview does not create an independent layout. Keep titles, descriptions, products, collections, page content and articles in their Shopify admin records. For a different overall layout, use **Create template** in the editor, base it on the appropriate existing template, and assign it using **Theme template** in the resource’s admin record. Assignment uses templates available in your published theme. See [Shopify’s template guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates). Rizel also supports page-specific blocks inside a shared page template: each **Rizel page elements** block has **Show on page**. This targets the block’s content while the section’s layout and colors remain shared. The contact form has a separate **Show on this page** control. ## Branding, fonts, colors and buttons ### Logos and store names In **Rizel header area → Rizel site header**, choose **Logo**. Without an image, **Fallback brand text** is used, then your Shopify store name. **Menu drawer logo** controls the mobile menu’s branding separately. In **Rizel footer area → Rizel footer**, turn on **Show footer logo or store name**, choose **Footer logo** and optionally **Mobile footer logo**. **Custom fallback text** replaces the store name when no logo is used. Choose **Logo treatment**: **Automatic for footer style**, **Original colors**, **White** or **Black**. Adjust desktop and mobile logo widths separately. The **Large bottom logo** block can display **Uploaded image**, **Custom text** or **Store name**. It has its own image uploads, color treatment, text color, weight, size, letter spacing, line height, alignment and spacing. Its large-text font is independent from ordinary footer text. Popup, password and gift-card branding is optional through **Show logo or store name** in their respective controls. Upload the logo there when you want a specific image. ### Favicon Open **Theme settings → Favicon → Favicon** and upload a square PNG of at least **512 × 512 pixels**. This upload supplies browser icons, touch icons and Windows tile imagery on storefront, password and gift-card layouts. No placeholder brand icon is selected automatically. Browser caches can delay a changed icon; check a fresh browser session and actual devices. ### All font controls Open **Theme settings → Typography → Fonts**. Each of these is a separate Shopify font picker: | Editor label | What it styles | | --- | --- | | Body text | General text and purchase-button labels | | Headings | General section headings | | Product cards | Product-card text | | Product page title | The product-page title | | Header and menu | Navigation text | | Footer text | Ordinary footer text | | Large bottom store name | Large text in the footer’s bottom logo block | Choose from the fonts available in Shopify’s picker. Rizel does not provide a custom font-file upload setting. Section controls also adjust text sizes, weights, capitalization or letter spacing where listed. **Rizel number counters → Number font** offers **Theme heading font** or **Theme body font**. Policy and special-page text follow the theme’s heading and body fonts. ### Direct colors Choose a section’s **Colors** settings or its named color block. These pickers apply directly. Background, text, cards, borders, price text and buttons can be styled independently wherever the section exposes those controls. The starting colors are black, burgundy and white, with gray supporting surfaces. The component settings in **Theme settings** are **Header appearance**, **Cart drawer buttons**, **Header menu drawer**, **Header search field**, **Header search product cards** and **Product popup**. These control their named components. For example, product-page colors and Product popup colors are independent. Choose readable foreground/background pairs. Check links, keyboard focus, hover and disabled buttons after changing colors. An appearance block also contains spacing in some sections; keep it when you want to retain those adjustments. ### Buttons, hover and disabled states Use the button controls in the section you are editing. **Filled** and **Outline** choices are available in the header button, contact form, popups and several special pages; shapes or corners vary by component. On password and 404 pages, an outline button uses **Button background** for its outline and normal text, then fills on hover. In **Rizel product page → Purchase buttons**, **Button height** ranges from **44–54 px**, and **Button corners** from **0–28 px**. Separate colors style **Add button**, **Add button text**, **Add button hover**, **Add button hover text**, and the corresponding **Buy now** controls. Defaults are black Add to cart with burgundy hover, and burgundy unbranded Buy it now with black hover. In **Theme settings → Product popup**, use **Purchase button height**, **Purchase button corners**, and the **Add to cart button** and **Buy it now button** color groups. Product-page and popup quantity controls each expose independent **Quantity minus** and **Quantity plus** background, icon and hover colors. **Disabled quantity minus button** and **Disabled quantity minus icon** apply at the minimum quantity of one; **Muted text and disabled buttons** controls disabled purchase styling. Listing sections expose sold-out button colors separately. Disabled controls indicate an unavailable action; changing their colors does not make stock available. Branded accelerated-checkout names and colors are supplied by Shopify and the payment provider. ### Global layout and inputs In **Theme settings → Layout**, choose **Page width: Narrow / Wide** and adjust **Page margin** from **10–100 px**. Many Rizel sections have independent maximum-width and spacing controls. In **Theme settings → Inputs**, **Input corner radius** ranges from **0–10 px**; components with their own field or button sizing can use their own controls. ## Header, navigation and footer ### Rizel site header Find this in **Rizel header area**. Select **Main menu** to use a Shopify menu. Manage menu items and nested links in **Content → Menus** in Shopify admin. The theme displays the selected menu; it does not create menu items for you. Choose **Header behavior**: - **Not sticky**: the header scrolls with the page. - **Appear on scroll back**: it returns when the visitor scrolls upward. - **Sticky**: it remains at the top while scrolling. For an optional desktop action, enable **Show desktop button**, then set **Header button text**, **Desktop button link**, **Header button style: Filled / Outline**, and **Header button shape: Pill / Rounded / Square**. In **Theme settings → Header appearance**, adjust desktop/mobile height, logo width, menu and submenu text size, submenu minimum width and desktop button colors. The header opens the menu, search and cart panels. Country/language options depend on the Shopify localization options available to your store. Account links depend on your store’s customer-account settings. ### Mobile menu image cards In **Rizel site header**, enable **Show mobile menu image cards** and add up to **four Mobile menu image card** blocks. Each has **Image**, **Label**, **Collection** and **Link (overrides collection)**. Reorder or delete blocks to arrange the cards. Without an uploaded image, a selected collection’s image is used. A blank label uses its collection title, then a generic category label. The custom link takes priority over the collection link. Choose a destination and meaningful label for every card; a card without a destination does not become a working link. In **Theme settings → Header menu drawer**, adjust drawer, link, divider, arrow, card and social-icon colors and sizes. **Match submenu colors to main links** uses the main link colors; turn it off to use **Custom submenu text** and **Custom submenu hover and active**. **Show footer social links in menu** uses the social links configured in Rizel’s footer. ### Rizel footer Find this in **Rizel footer area**. Set the maximum width, column gap and desktop/mobile padding. Add and reorder these blocks, up to **32 blocks in total**: - **Menu**: heading and a Shopify menu. - **Text**: heading and supporting text. - **Contact**: phone, email, WhatsApp link/label and address; one Contact block. - **Social link**: **WhatsApp / Instagram / Facebook**, a link and accessibility label. Add a separate block for each link. - **Large bottom logo**: optional large image or text; one block. - **Footer colors**: direct footer, link/hover, social/hover, newsletter-field and email-button colors; one block. Enable **Show newsletter** to display the native Shopify email signup. Configure **Newsletter heading**, **Newsletter text**, **Email placeholder** and **Submit button accessibility label**. Signup captures subscribers through Shopify; it does not send a marketing campaign for you. Use **Show social icons**, **Show copyright**, **Show policy links** and **Show payment icons** as needed. Payment icons reflect payment types enabled in Shopify; displaying an icon does not enable that payment method. Create policy wording in **Settings → Policies** so policy links have content. **Rizel basic footer** is a simpler alternative with **Menu**, **Show payment icons**, **Section text** and **Section background**. It includes the store copyright and Shopify credit, and has no configurable content blocks. The supplied main footer group uses **Rizel footer**. ## Banners, announcements and sale countdowns ### Rizel hero carousel Choose **Add section → Rizel hero carousel** on a supported template. Enable **Show section**, then add up to **10 Banner slide** blocks. For each slide, select **Desktop image**, optionally **Mobile image**, and a **Banner link**. **Open link in new tab** is optional; **Link description** should explain the destination. The editor recommends **1600 × 600 px** desktop images and **1200 × 1200 px** mobile images. These are starting sizes, not upload requirements. If one upload is missing, the other supplies both views. With neither image, a placeholder appears. Choose **Desktop aspect ratio**: **Uploaded image size / Wide 3:1 / Reference 8:3 / Wide 2:1 / Landscape 16:9 / Landscape 4:3**. **Mobile aspect ratio** offers **Uploaded image size / Square 1:1 / Portrait 4:5 / Portrait 3:4 / Tall 2:3 / Landscape 16:9**. **Cover** fills the frame and can crop the image; **Contain** preserves the whole image and can leave space. Adjust each slide’s desktop/mobile image position to **Left / Center / Right / Top / Bottom**. Each slide has optional **Small text**, **Heading**, **Text** and **Button label**. The button uses the Banner link. Choose from nine **Content position** choices, from **Top left** to **Bottom right**, and set **Text alignment: Left / Center / Right**. Edit slide text, button and overlay colors; **Overlay opacity** ranges from **0–80%**. Keep important wording in the content fields so it remains readable and accessible across screen sizes. Set **Full width**, maximum width, corners and desktop/mobile spacing. Enable **Auto-rotate slides** and choose **Time per slide** from **3–30 seconds**. Choose **Animation: Fade / Soft slide / Fade and zoom** and **Animation duration** from **200–1200 ms**. **Pause on hover**, **Allow swipe and drag**, **Show arrows** and **Show pagination** control browsing. **Pagination: Dots / Counter / None** affects slide navigation only. A Counter shows the slide position, not a sale timer or store statistic. Autoplay stops for reduced-motion visitors and while the carousel contains keyboard focus. ### Rizel announcement bar Add **Rizel announcement bar** in the header area and enable **Show marquee bar**. Add up to **eight Announcement** blocks with **Text** and an **Optional link**. Choose **Scroll direction: Move left / Move right** and **Loop duration** from **8–80 seconds**; a lower duration moves faster. **Pause on hover or focus**, separators, capitalization, weight, letter spacing, message spacing, heights and desktop/mobile text sizes are adjustable. Use the direct bar, text and separator colors. Write short, factual messages and verify their links. ### Rizel sale countdown Find **Rizel header area → Rizel sale countdown**. This banner shows an offer alongside time remaining until a fixed sale deadline. Turn on **Show offer bar** and configure **Text before highlight**, **Highlighted text**, **Text after highlight** and an **Optional bar link**. Replace example offers with your real promotion. Open its **Sale schedule** block. Only **one Sale schedule** and **one Highlight appearance** block are supported. If you remove the schedule block, add it again to configure the deadline. 1. Choose **Time format: 24-hour (00–23) / 12-hour (AM/PM)**. 2. Under **Sale end**, enter **Year**, choose **Month** and **Day**, then set the appropriate hour, **Minute** and **Second**. 3. For a future opening, enable **Schedule a start date and time** and enter the same fields under **Sale start**. Otherwise, the valid countdown appears immediately. 4. In 12-hour mode, set **Hour (12-hour clock)** and **AM or PM**. **12 AM is midnight; 12 PM is noon.** After switching formats, recheck both start and end hours: each format keeps its own saved hour values. Dates automatically use your **Shopify store’s time zone**, including the applicable daylight-saving offset. There is no separate timezone selector. All visitors count down to the same instant. Use a valid calendar date and an end later than the scheduled start. Skipped daylight-saving times are rejected; repeated hours follow Shopify’s date interpretation. Before a scheduled start, the banner stays hidden and appears automatically when the start arrives without a reload. Unconfigured, invalid and expired schedules stay hidden; explanatory notes appear only in the editor. At expiry the banner hides rather than restarting. A new schedule requires a real end year. The countdown shows elapsed-duration units: choosing 12-hour entry does not limit the remaining-hours display to twelve. Choose **Timer position: After offer text / Before offer text** and **Content alignment: Left / Center / Right**. **Show days box**, **Show seconds box**, **Show unit labels**, editable unit labels and **Timer separator** determine the display. With days hidden, hours can represent the total remaining hours. Adjust bar heights, padding, gaps, weights, text sizes, timer dimensions and corners. Narrow mobile screens can wrap the offer and timer into two rows. Turn on **Show highlighted text box**, directly below **Highlighted text**, to put the offer highlight in a timer-style box. In **Highlight appearance**, set **Highlight background** and **Badge text**. With the box off, the section’s **Highlighted text** color applies. Empty highlighted wording creates no box. **The timer does not create or schedule Shopify discounts.** Create the actual offer in Shopify admin and align its dates and eligibility with the banner. The countdown and the animated number-counter section are separate features. ## Product and collection display sections Add these sections to a supported page template. Product titles, images, prices, inventory and collections come from Shopify. Select real products and collections before publishing; placeholder cards are examples rather than purchasable products. ### Rizel featured collection Choose **Collection** and **Maximum products** from **2–12**. Configure the heading/subheading, alignment, desktop/mobile heading sizes, **Desktop products in viewport** from **2–6**, **Mobile products in viewport** from **1–3**, maximum card width, gaps, width and **Show arrow buttons**. **Show View all button** links to the selected collection. There is one of each design block: **Product cards**, **Card design**, **Add to cart**, **Colors** and **Section spacing**. Open Product cards to choose **Card style: Light card with price and cart / Classic full-width button / Compact dark card** and **Image ratio: Square / Portrait / Adapt to image**. **Fill product image frame** controls cropping. **Show second image on hover** needs another product media image/preview. Choose whether to show the product name, description, mobile description, price, compare-at price, currency code and discount percentage. **Product eyebrow** offers **Collection name / Store name / Product vendor / Product type / Custom text / None**. Set description limits/lines, name limits/sizes, text alignment, corners and spacing. **Discount badge position** offers **Beside price / On image / Both**; discounts shown here come from price and compare-at-price data. Card design controls the light card’s inset, outline and shadow, or the compact card’s corners, inset, bag-button size and colors. Add to cart controls visibility, labels, dimensions and **Add first available variant directly**. Leave that switch off when customers must choose options; turning it on adds the first available variant of an optioned product. Colors includes regular, hover and sold-out buttons, prices, sale badges, arrows and View all. Section spacing sets desktop/mobile padding. These carousels browse products; they do not auto-rotate hero banners. ### Rizel latest products Select **Collection** and **Product order: Newest first / Collection order**. Newest first uses publication date, not a sales or popularity ranking. Choose **Maximum products on desktop** from **4–8**, **Maximum products on mobile** from **4–6**, desktop rows of **2–4** products and mobile rows of **1 / 2**. The desktop limit determines which products are available to the section, so keep the mobile limit at or below it when you want the configured mobile total. Set the heading, View all button, width, card width and gaps. Its **Product cards**, **Card design**, **Add to cart**, **Colors** and **Section spacing** blocks work similarly to the featured collection, with the controls shown for this grid. It offers image ratio/fit, eyebrow choice, description limit, compare-at price, currency code, discount badge, product-name sizes and card/image corners. Do not expect the carousel-only second-image or pagination controls in this section. ### Rizel video product reel Add up to **four Video + product** blocks. Choose **Video upload**, **Cover image or placeholder**, **Linked product** and an **Optional product label** for each. This uses Shopify-hosted video uploads; there is no external video-URL field in these blocks. Without a video, a cover or placeholder is shown; without a linked product, it cannot open a product destination. Choose **Video shape: Portrait 9:16 / Portrait 4:5 / Portrait 3:4 / Square**, **Video fit: Fill / Fit**, cards visible, gaps, width and carousel arrows. Desktop visibility ranges from **2–4** cards; mobile choices are **1 / 1.25 / 1.5 / 2 / 2.5 / 3 / 4**. Fractional choices show part of the next card. Configure **Autoplay visible videos**, **Loop videos**, **Show native video controls**, **Show play and pause button**, and **Pause other videos after manual play**. Autoplay uses muted videos and depends on browser permissions; it is disabled in the editor and for reduced motion. **Open product when video is clicked** disables the video controls and play button, so choose the interaction you need. The product area links to the selected product. Choose which product details, images and prices to show. Adjust product typography, padding, card borders, corners and shadows. One **Video brand overlay** block adds a logo or text at **Top left / Top right**, with image treatment and separate desktop/mobile sizing/spacing. One **Colors and spacing** block styles the section, cards, text, play button, arrows and padding. ### Rizel circle categories Add up to **20 Image link** blocks. Set **Circle image**, **Image description**, **Title below image**, **Link** and an **Optional collection fallback**. A custom link overrides the collection. A selected collection fills missing image, title and destination. Without a collection, leaving the title blank gives an image-only tile. Add a useful destination to make the tile a shopping shortcut. Set heading/alignment, desktop/mobile circle counts and maximum sizes, gaps, borders, colors, text sizes/weight and padding. **Enable desktop carousel** and **Enable mobile carousel** start scrolling when links exceed the corresponding circle count. **Show carousel arrows** is optional; the carousel remains swipeable without them. ### Rizel collection cards Add up to **20 Collection or link** blocks, plus one **Colors** block. Select a collection or supply an **Image**, **Image description**, **Name** and **Link**. Custom values let you link to another destination; selected collections supply the collection-based content. Choose headings, collection names/descriptions, View all label/link, desktop/mobile columns, carousel modes, desktop arrows, progress line and gaps. **Image ratio** offers **Square / Portrait 4:5 / Tall 3:4 / Landscape 4:3** and **Image fit: Fill / Contain**. Adjust card frames, desktop/mobile card and image corners, typography, content width and spacing. Colors styles the background, cards, heading, text, placeholder and progress track/marker. This section is a curated display, independent from the store’s collections-index template. ### Rizel collections grid This simple addable section lists store collections with their images, titles and short descriptions. Set **Grid item width: Small / Large**, **Grid spacing**, **Section text** and **Section background**. It has no collection-selection blocks or advanced card-design controls. Use Rizel collection cards for a curated set, or the collections index for sorting and pagination. ## Images, feature icons, FAQs and number counters ### Rizel image and points Choose **Image**, **Alternative text** and an **Optional image link**. Set **Desktop image side: Left / Right**, **Mobile order: Image first / Content first**, image width, desktop section height, fit/focal position and **Mobile image shape: Wide / Landscape / Classic / Square / Portrait**. Add an eyebrow, heading, accent heading and text, then an optional button label/link and arrow. Configure content alignment, text sizes, icon backgrounds, point spacing, width, gaps, outer corners and content padding. Add up to **eight Point** blocks with a custom icon or **Flower / Check / Heart / Sparkle / Star / Leaf / Bolt / None**, a title and optional supporting text. One **Overlap badge** block offers a custom badge image or **Heart / Sparkle / Check / Star**, desktop visibility and desktop/mobile size. One **Colors and spacing** block styles the outer/content backgrounds, headings, text, point icons, badge, button/hover and padding. A badge is decorative; its presence does not certify a product claim. ### Rizel feature icons Add up to **12 Feature** blocks, each with **Custom icon**, **Built-in icon**, **Title**, **Text** and an **Optional link**. A custom icon overrides the built-in selection. The built-in choices are **Box, Shield check, Care hand, Smile, Delivery truck, Lock, Leaf, Star, Check circle, Globe, Customer support, Returns, Gift, Lightning, Payment card, Clock, Location, Award, Sparkle, Phone, Chat, Shopping bag, Heart** and **Flower**. Set heading position, feature alignment, desktop features per row from **2–6**, mobile rows of **1 / 2**, gaps and width. Configure icon circles/sizes, card padding/corners, text sizes, normal/hover colors and optional mobile divider lines. Use this for real store benefits; icons do not activate shipping, payment, warranty or returns services. ### Rizel FAQ accordion Add up to **20 Question** blocks with **Question** and **Answer**, and one **FAQ colors** block. Set the eyebrow, heading and intro. **Desktop layout** offers **Heading beside questions / Heading above questions**. Configure **Open first question** and **Allow multiple open questions**. Adjust width, text sizes, question height/spacing, padding, corners, borders, shadows and **Plus and minus style: Plain / Circle**. FAQ colors includes independent normal, hover and open question states, answer text and icon colors. These settings control the displayed answers; they do not create your store’s policy pages. ### Rizel number counters Add **Rizel number counters**, then up to **eight Number counter** blocks. Enter **Start number**, **Target number**, **Before number**, **After number**, **Label** and **Description**. **Decimal places: None / One / Two** and **Show thousands separators** control formatting. Enter genuine figures; the default target is zero and the theme does not calculate store statistics. Enable **Animate when viewed**, choose **Animation duration** from **0.5–6 seconds** and **Animation style: Smooth slowdown / Steady count**. Animation runs when the counter enters view, once by default. **Replay when viewed again** restarts it on re-entry. Without animation, in the editor, for reduced motion or without JavaScript, the final value remains available. Choose desktop/mobile columns, maximum width, spacing, **Number font: Theme heading font / Theme body font**, number weight/sizes, label sizes, padding and direct colors. This counts toward a numeric target; use Rizel sale countdown for a timed promotion. ### Rizel flexible section and theme blocks Add **Rizel flexible section** for a simple background and nested theme-block layout. Choose **Background**, **Section text** and **Section background**. It supports the supplied **Text** and **Group** theme blocks. The Group presets are **Column** and **Row**. **Text** has **Text**, **Text style: Title / Subtitle / Normal text** and **Alignment**. **Group** has **Layout direction: Horizontal / Vertical**, **Padding**, and vertical **Alignment: Left / Center / Right**. Groups can contain theme blocks. Horizontal groups do not automatically wrap; preview long content on mobile. This section does not include the product-card, sale-schedule or targeted-page controls from other Rizel sections. ## Collections and collection shortcuts ### Rizel collection products Open a collection template and select **Rizel collection products**. The Shopify collection supplies its title, description and products. Set **Heading alignment: Left / Center**, **Products per page** from **8–40**, **Desktop columns** from **3–6**, and desktop/mobile padding. Configure direct product-card and button colors, including normal, hover, sale and sold-out states. Editable **Add-to-cart label**, **Choose-options label** and **Sold-out label** apply to listing buttons. Sort options and filters are supplied by Shopify. Filters appear when configured and available for that collection; changing card controls does not create filters. Sorting, filter forms and pagination are separate from the shortcut row. ### Add, remove and arrange shortcuts Under Rizel collection products, use **Add block → Collection shortcut**. You can have up to **12 shortcuts**. Drag blocks to reorder them or remove a block to delete it. The starter row contains an All products shortcut; add the destinations your store needs. Each block has **Label**, **Collection**, **Custom link** and **Image**: - Custom link overrides the collection destination. With both blank, the link goes to All products. - A blank Label uses the collection title, then the translated All products label. - A blank Image uses the collection image, then its first product’s image. If none exists, image mode displays a placeholder. Choose **Shortcut content: Text / Image / Image and caption** and **Shortcut shape: Pill / Circle / Rounded square**. **Image or tile size** ranges from **48–120 px**. In Image and caption mode, the caption sits below the image. **Shortcut outline**, **Shortcut active and hover** and **Active and hover text** control their states; normal colors follow the section. Turn off **Show shortcuts** to hide the row, or remove all shortcut blocks. It stays on one horizontal track with touch/trackpad scrolling and keyboard-focusable links. It does not change collection membership, sorting or filters. ### Rizel collections index Open the collections-list template and select **Rizel collections index**. Choose **Which collections to show: All store collections / Selected cards below**. All store collections supports **Collection order: A–Z / Z–A / Newest first / Oldest first / Most products / Fewest products**, **Collections per page** from **8–40**, and **Show empty collections**. For Selected cards below, add and reorder up to **40 Collection card** blocks with **Collection**, **Custom image**, **Custom title** and **Custom link**. Configure the heading, description visibility, desktop/mobile columns/gaps, image ratio/fit, card/image corners, border, shadows, hover lift and image zoom. Typography includes title alignment, capitalization, weight and sizing. One **Colors and spacing** block controls width, heading gap, page/card/text/border/placeholder colors and padding. **Card shadow opacity / Card shadow blur** work with its **Card shadow** color; zero opacity removes the shadow. These controls belong to the index and do not restyle every collection display elsewhere. ## Products, quick-add, cart and checkout ### Rizel product page Open a product template and select **Rizel product page**. Manage the product itself in **Products** in Shopify admin. The gallery uses product images, Shopify-hosted video, external video and 3D model media supplied by Shopify. Image thumbnails select media; product images can open an enlarged preview. **Image shape: Square / Portrait / Original**, **Image fit: Fill / Show whole image**, corners, title/price sizes and spacing control the presentation. Add, hide or reorder the following product blocks. Except for Custom Liquid and app blocks, each is limited to one: - **Vendor**: the product vendor, when present. - **Title**: the product title. - **Price**: variant price, applicable compare-at/unit price and Shopify payment terms. - **Variants**: choices based on the product’s options; omitted for a default-only variant. - **Quantity**: number input and minus/plus controls, with a minimum of one. - **Buy buttons**: **Add label**, **Sold out label** and **Show accelerated checkout**. - **Description**: the product description from Shopify. - **Pickup availability**: eligible pickup locations and availability for the selected variant; depends on Shopify pickup configuration. - **Share**: an email link for sharing the product. - **Custom Liquid**: a Liquid field for developer-provided content. - **App blocks**, when an installed app supplies them: placement is supported here, but each app requires its own setup and testing. Selecting options updates the chosen variant, price and available purchase action. Sold-out variants disable adding; nonexistent combinations show Unavailable. Stock and eligibility are validated by Shopify when the product is added. Gift-card products have **Send as a gift** with recipient email/name, message and send date in the Buy buttons area. The message accepts up to 200 characters. Accelerated checkout is omitted for gift-card products in this component. Before adding developer instructions to Custom Liquid or editing theme code, **duplicate the theme** and work on the copy. Ask a qualified Shopify developer or Partner for help with changes beyond editor controls. See [Shopify’s customization guidance](https://help.shopify.com/en/manual/online-store/themes/customizing-themes). ### Quick-add and the product popup Listing buttons add a simple product’s available variant or open **Choose options** for an optioned product. The popup shows product images, options, price and quantity. Its image thumbnails are limited to eight. **Theme settings → Product popup** controls its colors, purchase buttons, quantity states and **Show Buy it now**. On successful adding, the cart updates and the options popup closes. Errors remain visible for correction. Sold-out or unavailable choices cannot be purchased; the popup hides the accelerated action for them and prevents simultaneous checkout while an add is pending. Featured and latest-product sections can bypass option selection with **Add first available variant directly** in their Add to cart block. Use this only when buying that first available option is appropriate. Product-popup design settings do not change product details or Shopify inventory. ### Cart drawer In **Rizel site header**, configure **Cart heading**, **Empty cart heading**, **Empty cart message**, **Cart checkout button** and direct cart-panel/card colors. In **Theme settings → Cart drawer buttons**, change **Empty cart button label**, checkout hover colors, empty-cart button colors/hover and close-icon colors/hover. **Show cart suggestions** enables suggestions. **Cart suggestions: Automatic related products** asks Shopify for recommendations for the first cart product. **Selected collection** uses **Cart suggestion collection**. Both exclude unavailable products and products already in the cart, and show at most six. Automatic suggestions stay hidden when Shopify returns no eligible matches; there is no all-catalog fallback in the drawer. ### Rizel cart page Open the cart template and select **Rizel cart page**. This is separate from the drawer. Configure headings, empty-cart content, Continue/Update/Checkout labels, subtotal/total labels, **Show order note**, **Show accelerated checkout**, spacing and the **Custom cart colors** block. The native cart form supports quantity changes, Update, item removal, order notes and checkout. **Show account prompt when empty** appears only when customer accounts are enabled and the visitor is not signed in. **Show recommendations**, **Override related collection** and **Maximum suggestions** from **2–12** control this page’s suggestions. Without an override, it uses the first cart product’s first collection, then All products if that source is missing or too small. It excludes unavailable and already-added products. This collection fallback differs from the drawer’s automatic-recommendation behavior. ### Checkout Rizel provides storefront purchase buttons and links/forms that hand the order to Shopify checkout. Shopify controls checkout fields, payment availability, wallet branding, taxes, shipping and discount validation. Theme controls described here apply to the storefront buttons; they do not customize checkout’s layout or create payment methods. ## Search and product recommendations ### Header search In **Rizel site header**, set **Search heading**, **Search placeholder** and **Suggested collection**. Before typing, the panel shows suggested products; without a selected collection it uses All products. As visitors type, the panel searches Shopify products and shows up to eight results. It depends on JavaScript and Shopify’s search response. In **Theme settings → Header search field**, style the input, placeholder, focus border and search button/hover. **Header search product cards** controls card surfaces, titles/hover, regular/sale/compare prices, badges, normal/hover/sold-out buttons and **Add to cart text**, **Choose options text**, **Sold-out text**. ### Rizel search page Open the Search template to style **Rizel search page**: heading, placeholder, no-results message, **Products per page** from **8–40**, spacing and listing-card/button colors. Its native form supports Shopify results for products, articles and pages, filters when available, and pagination. On the normal JavaScript-enabled storefront, Rizel routes a standalone search-page visit to the home page and opens the header product-search panel with the query. The search-page template remains available in the editor and as the native fallback when this script does not run. Search-page appearance controls therefore do not restyle the header panel. ### Rizel related products On a product template, add or select **Rizel related products**. Set **Heading**, **Recommendation type: Related / Complementary**, alignment, **Maximum products** from **2–10**, desktop columns from **2–5**, content width, spacing and card/button colors/labels. The section requests Shopify recommendations as it approaches view. Eligible recommendation data depends on Shopify and your product configuration. The implemented initial/fallback display uses other products from All products when no recommendation list is returned; it excludes the current product. The section cannot guarantee complementary matches, and sold-out cards may still appear with disabled buttons. **Rizel live search feed** and **Cart related products** are supporting response sections used by the search panel and automatic cart suggestions. They are not addable merchant layout sections; use the header/search controls above to configure the visible components. ## Custom, Newsletter and Celebration popups Open **Rizel footer area → Popups**. There is one Popups section, and only the selected type displays. Enable **Show selected popup** and choose **Choose popup: Custom / Newsletter / Celebration**. Set **Campaign key**, **Delay before opening** from **0–15 seconds**, and **Display frequency: First visit only / Once per browser session / Show again after set days / Every visit**. For Show again after set days, choose **Days before showing again** from **1–90 days**. Change the Campaign key to start a new campaign for visitors who dismissed an earlier one. Frequency is remembered in that browser’s storage, not across every device. Clearing storage, private/restricted browsing or blocked storage can cause it to reappear. Select the section or its design block to preview it in the editor; it does not automatically open on every editor refresh. Configure **Show close button**, **Close when overlay is clicked** and **Lock page scrolling while open**. Keep a clear way to dismiss the popup. Branding uses **Show logo or store name**, **Custom popup logo** and **Logo width**. ### Choose the content - **Custom**: edit its eyebrow, heading, text, **Action button**, **Action link** and **Dismiss button** for a promotion or announcement. - **Newsletter**: edit the eyebrow, heading, text, **Email placeholder**, **Submit button** and **Success message**. It uses Shopify’s native customer signup form and has no coupon controls. Signup does not schedule or send a marketing campaign. - **Celebration**: edit its eyebrow, heading, text, **Action button** and **Action link** for a real event. It has no decorative shape controls. **Small footer note** can add supporting wording. Inactive type settings are hidden while their saved values remain available. ### Images and mobile layout Open the single **Images** block. Choose **Popup image version: No image / With image**, upload **Desktop image** and optionally **Mobile image**, and enter **Image description**. The other image supplies a missing upload. **Desktop image placement** offers **Image left / Image right / Image top**. Adjust **Desktop image width** from **30–60%**, minimum height, **Image fit: Cover / Contain**, **Image position: Center / Top / Bottom / Left / Right**, and image background. On mobile, the image always appears **above the content** at full popup width. **Mobile image height** ranges from **180–500 px**. No image makes it text-only. Use a crop that keeps the subject visible at the chosen height. ### Buttons, size, animation and colors Open the single **Layout** block for desktop/no-image widths, corners, borders, content padding, text sizes, alignment and **Opening animation: Scale / Fade / Slide up**. Under **Buttons**, choose **Button style: Filled / Outline**, outline thickness, **Button and field height**, **Button text size**, **Button capitalization: Uppercase / As typed**, **Action button width: Default responsive width / Full width / Fit text**, and field/button radius. Custom popups also have **Custom action button height**, **Custom button corners** and **Custom popup corners**. Choose **Heading capitalization: Uppercase without image / As typed / Always uppercase**. Set **Close button style: Transparent / Filled**, size and roundness. In the single **Colors** block, style the popup/overlay, fill/outline and hover states, dismiss button, email field/focus, coupon and close control/hover. Removing a design block uses the built-in fallback sizing and colors. ### Coupon copying For Custom or Celebration, enter an optional **Coupon code** and edit **Copy button**, **Copied message** and **Manual-copy message**. Create and verify a real active code in Shopify admin first, including dates and eligibility. The popup only displays and copies the code. It does not create, activate or automatically apply a discount. If copying is unavailable, it selects the code and displays the manual-copy message. Newsletter does not offer coupon controls. ## Pages and the contact form ### Rizel page content Create or edit page wording in **Online Store → Pages** in Shopify admin. In the page template, **Rizel page content** controls **Show page title**, **Show page content**, content width, spacing and background/title/body colors. The default page and **rizel** starter templates include this section and Rizel page elements. ### Rizel page elements Add blocks inside **Rizel page elements** and select **Show on page** in every block. An unassigned block is hidden. Available blocks are: - **Text**: small heading, heading, rich text and **Alignment: Left / Center**. - **Image**: image, alt text, caption and optional link; missing images use a placeholder. - **Button**: button text, link, **Outline style** and alignment. Both text and destination are needed to display it. - **FAQ item**: question, answer and **Open by default**; a blank question is hidden. - **Divider**: a separating line for the selected page. Reorder blocks to arrange each page’s visible content. The section’s width, image corners, colors, button/hover colors and spacing are shared by the template. Use another template when pages need independent section layouts or styling. ### Rizel contact form The **contact** page template includes **Rizel contact form**. The default and rizel page templates do not. You can remove the form or add it back using **Add section → Rizel contact form**. Set **Show on this page** to restrict it to a selected page. With no target, it appears on pages assigned to the contact template. On another page template, select a target page or the form stays hidden. Configure **Heading**, **Intro text**, field labels, **Show phone**, **Button label**, **Success message**, spacing, and **Style: Filled / Outline**, **Shape: Pill / Rounded / Square**, **Height** and direct field/button/hover colors. Email and message are required; the phone field is optional. This is Shopify’s native contact form. Verify delivery to your store’s configured contact email before relying on it. It does not include screenshot uploads or a theme-support ticket system. ## Blogs, articles and special pages ### Rizel blog posts Open a blog template and select **Rizel blog posts**. Add actual articles in Shopify’s **Content → Blog posts** area. Blank **Heading** uses the blog title. Configure date, author, introduction and read-button visibility, labels, empty message, **Posts per page** from **3–12**, desktop columns from **1–4**, card corners/shadow and **Image shape: Landscape / Square**. Button style, height, corners and normal/hover colors are independent from other sections. **Editor preview → Show a sample when this blog is empty** adds a clearly labeled sample only in the editor. Its image/title/introduction are editable, but it is never published as an article. ### Rizel article page Open an article template and select **Rizel article page**. Article title, image and body remain in Shopify’s Blog posts records. Configure featured image, date/author, reading width, title/body sizes, image/comment corners, spacing and direct colors. **Show comments when enabled on this blog** depends on the blog’s Shopify comment settings. The native comment form follows those settings and moderation rules. Set its button text/style, height, corners and normal/hover colors here. ### Rizel password page Open the Password template and select **Rizel password page**. Edit the heading, description and optional **Show logo or store name**. Shopify’s store password message also appears when set. **Show email sign-up** controls the native notification signup; set its label, placeholder, Notify button and success message. The owner link opens a closeable password dialog. Configure **Owner prompt**, **Open popup link**, **Close button label**, popup heading/description, password field label/placeholder and Submit button. Password validation and store access remain controlled by Shopify; the theme does not set or reveal the store password. Optional **Image** and **Mobile image** appear beside the content on desktop and above it on mobile. Choose **Desktop image position: Left / Right** and width from **30–60%**. A missing upload uses the other image, including a mobile-only image on desktop. Configure heading/body sizes, **Button style: Filled / Outline**, minimum height/corners and page, input, link, popup and button/hover colors. Store privacy is managed in Shopify’s Online Store preferences. ### Rizel 404 page Open the 404 template and select **Rizel 404 page**. Set a **Small label**, heading, description and shopping-recovery button. Blank heading/button text uses the translated Page not found/Back to shopping labels; blank **Button link** goes to All products. Adjust content width, desktop/mobile heading size, description size, spacing, Filled/Outline style, minimum height, corners, normal/hover and keyboard-focus colors. These controls style the missing-page response; they do not create redirects or turn missing URLs into valid pages. ### Rizel gift card The gift-card template has its own **Rizel gift card** section. Set optional branding, **Gift card image**, heading, additional message and shopping-button text. Blank heading/button text uses Shopify’s translated wording. Configure card corners, Filled/Outline style, button dimensions and page/card/code/status/button/hover colors. Balance, formatted redemption code, expiry, disabled state and any available Apple Wallet pass come from Shopify. Theme appearance settings cannot change the balance or validity. Password-page settings do not apply to gift cards. ### Rizel policy pages Open a policy page in the editor’s **Sections** panel and select **Rizel policy pages**. This appearance section is included automatically and shared by all native Shopify policy pages. Edit legal wording in **Settings → Policies** in Shopify admin. Adjust reading width, top/bottom space, title/body sizes and **Page title alignment: Left / Center**. **Show title accent line**, line width/thickness and its own color control the title decoration. **Content divider thickness** of zero hides content dividers; table borders have a separate color and remain visible. Set background, title/headings, body, link/focus and hover colors. **Entrance animation: Off / Fade / Fade and rise** runs once with **Animation duration** from **200–800 ms**. It is disabled in the editor, for reduced motion and when printing. Mobile spacing uses compact caps and honors zero. These controls change appearance, not the policy wording or its legal suitability. ## Troubleshooting FAQs ### Why did changing a page affect other pages? They use the same template. Use Show on page for targeted Page elements content, or create and assign a separate template for a different layout. Selecting a page for preview does not isolate template changes. ### Why is my page block or contact form missing? Select the correct Show on page in the block, or Show on this page in the form section. Unassigned Page elements blocks are hidden. An untargeted contact form displays only on the contact template. Check section visibility and the page’s template assignment too. ### Why is the sale countdown hidden? Check Show offer bar, the Sale schedule block, the four-digit end year, the calendar date and the active hour format. The end must be in the future and after any scheduled start. A future start keeps the banner hidden until then. Use the editor’s explanatory note and confirm your store timezone. ### Why did the banner or popup not give customers a discount? Neither creates discounts. Create the real discount in Shopify admin. A popup code is only copied; Shopify validates it when customers apply it. ### Why does the popup not reopen? Check Show selected popup and Display frequency. Your browser may remember its dismissal. For a new campaign, change Campaign key; for testing, use a fresh browser session. Select Popups in the editor to preview it. ### Why does the popup image appear above its text on mobile? That is the mobile image layout. Change Mobile image height or choose No image. Desktop image placement does not change mobile placement. ### Why is an image cropped or surrounded by space? Cover, Fill or Crop to fill fills the selected frame and can crop. Contain, Fit, Show whole image or Fit whole image preserves the complete image. Check the component’s image ratio, focal position and mobile upload. ### Why do fonts or colors differ between components? Rizel has separate font pickers and direct component colors. Check the relevant section/color block and the matching Theme settings group. Product cards, product title, navigation and footer fonts can differ intentionally. ### Why is Choose options shown instead of Add to cart? The product has options. The popup lets the customer choose a variant. Featured/latest sections can add the first available variant directly if that specific switch is enabled. Check inventory when a selected variant shows Sold out or Unavailable. ### Why is the minus button disabled? Product and popup quantity cannot go below one. Its disabled colors are editable independently. Remove an item through the cart when the customer no longer wants it. ### Why are there no cart suggestions, or why do the cart page and drawer differ? The drawer excludes already-added and unavailable products and hides automatic suggestions without eligible Shopify matches. The cart page has its own collection-based source and fallback. Check the relevant controls rather than assuming both components use the same source. ### Why does the search URL open a panel on the home page? Rizel’s active storefront script uses the header product-search panel for standalone search visits. Style that panel through the header and Theme settings search groups. The Search template remains the editor/native fallback. ### Why is the number counter already at its final value? Animation is off in the editor and for reduced motion. It also finishes without JavaScript and normally runs once when viewed. Check Animate when viewed, start/target values and Replay when viewed again. ### Why are filters, pickup or wallet buttons missing? These depend on Shopify configuration, data, eligibility and sometimes the visitor’s device or payment method. A theme visibility switch cannot create filters, pickup locations or wallet eligibility. Confirm setup in Shopify, then test with appropriate products. ### Why do I still see a sample blog card or an old favicon? A sample blog card appears only in the editor when the blog is empty and its sample setting is on. Publish real articles for storefront cards. For a changed favicon, refresh or use a fresh browser session to bypass cached icons. ### What if an app or custom change causes a problem? Duplicate the theme before testing changes. On the draft copy, disable the affected app embed/block or isolate the custom change, then preview again. App behavior must be tested individually. Send reproducible steps and screenshots to support if the issue remains in Rizel’s built-in controls. ## Safe updates and version notes Before updating, duplicate the current theme, download a backup and record your important section settings, templates, images, menus, wording, app embeds and any code customizations. Add an updated theme as a draft and compare it with your current storefront before publishing. Do not assume an uploaded ZIP transfers all settings or custom code automatically. Review the new version’s notes, rebuild or migrate the relevant settings, and test desktop/mobile layouts, variants, cart, search, popups, forms and active promotions. Verify each installed app separately. Keep the previous theme available until you are satisfied with the update. For any code edits, start from a duplicated theme and seek developer help when needed. ### Version 1.0.0 feature summary Version 1.0.0 includes direct section/component colors; seven font pickers; header, menu, search and cart panels; hero banners; announcements; scheduled sale countdowns; product and collection displays; video product reels; image/point and icon sections; FAQs; animated number counters; targeted page blocks and a removable contact form; Custom, Newsletter and Celebration popups; and product, collection, cart, blog, article, password, 404, gift-card and policy presentation. This summary describes the controls available in version 1.0.0. For help choosing or applying an update, contact Rizenyte Web with the version installed in your store. ## Support and licensing For Rizel setup questions or a reproducible theme problem, email [service@rizenyteweb.com](mailto:service@rizenyteweb.com) with: - Your name and email address. - Your public store URL and the affected page URL. - Theme name **Rizel** and installed version. - What you expected, what happened, and the steps to reproduce it. - Browser/device details and a screenshot with private information removed. Never send passwords, API tokens, payment details or customer data. Describe the issue first; store access is not required to send a support request. If access becomes necessary, arrange appropriate Shopify collaborator access through an agreed process. Rizel is developed by Rizenyte Web. Its original design and independently written components carry **copyright © 2026–present Rizenyte Web, all rights reserved**. The Shopify-derived Skeleton foundation retains its separate permission and warranty notice in the theme. Those third-party rights remain distinct from Rizel’s original work. Contact Rizenyte Web for purchase and permitted-use questions.