Website Building » Shopify » How Do I Add a Section to My Product Page in Shopify?

How Do I Add a Section to My Product Page in Shopify?

Last updated on January 9, 2023 @ 6:56 pm

Adding a section to your product page in Shopify is simple and can be done in just a few steps. First, log in to your Shopify admin and go to Online Store > Themes.

Next, click the Actions button next to the theme you want to edit and select Edit code. In the Layout directory, click on the theme.liquid file to open it in the online code editor.

Now that you have the theme.liquid file open, you can add a new section to your product page by following these steps:

    1. Locate the <body> tag near the top of the file and add a new <div> tag below it. This <div> tag will be used to hold your new section.

    2. Give your <div> tag an id attribute so that you can reference it later in your CSS file. We recommend using a unique id so that it doesn’t conflict with any other id’s on your site.

    3. Add your content inside of the <div> tag. This could be anything from text to images to videos.

    4. Save your changes by clicking the Save button at the top of the page.

Now that you’ve added your new section, you need to style it using CSS. To do this, go to Online Store > Themes > Actions > Edit code and locate the Assets directory. Click on the theme.scss file to open it in the online code editor.

PRO TIP: If you are not familiar with Shopify’s coding language, Liquid, we recommend that you reach out to a Shopify Expert to help you make these changes to your product page.

Scroll down to the bottom of the file and add a new CSS rule for your new section using the id you created earlier. For example:

#new-section {  
  background-color: #fff;  
  padding: 20px;  
}

Save your changes and preview your product page to see your new section in action!

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.