avada.io
AVADA logo
Published on
Product Pages

How to modify a product page template in Shopify

551 words3 min read
Author
  • Name
    claire
    Twitter

A visitor coming to an online store, the customers will have the default variants which are totally customizable. From the way products displayed, online sellers can impress their visitors with the best performances. Moreover, by this functionality, it is easy for the users to disable the auto-selecting of default variant and replace it by the stunning template.

The Shopify store owners enable choosing the way their products are shown by its variants. All the product images, product description, or prices will be performed professionally and attractively. Besides, with available and noticeable Add to cart button, their sales will be optimal.

Before editing the theme code, admins should consider all the requirements such as checking the setting theme in the theme editor. If there is not any setting, it is necessary for the users to edit their theme code including the settings. Furthermore, the store owners can create a backup by duplicating their themes. When online sellers want to start again, it is possible for them to discard their changes.

This following article How to modify a product page template in Shopify with the simple steps will be useful for the users to configure their product page template by themselves. By changing their display, layouts, etc, the Shopify store owners create better impressions for the customers, so the sales will increase significantly.

How to create the posts in Markdown and publish them as a blog in Shopify

Step 1: Go to sections {#step-1}

From admin section, the users go to Sections directory. Then choose product-template.liquid

disable sold out variants in shopify

Step 2: Find the code {#step-2}

In this step, the store owners need to find the following code:

{% assign current_variant = product.selected_or_first_available_variant %}

Then replacing the above code with:

{% assign current_variant = product.selected_variant %}

Step 3: Replace the code {#step-3}

Besides, it is also necessary for the users to find the following code:

selected="selected"

Along with the Liquid logic tags, the admins need delete the above code to be like this:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Step 4: Paste code {#step-4}

In the fourth step, the after finding those above codes, admins should prepare to change their At the bottom of the file, the users just need to paste the following code:


<script>
var productOptions = [];
 {% for option in product.options %}
  var optionObj = {};
  optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}";
  productOptions.push(optionObj);
 {% endfor %}
</script>

Step 5: Save {#step-5}

Click Save to save all the changes.

Conclusion

The way a product displayed is necessary for online sellers to maximize their own sale. By customizing their own products images, the visitors will be more attracted and be willing to buy more. Through this article How to modify a product page template in Shopify, it is easy for the Shopify store owners to change their boring default. To have more customization guiding articles, the Shopify sellers can discover with those blogs such as How to modify the theme code, How to modify theme's JavaScript file.

Don't have a Shopify store?

Get your free trial here -->x

Exclusive Offer: Shopify Deal for PageFly Audience

Start Your Online Business with Shopify 12 Day Free Trial + Pay Only 1$ For Your First Month