Impulse Theme: How to change the order on mobile of how image with text displays

Store Design
, ,
1

Hi,

I wonder if anyone can help…I have the Impulse theme and are creating a product page template. I have added an ‘image with text’ section, however on mobile want the text to display first, not the image (which it currently defaults too). Here is the code:

Does anyone know what custom CSS I need to add to this section in order to achieve this?

Thanks

Mark

2

To make the text display first instead of the image in the “image with text” section on mobile devices in the Impulse theme, you can use custom CSS. Here’s an example of how you can achieve this:

  1. Access the theme editor: Go to your Shopify admin dashboard and navigate to “Online Store” → “Themes”. Find the Impulse theme and click on the “Actions” dropdown, then select “Edit code”.

  2. Locate the product page template: In the theme editor, look for the file that controls the product page template. This is typically named product-template.liquid or similar. Open it in the code editor.

  3. Find the “image with text” section code: Within the product page template code, search for the code that generates the “image with text” section. It might look something like this:

{% section 'image-with-text' %}
  • Add custom CSS: After locating the “image with text” section code, you’ll need to add custom CSS to modify the display order on mobile devices. Insert the following CSS code below the section code:
@media only screen and (max-width: 767px) {
  .image-with-text {
    display: flex;
    flex-direction: column-reverse;
  }
}

  • This CSS code targets mobile devices with a maximum width of 767 pixels. It uses flexbox to reverse the display order of the image and text within the “image with text” section, ensuring that the text appears first on mobile.

    1. Save the changes: Once you have added the custom CSS, save the product page template.
3

Hi,

Thanks for getting back with a solution. I’ve tried pasting the code into the custom CSS box within the theme page but it didn’t work. I’ve tracked down in the editor the page text-and-image.liquid which looks like the right place to paste the code. However, I tried pasting at the end and it didn’t work. Would you be able to advise where I should insert the code?

Thanks