The Portfolio section lets you display a grid or carousel of visual profile cards. Each card can show an image, a heading, and an expandable drawer with more detailed text.
This section is useful for portfolios, lookbooks, brand stories, team profiles, service highlights, project galleries, or any layout where customers can click a card to read more information.
How to Set Up the Portfolio Section in Concept
STEPS:
Add the Portfolio section
-
From your Shopify admin, open Online Store > Themes.
-
Click Customize on your Concept theme.
-
Open the template where you want to display the portfolio content.
-
Click Add section.
-
Select Portfolio.
-
Drag the section to the position where you want it to appear.
-
Click Save.
After adding the section, you can configure the layout and add Profile blocks.
Configure the portfolio layout
-
Open the Portfolio section in the theme editor.
-
Use Number of columns on desktop to control how many cards appear in each row.
-
Enable Enable carousel on desktop if you want the portfolio cards to slide horizontally on desktop.
-
Use Desktop layout to choose the layout style:
- Standard displays the heading area above the portfolio cards.
- Grid places the heading area inside the card grid on large desktop screens.
-
Use Image ratio to control the desktop card image shape.
-
Use Mobile image ratio to control the image shape on mobile devices.
-
Use Number of columns on mobile to display one or two columns on mobile.
-
Enable Enable swipe on mobile if you want customers to swipe through cards on mobile.
-
Click Save.
Configure the heading area
-
Open the Portfolio section settings.
-
Add a Heading to introduce the section.
-
Add a Subheading if you want to show a short label above the main heading.
-
Add a Description if you want to include supporting text below the heading.
-
Use Heading size to adjust the heading scale.
-
Use Heading alignment to align the heading content to the left, center, or right.
-
Use Heading tag to choose the HTML tag for the heading.
-
Add a Button label and Button link if you want to show a call-to-action button.
-
Enable Open link in new tab if the button should open in a new browser tab.
-
Enable Show button icon if you want the button to include an icon.
-
Click Save.
Add a Profile block
-
Open the Portfolio section.
-
Click Add block.
-
Select Profile.
-
Upload or select an Image for the card.
-
Upload a Mobile image if you want to show a different image on mobile devices.
-
Add a Heading for the card title.
-
Add Text for the drawer content that appears when customers open the card.
-
Use Text color to adjust the text color inside the card and drawer.
-
Use Background to adjust the drawer background color.
-
Click Save.
The Portfolio section supports up to 15 Profile blocks.
Arrange portfolio cards
-
Add multiple Profile blocks to create your portfolio layout.
-
Drag blocks up or down in the theme editor to change their display order.
-
Click the eye icon beside a block if you want to temporarily hide it.
-
Use consistent image sizes for a cleaner layout.
-
Add shorter headings if you want the card titles to stay easy to read.
-
Click Save after arranging the blocks.
Customize colors and section style
-
Use Text color to change the main section text color.
-
Use Background or Background gradient to style the section background.
-
Use Highlight color or Highlight gradient to style highlighted heading text.
-
Use Button text, Button background, and Button background gradient to style the section button.
-
Adjust Top padding and Bottom padding to control section spacing.
-
Enable Show section divider if you want a divider line around the section.
-
Enable Make section full width if you want the section to span the full browser width.
-
Enable Make section rounded if you want rounded section corners.
-
Click Save.
Portfolio behavior
-
Each Profile block displays as a visual card.
-
Customers can click the plus button on a card to open a drawer with more text.
-
The drawer title uses the Profile block heading.
-
The drawer body uses the Profile block text.
-
If no image is selected, the theme displays a placeholder image.
-
If a Mobile image is selected, it replaces the desktop image on smaller screens.
-
When Enable carousel on desktop is enabled, desktop navigation buttons appear for the portfolio slider.
-
When Enable swipe on mobile is enabled, customers can swipe through portfolio cards on mobile.
-
The section can contain up to 15 Profile blocks.
Troubleshooting
-
If the Portfolio section does not appear, make sure at least one Profile block has been added.
-
If a card shows a placeholder image, make sure an image is selected in the Profile block.
-
If the mobile image does not appear, make sure a separate Mobile image has been selected in the block.
-
If the drawer opens but the content is empty, make sure the Text field is filled in the Profile block.
-
If the carousel navigation does not appear on desktop, make sure Enable carousel on desktop is enabled and that there are enough blocks to scroll.
-
If the layout looks crowded, reduce the number of desktop columns or use shorter card headings.
-
If highlighted heading text does not appear, make sure the text is formatted with italic styling and a highlighted text style is selected.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
How to Set Up the Highlight Text Section in Concept
How to Set Up the Lookbook Section in Concept