How to Edit Electro Content Collage

About Content Collage SectionClick to copy 2222

The Content Collage section in the Electro Shopify theme is a great way to show different types of content on your website, such as images, collections, and products. You can easily customize this section to create a layout that fits your needs.

How to Edit Electro Content Collage

How To Access Content Collage SectionClick to copy 2222

  • Step 1: Go to Online Store > Themes > click on Customize
  • Step 2: Click on Add section > search for “Content collage” in the search bar and select it

How to Edit Electro Content Collage

How To Configure Content Collage SectionClick to copy 2222

Click on the Content Collage section to open its settings. You’ll see three main setting cards: General, Layout, and Items.

How to Edit Electro Content Collage

GeneralClick to copy 2222

In the General tab, you can choose the color scheme for the text and background of the content blocks. To change these color schemes, go to Theme Settings > Colors.

How to Edit Electro Content Collage

You can add content to the Section Subheading, Heading, and Description by clicking on the text box and typing your content. To remove content, simply delete the text in the box.

How to Edit Electro Content Collage

For the heading text, you can change its size from H2, H3, H4, and H5. These heading sizes are based on the Base text size set in Theme settings > Typography.

How to Edit Electro Content Collage

LayoutClick to copy 2222

In Layout tab, you can select the position to display for the heading content of the section:

  • Left:

How to Edit Electro Content Collage

  • Center:

How to Edit Electro Content Collage

In Items ordering, there are 3 types:

  • Equal: the Collection, Product and heading image show equal in size

How to Edit Electro Content Collage

  • Main item first: the first item will be bigger than others

How to Edit Electro Content Collage

  • Main item last: the last item will be bigger than others

How to Edit Electro Content Collage

By default, the Equal type is selected.

You can also turn on or off the stacked layout by checking the checkbox.

Note: The stacked layout only works if you select Main item first or Main item last.

How to Edit Electro Content Collage

ItemsClick to copy 2222

In the Items tab, you can choose from 5 sizes for the Item heading. These sizes are based on the Base text size you’ve set in Theme settings > Typography.

How to Edit Electro Content Collage

You can change the Image ratio for the content items. There are 2 options:

  • Square

How to Edit Electro Content Collage

  • Portrait (4:5)

How to Edit Electro Content Collage

Note: If the stacked layout is on, this setting only applies to the main item.

Click the Show items button to show or hide the CTA button for each item. Remember that the link still works even without this button.

How to Edit Electro Content Collage

How To Configure Content Collage BlockClick to copy 2222

You can have up to 3 blocks in the Content Collage. These can be Collection, Product, or Image blocks. Click on each block to change its settings.

How to Edit Electro Content Collage

CollectionClick to copy 2222

To select a collection for the Collection block, click on the item and hit the “Select Collection” button to choose one collection. Check the “Show number of products” box if you want to display how many products are in the collection.

How to Edit Electro Content Collage

Once you select a collection, the block’s background image and content will change to the collection image and name you set up in Shopify admin under Products > Collections.

How to Edit Electro Content Collage

The Overlay opacity controls the opacity of the overlay color on each block background image. You can drag the bar to change the opacity, from 0% to 90%. You can also choose the Custom mask overlay and Custom text overlay for this block.

  • Custom mask overlay: the color of the overlay of the block.
  • Custom text overlay: the color of the text inside the block.

How to Edit Electro Content Collage

ProductClick to copy 2222

To select a product, click on the Product block item then hit Select Product to choose.

How to Edit Electro Content Collage

Once you add a product, the block’s content and background image will automatically update to show the product title, price, and main image.

The overlay settings work the same as for Collection blocks.

How to Edit Electro Content Collage

ImageClick to copy 2222

Click on the Image block item to upload a background image.

How to Edit Electro Content Collage

The overlay settings work the same as for Collection and Product blocks.

How to Edit Electro Content Collage

You can set up the Heading text, Button text, and Button link for this block in the Settings tab. To remove an element, just leave its text box empty.

How to Edit Electro Content Collage

Note: If the Button link field is empty, the button will appear disabled.

How to Edit Electro Content Collage

Frequently Asked QuestionsClick to copy 2222

1. How many blocks can I add to the Content Collage section?

You can add up to 3 blocks in the Content Collage section.

2. Can I hide the CTA (Call-to-Action) button on the blocks?

Yes, you can show or hide the CTA button using the Show items button in the Items tab.

3. Can I customize the overlay on block background images?

Yes, you can adjust the overlay opacity and choose custom colors for the mask overlay and text overlay for each block.

Navigate this category