Choose the Overlay color that appears on your blog posts' featured image.
Choose the Text color for the blog posts' title and excerpt that appear on the overlay.
Click Save.
Settings reference
Blog posts have the following Blog posts settings:
Overlay opacity
You can add a colored overlay to your blog post's featured image.
You can set how visible the overlay is: 0% is completely transparent, and 100% is completely visible.
Overlay color
You can change the color of the overlay.
Note that overlay applies to all of your blog posts's featured images. We recommend using black or white, as these colors will look great with a wide variety of images.
Text color
You can change the text color for blog post featured images.
We recommend using the opposite color that you used for your overlay, or a color you know will be easy to see on top of all of your images.
Add special layouts to pages with shortcodes
Create unique grid layouts and accordions on your pages with our special "shortcodes." Shortcodes are small blocks of HTML that you can paste directly into the page text editor in your Shopify admin.
Shortcodes are supported on [Pages][pages], [About pages][about-page], and [Blog posts][articles]. Accordion shortcodes are also supported on Product pages, great for additional product details.
Follow the instructions below to use and edit shortcodes for:
Accordions with collapsible tabs
Grid layouts with image and text
Add accordions with shortcodes
The accordion shortcodes create collapsible tabs with headings that reveal more text when clicked on. They're great for adding additional details to your pages.
Follow the steps below to use our shortcode generator with easy-to-use fields that automatically creates a shortcode without needing to edit the HTML yourself.
Enter text in the Accordion Title field for the clickable heading.
We recommend a short 1-3 word heading that describes the content of the accordion. Example: "Product materials" or "Shipping policy".
Enter a few sentences in the Accordion Description field for the text that's revealed when the accordion title is clicked.
Click (+) Add New Item to create additional accordion tabs.
Repeat steps 1 - 3 until you have created all the accordion tabs you need.
Click Generate Code. You code will appear in the Results box.
Select and copy the entire code in the Results box.
In your Shopify admin, add or open an existing page in your Pages, Blog posts, or Products.
We recommend making a backup of your page content or creating a new page with the same content for testing in case any mistakes occur.
Click the "Show HTML" (</>) button on the text editor toolbar.
Paste your shortcode into the editor.
Click Save.
Finally, click View page to see how your accordions look on your page.
Add grid layouts with shortcodes
The grid shortcodes lets you create multiple columns and sizes of both images and text blocks.
We'll walk through editing the code step-by-step below, so you won't have to know exactly how HTML or code tags work to make the edits you need.
Before we begin, we have a few recommendations to keep in mind:
Recommended
Use images with the same height in pixels.
Backup your original page content.
Add the images before editing the HTML.
Steps
In your Shopify admin:
STEPS
Add or open a page under Pages or Blog posts.
Add or upload any images that you want to place in a grid.
You can do this the same way you would while adding any page content.
Click HTML view using the page editor toolbar.
See Shopify's Rich text editor documentation for more information about this.
When you do this, the page should be displayed as HTML markup, like a more-complicated version of this:
<p>This is the first paragraph of the page.</p><p>After this paragraph, there will be an image.</p><imgsrc="https://shopify.com/link-to-image1.png"alt="Description of first image"/><p>After this paragraph, there will be another image.</p><imgsrc="https://shopify.com/link-to-image2.png"alt="Description of second image"/>
Locate the <img> tags you want to display in a grid.
You may need to move these tags around in the next step.
Wrap the <img>s in a grid element.
Take the <img> tags and wrap them in a <div class="grid"></div> tag. Like this:
Here's a fully fleshed out example, including placeholder images, for you to play around with:
<p> This is some example text being used to show off how Spark's about page image grids work.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><divclass="grid"> <divclass="small"> <imgsrc="https://via.placeholder.com/700x400" /> </div> <divclass="small"> <imgsrc="https://via.placeholder.com/700x400" /> </div> <div> <imgsrc="https://via.placeholder.com/1500x700" /> </div></div><p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>