Section: Article

The article section displays the full content of a blog post — including the featured image, author, date, tags, share buttons, article navigation, and a comment section when comments are enabled on your blog.
Dengel Rivera
Written by Dengel Rivera Updated over 2 days ago

Key capabilities at a glance:

  • Image or video per slide — upload desktop + mobile images, or embed a Shopify-hosted video, YouTube link, or Vimeo link.
  • Per-slide color scheme — overlay color and text color are driven by the slide's own color scheme, so each slide can look completely different.
  • Two CTA buttons per slide — each button has an independent style (Solid, Outline, or Glass), background color, and text color.
  • Flexible content positioning — place the text block at any combination of left/center/right × top/center/bottom.
  • Autoplay with pause-on-hover — configure the interval (in seconds) and whether hovering pauses the rotation.
  • Loop & drag — infinite loop mode and native drag/swipe support on touch devices.
  • Dot indicator styles — choose between an animated pill indicator or classic round dots.
  • Arrow positions — arrows can sit inside or outside the slide container.
  • Responsive heights — set desktop and mobile heights independently via a range slider.
  • Border radius — rounds the container corners from 0 to 28 px.
  • Full-width or page-width — toggle whether the slider fills the full browser width or stays within the page container.

Quick Setup

Follow these steps to get a slider running on your home page.

  1. Add the section   In the theme editor, click
  2. Add section and choose Slidershow
  3. Add your first slide   Click Add block → Slide.
  4. Upload images   Inside the slide block, under Media Type select `Image`, then upload a Desktop image (recommended: 2400 × 1040 px, 16 : 9 or wider) and an optional Mobile image (recommended: 900 × 1200 px, portrait).
  5. Add a heading and subheading   Fill in the Heading and Subheading rich-text fields. These overlay the image.
  6. Add a CTA button   Enter a label in Primary Button Label (e.g., *Shop now*) and a URL in Primary Button URL.
  7. Set the color scheme   Under the slide block's Color Scheme, pick a scheme whose `slider_text_color` and `slider_overlay_color` match your slide image.
  8. Enable autoplay (optional)   In the section settings, check Autoplay and set an Interval (default: 4 seconds).
  9. Save and preview.

Section Settings

These settings control the overall slider behavior and appearance. They are found in the section panel (not inside any individual slide block).

Autoplay

 Navigation

Arrow position — Inside

Arrow position — Outside

Dots style — Pill vs Dot

Dimensions

Layout

Slide Block Settings

Each slide is an individual block. You can add up to 10 slides. The following settings are available inside each slide block.

Media

Image settings

Desktop vs Mobile image comparison
Tip

Always upload a dedicated mobile image. Landscape photos cropped to portrait look awkward on phones — a portrait image with the subject centered performs much better.

Video settings *(visible when Media type = Video)*

Supported external video formats

Important

YouTube and Vimeo iframes use `pointer-events: none` so visitors can't interact with the embedded player. The video plays in the background only. If you need a playable video with controls, upload directly to Shopify and disable Autoplay.

Link

Color Scheme

 The color scheme is applied per slide, so each slide can have a different overlay and text color. A dark overlay + white text works for light images; a light/transparent overlay + dark text works for images with a light background.

Content

Text
Positioning
Primary Button
Secondary Button
Button Styles Reference

All three button styles are available for both the primary and secondary button.

Button styles preview

Common pairing: Primary → `Solid` (white fill, black text) + Secondary → `Glass` (white text + white border). This creates a clear visual hierarchy where the primary action is unmissable and the secondary action is present but quieter.

Recommended Image Sizes
  • Format: WebP or JPEG. Shopify converts images to WebP automatically for supported browsers.
  • File size: Keep desktop images under 1.5 MB and mobile images under 500 KB for fast load times.
  • Safe zone: Keep the main subject and any text in the center 60% of the image to avoid clipping on different screen widths.
Accessibility
The Slidershow section includes the following accessibility features out of the box:
  • The container has `role="region"` and `aria-roledescription="carousel"`.
  • Arrow buttons have descriptive `aria-label` attributes (*Anterior* / *Siguiente*).
  • Dot buttons have `role="tab"` and `aria-label="Ir al slide N"`.
  • The slide container has `aria-live="polite"` to announce slide changes to screen readers.
  • Keyboard navigation: Arrow Left / Arrow Right while the slider is focused.
Performance Notes
Troubleshooting

Slide text is unreadable against the image.

→ Increase the overlay opacity in the slide's color scheme settings (**Theme Settings → Colors → Slider → Overlay color**). A semi-transparent dark overlay makes white text legible on any background image.

Mobile image looks zoomed in or cropped oddly.

→ The image uses `object-fit: cover`. Ensure the subject of your mobile image is centered, not near an edge. Upload a dedicated portrait image for best results.

Autoplay stops and doesn't restart.

→ If the browser tab becomes hidden (user switches tabs), autoplay pauses automatically via the Page Visibility API and resumes when the tab becomes active again. This is intentional behavior.

YouTube video doesn't autoplay.

→ Browsers require the video to be muted for autoplay to work. Make sure Muted is checked in the slide block settings.

Arrow buttons appear behind the slide content on mobile.

→ Check that Show arrows — mobile is enabled. If the arrows are hidden on mobile (the default), enable them in the section settings.