Product Details

About Shine Theme Product Details SectionClick to copy 2222

The Shine Theme Product Details section showcases all the details of your products including product name, image, description, price, variant, add-to-cart button, etc.

The Product Details section cannot be removed. However, it can be hidden on the Product template.

About Shine Theme Product Details Section

Access Shine Theme Product Details SectionClick to copy 2222

On the top center bar, click the dropdown button > Products.

Shine Theme Product Details Section

On the left sidebar, head to Template > Product details. Shine Theme Product Details Section

Shine Theme Product Details Section ConfigurationClick to copy 2222

The Product Details section has several settings that can be adjusted. To change the product, on the top left sidebar, click on Change > Select product.

Shine Theme Product Details Section

To configure the Product Details section, click on the section to access the configuration settings.

Shine Theme Product Details Section

GeneralClick to copy 2222

Under the Color Scheme, you can choose a specific scheme for the Product details section. To modify or add a new color scheme, go to Theme Settings > Color.

Shine Theme Product Details Section

MediaClick to copy 2222

In Product Details, you can set the Media Ratio:

  • Square
  • Portrait
  • Landscape
  • Adapt to image

Product Details

You can also adjust the image ratio of the thumbnail. There are 2 main types: Fit and Fill. Each type has 3 styles for you to choose.

  • Fit: The image will be scaled up and resized to fit the ratio style you choose. However, the image may be cropped to fit within the container.

Product Details

  • Fill: The image will be nested within the ratio style you choose.

Product Details

The zoom function lets visitors hover to zoom the product images. Once they click on the plus icon, the product images will be displayed in a stunning detail popup view. Click on the check box to Enable zoom function.

Product Details

You can also change the color of the Media background.

Product Details

Large ScreenClick to copy 2222

On large screen, there are four different media layouts for you to choose from:

  • Main media with thumbnails (left)

Product Details

  • Main media with thumbnails (below)

Product Details

  • Image grid

Product Details

  • 2 main images slideshow

Product Details

You can also adjust the Media width between Regular and Large.

Product Details

Moreover, you can Enable sticky media when scrolling. It will help customers scan more information while still viewing the product images.

Product Details

Mobile ScreenClick to copy 2222

On the mobile screen, you can change the Media width between Regular and Full width.

Product Details

You can also choose to Show thumbnails on mobile.

Product DetailsSticky Add To Cart

The sticky add to cart option is a bar that displays at the bottom of the screen while visitors scrolling your store. Click on the check box to enable sticky add to cart.

Product Details

For further customization, you can switch the Sticky add to cart position between Buttom left and Bottom right.

Product Details

Please note that the sticky add to cart button is full width on the mobile screen by default.

Shine Theme Product Details Section Blocks ConfigurationClick to copy 2222

The Shine Theme Product Details section provides many different types of blocks:

  • Vendor
  • Title
  • Product code
  • Price
  • Variant sector
  • Buy buttons
  • Collapsible item
  • Pickup availability
  • Complete with
  • Share

Product Details

Click on Add block to add more block to the Product Details section.

Product Details

If you want to remove/hide any block, click on the block you want to remove/hide and choose Remove block/Hide block icon.

Each block can only be used 1 time, except for the Description block.

To customize each item in the Product Details section, click on the block you want to edit.

The settings for the Title, Price, Variant Selector, Buy Buttons, Share are similar to the Featured Product block settings.

Product CodeClick to copy 2222

You can choose to Show SKU and Show barcode.

Product Details

Collapsible ItemClick to copy 2222

You can apply text for the Heading and Description. You can also choose to expand item by default by clicking on the checkbox.

Product Details

Pickup AvailabilityClick to copy 2222

On the Pickup Availability option, you can Show expected pickup time. To configure all the settings for the Pickup Availability, check out the article about Local pickup.

Complementary ProductsClick to copy 2222

The Complementary products option displays complementary and related products to customers. To configure all the settings for the Complementary products, check out the Shopify Search & Discovery article.

Navigate this category