Hello @FelaC
To add an image above the product name on your Shopify product page, you'll need to modify your theme's Liquid code. Here are the steps to do this:
1. Access the Theme Editor:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit and click Actions > Edit code.
2. Locate the Product Template:
- In the Sections or Templates directory, find the main-product.liquid file. It might also be named something similar, depending on your theme (e.g., product-template.liquid).
3. Modify the Liquid Code:
- Open the product.liquid file.
- Locate the code for the product name. This is often within a <h1> or <h2> tag with a class like product-title. It might look something like this:
- <h1 class="product-title">{{ product.title }}</h1>
4. Insert the Image Code:
- Above the product name code, insert the HTML for your image. You can use the following code snippet, replacing image_url with the actual URL of the image you want to display:
<img src="{{ 'image_url' | asset_url }}" alt="{{ product.title }} Image" class="product-page-image">
- For example, it should look like this:
<img src="{{ 'image_url' | asset_url }}" alt="{{ product.title }} Image" class="product-page-image">
<h1 class="product-title">{{ product.title }}</h1>
5. Save and Preview:
- Save the changes to the main-product.liquid file.
Go to your product page on your store to preview the changes and ensure the image appears above the product name.
6. Adjust Styling (Optional):
- If needed, you can adjust the styling of the image by adding CSS rules in your theme's CSS file (usually found in assets/base.css).
For example:
.product-page-image {
width: 100%;
max-width: 300px;
margin-bottom: 10px;
}
By following these steps, you can successfully add an image above the product name on your Shopify product page.
