عربي Book an assessment
Elite theme docs
Section7 settings groups

Image Group

On this page 7
  1. Section Header
  2. Images
  3. Layout
  4. Card Style
  5. Text & Placement
  6. Button
  7. View More Button

A set of image cards shown as a slider or a grid, each with an optional title, description, button, and link - great for showcasing collections, lookbooks, or promotions.

Section Header

  • Eyebrow (above title) - a short line of text shown just above the section title, handy for a small tagline such as “New Arrivals”. Leave it empty to hide it.
  • Section Title - the main heading for the section.
  • Section Subtitle - supporting text shown near the title.
  • Header Style - whether the heading sits centered above the images (Center), or side by side with the “view more” button (Side by Side).
  • Heading Alignment - aligns the heading text to the left, center, or right.
  • Eyebrow Style - how the eyebrow looks: Plain text, With Line (a short line before the text), or Pill (the text inside a small rounded badge).
  • Eyebrow Font Weight - how bold the eyebrow text appears, from Light to Extrabold.
  • Eyebrow Color - the color of the eyebrow text. If left empty, the theme’s accent color is used.
  • Badge Background Color - the fill color behind the eyebrow text. Only shows when Eyebrow Style is set to Pill.
  • Title Font Weight - how bold the title text appears, from Light to Extrabold.
  • Main Title Color (optional) - a custom color for the section title. Leave it empty to keep the default color.
  • Title Pre Decoration - a small decorative touch before the title: none, a short bar, an underline, or a spark.
  • Subtitle Font Weight - how bold the subtitle text appears, from Light to Extrabold.
  • Subtitle Color (optional) - a custom color for the subtitle. Leave it empty to keep the default color.
  • Subtitle Pre Decoration - a small decorative touch before the subtitle: none, a soft line, or a spark.

Images

Each entry adds one image card to the group.

  • Image - the picture for this card.
  • Mobile Image (optional) - a separate picture shown on phones, handy for a crop that suits narrow screens. If left empty, the main image is used.
  • Title - a heading shown with the image.
  • Description - a short paragraph shown under the title.
  • Text Placement For This Image - where this card’s text appears: Follow Section Setting (uses Text Placement below), On The Image, or Below The Image. Useful when one card should differ from the rest.
  • Button Text (optional) - the label for a button on this card. Leave it empty to hide the button.
  • Link Image To - what the card opens when clicked: No Link, a Product, a Category, or a Link / Page. When a link is set, the whole card (including its button) becomes clickable.
  • Linked Product - the product the card opens. Only shown when Link Image To is set to Product.
  • Linked Category - the category the card opens. Only shown when Link Image To is set to Category.
  • Link — store page, legal page, or external URL - the page or web address the card opens. Only shown when Link Image To is set to Link / Page.

Layout

  • Display Mode - whether the images are shown as a horizontally scrollable Slider, or in a fixed Grid.
  • Images Per Row — Desktop - how many images sit side by side on desktop.
  • Images Per Row — Tablet - how many images sit side by side on tablets.
  • Images Per Row — Mobile - how many images sit side by side on phones.
  • Gap Between Images - the space between neighboring images, in pixels.
  • Full-Bleed Slider (edge-to-edge) - when on, the slider stretches all the way to the edges of the screen instead of staying within the page’s normal content width. Only used when Display Mode is Slider.
  • Slider Navigation - how visitors move through the slider by hand: Arrows, Dots, a Scrollbar, or None (no controls, though visitors can still swipe or drag). Only used when Display Mode is Slider.
  • Slider Autoplay - when on, the slider moves forward automatically, pausing while a visitor’s mouse is over it. Only used when Display Mode is Slider.
  • Autoplay Speed - how many seconds pass between each automatic move. Only used when Slider Autoplay is on.
  • Infinite Loop - when on, the slider wraps around endlessly, so the first image follows right after the last one. Only used when Display Mode is Slider.

Card Style

  • Image Ratio - the shape of every image: Square 1:1, Landscape 4:3, Landscape 3:2, Wide 16:9, Portrait 3:4, Portrait 4:5, Portrait 9:16, or Original (each image keeps its own shape).
  • Image Fit - Cover (crop) fills the whole frame and trims the edges if needed; Contain (full image) shows the entire image, leaving empty space if its shape doesn’t match. Not used when Image Ratio is Original.
  • Card Corners - how rounded the image corners are: Square, Small, Medium, Large, Fully Rounded, or Custom (px).
  • Custom Corner Radius (when Custom is selected) - the exact roundness of the corners, in pixels. Only used when Card Corners is set to Custom (px).
  • Zoom Image On Hover - when on, the image gently enlarges when a visitor’s mouse moves over it. Not used when Image Ratio is Original.

Text & Placement

  • Text Placement - where the title, description, and button appear for every card set to Follow Section Setting: On The Image, or Below The Image.
  • Text Position On Image - where the text sits when it is shown on the image: any of nine positions, from Top - Start to Bottom - End, including Dead Center.
  • Text Alignment (below image) - how the text lines up when it is shown below the image: Start, Center, or End.
  • Image Overlay - a tinted layer over the image that helps text on it stand out: Bottom Gradient (strongest at the bottom and fading out upward), Solid (an even tint over the whole image), or None. Only appears on cards whose text is shown on the image.
  • Overlay Color - the color of that tinted layer.
  • Overlay Opacity - how strong the tinted layer appears. Set it to 0 to remove the layer.
  • Title Font Size - the size of each card’s title text, in pixels.
  • Description Font Size - the size of each card’s description text, in pixels.
  • Title Color (optional) - a custom color for the card titles. If left empty, titles are white on the image and use the theme’s text color below it.
  • Description Color (optional) - a custom color for the card descriptions. If left empty, descriptions are white on the image and use the theme’s softer text color below it.

Button

These settings style the buttons on the image cards, and also the “view more” button whenever it is shown as a button.

  • Button Style - the button’s look: Theme Default (white on the image, the primary color below it), a solid Primary or Secondary color, an Outline, a transparent Ghost, White, or a plain Text Link. Choosing anything other than Theme Default also gives the “view more” button this same look, in place of View More Button Style.
  • Button Size - how large the button appears: Theme Default, Compact, Default, or Large.
  • Button Font Weight - how bold the button’s label text appears.
  • Button Shape - the button’s corner style, from sharp corners to a fully rounded pill shape.

View More Button

  • Show Button - when on, adds a “view more” button to the section. It only appears once a Button Link is set.
  • Button Text - the label on the button. If left empty, a default “View More” label is shown.
  • Button Link - the page or web address the button opens.
  • View More Link Position - whether the button sits Aligned with Title, or Below Section, after the images.
  • View More Button Style - the button’s look: a plain Text Link, or an Outline, Primary, Secondary, or Ghost button.
  • View More Button Size - how large the button appears: Default, Small, Medium, or Large.

Your next step
starts with a conversation.

Tell us about your store. We'll come back with a clear view of what it needs — and a written proposal before any commitment.

Book an assessment Message us on WhatsApp