Rizel 1.0.0 / Merchant guide

Download Markdown
Jump to a topic

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.

Contents

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.

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 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.

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.

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.

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 labelWhat it styles
Body textGeneral text and purchase-button labels
HeadingsGeneral section headings
Product cardsProduct-card text
Product page titleThe product-page title
Header and menuNavigation text
Footer textOrdinary footer text
Large bottom store nameLarge 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.

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.

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

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.

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.

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

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.

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 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.