Superstore features the collection template Minimal, a lean alternative that includes an optional Image with text section. This template removes the Utility bar and product cards for a more conventional collection page.
Assign the template through the products admin
To change the template, leave the theme editor and navigate to any collection in your Products admin. On the right-hand side, you’ll find a box labeled Theme templates and a dropdown to change your collection template.
This box will only include the Minimal template if Superstore (2.1.0 or higher) is the published theme in the store.
Add an image with text section
Combine media and messaging by adding an Image with text block. Select [+] Add image with text to begin.
Add the content before adjusting the layout
Fill out the content of the feature before adjusting the layout to get the best results.
Click Select image to assign an image. The Desktop image will show for both desktop and mobile, unless a separate Mobile image is added.
Use the provided text fields to include your messaging. Add text for the Subheading, Heading, Text, and Button text.
Use the Button link field to locate the page to direct customers to that page. URLs to external sites can also be used here.
Adjust the image size and position
Use the provided sliders to adjust the Desktop image width and Desktop custom height. Make sure the Custom height option is selected for that slider to take effect.
If you are using a Mobile image, use the Mobile image height to select either Natural height or Custom height. If the custom option is selected, use the Mobile custom height slider to adjust the maximum height for the image.
There are dropdowns for both the desktop Image position and mobile Image position. For desktop, choose between Left and Right to position the image to the left or right of the text portion. For mobile, choose between Top or Bottom to display the image above or below the text portion.
Adjust the layout
Use the Desktop section spacing slider to adjust the margins for desktop view.
Use the Mobile section spacing slider to adjust the margins for mobile view.
Customize the styling
Select a section Background color. Click the rounded-rectangle swatch to open the color selector.
Each text field is paired with a swatch selector to apply custom font colors.
Select a Heading size to adjust the font size for the Heading text.
Select a Button style using the provided dropdown. If you use the Signpost link option, use the Signpost color to change the color.