Shopify themes, liquid, logos, and UX
Hello,
Can someone add a discount code highlighted under the price on my product page please?
like this
Solved! Go to the solution
This is an accepted solution.
Hello @DBGG
here is a code
Go to Online Store----------->Theme-------------> Edit code------------> find a file "product-template.liquid"----------- > find " {%- include 'product-meta -%}" bellow that add this code
{% if section.settings.coupons_label != blank or section.settings.coupon_text != blank %}
<p style="background: {{ section.settings.coupon_background }};padding: 10px; text-align: center; margin-top: 10px; color: {{ section.settings.coupon_color }};width: max-content;"> {{ section.settings.coupons_label }} {{ section.settings.coupon_text }}</p>
{% endif %}
Replace your Schemea with this one
{% schema %}
{
"name": "Product page",
"class": "shopify-section--bordered",
"settings": [
{
"type": "color",
"id": "background",
"label": "Background",
"default": "#ffffff"
},
{
"type": "select",
"id": "responsive",
"label": "Responsive",
"default": "block",
"options": [
{
"value": "block",
"label":"display block all screen"
},
{
"value": "xxl-block",
"label":"display till xxl-screen(i.e min 1440px)."
},
{
"value": "xl-block",
"label":"display till xl-screen(i.e min 1200px)."
},
{
"value": "lg-block",
"label":"display till lg-screen(i.e min 992px)."
},
{
"value": "md-block",
"label":"display till md-screen(i.e min 768px)."
},
{
"value": "sm-block",
"label":"display till sm-screen(i.e min 576px)."
},
{
"value": "mbl-block",
"label":"display on sm-screen only."
},
{
"value": "none",
"label":"display none all screen"
}
]
},
{
"type": "checkbox",
"id": "show_share_buttons",
"label": "Show social sharing buttons",
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": true
},
{
"type": "checkbox",
"id": "description_below_add_to_cart",
"label": "Description below add to cart",
"default": false
},
{
"type": "checkbox",
"id": "show_color_swatch",
"label": "Show color swatch",
"default": true
},
{
"type": "checkbox",
"id": "show_color_carousel",
"label": "Show color carousel",
"info": "A selector will appear with variant image previews when choosing colors.",
"default": false
},
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": "Show quantity selector",
"default": true
},
{
"type": "checkbox",
"id": "show_inventory_quantity",
"label": "Show inventory quantity",
"info": "Make sure that your inventory is tracked. [Learn more](https://help.shopify.com/manual/products/inventory#set-up-inventory-tracking).",
"default": false
},
{
"type": "range",
"id": "inventory_quantity_threshold",
"label": "Inventory quantity threshold",
"info": "Only show inventory quantity if below threshold. Choose 0 to always show.",
"min": 0,
"max": 50,
"step": 1,
"default": 0
},
{
"type": "checkbox",
"id": "show_payment_button",
"label": "Show dynamic checkout button",
"info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": false
},
{
"type": "header",
"content": "Product images"
},
{
"type": "select",
"id": "image_size",
"label": "Size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
},
{
"value": "fill",
"label": "Fill screen"
}
],
"default": "large"
},
{
"type": "checkbox",
"id": "enable_image_zoom",
"label": "Enable zoom",
"default": true
},
{
"type": "checkbox",
"id": "show_thumbnails",
"label": "Show thumbnails",
"info": "Only applicable on large screens",
"default": true
},
{
"type": "header",
"content": "Tabs"
},
{
"type": "page",
"id": "tab_page_1_handle",
"label": "First page"
},
{
"type": "page",
"id": "tab_page_2_handle",
"label": "Second page"
},
{
"type": "paragraph",
"content": "The theme also allows you to add specific tabs for a given product only."
},
{
"type": "header",
"content": "Reviews"
},
{
"type": "paragraph",
"content": "You need to install [Shopify's free Product Reviews](https://apps.shopify.com/product-reviews) app before enabling this option."
},
{
"type": "checkbox",
"id": "reviews_enabled",
"label": "Enable",
"default": false
},
{
"type": "header",
"content": "Featured image"
},
{
"type": "paragraph",
"content": "You can highlight an image after product tabs by adding the ALT tag \"featured\" to a given image."
},
{
"type": "select",
"id": "featured_image_size",
"label": "Section size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "normal",
"label": "Normal"
},
{
"value": "large",
"label": "Large"
}
],
"default": "large"
},
{
"type": "image_picker",
"id": "trust_image",
"label": "Trust Image"
},
{
"type": "header",
"content": "Coupons Section"
},
{
"type": "inline_richtext",
"id": "coupons_label",
"label": "Coupons label"
},
{
"type": "inline_richtext",
"id": "coupon_text",
"label": "Coupons Text"
},
{
"type": "color",
"id": "coupon_color",
"label": "Coupon Text color",
"default": "#1c1b1b"
},
{
"type": "color",
"id": "coupon_background",
"label": "Coupon Background color",
"default": "#ffffff"
}
]
}
{% endschema %}
and save it
Go to Online Store------------->Theme--------------->Customize theme----------------> open product and check Customize area at the very last you will see the option to change and Add text.
Please let me know
Thansk
@DBGG ,
yes, this is possible with custom code because this feature Is not available on the theme.
may I know which theme you are using now?
Hi @DBGG
Could you share your store URL so we can check?
- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
This is an accepted solution.
Hello @DBGG
here is a code
Go to Online Store----------->Theme-------------> Edit code------------> find a file "product-template.liquid"----------- > find " {%- include 'product-meta -%}" bellow that add this code
{% if section.settings.coupons_label != blank or section.settings.coupon_text != blank %}
<p style="background: {{ section.settings.coupon_background }};padding: 10px; text-align: center; margin-top: 10px; color: {{ section.settings.coupon_color }};width: max-content;"> {{ section.settings.coupons_label }} {{ section.settings.coupon_text }}</p>
{% endif %}
Replace your Schemea with this one
{% schema %}
{
"name": "Product page",
"class": "shopify-section--bordered",
"settings": [
{
"type": "color",
"id": "background",
"label": "Background",
"default": "#ffffff"
},
{
"type": "select",
"id": "responsive",
"label": "Responsive",
"default": "block",
"options": [
{
"value": "block",
"label":"display block all screen"
},
{
"value": "xxl-block",
"label":"display till xxl-screen(i.e min 1440px)."
},
{
"value": "xl-block",
"label":"display till xl-screen(i.e min 1200px)."
},
{
"value": "lg-block",
"label":"display till lg-screen(i.e min 992px)."
},
{
"value": "md-block",
"label":"display till md-screen(i.e min 768px)."
},
{
"value": "sm-block",
"label":"display till sm-screen(i.e min 576px)."
},
{
"value": "mbl-block",
"label":"display on sm-screen only."
},
{
"value": "none",
"label":"display none all screen"
}
]
},
{
"type": "checkbox",
"id": "show_share_buttons",
"label": "Show social sharing buttons",
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": true
},
{
"type": "checkbox",
"id": "description_below_add_to_cart",
"label": "Description below add to cart",
"default": false
},
{
"type": "checkbox",
"id": "show_color_swatch",
"label": "Show color swatch",
"default": true
},
{
"type": "checkbox",
"id": "show_color_carousel",
"label": "Show color carousel",
"info": "A selector will appear with variant image previews when choosing colors.",
"default": false
},
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": "Show quantity selector",
"default": true
},
{
"type": "checkbox",
"id": "show_inventory_quantity",
"label": "Show inventory quantity",
"info": "Make sure that your inventory is tracked. [Learn more](https://help.shopify.com/manual/products/inventory#set-up-inventory-tracking).",
"default": false
},
{
"type": "range",
"id": "inventory_quantity_threshold",
"label": "Inventory quantity threshold",
"info": "Only show inventory quantity if below threshold. Choose 0 to always show.",
"min": 0,
"max": 50,
"step": 1,
"default": 0
},
{
"type": "checkbox",
"id": "show_payment_button",
"label": "Show dynamic checkout button",
"info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": false
},
{
"type": "header",
"content": "Product images"
},
{
"type": "select",
"id": "image_size",
"label": "Size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
},
{
"value": "fill",
"label": "Fill screen"
}
],
"default": "large"
},
{
"type": "checkbox",
"id": "enable_image_zoom",
"label": "Enable zoom",
"default": true
},
{
"type": "checkbox",
"id": "show_thumbnails",
"label": "Show thumbnails",
"info": "Only applicable on large screens",
"default": true
},
{
"type": "header",
"content": "Tabs"
},
{
"type": "page",
"id": "tab_page_1_handle",
"label": "First page"
},
{
"type": "page",
"id": "tab_page_2_handle",
"label": "Second page"
},
{
"type": "paragraph",
"content": "The theme also allows you to add specific tabs for a given product only."
},
{
"type": "header",
"content": "Reviews"
},
{
"type": "paragraph",
"content": "You need to install [Shopify's free Product Reviews](https://apps.shopify.com/product-reviews) app before enabling this option."
},
{
"type": "checkbox",
"id": "reviews_enabled",
"label": "Enable",
"default": false
},
{
"type": "header",
"content": "Featured image"
},
{
"type": "paragraph",
"content": "You can highlight an image after product tabs by adding the ALT tag \"featured\" to a given image."
},
{
"type": "select",
"id": "featured_image_size",
"label": "Section size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "normal",
"label": "Normal"
},
{
"value": "large",
"label": "Large"
}
],
"default": "large"
},
{
"type": "image_picker",
"id": "trust_image",
"label": "Trust Image"
},
{
"type": "header",
"content": "Coupons Section"
},
{
"type": "inline_richtext",
"id": "coupons_label",
"label": "Coupons label"
},
{
"type": "inline_richtext",
"id": "coupon_text",
"label": "Coupons Text"
},
{
"type": "color",
"id": "coupon_color",
"label": "Coupon Text color",
"default": "#1c1b1b"
},
{
"type": "color",
"id": "coupon_background",
"label": "Coupon Background color",
"default": "#ffffff"
}
]
}
{% endschema %}
and save it
Go to Online Store------------->Theme--------------->Customize theme----------------> open product and check Customize area at the very last you will see the option to change and Add text.
Please let me know
Thansk
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025