Content Collage
About Shine Theme 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.
Access Shine Theme Content collage
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.
Shine Theme Content Collage Configuration
To configure the Content Collage section, click on the section to access the configuration settings.
General
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.
Large screen
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.
Mobile screen
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.
Spacing
You can choose to customize the outer spacing top/bottom of the Content collage section. These settings will decrease the top/bottom margin of a section, thereby bringing it nearer to the sections above and below it.
- Remove outer spacing top
- Remove outer spacing bottom
Shine Theme Content Collage Blocks Configuration
Item Heading
The Shine theme Content collage section allows you to apply content for the Heading, Heading size, Description, and Button text. If you want to hide the message, leave the placeholder empty.
You can display the button in three different styles:
- Filled
- Outlined
- Text link
You can also paste a link or link directly to Shopify pages.
Large Screen
On the Large screen option, you can select the position to display the content:
- Top left
- Top center
- Middle left
- Bottom left
- Bottom center
You can also adjust the layout for the Item heading block.
Mobile screen
On a mobile screen, you can choose five different Content position options:
- Top left
- Top center
- Middle left
- Bottom left
- Bottom center
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.
Featured Video
Card content
You can apply the content for the Heading text and the Button text. If you want to hide the message, leave the placeholder empty.
For the Heading size, you can choose:
- H3
- H4
- H5
- H6
For the Button style, you can select:
- Filled
- Outlined
- Text link
You can also paste a link or link directly into the created page to create a button link.
Video
For further customization about the Video item, please discover the Video banner article.
Featured Image
Card Content
All the settings for the card content for the Item Heading Card are similar to the Item Heading Video.
Image
In the Image option, You can set background images separately for large screens and mobile. 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.
- If you set the image for the large screen and don’t upload the image for the mobile screen, the mobile view will automatically inherit the image of the large screen.
- If you set the image only for the mobile screen, the large screen will not inherit the image of the mobile screen.
The recommended sizes for images are 1000x1500px (portrait) and 1500 x 1500 px (square).
Large screen
All the settings for the Large screen are the same as the Item Heading.
Mobile screen
Similarly, you can check out more detailed settings in the Item Heading.
Custom color
You can change the Mask overlay and Text overlay by choosing the color. You can also adjust the Mask overlay opacity between 0 and 90 by dragging the slider.
