Appearance
Shape carousel
This guide describes setting up a Shape carousel section.
Use the section to display a series of shapes on a store page, with embedded media, arranged in a carousel layout. Embedded media can include images, products, collections, and articles.
The previous video shows a Shape carousel section on a store's home page, with the title Essentials. The section contains shapes with embedded product images arranged in a carousel. Each product image links to a corresponding product page. Note how the arrow icons move to the next/previous item in the carousel.
For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.
Set up a Shape carousel section
To set up a Shape carousel section:
Go to Customize theme.
At the top of the page, use the dropdown to select a template that contains a Shape carousel section.
Note
The section can be added into any page, except Checkout and Giftcard pages. To add the section into the current page, select Add section > Shape carousel. Refer to Shopify help: Add a section.
From the side menu, select Shape carousel.
Select a setting described in the following table.
Setting name | Description |
---|---|
Title | In the Title box, enter text to display as a title (heading) inside the section. |
Slideshow focus | Select the Slideshow focus radio buttons to set the carousel's focus to Center or Left. |
Mobile slide width | Select the radio buttons Mobile slide width to set the width of the carousel items to Three fifths or Full width. This setting applies to mobile display devices. |
Desktop slide width | Adjust the slider Desktop slide width to set the width of the carousel items between 20% and 60% (percent). This setting applies to desktop display devices. |
Autoscroll mode | Use the Autoscroll mode dropdown to set the carousel to move from Right to left or Left to right automatically. To turn off automatic scrolling mode, select Disabled. |
Crop | Use the Crop dropdown to set an image cropping style for the images inside the section. The dropdown options are: No crop, Landscape, Square, and Portrait. |
Buttons > Button style | Use the Button style selector to set the style for the section's buttons to Primary or Secondary. Refer to Buttons. |
Buttons > Show buttons on mobile | Select the checkbox Show buttons on mobile to show/hide the section's buttons on mobile display devices. |
Buttons > Only show buttons on hover on desktop | Select the checkbox Only show buttons on hover on desktop to show/hide the section's buttons whenever a cursor is moved over the section. This setting applies to desktop display devices. |
Color > Color scheme | Use the Color scheme dropdown to set the section's color scheme to Primary, Secondary, Tertiary, or Quaternary. Refer to Colors. |
Color > Use gradient for background | Select the checkbox Use gradient for background to turn on/off using a gradient as the section's background. |
Theme settings | Select Theme settings to access additional settings for the section. Refer to Section theme settings menu. |
Custom CSS | Select Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS. |
Remove section | Select Remove section to delete the section from the current page. |
Configure a block within a Shape carousel section
A default Shape carousel section contains 6 images (blocks). To configure a block inside the section:
Go to Customize theme.
At the top of the page, use the dropdown to select a template that contains a Shape carousel section.
From the side menu, expand the Shape carousel section menu.
To configure an existing block, select the block from the side menu.
To add a new block, select Add block, choose a block to add, and then select the block you added.
Note
Inside the section, you can add, remove, show/hide, or move blocks. Refer to Configure blocks inside a section, and Shopify help: Sections and blocks
Apply a block setting described in the Table: Shape carousel blocks.
Table: Shape carousel blocks
The following table describes the blocks inside the Shape carousel section, and their corresponding settings.
The blocks indicated with an asterisk *
are contained in a default Shape carousel section. To configure a block, refer to Configure a block within a Shape carousel section.
Block name | Block description | Block setting(s) |
---|---|---|
Image * | Displays an image inside the section. |
|
Product | Displays a product inside the section. |
|
Collection | Displays a collection inside the section. |
|
Article | Displays an article (blog post) inside the section. |
|
Background pattern | Displays a stylistic pattern as a background inside the section. | Refer to Background pattern. |
Background shape | Displays a stylistic shape as a background inside the section. | Refer to Background shape. |
Sticker | Overlays the section with a stylized sticker. | Refer to Stickers. |
Shape divider | Displays a stylized separator between the current section and the next/previous section. | Refer to Shape divider. |