INTRODUCTIONPromo Box examples
List of several product layouts using Promo Box element:
Example 01
Image on the left side
General:
- Left, 1/3 width image position,
- Horizontal 16×9 image format,
- Soft rounded box shape.
Display:
- Middle content vertical position,
- Content alignment – inherit.
Example 02
Image on the right side
General:
- Right, 1/2 width image position,
- Horizontal 16×9 image format,
- Large image base size.
Display:
- Middle content vertical position,
- Content alignment – inherit.
Example 03
Background image
General:
- Background, content right image position,
- Horizontal 16×9 image format,
- Full image base size.
Display:
- Top content vertical position,
- Content alignment – inherit.
Single product examples
List of several product layouts using Single product element:
Example 01
Image on left side
General:
- Left, 1/2 width image position,
- Large image base size,
- Vertical 3×2 image format.
Override:
- Custom product image,
- Custom product description.
Display:
- Middle content vertical position,
- Medium title size,
- H2 title tag,
- Show description – yes,
- Medium price size,
- Show button – yes,
- Light font, alternate background button color scheme.
Hover:
- No hover.
Example 02
Image on top
General:
- Top image position,
- Medium image base size,
- Horizontal 3×2 image format.
Display:
- Middle content vertical position,
- Extra Small title size,
- H2 title tag,
- Show categories – subtitle,
- Small price size,
- Show button – yes,
Hover:
- No hover.
Example 03
Background image
General:
- Background image position,
- Large image base size,
- Square image format.
Override:
- Custom product image,
- Custom product supertitle,
- Custom product title.
Display:
- Top content vertical position,
- Left content alignment,
- Normal title size,
- H2 title tag,
- Dark font, alternate background headline color scheme,
- Normal price size,
- Show button – yes,
- Light font, alternate background button color scheme.
Hover:
- No hover.
Example 04
Background image, content left
General:
- Background image, content left position,
- Medium image base size,
- Horizontal 16×9 image format.
Override:
- Custom product image,
- Custom product supertitle,
- Custom product title.
Display:
- Top content vertical position,
- Large title size,
- H2 title tag,
- Light font, dark background headline color scheme,
- Normal price size,
- Light font, alternate background button color scheme.
Hover:
- Middle content vertical position,
- Center content alignment.
- Medium title size,
- H2 title tag,
- Show button – yes.
Shop page examples
Examples of layout for Products' page
Shoperific theme allows you to customize the layout of Products’ page, and the display of products on it.
Example 01
Image on left side
Sidebar can be set or removed in the Override Global Settings of the Shop page. You can find more info about these settings on the following link.
The layout for the Products page can be edited in Appearance >Customize >Shop panel.
- List: Number of items per row – 2,
- List: Image position – left, 1/2 width,
- List: Image format – square,
- List: Show title – extra small,
- List: Show categories – subtitle,
- List: Show rating – subtitle,
- List: Content alignment – center.
Example 02
Background image
Sidebar can be set or removed in the Override Global Settings of the Shop page. You can find more info about these settings on the following link.
The layout for the Products page can be edited in Appearance >Customize >Shop panel.
- List: Number of items per row – 3,
- List: Image position – background,
- List: Image format – square,
- List: Show title – extra small,
- List: Show categories – subtitle,
- List: Show rating – subtitle,
- List: Content alignment – center.
Example 03
Hidden button & category
Sidebar can be set or removed in the Override Global Settings of the Shop page. You can find more info about these settings on the following link.
The layout for the Products page can be edited in Appearance >Customize >Shop panel.
- List: Number of items per row – 4,
- List: Image position – top,
- List: Image format – square,
- List: Show title – extra small,
- List: Show categories – no,
- List: Show rating – no,
- List: Show button – no,
- List: Content alignment – center.
Example 04
Compare & wishlist buttons
Sidebar can be set or removed in the Override Global Settings of the Shop page. You can find more info about these settings on the following link.
The layout for the Products page can be edited in Appearance >Customize >Shop panel.
- List: Number of items per row – 4,
- List: Image position – top,
- List: Image format – square,
- List: Show title – extra small,
- List: Show categories – no,
- List: Show rating – no,
- List: Show wishlist button – yes,
- List: Show compare button – yes,
- List: Content alignment – center.
Example 05
With description
Sidebar can be set or removed in the Override Global Settings of the Shop page. You can find more info about these settings on the following link.
The layout for the Products page can be edited in Appearance >Customize >Shop panel.
- List: Number of items per row – 3,
- List: Image position – top,
- List: Image format – square,
- List: Show title – extra small,
- List: Show rating – no,
- List: Show description – yes,
- List: Content alignment – center.