7. Examples

INTRODUCTIONPromo Box examples

List of several product layouts using Promo Box element:

Example 01

https://documentation.bold-themes.com/shoperific/wp-content/uploads/sites/35/2018/09/promo-image-left-side.jpg

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

https://documentation.bold-themes.com/shoperific/wp-content/uploads/sites/35/2018/09/promo-image-right-side.jpg

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

https://documentation.bold-themes.com/shoperific/wp-content/uploads/sites/35/2018/09/promo-image-background.jpg

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

https://documentation.bold-themes.com/shoperific/wp-content/uploads/sites/35/2018/09/single-product-image-left-side.jpg

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

https://documentation.bold-themes.com/shoperific/wp-content/uploads/sites/35/2018/09/single-product-f.jpg

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

https://documentation.bold-themes.com/shoperific/wp-content/uploads/sites/35/2018/09/single-product-background-image.jpg

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

https://documentation.bold-themes.com/shoperific/wp-content/uploads/sites/35/2018/09/single-product-background-image-content-left.jpg

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

https://documentation.bold-themes.com/shoperific/wp-content/uploads/sites/35/2018/09/shop-page-image-on-side.jpg

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

https://documentation.bold-themes.com/shoperific/wp-content/uploads/sites/35/2018/09/shop-page-background-image.jpg

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

https://documentation.bold-themes.com/shoperific/wp-content/uploads/sites/35/2018/09/shop-page-hide-button-category.jpg

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

https://documentation.bold-themes.com/shoperific/wp-content/uploads/sites/35/2018/09/shop-page-wishlist-button.jpg

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

https://documentation.bold-themes.com/shoperific/wp-content/uploads/sites/35/2018/09/shop-page-with-description.jpg

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.