How can I add a preview button under a product thumbnail on Dawn theme?

[starlit2017]

I'm trying to add a button under a product thumbnail. We sell books and including a chapter preview is vital to converting readers.

Here's an example from a major bookstore: 

I've figured out how to add a preview to the backend when setting up a product through a dynamic metafield and added the code for the pop-up box to the theme.css. However, I can't figure out how to get the button code underneath the picture.

I tried to include it in the product-thumbnail.liquid and it technically worked, but it mucked up the whole page:

I'm not sure if it's in the wrong place or if something else need to be adjusted so it doesn't center the book above the product info (Normally, our product picture is on the left and the product information on the right).

We're using the Dawn theme.

Any ideas?

[PaulNewton · Accepted solution]

When seeking help ALWAYS provide relevant information to reproduce or inspect the problem so other people are not flying blind.

Store url, example code, any reference tutorials used, etc.

https://community.shopify.com/c/shopify-design/help-us-help-you/td-p/668159 

This is an advanced theme customization.

If the theme is broken that will complicate it even more for someone to try and fix it externally without directly interacting with the code.

Make sure to have a backup theme and be familiar with rolling back such mistakes.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code#roll-b... 

You may be much better off just using a custom-liquid block in the product section to place a preview on the leftside of the design at the top over other blocks.

[AliReviews]

Hello @starlit2017 ,

You can try to follow these steps:

• Go to Online Store -> Themes -> Actions -> Edit code
• Go to Snippets folder -> product-thumbnail.liquid
• Locate the code that generates the product image, which is typically an img element.
• Add the following code right after the img element:

<div class="product-thumbnail__buttons">
  <a href="{{ product.url }}" class="button">View Product</a>
</div>

• Save changes

Hope this can help you out.

Ali Reviews team.

[barry218]

Hi,

I have a website that sells books. I am on the first step on creating a popup that shows the inside images. How were you able to accomplish that?

[PaulNewton]

A popup for an image gallery is often referred to as lightbox in UI parlance.

That's beyond the scope of this post.

It's an advanced customization or needs an app if the theme being used doesn't already have that feature.