# Image cards 🔥
_vzbuTzmT.jpg)
This design is available from ✨version 1.2.0 and above. ✨
See: [Changelog](/hyper-theme/changelog)
The **Image cards** section is a flexible, visual-first layout that helps you feature products, collections, or promotions using stylish, clickable cards.
## How to add an Image cards section to your Shopify store
**Steps:**
1. In the theme editor (**Customize**) > click **Add section**
2. Select **Image cards.**
3. Make necessary changes.
4. **Save.**
## How to edit an Image cards section
### Section settings
* **Text alignment:**
* Align the text in the section to the **Left**, **Center**, or **Right**.
* Adjust alignment based on your banner’s design and layout.
* **Text alignment on Mobile:** Override desktop alignment settings specifically for mobile devices if needed.
* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.
✨[Add Highlighted text to your Headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings)
* **Text:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Description size:** Select the size of the description text.
* **Number of columns on desktop**: Choose between 2-6 columns on desktop.
* Control the **Column gap** and **Row gap**.
* **Enable carousel on desktop:** Turn this on to display cards in a horizontal slider format with arrows for navigation.
* **Enable content overflow:** Allows part of the next card to peek into view, giving a swipe-preview effect.
* **Navigation position:** Choose where to show navigation arrows: `Middle` (appear on hovering) or `Bottom`.
* Middle:
* Bottom:
* **Number of columns on mobile:** Choose between `1 column` or `2 columns` stacked vertically.
* **Enable swipe on mobile:** Turn on for a smooth horizontal scroll experience on touch devices.
* **Show progress bar:** Display a progress indicator for carousels to show users how many slides remain.
* **Number of columns on mobile:** Choose *1* or *2* product cards per row.
* **Enable swipe on mobile:** Toggle ON to allow horizontal swiping for a smoother user experience.
### Block settings
Each **Image card block** contains customizable visual and content elements.
* **Image**: Upload or choose an image that best represent the card's message.
* **Image ratio**: Control how the image fills the card.
Options include:
* `Adapt to image`: Maintains the original image ratio.
* `Square`, `Portrait`, `Landscape`: Crop the image to a fixed ratio for uniformity.
* **Image overlay opacity**: Add a semi-transparent layer over the image to improve text readability.
* `0%` = No overlay
* `100%` = Fully opaque (black cover)
Use **20-40% overlay** for bright images with text overlays. Lower it for dark or minimal images.
* **Content position:** Determine where the text/button appears inside the card.
* Standard: `Top left`, `Middle center`, `Bottom right`, etc.
* Split layout options: `Top subheading`, `Bottom button`, `Middle content` allow for more control.
* Below image: Display the content under the image.
* **Content alignment:** Control text and button alignment (`Left`, `Center`, or `Right`) relative to the content position.
* **Content spacing:** Adjust the internal padding of the content (e.g., `Extra small`, `Medium`, `Large`). Useful for cards with more or less text.
* **Content gap:** Control the spacing **between** elements like tag, heading, and button.
* **Card link:** Choose where the entire card and the button should lead: a product, collection, or page. Clicking anywhere on the card will navigate to this link.
* **Show badge:** Toggle ON to display a promotional badge (e.g., “Save 20%”, “New”).
* **Color scheme:** Choose a color preset for the badge's label and background that contrasts well with the image background.
* **Shape**:
* `Circle` – Best for prices or short attention-grabbing text.
* `Square` – Great for labels or rectangular highlights.
* **Position:** Select from corners like `Top right`, `Bottom left`, etc.
* **Subtext:** Add a smaller caption above the main badge text (e.g., “Save”).
* **Text:** The main value or highlight (e.g., “99$”, “New”).
💡 **Tip:** Use badges strategically to highlight limited-time offers or bestsellers. Keep the message short and clear.
Control how each image card behaves and looks on smaller screens, ensuring a mobile-optimized experience.
* **Color scheme:** Select a different **color preset** specifically for mobile view. This is useful if the mobile image or background needs higher contrast for readability.
* **Image (Mobile specific):** Upload a mobile-optimized image (e.g., vertically cropped or simplified).\
If provided, this image will **replace the desktop version** on mobile devices.
💡 **Tip:** Use vertical or square images on mobile to avoid awkward cropping or whitespace.
* **Show content below image:** Toggle this ON to **move card content (heading, button)** underneath the image rather than overlaying it.\
Ideal for clean layouts or when text overlaps key parts of the image.
* **Content alignment:** Choose how the mobile text and button are aligned:
* `Left`
* `Center`
* `Right`