Customize Shopify Supply Theme Slideshow with Text Over Images

Are you looking to customize your Shopify Supply theme slideshow by adding text over images? This guide will walk you through the process of modifying your slideshow to include separate text and image elements, allowing for easier translation and more dynamic presentations.

Understanding the Supply Theme Slideshow

The Supply theme in Shopify comes with a built-in slideshow feature. However, by default, it doesn’t allow for easy separation of text and images. Let’s explore how to overcome this limitation and create a more flexible slideshow setup.

The Importance of Separating Text and Images

Separating text from images in your slideshow offers several benefits:

1. Easier translations: When text is separate from images, it’s much simpler to translate your content for different markets without altering your visuals.
2. Improved flexibility: You can update text without needing to edit or replace entire image files.
3. Better SEO: Separate text elements are more easily indexed by search engines, potentially improving your site’s visibility.

Modifying the Slideshow Code

To achieve our goal of adding text over images in the Supply theme slideshow, we’ll need to make some modifications to the theme code. Here’s a step-by-step guide to implementing this change.

Step 1: Accessing the Theme Code

1. Log in to your Shopify admin panel.
2. Navigate to “Online Store” > “Themes”.
3. Find your active Supply theme and click “Actions” > “Edit code”.

Step 2: Modifying the Slideshow Schema

The most effective solution is to add new fields to the slideshow schema. This allows you to input text directly through the theme editor. Here’s how to do it:

1. In the theme editor, locate and open the slideshow.liquid file.
2. Find the {% schema %} section at the bottom of the file.
3. Within the settings array of the schema, add the following code:

{
  "type": "text",
  "id": "title",
  "label": "Heading",
  "default": "Talk about your brand"
},
{
  "type": "richtext",
  "id": "text",
  "label": "Text",
  "default": "<p>Use this text to share information about your brand with your customers.</p>"
}

This addition creates new fields in your theme editor for a heading and rich text to be displayed on each slide.

Step 3: Updating the Slideshow HTML

Next, we need to add HTML to display the new text fields. Within the slideshow.liquid file, find the section where slides are generated. Add the following code inside the slide loop:

{%- if block.settings.title != blank -%}
  <h2>{{ block.settings.title | escape }}</h2>
{%- endif -%}
{%- if block.settings.text != blank -%}
  <div class="rte">
    {{ block.settings.text }}
  </div>
{%- endif -%}

This code will display the heading and text if they are filled out in the theme editor.

Styling the Text Overlay

Now that we’ve added the text to our slideshow, we need to style it to appear over the images. This involves adding some CSS to position the text correctly.

Adding CSS Styles

1. Open the theme.scss.liquid file in your theme editor.
2. Add the following CSS at the end of the file:

.flexslider .slides li {
  position: relative;
}

.flexslider .slides li h2,
.flexslider .slides li .rte {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff;
  z-index: 1;
  width: 80%;
}

.flexslider .slides li h2 {
  font-size: 2em;
  margin-bottom: 0.5em;
}

.flexslider .slides li .rte {
  font-size: 1.2em;
}

This CSS positions the text in the center of each slide and gives it a white color for visibility. Adjust the styles as needed to fit your design preferences.

Fine-tuning Your Slideshow

With the basic implementation in place, you may want to make some additional adjustments to perfect your slideshow.

Adjusting Text Visibility

Depending on your images, you might need to improve text visibility. Consider adding a semi-transparent overlay to your slides:

.flexslider .slides li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

This creates a dark overlay that helps the text stand out against varied background images.

Responsive Considerations

To ensure your slideshow looks good on all devices, you may need to adjust text sizes for different screen sizes:

@media screen and (max-width: 768px) {
  .flexslider .slides li h2 {
    font-size: 1.5em;
  }
  
  .flexslider .slides li .rte {
    font-size: 1em;
  }
}

This reduces the text size on smaller screens for better readability and layout.

Testing and Troubleshooting

After implementing these changes, it’s crucial to thoroughly test your slideshow across different devices and browsers. Here are some key areas to check:

1. Text visibility: Ensure the text is readable against all your slide images.
2. Responsive behavior: Check that the slideshow and text look good on mobile devices and tablets.
3. Functionality: Verify that slide transitions and any interactive elements still work correctly.

If you encounter any issues, double-check your code for typos or conflicts with existing theme styles.

By following these steps, you should now have a customized Shopify Supply theme slideshow with text overlays on your images. This setup provides greater flexibility for content management and translation, enhancing your store’s visual appeal and functionality.

Remember, while this solution works for many users, every Shopify store is unique. Don’t hesitate to further customize the code to meet your specific needs or consult with a Shopify expert for more complex modifications.