How to fix responsive images with a new section in the theme for a Shopify store

Creating a responsive image snippet with a new section in a Shopify theme is a valuable customization that can enhance the user experience on your online store. Here's a step-by-step guide on how to code a "responsive-image" snippet for a Shopify store:

Step 1: Access the Shopify Theme Code

  1. Log in to your Shopify admin panel.
  2. From the left-hand menu, navigate to "Online Store" and then click on "Themes."
  3. In the "Themes" section, click on "Actions" and select "Edit code" for the theme you want to modify.

Step 2: Create a New Section

In your theme's code editor, you'll create a new section for the responsive image. Here's how to do it:

  1. In the "Sections" folder, click the "Add a new section" button.
  2. Name the new section file something relevant, like responsive-image.liquid.

Step 3: Define the Section Structure

Inside the responsive-image.liquid file, define the structure of your section using HTML and Liquid code. For a basic responsive image section, use the following code as a starting point:

<div class="responsive-image"> <img src="{{ section.settings.image | img_url: '600x' }}" alt="{{ section.settings.alt_text }}"> </div>

This code creates a <div> container for the responsive image and uses Liquid to pull in the image URL and alt text from the section settings.

Step 4: Configure Section Settings

To allow users to customize the image and alt text for this section, you need to define settings. Add the following code to your responsive-image.liquid file:

{% schema %} { "name": "Responsive Image", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" }, { "type": "text", "id": "alt_text", "label": "Alt Text" } ], "presets": [ { "name": "Default", "category": "Custom" } ] } {% endschema %}

This code sets up two settings: one for the image and one for the alt text.

Step 5: Include Responsive CSS

To make the image responsive, include CSS styles. Add this CSS code to your theme's stylesheet or in the custom CSS section of your Shopify theme settings:

.responsive-image img { max-width: 100%; height: auto; }

This CSS ensures that the image scales down proportionally on smaller screens.

Step 6: Implement the Section

  1. Go to the Shopify theme customization panel.
  2. Add your new section to a page by selecting it from the available sections.
  3. Upload an image and set the alt text through the section settings.

Step 7: Test Responsiveness

Preview your changes and test the responsiveness of the image. Ensure that it scales down and looks good on various screen sizes.

Step 8: Refine and Optimize

Tweak the CSS and section settings as needed to achieve the desired responsiveness and appearance.

Step 9: Publish

Once you're satisfied with how the responsive image looks and behaves, click "Save" and then "Publish" to make your changes live on your Shopify store.

Congratulations! You've successfully created a responsive image snippet with a new section in your Shopify theme. This snippet allows you to easily add and manage responsive images throughout your online store, improving the user experience across different devices.

Back to blog