Shine Content Collage

The Shine Theme Content collage section empowers you to curate a visually stunning display of diverse content, including images, product collections, and products.

From any page in the Shine Admin Dashboard, click on the Add section button > Search for Content collage > Click on it to add the Content collage section to your page.

To configure the Content Collage section, click on the section to access the configuration settings.

Under the Color Scheme, you can choose a specific scheme for the Content collage section. To modify or add a new color scheme, go to Theme Settings > Color.

Add content to the content collage section:

"Show layout grid" option: it helps set up the layout accurately in the theme editor, not appear on live page.

There are 2 options for section heading alignment: Left and Center

On a large screen, you can adjust the slider to change the Row height between 150px and 400px. The Row height is set as 300px as default.

There are 2 options for section heading alignment: Left and Center

On a mobile screen, you can change the Row height between 100px and 350px by adjusting the slider. The Row height is set as 300px by default.

Content collage section as main container with content block items. There are 3 types of content blocks:

Click "Add block" button to add content block items into the content collage section

A Text block displays content that consists of a heading, description text, and an optional button. Use it to highlight your brand message, value proposition, or calls to action.

Note: To highlight the Heading, place them between ‘[‘ and ‘]' in the heading input field. Example: [Free shipping]

You can display the button in three different styles:

You can also paste a link or link directly to Shopify pages.

On the Large screen option, there are 6 different Content position options:

You can also adjust the layout for the text block.

On a mobile screen, there are 6 different Content position options:

You can customize the column of the first Item heading between 1 and 2. With a long heading, you should use two columns for better readability.

You can also change the row between 1, 2, and 3 to make this block fully responsive on the mobile screen.

These settings control the appearance of background and text colors.

If the setting is transparent, the color is inherited from the color scheme of the parent section.

A Video block displays a video with optional heading, description text, and a call-to-action button. Use it to showcase product demonstrations, customer testimonials, or brand stories.

This place is to add content to the video block, including a heading and a button with a link.

For further customization about the Video item, please discover the Video banner article.

Set up similiarly to the Text block

You can change the color for Mask overlay and Text overlay on the video. You can also adjust the Mask overlay opacity between 0 and 90 by dragging the slider.

An Image block displays a high-quality image with optional heading, and a call-to-action button. Use it to showcase products, brand aesthetics, lifestyle images, or promotional graphics.

This place is to add content to the image block, including a heading and a button with a link.

In the Image block, you can set background images separately for large screens and mobile (this is recommended). Click on the Select image to upload the image for a large screen and mobile screen. Or choose an existing image on the media manager.

The recommended sizes for images are 1000x1500px (portrait) and 1500 x 1500 px (square).

Set up similiarly to the Text block

You can change the color for Mask overlay and Text overlay on the image. You can also adjust the Mask overlay opacity between 0 and 90 by dragging the slider.