This week we continue our look at Shopify theme sections and how you can use them to create dynamic and exciting homepages. This week, we’ll take a look at the “Image with text” section, which offers a wide variety of opportunities to include content in a dynamic and flexible layout that’s also mobile friendly and doesn’t require any coding.
New section: Image with text
The Image with text section lets you place an image of your choice next to a bit of text:
- Each row can contain a single image and a single block of text.
- The block of text can include a headline and smaller blurb of text, but both are optional.
- The small bit of text under the headline can be bolded or italicized, but at this time does not support rich HTML (so you wouldn’t be able to include a hyperlink, for example)
- Every row can optionally include a call to action button that can link to any page of your choice.
- The button can also feature the text of your choice.
- On desktop and larger screens, your image is placed to one side with the text block on the other, with each row flipping the location of the text and image in alternating patterns.
- On mobile, the layout becomes stacked, with the image always placed on top of the text block.
- Note that, as its name implies, each row of an image with text section must have an image. If you don’t upload an image, Shopify will use a default placeholder image.
- Each section can have an essentially unlimited number of rows, though you obviously don’t want to overload visitors with too many.
- Some themes include the options to switch between full width or fixed width layouts as well as alignment options.
- The exact styling of this section will vary somewhat between themes, for example there may be options to have the section display at full or standard width, or use a background color behind the text.
Using the ‘Image with text’ Shopify theme section
Here are 16 ways to use the image with text section for Shopify themes:
- About us content: Include multiple blocks of content each with a unique image and short paragraph of text to let customers know more about your store.
- Lifestyle image gallery: Entice customers to picture themselves using your products with a simple image gallery. The best part is that you can link each image to a unique part of your site and get users started down the funnel right when they are engaged in your site.
- Promote blog posts: Promote your favorite or most popular blog posts with an image, headline and brief summary of each post and then link to the post itself. Although you’ll have to manually update this section, it’s a great way to give your best posts more prominent placement.
- Explainers: If your store offers products that are handmade or customizable, you can use an image with text section to explain how the product is made in detail. Use close-up photography of each step to emphasize your quality and attention to detail.
- How it works: For businesses selling unique products or subscription services, the image with text section can be a great way to create “how it works” content, with one row for each distinct element of the business model or offering.
- Featured collections: This layout is also a great alternative way to feature collections. Although you’ll need to input images and links manually, this is a great way to add some visual interest to your homepage layout.
- Call to action: Don’t forget you can always use a single row of an image with text section. This is a great way to draw attention to a specific call to action you need to drive visitors to — whether it’s to request a free sample or register for an account.
- Meet the team: Use one row per team member and include his or her portrait to add a bit of personality to your site. Link users to the staff member’s full bio or email address (hint: use “mailto:address@domain.com” to create a clickable email button).
- Contact section: Draw attention to your customer service channels with a large section that spotlights your phone number, email address or link to live chat. Use stock photos or clever images from your product line that relate to each contact method.
- Sale promotions: Use each section to promote a different holiday, event or sale. You can use the buttons to link to a unique collection containing products included in your special offers.
- Spotlight products: Showcase your best and most popular products and then link directly to the product page so customers can shop quickly.
- Announcements: Each row can be used to quickly add a headline for the latest bit of news from your store. Optionally, you can link the row to a blog post so shoppers can read more.
- Suggestions: Get shoppers started quickly by spotlighting unique collections that are targeted at specific genders, ages or other groups.
- Teasers: Images with text sections are a great way to draw users into other content on your site, including other pages. For example, you can encourage users to visit your “About Us” page with a persuasive headline text and image that gets users curious enough to click the button to learn more.
- Location: Add an image of your physical storefront if you have one, or a map screenshot showing your general location, then include your address and other contact info with a button linking directly to an email address (see tip Number 8) or your shop’s full contact page or directions.
- Animation: You can upload an animated GIF file as the image and use it as a quick eye-catching way to draw attention to the accompanying text and/or call to action. Keep in mind that animated GIFs can be a bit large, which can affect site speed.
Because your buttons can feature any text you’d like, it’s also worth trying a variety of calls to action in these spaces. Here’s a quick list of some ideas:
- Click here
- Try now
- Get started
- Try for free
- Start your free trial
- Get started
- Sign up now
- Join now
- Become a member
- Shop now
- Explore
- Find out more
- Explore this collection
- Discover products
- Shop now
In general, when selecting call to action text, ensure that the text you use accurately describes what clicking the button will do and where the user might end up (on a product page, blog article, form or other location).
In some cases, using phrases such as “shop,” “discover” and “find out” in a button can inject a bit of excitement and emotion into the act of clicking, rather than phrases such as “read more” or “browse more” that sound like a chore.
