Dawn theme - Move "POP-UP" section on product page

Store Design
, , , ,
1

Hello, I’m trying to manually move the POP-UP section option to a specific area on the product page. Drop and drag won’t work as I have implemented an < h r > tag. So drop and drag won’t go where I want it to. I have tried using {% render 'pop-up %} in back-end coding, but it won’t work.

Any suggestions?

Thanks

2

Hi @xnyjyh

To manually move the pop-up section to a specific area on the product page using Liquid code, you can follow these steps:

  1. Open your Shopify admin and go to Online Store > Themes.

  2. Find the theme you want to edit and click on the “Actions” dropdown. Select “Edit code”.

  3. In the theme code editor, locate and open the product-template.liquid file (or the file that represents your product page template).

  4. Find the location in the code where you want to place the pop-up section. For example, if you want to place it below the product description, look for the code that renders the product description.

  5. To render the pop-up section, use the {% section 'pop-up' %} Liquid tag. Replace 'pop-up' with the actual name of your pop-up section file (e.g., 'pop-up.liquid').

Here’s an example of how you can place the pop-up section below the product description:


{{ product.description }}

{% section 'pop-up' %}

  1. Save the changes to the product-template.liquid file.

  2. If you haven’t already created the pop-up section file, go to the “Sections” folder in the theme code editor and create a new file named pop-up.liquid (or the name you used in step 5).

  3. In the pop-up.liquid file, add the necessary HTML, CSS, and Liquid code for your pop-up. You can refer to the Shopify documentation or use a pre-built pop-up section code snippet.

  4. Save the pop-up.liquid file.

  5. Go back to your Shopify admin, navigate to Online Store > Themes, and click the “Customize” button for your theme.

  6. In the theme customizer, you should see the newly added pop-up section. You can configure its settings and content from there.

  7. Save the changes in the theme customizer.

Now, the pop-up section should appear on your product page in the specified location.

Remember to replace 'pop-up' and pop-up.liquid with the actual name of your pop-up section file, and adjust the code placement according to your theme’s structure.

If you encounter any issues or need further assistance, I recommend reaching out to Shopify support or seeking help from a Shopify expert or developer.

3

I did just as you just, but unfortunately I get this error: Liquid error (sections/main-product line 184): Cannot render sections inside sections

4

This the code i found on product-main/liquid. Dosnt seem to have its own .liquid for this popup in backend.

{%- when 'popup' -%}
              
              
                {{- block.settings.text -}}